/* ===================================================================
   CyberShield Show 2026 — venue walk-through
   Reuses the shared theme (styles.css). Navy + orange.
   =================================================================== */

/* (no overflow on the body — it would break position:sticky; html already clips x) */

/* ---------- Hero ---------- */
.cs-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:120px 0 80px}
.cs-hero__inner{position:relative;z-index:2;max-width:760px}
.cs-hero__glow{position:absolute;inset:0;z-index:1;background:
  radial-gradient(60% 60% at 50% 8%, rgba(247,148,29,.28), transparent 60%),
  radial-gradient(80% 60% at 50% 100%, rgba(29,63,128,.5), transparent 60%)}
.cs-badge{display:inline-block;color:var(--orange);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;border:1px solid rgba(247,148,29,.4);border-radius:999px;padding:.5em 1.1em;margin-bottom:24px}
.cs-hero__title{font-family:'Poppins';font-weight:800;font-size:clamp(2.6rem,7vw,5rem);letter-spacing:-.02em;line-height:1}
.cs-hero__sub{color:var(--muted);font-size:1.15rem;line-height:1.6;margin:22px auto 0;max-width:34em}
.cs-hero__meta{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--text);margin:26px 0 32px;font-size:1rem;flex-wrap:wrap}
.cs-hero__meta strong{color:var(--orange)}
.cs-dot{color:var(--muted)}

/* ---------- Walk-through scroll stage ---------- */
.cs-walk{position:relative;height:1320vh}
.cs-walk__sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:
  radial-gradient(120% 90% at 70% 0%, #0c1b3e, #060f24 70%)}

/* the camera viewport — perspective gives the first-person "walking" depth */
.cs-stage{position:absolute;inset:0;overflow:hidden;
  -webkit-perspective:900px;perspective:900px;-webkit-perspective-origin:50% 70%;perspective-origin:50% 70%}
/* NB: no `will-change:transform` here — it makes iOS/WebKit flatten preserve-3d */
.cs-world{position:absolute;top:0;left:0;transform-origin:0 0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.cs-walls{position:absolute;top:0;left:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.cs-plan{position:absolute;top:0;left:0;transform-origin:0 0}
.cs-svg{display:block;width:1280px;height:920px}

/* extruded walls (generated by JS) — glowing, translucent so you can see in */
.cs-wall{position:absolute;top:0;left:0;transform-origin:0 0;pointer-events:none;
  background:linear-gradient(rgba(247,148,29,.32),rgba(247,148,29,.05));  /* denser at the floor */
  border-bottom:1.5px solid rgba(247,148,29,.65);                         /* lit top-of-wall edge */
  box-shadow:0 0 14px rgba(247,148,29,.18)}

/* rooms & walls */
.cs-room{fill:rgba(247,148,29,.15);stroke:rgba(247,148,29,.6);stroke-width:2.5;stroke-linejoin:round}
.cs-room--foyer{fill:rgba(247,148,29,.09)}
.cs-room__name{fill:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:22px;letter-spacing:.06em;text-anchor:middle}
.cs-room__sub{fill:#dbe5f7;font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;letter-spacing:.05em;text-anchor:middle}
.cs-dim{fill:#7f93b8;font-family:'Inter',sans-serif;font-size:12px;text-anchor:middle;letter-spacing:.04em}
.cs-edge{stroke:rgba(255,255,255,.14);stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round}
.cs-divide{stroke:rgba(247,148,29,.4);stroke-width:1.6;stroke-dasharray:5 5}
.cs-lawn{fill:#5f7194;font-family:'Inter';font-size:14px;letter-spacing:.3em;text-anchor:middle}

/* service blocks */
.cs-svc{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.2);stroke-width:1.5}
.cs-svc__t{fill:#cdd9ef;font-family:'Inter';font-size:12px;font-weight:600;letter-spacing:.08em;text-anchor:middle}
.cs-svc__i{font-size:22px;text-anchor:middle}
.cs-bar{fill:rgba(247,148,29,.3);stroke:rgba(247,148,29,.7);stroke-width:1.5}
.cs-door{fill:#0a1430}
.cs-exit{fill:#e07d6b;font-family:'Inter';font-size:11px;font-weight:700;letter-spacing:.06em}

/* raised 3D boxes (stands, stage, chairs) — built by JS in the world layer */
.cs-props{position:absolute;top:0;left:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.cs-box{position:absolute;top:0;left:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.cs-box__side{position:absolute;top:0;left:0;transform-origin:0 0}
.cs-box__top{position:absolute;top:0;left:0;transform-origin:0 0;display:flex;align-items:center;justify-content:center}
.cs-box__top span{color:#11203f;font-family:'Poppins',sans-serif;font-weight:800}

/* exhibitor stands */
.cs-stand3d .cs-box__side{background:linear-gradient(rgba(247,148,29,.55),rgba(247,148,29,.22));
  border:1px solid rgba(247,148,29,.5);box-shadow:0 0 10px rgba(247,148,29,.15)}
.cs-stand3d .cs-box__top{background:rgba(247,148,29,.85);border:1px solid var(--orange);box-shadow:0 0 14px rgba(247,148,29,.45)}
.cs-stand3d .cs-box__top span{font-size:17px}

/* Nidd stage — taller, brighter platform */
.cs-stage3d .cs-box__side{background:linear-gradient(rgba(247,148,29,.7),rgba(247,148,29,.3));
  border:1px solid var(--orange);box-shadow:0 0 16px rgba(247,148,29,.3)}
.cs-stage3d .cs-box__top{background:rgba(247,148,29,.92);border:1px solid var(--orange);box-shadow:0 0 20px rgba(247,148,29,.5)}
.cs-stage3d .cs-box__top span{font-size:18px;letter-spacing:.12em}

/* Nidd chairs — short, cool-toned seats */
.cs-chair3d .cs-box__side{background:linear-gradient(rgba(220,230,247,.45),rgba(180,196,224,.25));
  border:1px solid rgba(220,230,247,.35)}
.cs-chair3d .cs-box__top{background:rgba(220,230,247,.6);border:1px solid rgba(220,230,247,.4)}

/* doorways — openings in the walls + a swing arc on the floor */
.cs-doorway{fill:#0a1430;stroke:rgba(247,148,29,.75);stroke-width:1.6}
.cs-swing{fill:none;stroke:rgba(247,148,29,.5);stroke-width:1.6;stroke-dasharray:4 5}

/* stage + chairs */
.cs-stageblock{fill:rgba(247,148,29,.5);stroke:var(--orange);stroke-width:2}
.cs-stage__t{fill:#11203f;font-family:'Poppins';font-weight:800;font-size:18px;letter-spacing:.12em;text-anchor:middle}
.cs-chair{fill:rgba(220,230,247,.55);stroke:rgba(255,255,255,.25);stroke-width:.6}
.cs-seat__t{fill:#9fb0cf;font-family:'Inter';font-size:12px;font-weight:600;letter-spacing:.08em;text-anchor:middle}

/* walk route — JS draws it as you scroll */
.cs-route{fill:none;stroke:var(--orange);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(247,148,29,.6))}
.cs-route--ghost{stroke:rgba(247,148,29,.22);stroke-width:4;stroke-dasharray:3 9;filter:none}

/* "you are here" marker — where the viewer stands (≈72% down) */
.cs-here{position:absolute;top:72%;left:50%;transform:translate(-50%,-50%);z-index:5;pointer-events:none}
.cs-here span{display:block;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--orange);box-shadow:0 0 0 6px rgba(247,148,29,.25)}
.cs-here::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 0 rgba(247,148,29,.5);animation:csPulse 1.8s ease-out infinite}
@keyframes csPulse{0%{box-shadow:0 0 0 0 rgba(247,148,29,.5)}70%{box-shadow:0 0 0 26px rgba(247,148,29,0)}100%{box-shadow:0 0 0 0 rgba(247,148,29,0)}}

/* ---------- Captions (large left info panel) ---------- */
.cs-captions{position:absolute;left:0;top:0;bottom:0;z-index:6;width:min(44vw,580px);padding:48px 56px;
  background:linear-gradient(155deg,rgba(14,35,79,.95),rgba(6,15,34,.96));backdrop-filter:blur(12px);
  border-right:1px solid var(--line);box-shadow:30px 0 80px -30px rgba(0,0,0,.85)}
.cs-cap{position:absolute;left:56px;right:56px;top:50%;opacity:0;transform:translateY(calc(-50% + 20px));
  transition:opacity .55s var(--ease),transform .55s var(--ease);pointer-events:none}
.cs-cap.is-active{opacity:1;transform:translateY(-50%);pointer-events:auto}
.cs-cap__eyebrow{display:inline-block;color:var(--orange);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.84rem;margin-bottom:16px}
.cs-cap h2{font-family:'Poppins';font-size:clamp(2rem,3.4vw,2.9rem);font-weight:700;letter-spacing:-.015em;line-height:1.04}
.cs-cap p{color:var(--muted);font-size:1.18rem;line-height:1.65;margin:18px 0 0}
.cs-cap strong{color:var(--text)}

/* exhibitor blurb: logo on top, then name + who's attending */
.cs-cap__exh{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:2px}
.cs-cap__logo{height:48px;width:auto;max-width:200px;object-fit:contain;object-position:left center;filter:brightness(0) invert(1)}
.cs-cap__meta{min-width:0;width:100%}
.cs-cap__meta h2{font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.04}
.cs-cap__who{color:var(--muted);font-size:1.04rem;margin:8px 0 0}
.cs-cap__who span{display:inline-block;color:var(--orange);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;margin-right:10px;vertical-align:1px}
.cs-cap__exh + p{font-size:1.12rem;margin-top:20px}

/* keynote session card: big time badge + title + speaker */
.cs-cap__time{flex:none;align-self:flex-start;font-family:'Poppins',sans-serif;font-weight:800;font-size:1.5rem;
  color:var(--orange);background:rgba(247,148,29,.12);border:1px solid rgba(247,148,29,.45);
  border-radius:12px;padding:.32em .6em;line-height:1;letter-spacing:.01em}
.cs-cap--keynote .cs-cap__exh{flex-direction:row;align-items:center;gap:18px}

.cs-progress{position:absolute;left:56px;right:56px;bottom:34px;height:5px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.cs-progress span{display:block;height:100%;width:0;background:var(--orange);border-radius:99px}

.cs-scrollhint{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;transition:opacity .4s}
.cs-scrollhint svg{animation:csBob 1.6s var(--ease) infinite}
@keyframes csBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ---------- Outro ---------- */
.cs-outro{text-align:center}
.cs-outro__inner{max-width:680px;margin:0 auto}
.cs-outro h2{font-size:clamp(1.8rem,3.6vw,2.7rem);letter-spacing:-.02em;margin-bottom:16px}
.cs-outro__cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .cs-body .nav__menu{display:flex;margin-left:auto;gap:14px}
  .cs-body .nav__links{display:none}
  .cs-body .nav__burger{display:none}
  .cs-captions{left:0;right:0;top:auto;bottom:0;width:auto;height:auto;min-height:48vh;padding:26px 22px 34px;
    border-right:none;border-top:1px solid var(--line);box-shadow:0 -20px 50px -24px rgba(0,0,0,.85)}
  /* anchor text to the top of the panel so all of it stays inside the box */
  .cs-cap{left:22px;right:22px;top:28px;bottom:auto;transform:translateY(16px)}
  .cs-cap.is-active{transform:none}
  .cs-cap h2{font-size:clamp(1.5rem,6vw,2rem)}
  .cs-cap p{font-size:1.02rem}
  .cs-cap__exh{gap:14px}
  .cs-cap__exh + p{font-size:1rem;margin-top:14px}
  .cs-cap__logo{height:42px}
  /* keynote cards stack on mobile (time badge above the title) */
  .cs-cap--keynote .cs-cap__exh{flex-direction:column;align-items:flex-start;gap:12px}
  .cs-progress{left:22px;right:22px;bottom:18px}
  .cs-scrollhint{display:none}
}
@media (max-width:560px){
  .cs-hero{min-height:80vh}
}