/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STROM STUDIO — Shared Stylesheet
   Dark mode default · Light mode via [data-theme="light"]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── THEME TOKENS ──────────────────────────────────────────────────── */
:root {
  --bg:      #09090A;
  --bg-2:    #0F0F10;
  --bg-3:    #161618;
  --cream:   #EDE8DF;
  --cream-m: #8A8680;
  --gold:    #B8965A;
  --gold-l:  #D4AE78;
  --white:   #F5F2EC;
  --border:  rgba(237,232,223,0.07);
  --bord-g:  rgba(184,150,90,0.28);
  --nav-bg:  rgba(9,9,10,0.90);
  --img-f:   brightness(.65) saturate(.85);
  --img-fh:  brightness(.80) saturate(.95);
  --grain:   overlay;
  --fd: 'Cormorant', Georgia, serif;
  --fb: 'DM Sans', system-ui, sans-serif;
  --ease: cubic-bezier(0.16,1,0.3,1);
}
[data-theme="light"] {
  --bg:      #F2EDE3;
  --bg-2:    #EAE4D8;
  --bg-3:    #DFD8C8;
  --cream:   #1C1714;
  --cream-m: #6E6860;
  --gold:    #8B6B38;
  --gold-l:  #A07D48;
  --white:   #0E0C0A;
  --border:  rgba(28,23,20,0.10);
  --bord-g:  rgba(139,107,56,0.30);
  --nav-bg:  rgba(242,237,227,0.94);
  --img-f:   brightness(.72) saturate(.90);
  --img-fh:  brightness(.85) saturate(1.0);
  --grain:   multiply;
}

/* ── RESET & BASE ──────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  background:var(--bg);color:var(--cream);
  font-family:var(--fb);font-weight:300;
  line-height:1.6;overflow-x:hidden;cursor:none;
  transition:background .5s,color .5s;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
@media(hover:none){body{cursor:auto;}}

/* ── PAGE TRANSITION ───────────────────────────────────────────────── */
body{animation:pageIn .65s var(--ease) both;}
body.leaving{animation:pageOut .45s var(--ease) forwards;}
@keyframes pageIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes pageOut{to{opacity:0;transform:translateY(-14px);}}

/* ── GRAIN ─────────────────────────────────────────────────────────── */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:9000;
  opacity:.034;mix-blend-mode:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;transition:opacity .5s;
}

/* ── SCROLL PROGRESS ───────────────────────────────────────────────── */
#spb{
  position:fixed;top:0;left:0;right:0;height:1.5px;
  background:var(--gold);transform-origin:left;
  transform:scaleX(0);z-index:8000;
  transition:transform .08s linear,background .5s;
}

/* ── CURSOR ────────────────────────────────────────────────────────── */
#cur{
  position:fixed;width:8px;height:8px;background:var(--gold);
  border-radius:50%;pointer-events:none;z-index:9999;opacity:0;
  transform:translate(-50%,-50%);
  transition:opacity .4s var(--ease),width .3s var(--ease),height .3s var(--ease),background .5s;
}
#cur-ring{
  position:fixed;width:34px;height:34px;
  border:1px solid rgba(184,150,90,.5);border-radius:50%;opacity:0;
  pointer-events:none;z-index:9998;
  transform:translate(-50%,-50%);
  transition:opacity .4s var(--ease),width .35s var(--ease),height .35s var(--ease),border-color .3s;
}
body.cur-on #cur{opacity:1;}
body.cur-on #cur-ring{opacity:1;}
body.hov #cur-ring{width:56px;height:56px;border-color:var(--gold);}
[data-theme="light"] #cur-ring{border-color:rgba(139,107,56,.45);}

/* ── LOADER ────────────────────────────────────────────────────────── */
#loader{
  position:fixed;inset:0;background:var(--bg);
  z-index:10000;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:28px;
  transition:opacity .9s var(--ease),visibility .9s;
}
#loader.out{opacity:0;visibility:hidden;pointer-events:none;}
.l-logo{
  font-family:var(--fd);font-size:2.8rem;font-weight:300;
  letter-spacing:.45em;text-transform:uppercase;color:var(--cream);
}
.l-bar{width:180px;height:1px;background:var(--border);position:relative;overflow:hidden;}
.l-fill{
  position:absolute;top:0;left:0;height:100%;width:0%;
  background:linear-gradient(90deg,var(--gold),var(--gold-l));
  transition:width .08s linear;
}
.l-num{font-family:var(--fd);font-size:.7rem;letter-spacing:.3em;color:var(--cream-m);}

/* ── NAVIGATION ────────────────────────────────────────────────────── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:5000;
  padding:30px 64px;
  display:flex;align-items:center;justify-content:space-between;
  transition:padding .5s var(--ease),background .4s,backdrop-filter .4s,border-color .4s;
}
#nav.s{
  padding:16px 64px;
  background:var(--nav-bg);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
}
.n-logo{
  font-family:var(--fd);font-size:1.3rem;font-weight:400;
  letter-spacing:.38em;text-transform:uppercase;color:var(--cream);
  transition:color .5s;
}
.n-logo .dot{color:var(--gold);}
.n-mid{display:flex;align-items:center;gap:44px;}
.n-mid a{
  font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cream-m);position:relative;padding-bottom:3px;
  transition:color .3s;
}
.n-mid a::after{
  content:'';position:absolute;bottom:0;left:0;
  width:0;height:1px;background:var(--gold);
  transition:width .35s var(--ease);
}
.n-mid a:hover{color:var(--cream);}
.n-mid a:hover::after{width:100%;}
.n-right{display:flex;align-items:center;gap:16px;}

/* Theme Toggle */
.theme-btn{
  width:36px;height:36px;background:transparent;
  border:1px solid var(--bord-g);cursor:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);
  transition:background .3s,border-color .3s,color .5s;
  flex-shrink:0;padding:0;
}
.theme-btn:hover{background:rgba(184,150,90,.1);border-color:var(--gold);}
.theme-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;}
/* Show/hide sun/moon per theme */
[data-theme="dark"]  .t-sun {display:block;}
[data-theme="dark"]  .t-moon{display:none;}
[data-theme="light"] .t-sun {display:none;}
[data-theme="light"] .t-moon{display:block;}

.n-cta{
  font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  background:var(--gold);color:#09090A;padding:11px 26px;
  cursor:none;border:none;
  transition:background .3s,transform .3s var(--ease);
  white-space:nowrap;
}
.n-cta:hover{background:var(--gold-l);transform:translateY(-2px);}

/* Hamburger */
.hbg{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:none;padding:6px;
}
.hbg span{display:block;width:24px;height:1px;background:var(--cream);transition:.3s;}
.hbg.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hbg.open span:nth-child(2){opacity:0;}
.hbg.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* Mobile Nav */
#mob{
  position:fixed;inset:0;background:rgba(9,9,10,.97);
  backdrop-filter:blur(32px);z-index:4999;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:40px;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
}
[data-theme="light"] #mob{background:rgba(242,237,227,.97);}
#mob.open{opacity:1;visibility:visible;}
#mob a{
  font-family:var(--fd);font-size:clamp(2rem,5.5vw,3.2rem);
  font-weight:300;color:var(--cream);letter-spacing:.04em;
  transition:color .3s,transform .4s var(--ease),opacity .4s;
  transform:translateY(22px);opacity:0;
}
#mob.open a{opacity:1;transform:none;}
#mob.open a:nth-child(1){transition-delay:.05s;}
#mob.open a:nth-child(2){transition-delay:.1s;}
#mob.open a:nth-child(3){transition-delay:.15s;}
#mob.open a:nth-child(4){transition-delay:.2s;}
#mob.open a:nth-child(5){transition-delay:.25s;}
#mob.open a:nth-child(6){transition-delay:.3s;}
#mob a:hover{color:var(--gold);}
#mob-x{
  position:absolute;top:26px;right:64px;
  font-size:1.3rem;color:var(--cream-m);
  background:none;border:none;cursor:none;transition:color .3s;
}
#mob-x:hover{color:var(--cream);}

/* ── LAYOUT UTILITIES ──────────────────────────────────────────────── */
.wrap{max-width:1440px;margin:0 auto;padding:0 80px;}
.tag{
  font-size:.61rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:14px;
  transition:color .5s;
}
.tag::before{content:'';width:28px;height:1px;background:var(--gold);transition:background .5s;}

/* ── BUTTONS ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream);padding:15px 40px;
  border:1px solid var(--bord-g);position:relative;
  overflow:hidden;cursor:none;transition:color .4s,border-color .5s;
}
.btn::before{
  content:'';position:absolute;inset:0;
  background:var(--gold);transform:scaleX(0);
  transform-origin:left;transition:transform .45s var(--ease);
}
.btn:hover{color:#09090A;}
.btn:hover::before{transform:scaleX(1);}
.btn span,.btn .arr{position:relative;z-index:1;}
.btn .arr{transition:transform .3s var(--ease);}
.btn:hover .arr{transform:translateX(5px);}

.btn-g{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--gold);color:#09090A;
  padding:15px 40px;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;cursor:none;
  position:relative;overflow:hidden;transition:background .3s;
}
.btn-g::before{
  content:'';position:absolute;inset:0;
  background:var(--gold-l);transform:scaleX(0);
  transform-origin:left;transition:transform .45s var(--ease);
}
.btn-g:hover::before{transform:scaleX(1);}
.btn-g span,.btn-g .arr{position:relative;z-index:1;}
.btn-g .arr{transition:transform .3s var(--ease);}
.btn-g:hover .arr{transform:translateX(5px);}

/* ── SCROLL REVEAL ─────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.rv.vis{opacity:1;transform:none;}
.d1{transition-delay:.1s;}.d2{transition-delay:.2s;}
.d3{transition-delay:.32s;}.d4{transition-delay:.46s;}.d5{transition-delay:.6s;}

/* ── FOOTER ────────────────────────────────────────────────────────── */
footer{
  background:var(--bg-2);padding:44px 0;
  border-top:1px solid var(--border);
  transition:background .5s,border-color .5s;
}
.ft-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;}
.ft-logo{font-family:var(--fd);font-size:.95rem;letter-spacing:.36em;text-transform:uppercase;color:var(--cream-m);transition:color .5s;}
.ft-copy{font-size:.6rem;letter-spacing:.15em;color:var(--cream-m);}
.ft-links{display:flex;gap:28px;flex-wrap:wrap;}
.ft-links a{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-m);transition:color .3s;}
.ft-links a:hover{color:var(--gold);}

/* ── RESPONSIVE ────────────────────────────────────────────────────── */
@media(max-width:1200px){.wrap{padding:0 48px;}}
@media(max-width:1024px){
  #nav,#nav.s{padding-left:40px;padding-right:40px;}
  .n-mid,.n-cta{display:none;}
  .hbg{display:flex;}
  #mob-x{right:40px;}
}
@media(max-width:768px){
  .wrap{padding:0 24px;}
  #nav,#nav.s{padding-left:24px;padding-right:24px;}
  #mob-x{right:24px;}
  .ft-inner{flex-direction:column;text-align:center;}
  .ft-links{justify-content:center;}
}