/* ============================================================
   NOCTHÉA — Private Deep-Sea Expedition Society
   Cinematic Immersive Scroll · framework-free static build
   ============================================================ */

:root{
  --abyss:#04070B;
  --deep:#0A1620;
  --hull:#6E7A85;
  --beam:#E8A24C;
  --bio:#62B6BE;
  --bone:#E7EBEE;
  --fog:#93A0AA;
  --line:rgba(231,235,238,0.12);

  --serif:'Cormorant Garamond',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'Satoshi',system-ui,-apple-system,sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--abyss);color:var(--bone);font-family:var(--sans);overflow-x:clip}
img{display:block;max-width:100%}
::selection{background:rgba(232,162,76,.28);color:var(--bone)}
a{color:var(--beam);text-decoration:none}
a:hover{color:var(--bone)}
:focus-visible{outline:1px solid var(--beam);outline-offset:3px}
input,textarea,button{font-family:inherit}
input::placeholder,textarea::placeholder{color:rgba(147,160,170,.55)}

@keyframes noc-pulse{0%,100%{opacity:.25}50%{opacity:.85}}

#noc-root{position:relative;background:var(--abyss);width:100%;overflow-x:clip}

/* ---------- Shared type helpers ---------- */
.mono-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.32em;color:var(--fog);text-transform:uppercase}
.mono-label.beam{color:var(--beam)}

/* ============================================================
   NAV
   ============================================================ */
#noc-nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px clamp(20px,4vw,56px);
  border-bottom:1px solid transparent;
  transition:padding 400ms var(--ease),background 400ms ease,
             backdrop-filter 400ms ease,border-color 400ms ease,
             transform 500ms var(--ease);
}
#noc-nav.scrolled{
  padding:14px clamp(20px,4vw,56px);
  background:rgba(4,7,11,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
}
#noc-nav.hidden{transform:translateY(-105%)}
.noc-logo{font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:.42em;color:var(--bone);text-indent:.42em}
#noc-nav-links{display:flex;align-items:center;gap:clamp(16px,2.1vw,36px)}
.noc-navlink{position:relative;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--fog);text-transform:uppercase;padding:6px 0;transition:color 300ms ease}
.noc-navlink.cta{color:var(--beam)}
.noc-navbar{position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--beam);transition:width 400ms var(--ease)}
.noc-navlink:hover,.noc-navlink:focus-visible{color:var(--bone)}
.noc-navlink:hover .noc-navbar,.noc-navlink:focus-visible .noc-navbar{width:100%}

#noc-burger{display:none;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;width:44px;height:44px;background:transparent;border:none;cursor:pointer;padding:0}
#noc-burger span{display:block;height:1px;background:var(--bone)}
#noc-burger span:nth-child(1),#noc-burger span:nth-child(2){width:24px}
#noc-burger span:nth-child(3){width:16px}

/* ---------- Mobile menu ---------- */
#noc-mobile-menu{position:fixed;inset:0;z-index:80;display:none;flex-direction:column;background:rgba(4,7,11,.97);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity 400ms ease}
.noc-mm-head{display:flex;align-items:center;justify-content:space-between;padding:24px clamp(20px,4vw,56px)}
#noc-close{width:44px;height:44px;background:transparent;border:none;cursor:pointer;color:var(--bone);font-family:var(--mono);font-size:20px;line-height:1}
.noc-mm-nav{display:flex;flex-direction:column;justify-content:center;flex:1;padding:0 clamp(24px,7vw,56px);gap:6px}
.noc-mobilelink{display:flex;align-items:center;min-height:56px;font-family:var(--serif);font-weight:500;font-size:clamp(30px,7vw,44px);color:var(--bone);border-bottom:1px solid var(--line)}
.noc-mobilelink.cta{color:var(--beam)}

/* ============================================================
   01 · HERO
   ============================================================ */
#noc-hero{position:relative;height:320vh}
.noc-stage{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;background:var(--abyss)}
#noc-canvas,#noc-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#noc-video{transform:scale(1.06)}
#noc-canvas{display:none}
#noc-abyss-layer{position:absolute;inset:0;background:url('assets/abyss.jpg') center/cover;opacity:0;transform:scale(1.08)}
#noc-dark{position:absolute;inset:0;background:var(--abyss);opacity:.18}
#noc-beam{position:absolute;inset:0;opacity:0;background:radial-gradient(120% 80% at 50% 42%,rgba(232,162,76,.22),rgba(232,162,76,.05) 38%,transparent 62%)}
.noc-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,7,11,.55) 0%,rgba(4,7,11,0) 26%,rgba(4,7,11,0) 62%,rgba(4,7,11,.78) 100%)}

/* loader */
#noc-loader{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--abyss);transition:opacity 700ms ease}
#noc-loader.gone{opacity:0;pointer-events:none}
#noc-loader .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.36em;color:var(--fog);text-transform:uppercase}
#noc-loader .track{width:120px;height:1px;background:var(--line);position:relative;overflow:hidden}
#noc-loader .bar{position:absolute;left:0;top:0;height:100%;width:0;background:var(--beam);transition:width 200ms linear}

.noc-hero-title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;z-index:3}
.noc-hero-title h1{font-family:var(--serif);font-weight:500;font-size:clamp(76px,18vw,300px);line-height:.88;letter-spacing:.06em;color:var(--bone);text-indent:.06em;text-shadow:0 4px 70px rgba(4,7,11,.7)}
.noc-hero-title p{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(20px,2.5vw,32px);letter-spacing:.02em;color:var(--bone);opacity:.86;margin-top:26px}

.noc-depth{position:absolute;left:clamp(20px,4vw,56px);bottom:clamp(84px,13vh,140px);display:flex;align-items:flex-end;gap:14px;z-index:3}
.noc-depth .num-wrap{display:flex;align-items:flex-end;gap:8px}
.noc-depth .num{font-family:var(--mono);font-size:clamp(40px,7vw,88px);font-weight:300;line-height:.86;color:var(--bone);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.noc-depth .unit{font-family:var(--mono);font-size:clamp(15px,1.6vw,22px);font-weight:300;letter-spacing:.28em;color:var(--beam);padding-bottom:6px}
.noc-depth .cap{font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;color:var(--fog);text-transform:uppercase;padding-bottom:10px}

#noc-scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;z-index:3}
#noc-scroll-cue .txt{font-family:var(--mono);font-size:9.5px;letter-spacing:.34em;color:var(--fog);text-transform:uppercase;animation:noc-pulse 2.4s ease-in-out infinite}
#noc-scroll-cue .rail{width:1px;height:46px;background:linear-gradient(180deg,var(--fog),transparent)}

/* ============================================================
   02 · MANIFESTO
   ============================================================ */
#noc-manifesto{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:14vh clamp(24px,7vw,140px);overflow:hidden}
#noc-manifesto .bg{position:absolute;inset:0;background:url('assets/abyss.jpg') center/cover;filter:blur(22px) brightness(.34) saturate(.85);transform:scale(1.14)}
#noc-manifesto .veil{position:absolute;inset:0;background:radial-gradient(80% 80% at 50% 50%,rgba(4,7,11,.4),rgba(4,7,11,.9))}
#noc-manifesto .inner{position:relative;max-width:1100px}
#noc-manifesto .kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.34em;color:var(--beam);text-transform:uppercase;margin-bottom:40px}
#noc-manifesto-copy{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.4vw,64px);line-height:1.24;letter-spacing:.005em;color:var(--bone)}

/* ============================================================
   03 · THE VESSEL
   ============================================================ */
#noc-vessel{position:relative;padding:16vh clamp(24px,5vw,90px);background:var(--abyss)}
.noc-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:8vh}
.noc-sec-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(40px,6.5vw,104px);line-height:.94;letter-spacing:.01em;color:var(--bone)}
.noc-sec-head span{font-family:var(--mono);font-size:10.5px;letter-spacing:.32em;color:var(--fog);text-transform:uppercase}
.noc-vessel-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,48px);align-items:end}
.noc-frame{position:relative;margin:0;overflow:hidden}
.noc-frame.ratio-1610{aspect-ratio:16/10}
.noc-frame.ratio-34{aspect-ratio:3/4}
.noc-frame.ratio-11{aspect-ratio:1/1}
.noc-zoom{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease)}
.noc-frameline{position:absolute;inset:12px;border:1px solid var(--line);opacity:0;clip-path:inset(0 100% 100% 0);transition:opacity 500ms ease,clip-path 700ms var(--ease);pointer-events:none}
.noc-cap{position:absolute;left:20px;bottom:18px;opacity:0;transition:opacity 400ms ease;font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--bone);text-transform:uppercase;text-shadow:0 1px 8px rgba(4,7,11,.9)}
.noc-frame:hover .noc-zoom{transform:scale(1.03)}
.noc-frame:hover .noc-frameline{opacity:1;clip-path:inset(0 0 0 0)}
.noc-frame:hover .noc-cap{opacity:1}

.noc-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,40px);margin-top:9vh;border-top:1px solid var(--line);padding-top:44px}
.noc-spec .k{font-family:var(--mono);font-size:10px;letter-spacing:.28em;color:var(--fog);text-transform:uppercase;margin-bottom:16px}
.noc-spec .v{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4.6vw,60px);color:var(--bone);line-height:1}
.noc-spec .v.small{font-size:clamp(28px,3.6vw,48px);line-height:1.02}
.noc-spec .v sub{font-family:var(--mono);font-size:.3em;letter-spacing:.2em;color:var(--beam);vertical-align:.9em}

/* ============================================================
   04 · THE DESCENT
   ============================================================ */
#noc-descent{position:relative;height:110vh;overflow:hidden}
#noc-descent-img{position:absolute;top:-8%;left:0;width:100%;height:118%;background:url('assets/member-cabin.jpg') center/cover;will-change:transform}
#noc-descent .grad{position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,7,11,.85) 0%,rgba(4,7,11,.28) 45%,rgba(4,7,11,0) 78%)}
#noc-descent .copy{position:absolute;left:clamp(24px,5vw,90px);bottom:clamp(70px,12vh,130px);max-width:760px}
#noc-descent .kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.32em;color:var(--beam);text-transform:uppercase;margin-bottom:26px}
#noc-descent h2{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5.2vw,80px);line-height:1.02;color:var(--bone);letter-spacing:.01em}
#noc-descent .meta{font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--fog);text-transform:uppercase;margin-top:28px}

/* ============================================================
   05 · THE SOCIETY
   ============================================================ */
#noc-society{position:relative;padding:16vh clamp(24px,5vw,90px);background:var(--deep)}
.noc-society-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,110px);align-items:center;max-width:1400px;margin:0 auto}
.noc-society-grid .kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.32em;color:var(--beam);text-transform:uppercase;margin-bottom:36px}
.noc-society-grid h2{font-family:var(--serif);font-weight:500;font-size:clamp(38px,5.4vw,86px);line-height:1;color:var(--bone);letter-spacing:.01em;margin-bottom:36px}
.noc-society-grid p{font-family:var(--sans);font-weight:400;font-size:clamp(16px,1.4vw,19px);line-height:1.75;color:var(--fog);max-width:56ch;margin-bottom:22px}
.noc-society-grid p.last{margin-bottom:44px}
.noc-underline{position:relative;display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.28em;color:var(--bone);text-transform:uppercase;padding-bottom:8px}
.noc-underline-bar{position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--beam);transition:width 500ms var(--ease)}
.noc-underline:hover .noc-underline-bar,.noc-underline:focus-visible .noc-underline-bar{width:100%}

/* ============================================================
   06 · REQUEST PASSAGE
   ============================================================ */
#noc-request{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16vh clamp(24px,6vw,90px);background:var(--abyss);overflow:hidden}
#noc-request .glow{position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 30%,rgba(232,162,76,.06),transparent 60%)}
#noc-request .inner{position:relative;width:100%;max-width:720px;text-align:center}
#noc-request .kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.34em;color:var(--fog);text-transform:uppercase;margin-bottom:36px}
#noc-request h2{font-family:var(--serif);font-weight:500;font-size:clamp(40px,6.4vw,96px);line-height:.98;color:var(--bone);letter-spacing:.01em;margin-bottom:26px}
#noc-request .lede{font-family:var(--sans);font-size:clamp(15px,1.3vw,18px);line-height:1.7;color:var(--fog);max-width:52ch;margin:0 auto 60px}
#noc-form{display:flex;flex-direction:column;gap:0;text-align:left}
#noc-form label{display:block;border-bottom:1px solid var(--line);padding:20px 2px 12px}
#noc-form label.last{margin-bottom:44px}
#noc-form .flabel{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;color:var(--fog);text-transform:uppercase;margin-bottom:12px}
#noc-form input{width:100%;background:transparent;border:none;color:var(--bone);font-size:19px;font-family:var(--sans);padding:2px 0;outline:none}
.noc-cta{position:relative;overflow:hidden;align-self:center;background:transparent;border:1px solid var(--beam);color:var(--beam);font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;padding:20px 52px;min-height:44px;cursor:pointer;transition:color 700ms var(--ease),transform 160ms ease}
.noc-cta-sweep{position:absolute;inset:0;transform:translateX(-101%);background:linear-gradient(100deg,transparent,var(--beam) 42%,#F2C783 55%,var(--beam) 68%,transparent);transition:transform 700ms var(--ease);pointer-events:none}
.noc-cta span.txt{position:relative;z-index:2}
.noc-cta:hover{color:var(--abyss)}
#noc-success{display:none;border:1px solid var(--line);padding:56px 32px;font-family:var(--serif)}
#noc-success .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:var(--beam);text-transform:uppercase;margin-bottom:20px}
#noc-success p{font-size:clamp(22px,2.6vw,32px);color:var(--bone);line-height:1.3}

/* ============================================================
   FOOTER
   ============================================================ */
#noc-footer{border-top:1px solid var(--line);padding:clamp(48px,7vw,84px) clamp(24px,5vw,90px);background:var(--abyss)}
.noc-foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.noc-foot-brand{font-family:var(--serif);font-weight:500;font-size:26px;letter-spacing:.4em;color:var(--bone);text-indent:.4em}
.noc-foot-cols{display:flex;gap:clamp(28px,5vw,80px);flex-wrap:wrap}
.noc-foot-col .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;color:var(--fog);text-transform:uppercase;margin-bottom:14px}
.noc-foot-col a,.noc-foot-col .v{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--bone)}
.noc-foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:clamp(40px,6vw,72px);padding-top:26px;border-top:1px solid var(--line)}
.noc-foot-bottom span{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--fog);text-transform:uppercase}

/* ============================================================
   REVEAL (JS-driven)
   ============================================================ */
.noc-reveal{opacity:0;transform:translateY(24px);transition:opacity 900ms var(--ease),transform 900ms var(--ease)}
.noc-reveal.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1023px){
  #noc-hero{height:240vh}
  .noc-vessel-grid{grid-template-columns:1fr;gap:20px}
  .noc-society-grid{grid-template-columns:1fr;gap:40px}
}
@media (max-width:820px){
  #noc-nav-links{display:none}
  #noc-burger{display:flex}
  .noc-specs{grid-template-columns:1fr;gap:32px}
}
@media (max-width:600px){
  .noc-depth{bottom:clamp(96px,16vh,140px)}
}

/* ============================================================
   REDUCED MOTION / STATIC
   ============================================================ */
.noc-static #noc-hero{height:100vh}
.noc-static #noc-scroll-cue{display:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto !important}
  .noc-reveal{opacity:1;transform:none}
}