@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;1,500&family=Inter:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;600&display=swap');

:root{--cream:#fff8ea;--white:#f7f6f2;--muted:rgba(255,255,255,.62)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-snap-type:y mandatory;scroll-behavior:smooth;background:#090909}
body{font-family:Inter,"Noto Sans SC",system-ui,sans-serif;background:#090909;color:var(--white);overflow-x:hidden}
a{color:inherit;text-decoration:none}

.topbar{position:fixed;z-index:100;inset:0 0 auto 0;height:72px;padding:0 clamp(18px,4vw,58px);display:flex;align-items:center;justify-content:space-between;color:#fff;mix-blend-mode:difference;pointer-events:none}
.topbar>*{pointer-events:auto}.brand{font-size:13px;font-weight:600;letter-spacing:.09em}.brand span{opacity:.45}
.nav{display:flex;gap:28px}.nav a{font-size:10px;letter-spacing:.14em;opacity:.68}.nav a:hover{opacity:1}
.page-status{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:.15em;opacity:.62}.page-status i{width:34px;height:1px;background:currentColor;opacity:.5}
.menu-btn{display:none;background:none;border:0;width:40px;height:40px;position:relative}.menu-btn span{position:absolute;left:8px;width:24px;height:1px;background:#fff;transition:.3s}.menu-btn span:first-child{top:15px}.menu-btn span:last-child{top:24px}

.panel{position:relative;height:100svh;min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;display:flex;align-items:center;isolation:isolate}
.content{position:relative;z-index:12;width:min(calc(100% - 48px),1260px);margin:auto}
.micro{font-size:10px;letter-spacing:.22em;color:rgba(255,255,255,.52);margin-bottom:24px}
.dark{color:rgba(0,0,0,.42)}
.anim{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.72,.2,1),transform .9s cubic-bezier(.2,.72,.2,1)}
.panel.active .anim{opacity:1;transform:none}.panel.active .anim:nth-child(2){transition-delay:.08s}.panel.active .anim:nth-child(3){transition-delay:.16s}.panel.active .anim:nth-child(4){transition-delay:.24s}

/* PAGE 1 */
.birthday{background:#10100f}
.birthday-photo{position:absolute;inset:0;z-index:-6}
.birthday-photo img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;transform:scale(1.015);transition:transform 9s ease}
.birthday.active .birthday-photo img{transform:scale(1.06)}

.birthday-shade{position:absolute;inset:0;z-index:-2;background:
linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.02) 35%,rgba(0,0,0,.22)),
linear-gradient(90deg,rgba(0,0,0,.24) 0%,rgba(0,0,0,.02) 38%,rgba(0,0,0,.04) 72%,rgba(0,0,0,.18) 100%)}

.focus-light{position:absolute;z-index:-3;border-radius:50%;filter:blur(30px);pointer-events:none}
.focus-person{left:31%;top:19%;width:28vw;height:62vh;background:radial-gradient(circle,rgba(255,248,222,.15),rgba(255,248,222,.03) 55%,transparent 72%)}
.focus-deer{right:1%;top:26%;width:42vw;height:66vh;background:radial-gradient(circle,rgba(255,233,203,.13),rgba(255,233,203,.02) 56%,transparent 73%)}

#fireworks{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}

.birthday-title-wrap{position:absolute;z-index:10;left:clamp(24px,5vw,78px);bottom:clamp(54px,8vh,110px)}
.birthday-title{display:flex;flex-direction:column;font-weight:500;line-height:.82;letter-spacing:-.07em;text-shadow:0 4px 35px rgba(0,0,0,.32)}
.line-small{font-size:clamp(40px,4.7vw,70px);margin-left:.08em;margin-bottom:.18em;color:rgba(255,255,255,.9);letter-spacing:-.045em}
.line-big{font-family:"Cormorant Garamond","Noto Sans SC",serif;font-size:clamp(92px,13vw,200px);font-style:italic;color:var(--cream);letter-spacing:-.075em}

/* PAGE 2 */
.einstein{background:#cfc9bc}
.einstein-bg{position:absolute;inset:-28px;z-index:-6;background:url('assets/einstein-bg.webp') center/cover;filter:blur(18px) saturate(.82);transform:scale(1.08)}
.einstein-vignette{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(7,7,7,.84) 0%,rgba(7,7,7,.73) 35%,rgba(7,7,7,.17) 58%,rgba(7,7,7,.11) 100%)}
.cats-photo{position:absolute;z-index:-4;right:3vw;top:50%;transform:translateY(-50%);height:89vh;width:auto;max-width:56vw;object-fit:contain;border-radius:4px;box-shadow:0 32px 80px rgba(0,0,0,.34)}

.einstein-content{padding-right:48%}
.einstein-copy{max-width:640px}
.einstein-title{display:flex;flex-direction:column;line-height:.82;margin-bottom:28px}
.einstein-title span{font-size:clamp(62px,7.5vw,118px);font-weight:500;letter-spacing:-.075em}
.einstein-title em{font-family:"Cormorant Garamond","Noto Sans SC",serif;font-size:clamp(66px,8.2vw,132px);font-weight:500;font-style:italic;color:#e8dcc9;letter-spacing:-.06em;margin-left:1.05em}
.einstein-note{color:rgba(255,255,255,.58);font-size:14px;line-height:1.8;margin-top:14px}

.enter-card{margin-top:42px;width:min(470px,100%);min-height:84px;padding:0 4px;border-top:1px solid rgba(255,255,255,.46);border-bottom:1px solid rgba(255,255,255,.46);display:flex;align-items:center;justify-content:space-between;transition:padding .3s ease,background .3s ease}
.enter-card:hover{padding:0 14px;background:rgba(255,255,255,.05)}
.enter-card span{font-size:17px;letter-spacing:-.02em}.enter-card small{display:block;font-size:8px;letter-spacing:.2em;color:rgba(255,255,255,.38);margin-bottom:7px}
.enter-card b{font-size:24px;font-weight:400;transition:transform .25s}.enter-card:hover b{transform:translate(5px,-5px)}
.vertical-word{position:absolute;right:1.7vw;bottom:-4vw;z-index:2;font-size:10vw;font-weight:600;letter-spacing:-.08em;color:rgba(255,255,255,.045);pointer-events:none}

/* PAGE 3 */
.future{background:#0c0d11}.future-orb{position:absolute;width:72vw;height:72vw;border-radius:50%;right:-28vw;top:-28vw;background:radial-gradient(circle,rgba(111,132,255,.2),rgba(140,86,255,.055) 48%,transparent 70%)}
.future-title{font-size:clamp(68px,9vw,138px);line-height:.9;letter-spacing:-.07em;font-weight:500}

/* PAGE 4 */
.contact{background:#eeeae2;color:#111}.contact-title{font-size:clamp(82px,11vw,172px);line-height:.82;letter-spacing:-.08em;font-weight:500}
.contact footer{position:absolute;left:clamp(20px,4vw,58px);right:clamp(20px,4vw,58px);bottom:25px;padding-top:17px;border-top:1px solid rgba(0,0,0,.15);display:flex;justify-content:space-between;font-size:9px;letter-spacing:.16em;color:rgba(0,0,0,.45)}

.dots{position:fixed;z-index:85;right:17px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:11px;mix-blend-mode:difference}.dot{width:5px;height:5px;border:0;border-radius:50%;padding:0;background:rgba(255,255,255,.34)}.dot.active{background:#fff;transform:scale(1.8)}

@media(max-width:800px){
  .topbar{height:65px;padding:0 18px}.nav{display:none}.menu-btn{display:block}.page-status{left:auto;right:67px;transform:none}.page-status i{display:none}
  .nav.open{display:flex;position:fixed;inset:0;background:#080808;z-index:-1;flex-direction:column;justify-content:center;padding:28px;gap:14px}.nav.open a{font-size:37px;letter-spacing:-.04em;opacity:1}
  .menu-btn.open span:first-child{top:20px;transform:rotate(45deg)}.menu-btn.open span:last-child{top:20px;transform:rotate(-45deg)}
  .content{width:calc(100% - 38px)}
  .birthday-photo img{object-position:58% center}
  .birthday-shade{background:linear-gradient(180deg,rgba(0,0,0,.11),rgba(0,0,0,.04) 46%,rgba(0,0,0,.56))}
  .focus-person{left:24%;top:21%;width:45vw}.focus-deer{right:-8%;top:28%;width:58vw}
  .birthday-title-wrap{left:20px;bottom:58px}.line-small{font-size:38px}.line-big{font-size:clamp(84px,24vw,120px)}
  .cats-photo{inset:0;width:100%;height:100%;max-width:none;transform:none;object-fit:cover;object-position:center center;border-radius:0;box-shadow:none}
  .einstein-bg{display:none}.einstein-vignette{background:linear-gradient(0deg,rgba(0,0,0,.81) 0%,rgba(0,0,0,.33) 56%,rgba(0,0,0,.14) 100%)}
  .einstein-content{align-self:flex-end;margin-bottom:10vh;padding-right:0}.einstein-copy{max-width:none}
  .einstein-title span{font-size:clamp(54px,15vw,78px)}.einstein-title em{font-size:clamp(64px,18vw,92px);margin-left:.8em}
  .einstein-note{max-width:85%}.enter-card{margin-top:28px}
  .vertical-word{font-size:20vw;bottom:0}
  .future-title{font-size:clamp(62px,17vw,88px)}.contact-title{font-size:clamp(76px,20vw,108px)}.contact footer{left:18px;right:18px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.anim{opacity:1;transform:none}}


#fireworks{
  opacity:1 !important;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.48));
}

@media(max-width:800px){
  .music-player{
    width:42px;height:42px;top:12px;right:14px;
  }
  .music-disc{width:24px;height:24px}
  .page-status{right:116px}
  .menu-btn{margin-right:50px}
}


/* ===== v7 header + CD player ===== */
.topbar{
  display:grid !important;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:28px;
}
.header-actions{
  grid-column:3;
  display:flex;
  align-items:center;
  gap:22px;
  pointer-events:auto;
}
.header-actions .nav{
  display:flex;
  align-items:center;
  gap:26px;
}

.music-player{
  position:relative;
  flex:0 0 auto;
  width:48px;
  height:48px;
  padding:0;
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;
  background:rgba(12,12,12,.26);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 8px 26px rgba(0,0,0,.18);
  transition:transform .25s ease, background .25s ease, border-color .25s ease;
}
.music-player:hover{
  transform:scale(1.05);
  background:rgba(12,12,12,.42);
  border-color:rgba(255,255,255,.58);
}
.cd{
  position:relative;
  width:31px;
  height:31px;
  border-radius:50%;
  display:block;
  background:
    conic-gradient(
      from 30deg,
      rgba(255,255,255,.94),
      rgba(139,201,255,.82),
      rgba(255,151,221,.78),
      rgba(255,234,132,.88),
      rgba(169,144,255,.8),
      rgba(255,255,255,.94)
    );
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.75),
    inset 0 0 10px rgba(255,255,255,.35),
    0 0 13px rgba(255,255,255,.2);
  overflow:hidden;
}
.cd::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 27%,rgba(255,255,255,.55),transparent 21%);
  mix-blend-mode:screen;
}
.cd-groove{
  position:absolute;
  border:1px solid rgba(20,20,20,.18);
  border-radius:50%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.groove-a{width:22px;height:22px}
.groove-b{width:15px;height:15px}
.cd-hole{
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(10,10,10,.82);
  box-shadow:0 0 0 2px rgba(255,255,255,.72);
}
.cd-shine{
  position:absolute;
  z-index:2;
  width:16px;
  height:34px;
  top:-2px;
  left:7px;
  transform:rotate(28deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);
  filter:blur(.5px);
}
.music-player.playing .cd{
  animation:cdSpin 2.8s linear infinite;
}
@keyframes cdSpin{
  to{transform:rotate(360deg)}
}

/* give the fireworks canvas maximum clarity */
#fireworks{
  opacity:1 !important;
  filter:drop-shadow(0 0 7px rgba(255,255,255,.45));
}

@media(max-width:980px){
  .header-actions{gap:14px}
  .header-actions .nav{gap:17px}
  .header-actions .nav a{font-size:9px}
  .music-player{width:44px;height:44px}
  .cd{width:28px;height:28px}
}

@media(max-width:800px){
  .topbar{
    grid-template-columns:auto 1fr auto !important;
    padding:0 16px !important;
  }
  .page-status{
    display:none !important;
  }
  .header-actions{
    gap:9px;
  }
  .header-actions .nav{
    display:none;
  }
  .header-actions .nav.open{
    display:flex;
    position:fixed;
    inset:0;
    z-index:-1;
    background:#080808;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:28px;
    gap:14px;
  }
  .header-actions .nav.open a{
    font-size:37px;
    letter-spacing:-.04em;
    opacity:1;
  }
  .music-player{
    width:42px;
    height:42px;
  }
  .cd{
    width:26px;
    height:26px;
  }
  .menu-btn{
    display:block;
    margin:0 !important;
  }
}