/* ==========================================================================
   Misideal — homepage
   ========================================================================== */

@property --g1{syntax:'<color>';inherits:true;initial-value:#141414;}
@property --g2{syntax:'<color>';inherits:true;initial-value:#141414;}
@property --g3{syntax:'<color>';inherits:true;initial-value:#141414;}

html,body{overflow:hidden;height:100%;}

/* Live values set by home.js (documentElement.style.setProperty). Declared
   on :root only — a value declared directly on body would always win over
   anything JS sets on the root, since inheritance loses to any explicit
   same-element rule regardless of specificity. */
:root{
  --gx:50%; --gy:50%;
  --g1:#3a3530; --g2:#2a3336; --g3:#33282c;
}

body{
  background:
    radial-gradient(85vmax 85vmax at var(--gx) var(--gy), var(--g1) 0%, transparent 60%),
    radial-gradient(65vmax 65vmax at calc(var(--gx) + 16vw) calc(var(--gy) - 12vh), var(--g2) 0%, transparent 58%),
    radial-gradient(75vmax 75vmax at calc(var(--gx) - 14vw) calc(var(--gy) + 14vh), var(--g3) 0%, transparent 58%),
    #141414;
  background-blend-mode:screen;
  transition:--g1 1.1s ease,--g2 1.1s ease,--g3 1.1s ease;
}

.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");}

/* ===== stage / carousel ===== */
.stage{position:absolute;inset:0;}
.stage.hidecur{cursor:none;}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .85s ease;}
.slide.on{opacity:1;}
.slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.staticlbl{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;z-index:40;display:none;padding:0 24px;}
.staticlbl .eb{font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.7;margin-bottom:9px;}
.staticlbl .tt{font-family:var(--sans);font-weight:700;
  font-size:clamp(22px,6vw,44px);
  letter-spacing:-.02em;text-transform:uppercase;line-height:1.05;}
.staticlbl .cta{margin-top:11px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.75;}
@media(hover:none){.staticlbl{display:block;}}

.arwzone{position:absolute;top:0;bottom:0;width:15%;min-width:90px;z-index:70;
  background:none;border:0;cursor:pointer;display:flex;align-items:center;
  color:var(--bone);padding:0 26px;}
.arwzone.l{left:0;justify-content:flex-start;}
.arwzone.r{right:0;justify-content:flex-end;}
.arwzone svg{width:26px;height:58px;opacity:0;transition:opacity .3s ease;}
.arwzone.show svg{opacity:.85;}
.arwzone:hover svg{opacity:1;}
@media(hover:none){.arwzone{display:none;}}

.pips{display:flex;gap:7px;}
.pips button{width:6px;height:6px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(240,238,233,.3);transition:background .3s;}
.pips button[aria-current=true]{background:var(--bone);}
.site-footer .mid{display:flex;align-items:center;gap:16px;}
@media(max-width:700px){.site-footer .hide-s{display:none;}}