:root{
    --ink:#150c22;
    --plum:#271539;
    --plum-2:#38204f;
    --thread:#c9a6ff;
    --thread-soft:rgba(201,166,255,.32);
    --blush:#f3c9dd;
    --parchment:#f6eeff;
    --muted:#bfaed8;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--ink);
    color:var(--parchment);
    font-family:'Work Sans', sans-serif;
    font-weight:400;
    overflow-x:hidden;
    position:relative;
  }

  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:500;
    margin:0;
    letter-spacing:.2px;
  }

  .script{
    font-family:'Caveat', cursive;
    font-weight:600;
  }

  a{color:var(--thread);}

  /* ---------- thread spine ---------- */
  .spine{
    position:absolute;
    top:0; bottom:0; left:50%;
    width:2px;
    transform:translateX(-50%);
    background:repeating-linear-gradient(
      to bottom,
      var(--thread-soft) 0 10px,
      transparent 10px 20px
    );
    z-index:0;
  }
  @media (max-width:720px){
    .spine{ left:28px; }
  }

  .knot{
    width:11px; height:11px;
    border-radius:50%;
    background:var(--thread);
    box-shadow:0 0 0 6px var(--plum-2), 0 0 18px var(--thread-soft);
    position:relative;
    z-index:2;
    margin:0 auto;
  }
  @media (max-width:720px){
    .knot{ margin-left:23px; }
  }

  section{
    position:relative;
    z-index:1;
    padding:96px 24px;
    max-width:760px;
    margin:0 auto;
  }

  /* ---------- hero ---------- */
  .hero{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:48px 24px;
    background:
      radial-gradient(ellipse 60% 40% at 50% 0%, var(--plum-2) 0%, transparent 70%),
      radial-gradient(ellipse 80% 50% at 50% 100%, var(--plum) 0%, transparent 70%),
      var(--ink);
  }
  .hero .eyebrow{
    font-family:'Caveat', cursive;
    font-size:clamp(22px,4vw,30px);
    color:var(--blush);
    margin-bottom:6px;
  }
  .hero h1{
    font-size:clamp(42px,9vw,84px);
    line-height:1.02;
    font-style:italic;
    font-weight:500;
    background:linear-gradient(180deg, var(--parchment), var(--thread) 130%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero .amp{
    display:block;
    font-size:.5em;
    opacity:.75;
    margin:4px 0;
  }
  .hero p{
    max-width:420px;
    margin:22px auto 0;
    color:var(--muted);
    font-size:16px;
    line-height:1.6;
  }
  .hero .since{
    margin-top:34px;
    font-family:'Caveat',cursive;
    font-size:22px;
    color:var(--thread);
  }
  .scroll-cue{
    margin-top:56px;
    width:1px;
    height:46px;
    background:linear-gradient(var(--thread), transparent);
    position:relative;
  }
  .scroll-cue::after{
    content:'';
    position:absolute;
    bottom:0; left:50%;
    width:6px;height:6px;
    border-radius:50%;
    background:var(--thread);
    transform:translateX(-50%);
    animation:drip 2.2s ease-in-out infinite;
  }
  @keyframes drip{
    0%{ transform:translate(-50%,0); opacity:1;}
    80%{ opacity:1;}
    100%{ transform:translate(-50%,20px); opacity:0;}
  }

  /* ---------- section heading pattern ---------- */
  .head{
    text-align:center;
    margin-bottom:44px;
  }
  .head h2{
    font-size:clamp(28px,5vw,40px);
    font-style:italic;
    color:var(--parchment);
  }
  .head .tag{
    display:block;
    font-family:'Caveat',cursive;
    font-size:20px;
    color:var(--blush);
    margin-bottom:8px;
  }

  /* ---------- counter ---------- */
  .counter-wrap{
    background:linear-gradient(160deg, var(--plum), var(--plum-2));
    border-radius:22px;
    padding:44px 28px;
    margin-top:8px;
    text-align:center;
    border:1px solid rgba(201,166,255,.18);
  }
  .counter-wrap .lead{
    font-family:'Caveat',cursive;
    color:var(--muted);
    font-size:22px;
    margin-bottom:18px;
  }
  .clock{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    max-width:520px;
    margin:0 auto;
  }
  .clock .cell{
    padding:14px 4px;
  }
  .clock .num{
    font-family:'Fraunces',serif;
    font-weight:500;
    font-size:clamp(30px,7vw,52px);
    color:var(--parchment);
    font-variant-numeric:tabular-nums;
  }
  .clock .lbl{
    margin-top:2px;
    font-size:12px;
    color:var(--muted);
    letter-spacing:.3px;
  }
  .counter-wrap .exact{
    margin-top:22px;
    font-size:13px;
    color:var(--muted);
  }

  /* ---------- albums / carousel ---------- */
  .album{
    margin-bottom:56px;
    opacity:0;
    transform:translateY(18px);
    transition:opacity .7s ease, transform .7s ease;
  }
  .album.in{ opacity:1; transform:translateY(0); }

  .album-carousel{
    display:flex;
    align-items:flex-start;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:4px 4px 10px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:var(--thread-soft) transparent;
  }
  .album-carousel::-webkit-scrollbar{ height:6px; }
  .album-carousel::-webkit-scrollbar-thumb{ background:var(--thread-soft); border-radius:4px; }

  .album-item{
    flex:0 0 78%;
    max-width:340px;
    scroll-snap-align:center;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 18px 40px rgba(0,0,0,.45);
    border:1px solid rgba(201,166,255,.15);
    background:#000;
  }
  .album-item img,
  .album-item video{
    width:100%;
    display:block;
    aspect-ratio:4/5;
    object-fit:cover;
  }
  .album-item video{ aspect-ratio:9/16; object-fit:contain; background:#000; }

  .album-caption{
    text-align:center;
    font-family:'Caveat',cursive;
    font-size:24px;
    color:var(--blush);
    margin-top:18px;
  }
  .album-heart{
    text-align:center;
    color:var(--thread);
    font-size:22px;
    margin-top:6px;
  }

  @media (max-width:600px){
    .album-item{ flex-basis:82%; }
  }

  /* ---------- video ---------- */
  .frame-card{
    background:var(--plum);
    border-radius:20px;
    padding:16px;
    border:1px solid rgba(201,166,255,.18);
  }
  .frame-card video{
    width:100%;
    border-radius:12px;
    display:block;
    background:#000;
  }
  .frame-card .note{
    text-align:center;
    font-family:'Caveat',cursive;
    color:var(--muted);
    font-size:19px;
    margin-top:14px;
  }

  /* ---------- music ---------- */
  .music-card{
    background:linear-gradient(160deg, var(--plum-2), var(--plum));
    border-radius:20px;
    padding:26px;
    border:1px solid rgba(201,166,255,.18);
    text-align:center;
  }
  .music-card .song{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:24px;
    margin-bottom:2px;
  }
  .music-card .artist{
    color:var(--muted);
    font-size:14px;
    margin-bottom:20px;
  }
  .music-card iframe{
    width:100%;
    aspect-ratio:16/9;
    border:none;
    border-radius:12px;
  }
  .thought{
    margin-top:26px;
    font-family:'Caveat',cursive;
    font-size:20px;
    color:var(--blush);
    max-width:480px;
    margin-left:auto;
    margin-right:auto;
    line-height:1.4;
    text-align:center;
  }

  /* ---------- closing ---------- */
  .closing{
    text-align:center;
    padding-bottom:120px;
  }
  .closing p{
    color:var(--muted);
    line-height:1.7;
    font-size:16px;
    max-width:440px;
    margin:0 auto;
  }
  .closing .sign{
    margin-top:28px;
    font-family:'Caveat',cursive;
    font-size:34px;
    color:var(--thread);
  }
  .closing .heart{
    margin-top:26px;
    font-size:20px;
    opacity:.8;
  }

  /* ---------- floating hearts background ---------- */
  .floating-hearts{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:1;
  }
  .floating-hearts .fh{
    position:absolute;
    bottom:-10vh;
    color:var(--thread);
    opacity:0;
    will-change:transform, opacity;
    animation-name:floatUp;
    animation-timing-function:ease-in;
    animation-iteration-count:infinite;
  }
  @keyframes floatUp{
    0%{ transform:translate(0,0) rotate(0deg); opacity:0; }
    8%{ opacity:.55; }
    50%{ transform:translate(var(--drift,20px), -55vh) rotate(12deg); }
    88%{ opacity:.4; }
    100%{ transform:translate(calc(var(--drift,20px) * 2), -115vh) rotate(-8deg); opacity:0; }
  }

  section{ position:relative; z-index:1; }
  .hero, .cover{ z-index:2; }

  /* ---------- animated hero glow ---------- */
  .hero{
    background-size:160% 160%, 160% 160%, 100% 100%;
    animation:heroGlow 16s ease-in-out infinite;
  }
  @keyframes heroGlow{
    0%, 100%{ background-position:50% 0%, 50% 100%, 0 0; }
    50%{ background-position:60% 10%, 40% 90%, 0 0; }
  }

  /* ---------- pulsing knots ---------- */
  .knot{
    animation:knotPulse 2.6s ease-in-out infinite;
  }
  @keyframes knotPulse{
    0%, 100%{ transform:scale(1); box-shadow:0 0 0 6px var(--plum-2), 0 0 18px var(--thread-soft); }
    50%{ transform:scale(1.25); box-shadow:0 0 0 8px var(--plum-2), 0 0 26px var(--thread-soft); }
  }

  /* ---------- stats (nossos números) ---------- */
  .stats-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
    max-width:520px;
    margin:0 auto;
  }
  .stat-card{
    background:linear-gradient(160deg, var(--plum), var(--plum-2));
    border-radius:18px;
    padding:24px 12px;
    text-align:center;
    border:1px solid rgba(201,166,255,.18);
  }
  .stat-card .stat-num{
    font-family:'Fraunces',serif;
    font-weight:500;
    font-size:clamp(28px,6vw,40px);
    color:var(--parchment);
    font-variant-numeric:tabular-nums;
  }
  .stat-card .stat-lbl{
    margin-top:4px;
    font-family:'Caveat',cursive;
    font-size:17px;
    color:var(--blush);
  }

  /* ---------- timeline (nossa história) ---------- */
  .timeline{
    max-width:520px;
    margin:0 auto;
    position:relative;
    padding-left:28px;
  }
  .timeline::before{
    content:'';
    position:absolute;
    left:6px; top:6px; bottom:6px;
    width:2px;
    background:repeating-linear-gradient(
      to bottom,
      var(--thread-soft) 0 8px,
      transparent 8px 16px
    );
  }
  .tl-item{
    position:relative;
    padding-bottom:36px;
  }
  .tl-item:last-child{ padding-bottom:0; }
  .tl-item::before{
    content:'';
    position:absolute;
    left:-28px; top:4px;
    width:12px; height:12px;
    border-radius:50%;
    background:var(--thread);
    box-shadow:0 0 0 5px var(--ink), 0 0 14px var(--thread-soft);
  }
  .tl-item .tl-date{
    font-family:'Caveat',cursive;
    color:var(--thread);
    font-size:19px;
    margin-bottom:2px;
  }
  .tl-item .tl-title{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:20px;
    color:var(--parchment);
    margin-bottom:4px;
  }
  .tl-item .tl-note{
    font-size:14px;
    color:var(--muted);
    line-height:1.5;
  }

  /* ---------- top nav ---------- */
  .topnav{
    position:relative;
    z-index:5;
    display:flex;
    justify-content:center;
    gap:10px;
    padding:18px 16px 4px;
  }
  .topnav a{
    font-family:'Work Sans',sans-serif;
    font-size:14px;
    color:var(--muted);
    text-decoration:none;
    padding:8px 18px;
    border-radius:999px;
    border:1px solid rgba(201,166,255,.18);
    transition:background .3s ease, color .3s ease;
  }
  .topnav a.active{
    color:var(--parchment);
    background:var(--thread-soft);
    border-color:var(--thread);
  }
  .topnav a:hover{ color:var(--parchment); }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
    .album{ opacity:1; transform:none; }
    .floating-hearts{ display:none; }
  }

  /* ---------- cover / landing ---------- */
  body.locked{ overflow:hidden; height:100vh; }
  .cover{
    position:fixed; inset:0; z-index:50;
    display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(ellipse 60% 40% at 50% 0%, var(--plum-2) 0%, transparent 70%),
      radial-gradient(ellipse 80% 50% at 50% 100%, var(--plum) 0%, transparent 70%),
      var(--ink);
    padding:32px;
    transition:opacity .8s ease, visibility .8s ease;
  }
  .cover.hide{ opacity:0; visibility:hidden; pointer-events:none; }
  .cover-inner{ text-align:center; max-width:380px; }
  .cover-heart{
    font-size:34px; color:var(--thread); margin-bottom:20px;
    animation:pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.15);} }
  .cover-msg{
    font-family:'Caveat',cursive;
    font-size:clamp(22px,5vw,28px);
    color:var(--parchment);
    line-height:1.5;
    margin-bottom:14px;
  }
  .cover-vol{
    font-size:13px;
    color:var(--muted);
    margin-bottom:32px;
    letter-spacing:.2px;
  }
  .enter-btn{
    font-family:'Work Sans',sans-serif;
    font-size:15px;
    padding:14px 34px;
    border-radius:999px;
    border:1px solid var(--thread);
    background:transparent;
    color:var(--parchment);
    cursor:pointer;
    transition:background .3s ease, transform .3s ease;
  }
  .enter-btn:hover{ background:var(--thread-soft); transform:translateY(-2px); }

  .main-site{ opacity:0; pointer-events:none; }
  .main-site.show{ opacity:1; pointer-events:auto; transition:opacity 1s ease; }

  /* ---------- spotify mockup card ---------- */
  .spotify-wrap{ display:flex; justify-content:center; }
  .spotify-card{
    background:#000;
    border-radius:22px;
    padding:22px;
    width:100%;
    max-width:300px;
    box-shadow:0 25px 60px rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.06);
  }
  .spotify-card .art{
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    aspect-ratio:1/1;
    margin-bottom:16px;
  }
  .spotify-card .art img{ width:100%; height:100%; object-fit:cover; display:block; }
  .spotify-card .track-name{ color:#fff; font-family:'Work Sans',sans-serif; font-weight:600; font-size:16px; }
  .spotify-card .track-artist{ color:#9b9b9b; font-size:13px; margin-top:2px; }
  .spotify-card .progress{ margin-top:18px; }
  .spotify-card .bar{ height:3px; background:#4d4d4d; border-radius:2px; position:relative; }
  .spotify-card .bar .fill{ position:absolute; left:0; top:0; height:100%; width:28%; background:#fff; border-radius:2px; }
  .spotify-card .bar .dot{ position:absolute; left:28%; top:50%; width:9px; height:9px; background:#fff; border-radius:50%; transform:translate(-50%,-50%); }
  .spotify-card .times{ display:flex; justify-content:space-between; font-size:11px; color:#9b9b9b; margin-top:6px; }
  .spotify-card .controls{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; }
  .spotify-card .ctrl{ background:none; border:none; color:#c7c7c7; font-size:17px; cursor:pointer; padding:6px; line-height:1; }
  .spotify-card .ctrl.play{
    width:44px; height:44px;
    border-radius:50%;
    background:#fff;
    color:#000;
    font-size:15px;
    display:flex; align-items:center; justify-content:center;
  }