/* Homepage 3D scroll story (5 Nov 2026). Only active when <html class="s3d">. */
#story3d { display: none; }
.s3d #story3d { display: block; position: relative; height: 640vh; background: #0d1216; }
.s3d [data-sec="hero"] { display: none !important; }
.s3d-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#s3dCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s ease; }
.s3d-ready #s3dCanvas { opacity: 1; }
.s3d-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(13,18,22,.94) 0%, rgba(13,18,22,.78) 32%, rgba(13,18,22,0) 60%),
              linear-gradient(0deg, rgba(13,18,22,.7) 0%, rgba(13,18,22,0) 30%); }

/* chapter copy */
.s3d-copy { position: absolute; inset: 0; left: 0; right: 0; pointer-events: none; }
.s3d-ch { position: absolute; left: clamp(20px, 4vw, 32px); right: clamp(20px, 4vw, 32px); top: 50%; margin-top: -170px; max-width: 560px;
  opacity: 0; visibility: hidden; will-change: opacity, transform; }
.s3d-ch:first-child { opacity: 1; visibility: visible; }
.s3d-ch.on, .s3d-ch:first-child { pointer-events: auto; }
.s3d-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7CC6F0; margin-bottom: 18px; }
.s3d-kicker b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(44,144,205,.18); border: 1px solid rgba(124,198,240,.35); color: #fff; font-size: 12px; letter-spacing: 0; }
.s3d-h { color: #fff; font-size: clamp(34px, 5vw, 66px); font-weight: 800; line-height: 1.03; letter-spacing: -.04em; margin: 0 0 20px; text-wrap: balance; }
.s3d-h em { font-style: normal; background: linear-gradient(92deg, #5BB4E8, #2C90CD 55%, #7CC6F0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s3d-p { color: #B3C0CC; font-size: clamp(15.5px, 1.3vw, 18px); line-height: 1.7; max-width: 500px; margin: 0 0 28px; }
.s3d-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.s3d-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #CFE6F5; font-size: 13px; font-weight: 600; margin-bottom: 22px; }
.s3d-badge:hover { color: #fff; border-color: rgba(124,198,240,.6); }
.s3d-badge svg, .s3d-badge i { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #2C90CD; color: #fff; }
.s3d-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; margin: -8px 0 0; padding: 0; list-style: none; max-width: 420px; }
.s3d-list li { color: #CBD5E1; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.s3d-list li:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 10px #4ADE80; }

/* chapter rail */
.s3d-rail { position: absolute; right: clamp(16px, 3vw, 40px); top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; z-index: 2; }
.s3d-rail li { display: flex; align-items: center; justify-content: flex-end; gap: 12px; color: rgba(255,255,255,.4); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; transition: color .4s; }
.s3d-rail li:after { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); transition: all .4s cubic-bezier(.16,1,.3,1); }
.s3d-rail li.on { color: #fff; }
.s3d-rail li.on:after { background: #2C90CD; border-color: #7CC6F0; box-shadow: 0 0 0 5px rgba(44,144,205,.25); transform: scale(1.2); }
.s3d-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.06); }
.s3d-progress i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, #2C90CD, #7CC6F0); }
.s3d-hint { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); color: rgba(255,255,255,.6); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: calc(1 - var(--p, 0) * 30); pointer-events: none; }
.s3d-hint:after { content: ""; width: 1px; height: 40px; background: linear-gradient(#7CC6F0, transparent); animation: s3dhint 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes s3dhint { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* floating part tags during the inspection */
.s3d-tags { position: absolute; inset: 0; pointer-events: none; transition: opacity .4s ease; opacity: 0; }
.s3d-tag { position: absolute; left: 0; top: 0; margin: -16px 0 0 14px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 6px 11px 6px 7px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #E2E8F0;
  background: rgba(13,18,22,.72); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.s3d-tag .ok { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; background: rgba(255,255,255,.08); color: transparent; transition: all .35s cubic-bezier(.34,1.56,.64,1); }
.s3d-tag.pass { border-color: rgba(74,222,128,.45); }
.s3d-tag.pass .ok { background: #22C55E; color: #fff; box-shadow: 0 0 12px rgba(34,197,94,.7); }

@media (max-width: 860px) {
  .s3d #story3d { height: 560vh; }
  .s3d-shade { background: linear-gradient(0deg, rgba(13,18,22,.95) 0%, rgba(13,18,22,.75) 38%, rgba(13,18,22,0) 62%); }
  .s3d-ch { top: auto; bottom: 64px; margin-top: 0; }
  .s3d-h { font-size: clamp(30px, 8.5vw, 40px); margin-bottom: 12px; }
  .s3d-p { font-size: 15px; margin-bottom: 18px; }
  .s3d-rail { display: none; }
  .s3d-hint { bottom: 14px; }
  .s3d-tag { font-size: 11px; padding: 4px 9px 4px 5px; }
  .s3d-list { display: none; }
}
@media (max-width: 480px) { .s3d-btns .btn { flex: 1; justify-content: center; } }

.s3d-tag.flag { border-color: rgba(251,191,36,.55); color: #FDE68A; }
.s3d-tag.flag .ok { background: #F59E0B; color: #1b1300; font-weight: 800; box-shadow: 0 0 12px rgba(245,158,11,.7); }
.s3d-list-1 { grid-template-columns: 1fr; max-width: 460px; }
.s3d #story3d { height: 720vh; }
@media (max-width: 860px) { .s3d #story3d { height: 640vh; } }

/* sound toggle (voice-over + music) */
.s3d-sound { position: absolute; left: clamp(16px, 3vw, 32px); bottom: 26px; z-index: 3; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(13,18,22,.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #E2E8F0; font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer;
  transition: border-color .25s, background-color .25s, transform .25s cubic-bezier(.16,1,.3,1); }
.s3d-sound:hover { border-color: rgba(124,198,240,.6); transform: translateY(-1px); }
.s3d-sound .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.s3d-sound .bars i { width: 3px; height: 4px; border-radius: 2px; background: #7CC6F0; transition: height .3s; }
.s3d-sound.on .bars i { animation: s3dbar 1s ease-in-out infinite; }
.s3d-sound.on .bars i:nth-child(2) { animation-delay: .2s; } .s3d-sound.on .bars i:nth-child(3) { animation-delay: .4s; } .s3d-sound.on .bars i:nth-child(4) { animation-delay: .1s; }
@keyframes s3dbar { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.s3d-sound.nudge { animation: s3dnudge 1.6s ease-in-out 3; }
@keyframes s3dnudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(44,144,205,.0); } 50% { box-shadow: 0 0 0 8px rgba(44,144,205,.25); border-color: rgba(124,198,240,.7); } }
@media (max-width: 860px) { .s3d-sound { left: auto; right: 14px; top: 92px; bottom: auto; padding: 8px 12px 8px 10px; font-size: 12px; } }