/* memories.css */

body{

  margin:0;

  font-family:'Patrick Hand', cursive;

  background:#ffeaf3;

  overflow-x:hidden;

  color:#8c5f77;
}



/* MESMO BACKGROUND */

.background-blur{

  position:fixed;

  top:0;
  left:0;

  width:100vw;
  height:100vh;

  background:
  linear-gradient(
    rgba(255,220,235,.30),
    rgba(255,235,245,.40)
  ),
  url("../../images/minions.png");

  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

  z-index:-1;

  opacity:.95;
}


.hero{

  width:100%;

  min-height:100vh;

  display:flex;

  justify-content:center;

  align-items:flex-start;

  padding:55px 20px;
}



.hero-card{

  width:920px;

  max-width:100%;

  background:
  rgba(255,245,250,.76);

  backdrop-filter:blur(12px);

  border-radius:42px;

  padding:38px;

  position:relative;

  overflow:visible;

  box-shadow:
  0 20px 60px rgba(255,180,210,.16);

  animation:
  fadePage 1s ease;
}



.hero-card::before{

  content:"";

  position:absolute;

  width:420px;
  height:420px;

  background:#ffd1e2;

  border-radius:50%;

  opacity:.25;

  top:-160px;
  right:-120px;

  z-index:-1;

  box-shadow:
  0 0 180px 120px #ffd1e2;
}



.mini{

  color:#d195af;

  letter-spacing:3px;

  font-size:.82rem;

  opacity:0;

  animation:
  fadeUp .9s ease forwards;

  animation-delay:.1s;
}



.hero-card h1{

  margin-top:10px;
  margin-bottom:8px;

  font-size:4.6rem;

  color:#b06d8e;

  line-height:1;

  font-family:'Caveat', cursive;

  opacity:0;

  animation:
  fadeUp .9s ease forwards;

  animation-delay:.2s;
}



.hero-card > p{

  margin-top:0;

  color:#96697f;

  font-size:1.1rem;

  opacity:0;

  animation:
  fadeUp .9s ease forwards;

  animation-delay:.35s;
}



.memory-columns{

  display:flex;

  flex-direction:column;

  gap:26px;

  margin-top:40px;
}



.memory-column{

  display:contents;
}



.memory-card{

  width:min(100%,520px);

  background:
  rgba(255,248,251,.72);

  backdrop-filter:blur(10px);

  border-radius:30px;

  padding:22px;

  position:relative;

  overflow:hidden;

  transition:
  transform .3s ease,
  box-shadow .3s ease;

  box-shadow:
  0 12px 30px rgba(255,180,210,.15);

  opacity:0;

  animation:
  fadeUp .9s ease forwards;
}



.memory-card:nth-child(odd){

  margin-right:auto;
}

.memory-card:nth-child(even){

  margin-left:auto;
}



.memory-card::before{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:5px;

  background:
  linear-gradient(
    90deg,
    #f6abc9,
    #ffd4e5
  );
}



.memory-card:hover{

  transform:
  translateY(-4px)
  rotate(-0.4deg);

  box-shadow:
  0 20px 48px rgba(255,170,205,.24);
}



.memory-photo{

  width:100%;

  height:auto;

  display:block;

  border-radius:20px;

  margin-bottom:18px;

  object-fit:contain;

  box-shadow:
  0 10px 25px rgba(255,180,210,.18);
}



.memory-card img{

  image-rendering:auto;
}



.memory-date{

  color:#d195af;

  font-size:.82rem;

  letter-spacing:1px;
}



.memory-card h3{

  margin-top:10px;
  margin-bottom:10px;

  font-size:2rem;

  line-height:1;

  color:#c26b92;

  font-family:'Caveat', cursive;
}



.memory-card p{

  margin-top:0;

  line-height:1.75;

  color:#96697f;

  font-size:1rem;

  white-space:pre-line;
}



/* PLAYER */

.song-card audio{

  width:100%;

  height:52px;

  border-radius:18px;

  overflow:hidden;

  background:
  rgba(255,235,244,.85);

  box-shadow:
  0 8px 20px rgba(255,180,210,.16);

  border:
  2px solid rgba(255,200,225,.65);

  padding:4px;

  opacity:1;
}

/* WEBKIT (Chrome / Edge / Mobile) */

.song-card audio::-webkit-media-controls-panel{

  background:
  linear-gradient(
    90deg,
    #ffe6f0,
    #ffd8e8
  );

  border-radius:18px;
}

.song-card audio::-webkit-media-controls-play-button,
.song-card audio::-webkit-media-controls-mute-button{

  border-radius:50%;

  transition:.25s ease;

  filter:
  saturate(1.2);
}

.song-card audio::-webkit-media-controls-play-button:hover,
.song-card audio::-webkit-media-controls-mute-button:hover{

  transform:
  scale(1.06);
}

.song-card audio::-webkit-media-controls-current-time-display,
.song-card audio::-webkit-media-controls-time-remaining-display{

  color:#b06d8e;

  font-family:'Patrick Hand', cursive;

  font-size:.9rem;
}



.song-card img{

  width:100%;

  display:block;

  border-radius:16px;
}



.song-info span{

  color:#d195af;

  font-size:.78rem;

  letter-spacing:1px;
}



.song-info h4{

  margin:4px 0 0 0;

  font-size:1.15rem;

  color:#c26b92;

  font-family:'Caveat', cursive;
}



.song-card audio{

  width:100%;

  height:42px;

  opacity:.92;
}



.song-text{

  margin-top:10px;

  line-height:1.7;

  color:#96697f;

  font-size:.97rem;
}



.final-text{

  margin:50px auto 0 auto;

  max-width:920px;

  padding:20px 28px;

  text-align:center;

  font-size:1.28rem;

  line-height:2;

  color:#96697f;

  opacity:0;

  animation:
  fadeUp .9s ease forwards;

  animation-delay:1.35s;
}



.final-text p{

  margin:0;

  line-height:2;

  color:#96697f;

  font-size:1.12rem;

  white-space:pre-line;
}



.final-photo{

  width:100%;

  max-width:520px;

  display:block;

  margin:28px auto;

  border-radius:24px;

  box-shadow:
  0 12px 30px rgba(255,180,210,.22);

  object-fit:cover;

  transition:
  transform .3s ease,
  box-shadow .3s ease;

  opacity:0;

  animation:
  fadeImage 1.2s ease forwards;

  animation-delay:1.5s;
}



.final-photo:hover{

  transform:
  scale(1.015);

  box-shadow:
  0 18px 40px rgba(255,170,205,.28);
}



/* DELAYS */

.memory-card:nth-child(1){animation-delay:.45s;}
.memory-card:nth-child(2){animation-delay:.60s;}
.memory-card:nth-child(3){animation-delay:.75s;}
.memory-card:nth-child(4){animation-delay:.90s;}
.memory-card:nth-child(5){animation-delay:1.05s;}
.memory-card:nth-child(6){animation-delay:1.20s;}



/* ANIMAÇÕES */

@keyframes fadePage{

  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}



@keyframes fadeUp{

  from{

    opacity:0;

    transform:
    translateY(28px);

    filter:
    blur(8px);
  }

  to{

    opacity:1;

    transform:
    translateY(0);

    filter:
    blur(0);
  }
}



@keyframes fadeImage{

  from{

    opacity:0;

    transform:
    scale(.96);

    filter:
    blur(10px);
  }

  to{

    opacity:1;

    transform:
    scale(1);

    filter:
    blur(0);
  }
}




/* MOBILE */
/* MOBILE */

@media(max-width:768px){

  body{
    overflow-x:hidden;
  }

/* FUNDO CELULAR */

/* FUNDO CELULAR */

.background-blur{

  background:
  linear-gradient(
    rgba(255,220,235,.30),
    rgba(255,235,245,.40)
  ),
  url("../../images/minions-celular.png") !important;

  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;

  width:100vw;
  height:100svh;

  position:fixed;
  top:0;
  left:0;

  z-index:-1;
  opacity:.95;
}

.hero{
  width:100%;
  padding:18px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  box-sizing:border-box;
}

.hero-card{
  width:100%;
  max-width:520px;
  margin:0 auto;
  padding:24px 18px;
  box-sizing:border-box;
}

  .hero-card::before{
    width:180px;
    height:180px;
    top:-70px;
    right:-60px;
    opacity:.18;
    box-shadow:none;
  }

  .mini{
    font-size:.72rem;
    letter-spacing:2px;
  }

  .hero-card h1{
    font-size:2.7rem;
    line-height:.95;
    margin-top:8px;
  }

  .hero-card > p{
    font-size:.95rem;
    line-height:1.5;
  }

  /* MEMORIES */

  .memory-columns{
    gap:18px;
    margin-top:28px;
  }

  .memory-column{
    display:block;
  }

.memory-card{

  width:100%;
  max-width:100%;

  margin:0 auto !important;

  padding:18px;

  border-radius:24px;

  box-sizing:border-box;

  overflow:hidden;
}

  /* remove alternância esquerda/direita */

  .memory-card:nth-child(odd),
  .memory-card:nth-child(even){
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .memory-photo{
    border-radius:16px;
    margin-bottom:14px;
  }

  .memory-date{
    font-size:.74rem;
  }

  .memory-card h3{
    font-size:1.7rem;
    margin-bottom:8px;
  }

  .memory-card p{

    font-size:.95rem;

    line-height:1.6;

    white-space:pre-line;

    word-break:break-word;

    overflow-wrap:anywhere;
  }

  /* SONG */

  .song-card{
    padding:12px;
    border-radius:18px;
    gap:10px;
  }

  .song-card img{
    border-radius:14px;
  }

  .song-info h4{
    font-size:1rem;
  }

  .song-text{
    font-size:.92rem;
    line-height:1.55;
  }

  /* FINAL */

  .final-text{
    margin-top:34px;
    padding:10px;
    font-size:1rem;
    line-height:1.8;
  }

  .final-text p{
    font-size:.96rem;
    line-height:1.8;
  }

  .final-photo{
    width:100%;
    max-width:100%;
    border-radius:18px;
    margin:20px auto;
  }

}