/* ============================================================
   TERAMERGE — TEAM · immersive 3D face-scan experience (overlay)
   Black void + blue signal. WebGL draws the volumetric face-scan
   and the flowing tendrils; this styles the scan-frame HUD only.
   ============================================================ */
:root{
  --bg:#000000; --bg2:#05070d;
  --text:#EAF1FB; --text2:#8FA3C0;
  --green:#1c3a63; --sage:#6f9bd8; --ivory:#cfe0ff;
  --line:rgba(180,205,255,0.14);
  --fi:clamp(14px,2vw,30px);                       /* scan-frame inset */
  --sans:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease:cubic-bezier(0.22,1,0.36,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; overflow:hidden; }
body{ font-family:var(--sans); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
#scene{ position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab; z-index:1; }
#scene:active{ cursor:grabbing; }

.grain{ position:fixed; inset:0; z-index:9; pointer-events:none; opacity:0.5; mix-blend-mode:overlay;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/></svg>"); }

/* ---------------- scan frame + crosshairs + rulers ---------------- */
.frame{ position:fixed; inset:var(--fi); z-index:10; border:1px solid rgba(180,205,255,0.16); pointer-events:none; }
.cross{ position:absolute; color:rgba(180,205,255,0.34); font-size:0.9rem; line-height:1; font-weight:300; transform:translate(-50%,-50%); }
.c-tl{left:0;top:0}.c-tr{left:100%;top:0}.c-bl{left:0;top:100%}.c-br{left:100%;top:100%}
.c-l{left:0;top:50%}.c-c{left:50%;top:50%}.c-r{left:100%;top:50%}
.ruler{ position:absolute; left:50%; transform:translateX(-50%); width:min(360px,40vw); height:6px;
  background-image:radial-gradient(circle, rgba(180,205,255,0.5) 1px, transparent 1.5px); background-size:12px 6px; background-position:center; }
.ruler--top{ top:12px; } .ruler--bot{ bottom:12px; }

/* ---------------- HUD ---------------- */
.hud{ position:fixed; z-index:20; font-size:0.62rem; letter-spacing:0.34em; text-transform:uppercase; text-decoration:none; color:var(--text2); transition:color .3s; }
.hud:hover{ color:var(--text); }
.hud--brand{ left:clamp(1.8rem,4vw,3.4rem); top:clamp(1.5rem,3.4vh,2.6rem); color:var(--text); font-weight:600; letter-spacing:0.4em; }
/* BACK — a clear, premium indicator pill, vertically centred on the TERAMERGE header line */
.hud--menu{ right:clamp(1.8rem,4vw,3.4rem);
  top:calc(clamp(1.5rem,3.4vh,2.6rem) + 0.44rem); transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:0.55rem; color:#fff; font-weight:600;
  font-size:0.64rem; letter-spacing:0.3em; line-height:1;
  padding:0.62rem 1.3rem; border:1px solid rgba(255,255,255,0.62); border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 4px 18px rgba(0,0,0,0.5);
  transition:background .3s, border-color .3s, transform .3s, box-shadow .3s;
  animation:hudBackPulse 2.4s ease-in-out infinite; }
.hud--menu::before{ content:"\2190"; font-size:1.1em; line-height:1; letter-spacing:0;
  animation:hudBackArrow 1.8s ease-in-out infinite; }
.hud--menu:hover{ background:linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.1));
  border-color:#fff; transform:translateY(-50%) scale(1.05); animation:none;
  box-shadow:0 6px 26px rgba(0,0,0,0.55), 0 0 24px rgba(255,255,255,0.28); }
.hud--menu:hover::before{ animation:none; transform:translateX(-3px); }
@keyframes hudBackPulse{ 0%,100%{ box-shadow:0 4px 18px rgba(0,0,0,0.5), 0 0 0 0 rgba(255,255,255,0.0); }
  50%{ box-shadow:0 4px 18px rgba(0,0,0,0.5), 0 0 20px 3px rgba(255,255,255,0.3); } }
@keyframes hudBackArrow{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-3px); } }
@media (prefers-reduced-motion:reduce){ .hud--menu, .hud--menu::before{ animation:none; } }
.hud--idx{ left:clamp(1.8rem,4vw,3.4rem); top:clamp(3.5rem,6.2vh,5rem); color:var(--sage); letter-spacing:0.28em; font-variant-numeric:tabular-nums; }

/* ---------------- huge TEAM wordmark (right side, like reference) ---------------- */
.watermark{ position:fixed; right:clamp(1.6rem,4vw,3.8rem); top:clamp(4.5rem,17vh,10.5rem); z-index:6; pointer-events:none; will-change:transform;
  font-weight:700; font-size:clamp(3rem,11.5vw,10.5rem); letter-spacing:0.26em; line-height:0.82; color:rgba(190,212,255,0.07); white-space:nowrap; text-align:right; }

/* ---------------- active member — name / role bottom-left ---------------- */
.info{ position:fixed; left:clamp(1.8rem,4vw,3.6rem); bottom:clamp(2.2rem,7vh,3.6rem); z-index:15; max-width:min(360px,64vw); pointer-events:none; }
.info__name{ font-size:clamp(1.3rem,2.4vw,1.95rem); font-weight:600; letter-spacing:0.01em; display:flex; align-items:baseline; gap:0.55rem; }
.info__name::before{ content:"::"; color:var(--sage); font-weight:400; font-size:0.85em; letter-spacing:0.05em; }
.info__title{ margin-top:0.4rem; font-size:0.64rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--text2);
  white-space:pre-line; line-height:1.55; }
.info__bar{ margin-top:0.95rem; width:min(230px,44vw); height:1px; background:rgba(180,205,255,0.16); overflow:hidden; }
.info__bar i{ display:block; height:100%; width:20%; background:var(--sage); transition:width .6s var(--ease); }
.info__name,.info__title{ transition:opacity .5s var(--ease), transform .5s var(--ease); }
.info.out .info__name{ opacity:0; transform:translateY(12px); }
.info.out .info__title{ opacity:0; transform:translateY(8px); }

/* descriptive copy — bottom-right */
.blurb{ position:fixed; right:clamp(1.8rem,4vw,3.6rem); bottom:clamp(4.6rem,13vh,6.4rem); z-index:15; max-width:min(300px,44vw);
  font-size:0.82rem; line-height:1.62; color:var(--text2); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease); }
.blurb.out{ opacity:0; transform:translateY(8px); }

/* ---------------- navigation ---------------- */
.nav{ position:fixed; right:clamp(1.8rem,4vw,3.6rem); bottom:clamp(1.8rem,5vh,2.6rem); z-index:20; display:flex; align-items:center; gap:0.8rem; }
.nav__arrow{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:rgba(10,20,40,0.5); color:var(--text);
  font-size:1rem; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:border-color .3s, transform .2s, background .3s; }
.nav__arrow:hover{ border-color:var(--sage); background:rgba(30,50,90,0.6); transform:translateY(-2px); }
.nav__count{ font-size:0.78rem; letter-spacing:0.14em; color:var(--text2); font-variant-numeric:tabular-nums; }
.nav__count span:first-child{ color:var(--text); }
.nav__count i{ margin:0 0.4rem; opacity:0.4; font-style:normal; }
.dots{ position:fixed; left:50%; bottom:clamp(1.8rem,5vh,2.8rem); transform:translateX(-50%); z-index:20; display:flex; gap:0.6rem; }
.dots button{ width:7px; height:7px; border-radius:50%; border:none; background:rgba(180,205,255,0.24); cursor:pointer; padding:0; transition:background .3s, transform .3s; }
.dots button.on{ background:var(--sage); transform:scale(1.35); }
.swipehint{ position:fixed; left:50%; bottom:clamp(3.6rem,9vh,4.8rem); transform:translateX(-50%); z-index:20;
  font-size:0.56rem; letter-spacing:0.26em; text-transform:uppercase; color:var(--text2); transition:opacity .6s var(--ease); }
.swipehint.hide{ opacity:0; }

/* ---------------- loading ---------------- */
.load{ position:fixed; inset:0; z-index:40; display:grid; place-items:center; align-content:center; gap:1.1rem; background:var(--bg); transition:opacity .8s var(--ease), visibility .8s; }
.load.done{ opacity:0; visibility:hidden; }
.load__brand{ font-size:0.8rem; letter-spacing:0.5em; text-transform:uppercase; color:var(--text); }
.load__t{ font-size:0.6rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--text2); }
.load__bar{ width:min(240px,54vw); height:1px; background:var(--line); overflow:hidden; }
.load__bar i{ display:block; height:100%; width:0%; background:var(--sage); transition:width .25s var(--ease); }
.load__pct{ font-size:0.58rem; letter-spacing:0.2em; color:var(--text2); font-variant-numeric:tabular-nums; }

/* ---------------- fallback ---------------- */
.fallback{ position:fixed; inset:0; z-index:50; overflow-y:auto; background:var(--bg); padding:clamp(3rem,8vh,6rem) clamp(1.4rem,5vw,5rem); }
.fb__eye{ font-size:0.66rem; letter-spacing:0.34em; text-transform:uppercase; color:var(--sage); }
.fb__title{ margin-top:1rem; font-weight:200; font-size:clamp(2.2rem,6vw,4rem); line-height:1.02; }
.fb__grid{ margin-top:clamp(2rem,5vw,3.4rem); display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.2rem; }
.fb__card img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:6px; border:1px solid var(--line); filter:grayscale(1) brightness(0.8) contrast(1.15) sepia(1) hue-rotate(180deg) saturate(2.2); }
.fb__card .no{ margin-top:0.7rem; font-size:0.6rem; letter-spacing:0.2em; color:var(--sage); }
.fb__card .nm{ font-size:1.1rem; font-weight:300; margin-top:0.2rem; }
.fb__card .ti{ font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text2); margin-top:0.2rem; }
.fb__cta{ display:inline-block; margin-top:2.4rem; font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--bg); background:var(--sage); border-radius:3px; padding:0.85rem 1.5rem; text-decoration:none; }

@media (max-width:720px){
  .watermark{ top:auto; bottom:34%; font-size:2.6rem; }
  .info{ left:clamp(1.2rem,5vw,2rem); right:clamp(1.2rem,5vw,2rem); bottom:6rem; max-width:none; }
  .info__name{ font-size:clamp(1.25rem,6vw,1.7rem); text-shadow:0 2px 16px rgba(5,8,14,0.96), 0 0 34px rgba(5,8,14,0.85); }
  .info__title{ text-shadow:0 2px 14px rgba(5,8,14,0.96), 0 0 30px rgba(5,8,14,0.85); line-height:1.6; }
  /* bottom scrim so the stacked designations never read as "on top of" the face */
  .info::after{ content:""; position:fixed; left:0; right:0; bottom:0; height:46vh; z-index:-1; pointer-events:none;
    background:linear-gradient(0deg, rgba(5,8,14,0.94) 0%, rgba(5,8,14,0.6) 44%, rgba(5,8,14,0) 100%); }
  .blurb{ display:none; }
  .nav{ right:auto; left:50%; transform:translateX(-50%); bottom:1.4rem; }
  .dots{ bottom:5.6rem; }
  /* hint lives in the bottom-right corner, beside the arrows — never under the designations */
  .nav{ gap:0.6rem; }
  .swipehint{ left:auto; right:clamp(0.9rem,4vw,1.4rem); bottom:1.55rem; transform:none; width:5.6rem;
    text-align:right; font-size:0.5rem; letter-spacing:0.16em; line-height:1.55; }
  .c-l,.c-c,.c-r{ display:none; }
}

/* ---- embedded mode (?embed=1): hide standalone chrome, keep the cinematic scan ---- */
html.embed, html.embed body{ background:#000; }
html.embed .hud, html.embed .swipehint, html.embed .nav, html.embed .dots,
html.embed .watermark, html.embed .load, html.embed .info, html.embed .blurb,
html.embed .fallback{ display:none !important; }
html.embed .frame{ opacity:0.6; }