/* VIRDEE FILMS — Header, navigation & menu */
/* =============================================================
   Header
   ============================================================= */
.header{ position:fixed; top:0; left:0; width:100%; z-index:800; padding-block:clamp(1rem,2.2vh,1.7rem);
  transition:transform .5s var(--ease), background .5s var(--ease), padding .5s var(--ease), border-color .5s, top .5s var(--ease);
  border-bottom:1px solid transparent; }
.header__row{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.header.scrolled{ background:var(--header-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); padding-block:.75rem; border-color:var(--line-2); }
.header.hidden{ transform:translateY(-104%); }
/* over-hero (transparent, light text) until scrolled */
.header:not(.scrolled) .brand__name,
.header:not(.scrolled) .nav__link,
.header:not(.scrolled) .icon-btn{ color:var(--hero-fg); }
.header:not(.scrolled) .brand__tag{ color:var(--gold-3); }

.brand{ display:flex; flex-direction:column; line-height:1; z-index:810; }
.brand__name{ font-family:var(--ff-display); font-weight:500; font-size:clamp(1.3rem,2.1vw,1.65rem); letter-spacing:.16em; text-transform:uppercase; color:var(--fg); transition:color .4s; }
.brand__tag{ font-family:var(--ff-sans); font-size:.5rem; letter-spacing:.44em; text-transform:uppercase; color:var(--accent); margin-top:.42em; padding-left:.2em; transition:color .4s; }

.nav{ display:none; align-items:center; gap:clamp(1.3rem,2.4vw,2.6rem); }
.nav__link{ position:relative; font-family:var(--ff-sans); font-size:.73rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:var(--fg); padding:.3em 0; transition:color .4s; }
.nav__link::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease-out); }
.nav__link:hover::after,.nav__link.active::after{ transform:scaleX(1); transform-origin:left; }
.nav__link.active{ color:var(--accent); }

.header__actions{ display:flex; align-items:center; gap:1rem; }
.icon-btn{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); color:var(--fg); transition:background .4s,color .4s,border-color .4s,transform .4s; }
.icon-btn:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.header:not(.scrolled) .icon-btn{ border-color:rgba(255,255,255,.32); }
.header:not(.scrolled) .btn{ color:var(--hero-fg); border-color:rgba(255,255,255,.45); }
.header:not(.scrolled) .btn::before{ background:var(--hero-fg); }
.header:not(.scrolled) .btn:hover{ color:#181209; }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .moon{ display:none; } .theme-toggle .sun{ display:block; }
:root[data-theme="dark"] .theme-toggle .moon{ display:block; } :root[data-theme="dark"] .theme-toggle .sun{ display:none; }

.burger{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; position:relative; z-index:810; }
.burger span{ position:absolute; left:10px; right:10px; height:1.5px; background:currentColor; color:var(--fg); transition:transform .45s var(--ease),opacity .3s; }
.header:not(.scrolled) .burger span{ color:var(--hero-fg); }
.burger span:nth-child(1){ top:17px; } .burger span:nth-child(2){ top:23px; } .burger span:nth-child(3){ top:29px; }

/* =============================================================
   Mobile / full menu  (with close + socials)
   ============================================================= */
.menu{ position:fixed; inset:0; z-index:850; background:var(--bg-inv); color:var(--bg);
  display:flex; flex-direction:column; padding:clamp(1.4rem,4vw,2.6rem) var(--gutter);
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease-out); pointer-events:none; overflow-y:auto; }
.menu.open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.menu__top{ display:flex; align-items:center; justify-content:space-between; padding-bottom:clamp(1.5rem,4vh,3rem); }
.menu__brand{ font-family:var(--ff-display); font-weight:500; font-size:1.3rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bg); }
.menu__close{ display:inline-flex; align-items:center; gap:.7em; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bg); }
.menu__close .x{ position:relative; width:44px; height:44px; border:1px solid rgba(255,255,255,.25); border-radius:50%; display:grid; place-items:center; transition:background .4s,border-color .4s,transform .5s var(--ease); }
:root[data-theme="dark"] .menu__close .x{ border-color:rgba(21,16,10,.2); }
.menu__close .x::before,.menu__close .x::after{ content:""; position:absolute; width:16px; height:1.5px; background:currentColor; }
.menu__close .x::before{ transform:rotate(45deg); } .menu__close .x::after{ transform:rotate(-45deg); }
.menu__close:hover .x{ background:var(--accent); border-color:var(--accent); transform:rotate(90deg); }
.menu__body{ flex:1; display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vh,3rem); align-content:center; }
@media(min-width:900px){ .menu__body{ grid-template-columns:1.6fr 1fr; align-items:center; } }
.menu__list{ display:flex; flex-direction:column; gap:clamp(.2rem,1.2vh,.7rem); }
.menu__item{ overflow:hidden; }
.menu__link{ font-family:var(--ff-display); font-weight:300; font-size:clamp(2.3rem,8vw,4.6rem); letter-spacing:-.01em; color:var(--bg); display:inline-flex; align-items:baseline; gap:1rem; transform:translateY(110%); transition:transform .7s var(--ease-out),color .3s,font-style .3s; }
.menu.open .menu__link{ transform:translateY(0); }
.menu__link .num{ font-family:var(--ff-sans); font-size:.65rem; letter-spacing:.2em; color:var(--accent); transform:translateY(-1.4em); }
.menu__link:hover{ color:var(--accent); font-style:italic; }
.menu__aside{ border-top:1px solid rgba(255,255,255,.14); padding-top:2rem; display:flex; flex-direction:column; gap:1.6rem; }
@media(min-width:900px){ .menu__aside{ border-top:none; border-left:1px solid rgba(255,255,255,.14); padding:0 0 0 clamp(2rem,4vw,4rem); } }
:root[data-theme="dark"] .menu__aside{ border-color:rgba(21,16,10,.14); }
.menu__k{ font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); margin-bottom:.7rem; }
.menu__aside a{ color:var(--bg); opacity:.82; transition:opacity .3s,color .3s; display:block; padding:.15em 0; }
.menu__aside a:hover{ opacity:1; color:var(--accent); }
.menu__socials{ display:flex; gap:.8rem; flex-wrap:wrap; }
.menu__socials a{ width:44px; height:44px; border:1px solid rgba(255,255,255,.2); border-radius:50%; display:grid; place-items:center; opacity:1; }
:root[data-theme="dark"] .menu__socials a{ border-color:rgba(21,16,10,.18); }
.menu__socials a:hover{ background:var(--accent); border-color:var(--accent); }
.menu__socials svg{ width:17px; height:17px; }

/* Menu bottom bar — socials moved to the bottom */
.menu__bottom{ padding-top:1.6rem; margin-top:1.4rem; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem 1.6rem; }
:root[data-theme="dark"] .menu__bottom{ border-color:rgba(21,16,10,.14); }
.menu__mail{ color:var(--bg); opacity:.75; font-size:.9rem; letter-spacing:.04em; }
.menu__mail:hover{ opacity:1; color:var(--accent); }
/* Responsive — show hamburger, hide inline nav on small screens (must live in header.css to win the cascade) */
@media(max-width:980px){
  .header__actions .btn{ display:none; }
  .header__actions{ gap:.55rem; }
  .brand__name{ font-size:clamp(1rem,4.4vw,1.35rem); }
}
@media(min-width:981px){
  .nav{ display:flex; }
  .burger{ display:none; }
}
/* Mobile menu — fit everything in one 100svh, no scroll */
@media(max-width:900px){
  .menu{ height:100svh; padding-block:clamp(1rem,3vh,1.7rem); }
  .menu__body{ grid-template-columns:1fr; align-content:center; gap:clamp(1.1rem,3.5vh,2.3rem); }
  .menu__list{ gap:clamp(.05rem,.5vh,.5rem); }
  .menu__link{ font-size:clamp(1.65rem,5.1vh,2.9rem); }
  .menu__aside{ flex-direction:row; flex-wrap:wrap; gap:1rem 1.8rem; border:none; padding:0; }
  .menu__aside > div{ flex:1 1 42%; min-width:128px; }
  .menu__k{ margin-bottom:.3rem; }
  .menu__aside a, .menu__aside span{ font-size:.8rem; padding:.55em 0; }
  .menu__bottom{ padding-top:clamp(.8rem,2vh,1.3rem); margin-top:0; }
  .menu__mail{ display:none; }
  .menu__top{ padding-bottom:clamp(1rem,2.5vh,2rem); }
}
/* Small phones — keep brand + toggle + hamburger on one line (no overflow) */
@media(max-width:600px){
  .header .container{ padding-inline:1rem; }
  .header__row{ gap:.5rem; }
  .header__actions{ gap:.3rem; flex-shrink:0; }
  .icon-btn{ width:40px; height:40px; }
  .burger{ width:40px; height:40px; }
  .brand{ min-width:0; flex-shrink:1; }
  .brand__name{ font-size:1.02rem; letter-spacing:.08em; white-space:nowrap; }
  .brand__tag{ font-size:.42rem; letter-spacing:.34em; }
}
/* Announcement bar + glassy sticky header offset */
.annbar{ position:fixed; top:0; left:0; width:100%; z-index:801; height:38px; background:var(--bg-inv); color:var(--hero-fg); overflow:hidden; display:flex; align-items:center; transition:transform .5s var(--ease); }
:root.scrolled .annbar{ transform:translateY(-100%); }
.annbar__track{ display:flex; align-items:center; gap:3rem; white-space:nowrap; width:max-content; animation:marquee 36s linear infinite; padding-left:3rem; }
.annbar__track span{ font-family:var(--ff-sans); font-size:.64rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--hero-dim); display:inline-flex; align-items:center; gap:.7em; }
.annbar__track i{ color:var(--gold-3); font-style:normal; }
.header{ top:38px; }
:root.scrolled .header{ top:0; }
@media(max-width:600px){ .annbar{ height:34px; } .header{ top:34px; } .annbar__track span{ font-size:.56rem; letter-spacing:.14em; } }