html{overflow-anchor:none}
html.is-window-resizing,html.is-window-resizing body{scroll-behavior:auto!important}

/* Homepage interactive GLACIO GB-2 model */
#interactive-model{
  position:relative;
  padding:12vh 0 14vh;
  border-top:1px solid var(--line);
  background:
    radial-gradient(circle at 22% 38%,rgba(59,214,255,.09),transparent 34%),
    linear-gradient(180deg,var(--abyss) 0%,var(--deep) 52%,var(--abyss) 100%);
  scroll-margin-top:96px;
  overflow:hidden;
}
#interactive-model::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(159,232,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(159,232,255,.025) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent);
}
#interactive-model .wrap{position:relative;z-index:1}
#interactive-model .model-head{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(280px,.65fr);
  gap:24px 64px;
  align-items:end;
}
#interactive-model .model-head .sec-tag{grid-column:1/-1;margin-bottom:0}
#interactive-model .model-head h2{
  max-width:12em;
  font-size:46px;
  line-height:1.08;
  letter-spacing:0;
}
#interactive-model .model-head .lead{
  justify-self:end;
  max-width:34em;
  margin:0 0 4px;
  font-size:17px;
  line-height:1.75;
}
#interactive-model .model-layout{
  display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(280px,.58fr);
  gap:42px;
  align-items:stretch;
  margin-top:52px;
}
#interactive-model .model-viewer{
  position:relative;
  min-width:0;
  min-height:610px;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(159,232,255,.2);
  background:
    radial-gradient(circle at 50% 40%,rgba(159,232,255,.12),transparent 36%),
    linear-gradient(160deg,#091723 0%,#050b11 63%,#020407 100%);
  box-shadow:0 28px 80px rgba(0,0,0,.44),0 0 68px rgba(59,214,255,.08);
  isolation:isolate;
}
#interactive-model .model-viewer::before{
  content:"";
  position:absolute;
  z-index:0;
  left:9%;
  right:9%;
  bottom:8%;
  height:18%;
  border-radius:50%;
  background:rgba(0,0,0,.5);
  filter:blur(26px);
  transform:perspective(420px) rotateX(62deg);
}
#interactive-model .model-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:2;
  touch-action:none;
  cursor:grab;
  opacity:0;
  transition:opacity .55s ease;
}
#interactive-model .model-canvas:active{cursor:grabbing}
#interactive-model .model-viewer[data-state="ready"] .model-canvas{opacity:1}
#interactive-model .model-viewer[data-state="fallback"] .model-canvas{display:none}
#interactive-model .model-poster{
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
  opacity:1;
  transition:opacity .55s ease;
}
#interactive-model .model-viewer[data-state="ready"] .model-poster{opacity:0}
#interactive-model .model-loading{
  position:absolute;
  z-index:4;
  left:22px;
  bottom:22px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 13px;
  border:1px solid var(--line);
  background:rgba(4,8,13,.82);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ice-dim);
  backdrop-filter:blur(8px);
  transition:opacity .35s,visibility .35s;
}
#interactive-model .model-loading::before{
  content:"";
  width:7px;
  height:7px;
  border:1px solid var(--glow);
  border-radius:50%;
  box-shadow:0 0 12px rgba(59,214,255,.55);
  animation:modelPulse 1.4s ease-in-out infinite;
}
#interactive-model .model-viewer[data-state="ready"] .model-loading,
#interactive-model .model-viewer[data-state="fallback"] .model-loading{opacity:0;visibility:hidden}
@keyframes modelPulse{50%{transform:scale(.55);opacity:.42}}
#interactive-model .model-reset{
  position:absolute;
  z-index:5;
  top:18px;
  right:18px;
  padding:9px 12px;
  border:1px solid var(--line);
  background:rgba(4,8,13,.72);
  color:var(--ice-dim);
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  backdrop-filter:blur(8px);
  transition:color .25s,border-color .25s,background .25s;
}
#interactive-model .model-reset:hover{
  color:var(--abyss);
  border-color:var(--glow);
  background:var(--glow);
}
#interactive-model .model-switch{
  position:absolute;
  z-index:5;
  top:18px;
  left:18px;
  display:flex;
  padding:4px;
  border:1px solid rgba(159,232,255,.24);
  background:rgba(4,8,13,.76);
  backdrop-filter:blur(10px);
}
#interactive-model .model-badge{
  gap:2px;
  padding:8px 11px;
  background:var(--glow);
  color:var(--abyss);
  font-family:var(--mono);
}
#interactive-model .model-badge b{
  font-size:11px;
  font-weight:500;
  line-height:1;
  letter-spacing:.12em;
}
#interactive-model .model-badge span{
  font-size:8px;
  line-height:1.2;
  letter-spacing:.13em;
  text-transform:uppercase;
  opacity:.68;
}
#interactive-model .model-choice{
  display:grid;
  gap:2px;
  min-width:76px;
  padding:8px 11px;
  border:0;
  background:transparent;
  color:var(--text-dim);
  font-family:var(--mono);
  text-align:left;
  cursor:pointer;
  transition:color .22s,background .22s;
}
#interactive-model .model-choice b{
  font-size:11px;
  font-weight:500;
  line-height:1;
  letter-spacing:.12em;
}
#interactive-model .model-choice span{
  font-size:8px;
  line-height:1.2;
  letter-spacing:.13em;
  text-transform:uppercase;
  opacity:.68;
}
#interactive-model .model-choice:hover{color:var(--ice)}
#interactive-model .model-choice.is-active{
  background:var(--glow);
  color:var(--abyss);
}
#interactive-model .model-choice:focus-visible{
  outline:2px solid var(--ice);
  outline-offset:2px;
}
#interactive-model .model-caption{
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:6px 20px;
  padding:12px 16px;
  border-top:1px solid var(--line);
  background:linear-gradient(90deg,rgba(4,8,13,.86),rgba(4,8,13,.6));
  font-family:var(--mono);
  font-size:9.5px;
  line-height:1.6;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--text-dim);
  pointer-events:none;
}
#interactive-model .model-caption span:last-child{color:var(--ice-dim)}
#interactive-model .model-side{
  min-width:0;
  padding:4px 0 0;
}
#interactive-model .model-kicker{
  margin:0 0 20px;
  font-family:var(--mono);
  font-size:10.5px;
  line-height:1.8;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ice-dim);
}
#interactive-model .model-features{
  display:grid;
  border-top:1px solid var(--line);
}
#interactive-model .model-feature{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:13px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
#interactive-model .model-feature b{
  font-family:var(--serif);
  font-style:italic;
  font-size:21px;
  font-weight:400;
  line-height:1;
  color:var(--glow);
}
#interactive-model .model-feature h3{
  margin:0 0 5px;
  font-size:15.5px;
  line-height:1.35;
  letter-spacing:0;
}
#interactive-model .model-feature p{
  margin:0;
  font-size:13.5px;
  line-height:1.7;
  color:var(--text-dim);
}
#interactive-model .model-status{
  min-height:2.4em;
  margin:22px 0 0;
  font-family:var(--mono);
  font-size:10px;
  line-height:1.7;
  letter-spacing:.08em;
  color:var(--ice);
}
#interactive-model .model-note{
  margin:16px 0 0;
  font-size:11px;
  line-height:1.65;
  color:var(--text-dim);
}
#interactive-model .model-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  margin-top:24px;
  padding:12px 20px;
  border:1px solid var(--glow);
  background:var(--glow);
  color:var(--abyss);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  transition:background .25s,border-color .25s;
}
#interactive-model .model-cta:hover{background:var(--ice);border-color:var(--ice)}
@media (max-width:1000px){
  #interactive-model .model-head{grid-template-columns:1fr;gap:20px}
  #interactive-model .model-head .lead{justify-self:start;max-width:40em}
  #interactive-model .model-layout{grid-template-columns:1fr;gap:30px}
  #interactive-model .model-side{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);gap:24px 36px}
  #interactive-model .model-kicker,
  #interactive-model .model-status,
  #interactive-model .model-note,
  #interactive-model .model-cta{grid-column:2}
  #interactive-model .model-kicker{grid-row:1}
  #interactive-model .model-status{margin-top:0}
}
@media (max-width:760px){
  #interactive-model{padding:10vh 0 12vh;scroll-margin-top:76px}
  #interactive-model .model-head h2{font-size:34px}
  #interactive-model .model-head .lead{font-size:16px}
  #interactive-model .model-layout{margin-top:34px}
  #interactive-model .model-viewer{min-height:0;aspect-ratio:4/5}
  #interactive-model .model-side{display:block}
  #interactive-model .model-kicker{margin-bottom:14px}
  #interactive-model .model-status{margin-top:20px}
  #interactive-model .model-caption{padding-right:96px}
}
@media (max-width:440px){
  #interactive-model .model-head h2{font-size:30px}
  #interactive-model .model-viewer{aspect-ratio:3/4}
  #interactive-model .model-switch{top:12px;left:12px}
  #interactive-model .model-choice{min-width:63px;padding:7px 9px}
  #interactive-model .model-reset{top:12px;right:12px}
  #interactive-model .model-loading{left:12px;bottom:44px}
  #interactive-model .model-caption{display:block;padding:10px 12px 11px}
  #interactive-model .model-caption span{display:block}
  #interactive-model .model-caption span:last-child{margin-top:4px}
}
@media (prefers-reduced-motion:reduce){
  #interactive-model .model-canvas,
  #interactive-model .model-poster,
  #interactive-model .model-loading{transition:none}
  #interactive-model .model-loading::before{animation:none}
}


/* ---- GB-2 finish film beside the 3D model (2026-10-31) ---- */
#interactive-model .model-film{
  position:relative;
  margin:0;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(159,232,255,.2);
  background:
    radial-gradient(circle at 50% 42%,rgba(159,232,255,.10),transparent 38%),
    linear-gradient(160deg,#091723 0%,#050b11 63%,#020407 100%);
  box-shadow:0 28px 80px rgba(0,0,0,.44),0 0 68px rgba(59,214,255,.08);
  display:flex;
  align-items:center;
}
#interactive-model .model-film-video{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:#020407;
}
#interactive-model .model-film .model-caption{z-index:3}
@media (min-width:1001px){
  #interactive-model .model-layout{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:24px;
    align-items:stretch;
  }
  #interactive-model .model-viewer{min-height:520px}
  #interactive-model .model-side{grid-column:1/-1;margin-top:36px}
  #interactive-model .model-side .model-features{
    border-top:0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0 32px;
  }
  #interactive-model .model-side .model-feature{
    border-bottom:0;
    border-top:1px solid var(--line);
    padding:16px 0 0;
  }
}