:root{
    --bg-deep: #080b1f;
    --bg-deep-2: #10143a;
    --card: rgba(244,241,232,0.045);
    --card-border: rgba(228,195,120,0.16);
    --gold: #e4c378;
    --rose: #d88c9a;
    --text: #f4f1e8;
    --dim: #9aa0c0;
    --serif: 'Fraunces', serif;
    --sans: 'Manrope', sans-serif;
  }

  *{ box-sizing: border-box; }



  html,body{ margin:0; padding:0; height:100%; }
  body{
    background: radial-gradient(ellipse at 50% 0%, var(--bg-deep-2), var(--bg-deep) 60%);
    color: var(--text);
    font-family: var(--sans);
    overflow-x: hidden;
    min-height: 100vh;
  }

  canvas#stars{
    position: fixed; inset: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
  }

  .screen{
    position: relative;
    z-index: 1;
    min-height: 100vh;
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8vh 6vw;
    opacity: 0;
    animation: fadeIn 0.9s ease forwards;
  }
  .screen.active{ display: flex; }
  @keyframes fadeIn{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform: translateY(0);} }

  .eyebrow{
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.4rem;
    opacity: 0.85;
  }

  h1{
    font-family: var(--serif);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(1.8rem, 5vw, 3.4rem);
    margin: 0 0 0.6rem 0;
    color: var(--text);
    text-align: center;
  }

  .sub{
    font-family: var(--sans);
    color: var(--dim);
    font-size: 0.98rem;
    text-align: center;
    max-width: 34rem;
    line-height: 1.6;
    margin-bottom: 2.4rem;
  }

  /* ---------- Tela 1: contador ---------- */
  .counter-grid{
    display: grid;
    grid-template-columns: repeat(6, auto);
    gap: clamp(0.6rem, 2vw, 1.8rem);
    margin: 1.2rem 0 3rem 0;
  }
  .unit{ text-align: center; }
  .unit .num{
    font-family: var(--serif);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    font-size: clamp(1.6rem, 4.2vw, 3rem);
    color: var(--gold);
    line-height: 1;
  }
  .unit .lbl{
    display:block;
    margin-top: 0.5rem;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dim);
  }

  .video-title{
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.1rem, 2.6vw, 1.5rem);
    color: var(--rose);
    text-align: center;
    margin: 0 0 1rem 0;
  }

  /* ---------- Frame de vídeo (memória) — tela 1 ---------- */
  .memory-frame{
    position: relative;
    width: 100%;
    max-width: 26rem;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--card-border);
    box-shadow: 0 0 50px rgba(228,195,120,0.07), inset 0 0 0 1px rgba(228,195,120,0.04);
    margin-bottom: 2.4rem;
    background:
      radial-gradient(circle at 30% 20%, rgba(216,140,154,0.18), transparent 55%),
      radial-gradient(circle at 75% 80%, rgba(228,195,120,0.14), transparent 55%),
      var(--bg-deep-2);
    cursor: pointer;
  }
  .memory-frame::before,
  .memory-frame::after{
    content:'';
    position:absolute;
    width:4px; height:4px;
    border-radius:50%;
    background: var(--gold);
    opacity:0.5;
  }
  .memory-frame::before{ top:10px; left:10px; }
  .memory-frame::after{ bottom:10px; right:10px; }
  .memory-frame img{
    width:100%; height:100%; object-fit:cover; display:block;
    filter: saturate(0.8) brightness(0.7);
    transition: filter .4s ease, transform .8s ease;
  }
  .memory-frame:hover img{ filter: saturate(1) brightness(0.82); transform: scale(1.035); }
  .memory-frame iframe{ width:100%; height:100%; border:0; display:block; }
  .memory-frame .play-btn{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:54px; height:54px; border-radius:50%;
    background: rgba(8,11,31,0.55);
    border:1px solid var(--gold);
    display:flex; align-items:center; justify-content:center;
    backdrop-filter: blur(3px);
    transition: transform .3s ease, background .3s ease;
  }
  .memory-frame:hover .play-btn{ transform:translate(-50%,-50%) scale(1.08); background: rgba(8,11,31,0.78); }
  .memory-frame .play-btn svg{ margin-left: 3px; }
  .memory-frame .tag{
    position:absolute; left:14px; bottom:12px;
    font-size:0.64rem; letter-spacing:0.16em; text-transform:uppercase;
    color: var(--text); text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  }
  .memory-frame .empty-msg{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    text-align:center; padding: 1.5rem;
    font-size:0.78rem; color: var(--dim); line-height:1.6;
  }

  .continue-btn{
    background: none;
    border: none;
    color: var(--text);
    font-family: var(--sans);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    padding: 0.7rem 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .continue-btn::after{
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0.4);
    transform-origin: left;
    transition: transform 0.35s ease;
  }
  .continue-btn:hover::after{ transform: scaleX(1); }
  .continue-btn:focus-visible{ outline: 2px solid var(--gold); outline-offset: 4px; }
  .continue-btn svg{ transition: transform 0.35s ease; }
  .continue-btn:hover svg{ transform: translateX(4px); }

  /* ---------- Tela 2: locais ---------- */
  .timeline{
    width: 100%;
    max-width: 40rem;
    position: relative;
    padding-left: 2.2rem;
  }
  .timeline::before{
    content:'';
    position: absolute;
    left: 0.3rem; top: 0.4rem; bottom: 0.4rem;
    width: 1px;
    background: linear-gradient(var(--gold), transparent 96%);
    opacity: 0.35;
  }
  .stop{
    position: relative;
    padding: 0 0 2.4rem 1.2rem;
    cursor: pointer;
    background: none;
    border: none;
    text-align: left;
    display: block;
    width: 100%;
    font-family: var(--sans);
    color: var(--text);
  }
  .stop:focus-visible{ outline: 2px solid var(--gold); outline-offset: 6px; }
  .stop::before{
    content:'';
    position: absolute;
    left: -1.98rem; top: 0.35rem;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(228,195,120,0.12);
  }
  .stop .date{
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rose);
    margin-bottom: 0.3rem;
  }
  .stop .place{
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
  }
  .stop .note{
    font-size: 0.88rem;
    color: var(--dim);
    line-height: 1.5;
    max-width: 30rem;
  }
  .stop .maplink{
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.55rem;
    font-size: 0.76rem;
    color: var(--gold);
    opacity: 0.85;
  }
  .stop:hover .maplink{ opacity: 1; text-decoration: underline; }

  /* ---------- Tela 3: playlist ---------- */
  .playlist{
    width: 100%;
    max-width: 34rem;
    border-top: 1px solid var(--card-border);
  }
  .track{
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    align-items: baseline;
    gap: 1rem;
    padding: 1.1rem 0.2rem;
    border-bottom: 1px solid var(--card-border);
  }
  .track .rank{
    font-family: var(--serif);
    font-style: italic;
    color: var(--gold);
    font-size: 1.1rem;
  }
  .track .title{
    font-family: var(--serif);
    font-size: 1.08rem;
    font-weight: 500;
  }
  .track .artist{
    font-size: 0.82rem;
    color: var(--dim);
    margin-top: 0.15rem;
  }

  /* ---------- Tela 4: galáxias ---------- */
  .galaxy-wrap{
    position: relative;
    width: 220px; height: 220px;
    margin-bottom: 2rem;
  }
  .galaxy-wrap .core{
    position: absolute; inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(228,195,120,0.9), rgba(228,195,120,0.05) 60%, transparent 70%);
    filter: blur(1px);
  }
  .galaxy-wrap .arm{
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(228,195,120,0.28);
    animation: spin 40s linear infinite;
  }
  .galaxy-wrap .arm:nth-child(2){ inset: 18px; border-color: rgba(216,140,154,0.3); animation-duration: 55s; animation-direction: reverse; }
  .galaxy-wrap .arm:nth-child(3){ inset: 38px; border-color: rgba(228,195,120,0.22); animation-duration: 70s; }
  @keyframes spin{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
  @media (prefers-reduced-motion: reduce){
    .galaxy-wrap .arm{ animation: none; }
  }

  .fact{
    font-size: 0.86rem;
    color: var(--dim);
    max-width: 30rem;
    text-align: center;
    line-height: 1.7;
    margin-bottom: 1.6rem;
  }
  .fact b{ color: var(--gold); font-weight: 600; }

  .declaration{
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.3rem, 3.4vw, 2rem);
    text-align: center;
    max-width: 36rem;
    line-height: 1.5;
    color: var(--text);
  }

  .footer-name{
    margin-top: 3rem;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dim);
    opacity: 0.7;
  }

  @media (max-width: 480px){
	.counter-grid{ grid-template-columns: repeat(3, auto); row-gap: 1.4rem; column-gap: 1.6rem; }

  }

@media (max-width: 640px){
  .screen{ padding: 6vh 5vw; }
  .sub{ font-size: 0.9rem; margin-bottom: 1.8rem; }
  .memory-frame{ max-width: 100%; margin-bottom: 1.8rem; }
  .video-title{ font-size: 1.15rem; }
  .timeline{ padding-left: 1.8rem; }
  .stop{ padding-bottom: 1.9rem; }
  .stop .place{ font-size: 1.1rem; }
  .stop .note{ font-size: 0.84rem; }
  .playlist{ max-width: 100%; }
  .galaxy-wrap{ width: 160px; height: 160px; }
  .declaration{ font-size: 1.15rem; }
  .fact{ font-size: 0.8rem; }
}

@media (max-width: 360px){
  .counter-grid{ gap: 0.5rem 0.9rem; }
  .unit .num{ font-size: 1.4rem; }
}