/* ============================================================
   Norrwild — coming-soon holding page. Standalone, immersive.
   Tokens from base.css; everything scoped to .cs.
   Layers: video(0) · overlay(1) · grain(2) · content(3)
   ============================================================ */
*{box-sizing:border-box}
html,body{height:100%}
body.cs{
  margin:0;min-height:100svh;overflow-x:hidden;position:relative;
  background:#161310;color:var(--ivory);font-family:var(--body);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:64px 24px 48px;text-align:center;
  opacity:1;transition:opacity 1.2s ease;
}
body.cs.cs-open{opacity:0}

/* ---- background video (static; held perfectly still) ---- */
.cs-bg{position:fixed;inset:0;z-index:0}
.cs-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .75s ease}
.cs-video.is-on{opacity:1}

/* ---- darkening overlay (between video and content) ---- */
.cs-overlay{position:fixed;inset:0;z-index:1;pointer-events:none;
  background-color:rgba(20,18,14,.52);
  background-image:linear-gradient(to bottom, rgba(0,0,0,.22) 0%, rgba(0,0,0,.40) 40%, rgba(0,0,0,.66) 100%);
}
.cs-grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- language switcher (top-right, discreet) ---- */
.cs-lang{position:fixed;top:22px;right:26px;z-index:4;display:flex;align-items:center;gap:8px;
  font-family:var(--body);font-size:12px;letter-spacing:.12em}
.cs-lang button{background:none;border:none;cursor:pointer;color:rgba(246,240,230,.55);font:inherit;letter-spacing:inherit;padding:2px;transition:color .2s}
.cs-lang button:hover{color:rgba(246,240,230,.9)}
.cs-lang button.is-active{color:var(--gold)}
.cs-lang button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.cs-lang span{color:rgba(246,240,230,.3)}

/* ---- content column ---- */
.cs-inner{position:relative;z-index:3;max-width:680px;width:100%;display:flex;flex-direction:column;align-items:center}

.cs-mark{display:flex;flex-direction:column;align-items:center;gap:13px;margin-bottom:22px}
.cs-aframe{width:42px;height:auto;overflow:visible}
.cs-window{transform-box:fill-box;transform-origin:center;animation:cs-glow 4.5s ease-in-out infinite}
@keyframes cs-glow{0%,100%{opacity:.72;filter:drop-shadow(0 0 3px rgba(226,182,111,.45))}50%{opacity:1;filter:drop-shadow(0 0 12px rgba(226,182,111,.95))}}
.cs-word{font-family:var(--body);font-weight:400;font-size:14px;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:var(--ivory)}

.cs-tag{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(20px,3vw,30px);color:var(--gold);margin:0 0 8px}
.cs-clarify{font-family:var(--body);font-weight:300;font-size:clamp(13px,1.5vw,15px);letter-spacing:.01em;color:rgba(246,240,230,.82);margin:0 0 clamp(30px,5vh,52px)}

.cs-kicker{font-family:var(--body);font-weight:400;font-size:clamp(10px,1.1vw,12px);letter-spacing:.24em;text-transform:uppercase;color:rgba(246,240,230,.6);margin:0 0 18px}

/* ---- countdown ---- */
.cs-count{display:flex;align-items:flex-start;justify-content:center;gap:clamp(14px,3.5vw,40px);margin-bottom:20px}
.cs-unit{display:flex;flex-direction:column;align-items:center;min-width:clamp(58px,12vw,118px)}
.cs-num{font-family:var(--display);font-weight:400;font-size:clamp(46px,9.5vw,104px);line-height:.92;letter-spacing:-.01em;color:var(--ivory);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.cs-num.tick{animation:cs-tick .45s ease}
@keyframes cs-tick{0%{opacity:.4}100%{opacity:1}}
.cs-lab{margin-top:12px;font-family:var(--body);font-weight:400;font-size:clamp(9px,1.1vw,11px);letter-spacing:.26em;text-transform:uppercase;color:rgba(246,240,230,.62)}
.cs-sep{width:1px;align-self:stretch;margin-top:6px;background:linear-gradient(180deg,transparent,rgba(246,240,230,.28) 35%,rgba(246,240,230,.28) 65%,transparent);max-height:clamp(50px,10vw,104px)}

.cs-date{font-family:var(--body);font-weight:400;font-size:clamp(10px,1.2vw,12px);letter-spacing:.18em;text-transform:uppercase;color:rgba(246,240,230,.66);margin:0 0 clamp(30px,5vh,46px)}

/* ---- email form ---- */
.cs-signup{font-family:var(--body);font-weight:300;font-size:clamp(14px,1.7vw,16px);line-height:1.6;color:rgba(246,240,230,.85);max-width:42ch;margin:0 0 18px}
.cs-form{display:flex;align-items:center;gap:12px;width:100%;max-width:460px;flex-wrap:wrap;justify-content:center}
.cs-email{flex:1 1 240px;min-width:0;background:transparent;border:none;border-bottom:1px solid rgba(246,240,230,.4);
  color:var(--ivory);font-family:var(--body);font-size:15px;font-weight:300;padding:12px 4px;outline:none;transition:border-color .3s}
.cs-email::placeholder{color:rgba(246,240,230,.5)}
.cs-email:focus{border-bottom-color:var(--gold)}
.cs-email--err{border-bottom-color:var(--gold)}
.cs-btn{flex:0 0 auto;font-family:var(--body);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--charcoal);background:var(--gold);border:none;border-radius:2px;padding:14px 26px;cursor:pointer;
  transition:transform .3s,box-shadow .3s,opacity .3s}
.cs-btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px -14px rgba(226,182,111,.6)}
.cs-btn:disabled{opacity:.6;cursor:default;transform:none}
.cs-btn:focus-visible,.cs-email:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.cs-error{font-family:var(--body);font-size:13px;letter-spacing:.01em;color:var(--gold);margin:14px 0 0}

.cs-confirm-title{font-family:var(--display);font-weight:400;font-size:clamp(24px,3vw,34px);letter-spacing:-.01em;color:var(--ivory);margin:0 0 8px}
.cs-confirm-sub{font-family:var(--display);font-style:italic;font-size:clamp(15px,1.9vw,18px);line-height:1.5;color:rgba(246,240,230,.86);max-width:40ch;margin:0 auto}

/* ---- foot ---- */
.cs-foot{position:relative;z-index:3;background:transparent;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  margin-top:clamp(34px,6vh,64px);font-family:var(--body);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,240,230,.55)}
.cs-foot a{color:rgba(246,240,230,.7);text-decoration:none;transition:color .2s}
.cs-foot a:hover{color:var(--gold)}
.cs-dot{color:rgba(246,240,230,.35)}

@media(max-width:520px){
  .cs-count{gap:10px}
  .cs-sep{display:none}
  .cs-unit{min-width:0;flex:1}
  .cs-lang{top:16px;right:16px}
}

/* ---- reduced motion: freeze everything ---- */
@media (prefers-reduced-motion: reduce){
  .cs-grain{animation:none}
  .cs-window{animation:none;opacity:.92}
  .cs-num.tick{animation:none}
  .cs-video{transition:none}
  body.cs{transition:none}
}