/*
 * ReadySyte homepage 3D hero.
 * Nothing here applies until assets/js/hero-3d.js adds .hero--3d to the hero
 * (WebGL available, no reduced motion, no data saver). Without it the static hero shows.
 *
 * Desktop: the hero is a tall scroll track; .hero-stage pins under the header,
 *          the copy sits over the scene on the left, the stage rail on the right.
 * Mobile:  the copy stays in normal flow; the scene below it pins and plays as you scroll.
 */

.hero-scene { display: none; }

.hero.hero--3d { height: 380vh; overflow: visible; overflow: clip; }
.hero.hero--3d::before { display: none; }
.hero--3d .ticket { display: none; }

.hero--3d .hero-stage {
  position: sticky;
  top: calc(var(--hdr, 69px) + env(safe-area-inset-top, 0px));
  height: calc(100vh - var(--hdr, 69px));
  height: calc(100svh - var(--hdr, 69px));
  overflow: hidden;
}
.hero--3d .hero-scene { display: block; position: absolute; inset: 0; }
.hero--3d .hero-scene-pin { position: absolute; inset: 0; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Scrim keeps the copy readable over the scene */
.hero--3d .hero-scene-pin::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(90deg, rgba(15,43,76,.94) 0%, rgba(15,43,76,.66) 36%, rgba(15,43,76,0) 60%),
    linear-gradient(0deg, rgba(15,43,76,.55) 0%, rgba(15,43,76,0) 26%);
}

.hero--3d .hero-grid {
  position: relative; z-index: 2; height: 100%;
  grid-template-columns: minmax(0, 560px);
  align-content: center;
  padding-block: 32px;
  pointer-events: none;
}
.hero--3d .hero-grid > * { pointer-events: auto; }

/* Stage rail */
.hero-rail {
  position: absolute; z-index: 3;
  top: 50%; transform: translateY(-50%);
  right: max(24px, env(safe-area-inset-right, 0px), calc((100% - var(--wrap)) / 2 + 16px));
  width: 260px;
  padding: 14px 10px 12px;
  border-radius: 6px;
  background: rgba(11,34,64,.72);
  border: 1px solid rgba(175,189,206,.16);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero-rail-head {
  margin: 0; padding: 0 12px 10px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-navy-muted);
}
.hero-rail-head span { display: block; color: var(--orange-light); margin-top: 4px; letter-spacing: .06em; }
.hero-rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hero-step {
  width: 100%;
  display: grid; grid-template-columns: 34px 1fr; gap: 2px 10px; align-items: baseline;
  padding: 10px 12px; border-radius: 4px;
  background: transparent; border: 1px solid transparent;
  color: var(--on-navy-muted); font: inherit; text-align: left; cursor: pointer;
  transition: background .3s, border-color .3s, color .3s;
}
.hero-step .n { font-family: var(--f-mono); font-size: 12px; }
.hero-step .t { font-family: var(--f-display); font-stretch: 100%; font-weight: 700; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; }
.hero-step .d { grid-column: 2; font-size: 13px; line-height: 1.4; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s, opacity .4s; }
.hero-step:hover { color: var(--on-navy); }
.hero-step.is-done { color: #D6DEE9; }
.hero-step.is-done .n, .hero-step.is-active .n { color: var(--orange); }
.hero-step.is-active { background: rgba(15,43,76,.95); border-color: rgba(242,107,29,.5); color: #fff; }
.hero-step.is-active .d { max-height: 64px; opacity: 1; color: var(--on-navy-muted); }
.hero-rail-meter { height: 3px; margin: 10px 12px 0; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.hero-rail-meter i { display: block; height: 100%; width: 0; background: var(--orange); }

@media (max-width: 1100px) {
  .hero-rail { width: 220px; }
  .hero--3d .hero-grid { grid-template-columns: minmax(0, 470px); }
}

/* Mobile: copy in flow, scene pins below it */
@media (max-width: 760px) {
  .hero.hero--3d { height: auto; }
  .hero--3d .hero-stage { position: static; height: auto; overflow: visible; }
  .hero--3d .hero-grid { height: auto; grid-template-columns: 1fr; padding-block: 48px 28px; }
  .hero--3d .hero-scene { position: relative; inset: auto; height: 300vh; }
  .hero--3d .hero-scene-pin {
    position: sticky; inset: auto;
    top: calc(var(--hdr, 69px) + env(safe-area-inset-top, 0px));
    height: calc(100vh - var(--hdr, 69px));
    height: calc(100svh - var(--hdr, 69px));
  }
  .hero--3d .hero-scene-pin::after {
    background:
      linear-gradient(180deg, rgba(15,43,76,.85) 0%, rgba(15,43,76,0) 18%),
      linear-gradient(0deg, rgba(15,43,76,.85) 0%, rgba(15,43,76,0) 30%);
  }
  .hero-rail {
    top: auto; transform: none; width: auto; padding: 0; background: none; border: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    left: max(16px, env(safe-area-inset-left, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .hero-rail-head { padding: 0 2px 8px; text-align: center; }
  .hero-rail ol { flex-direction: row; gap: 6px; }
  .hero-rail li { flex: 1; min-width: 0; }
  .hero-step { grid-template-columns: 1fr; gap: 0; padding: 8px 2px; text-align: center; background: rgba(15,43,76,.75); border-color: rgba(255,255,255,.08); }
  .hero-step .t { font-size: 11.5px; letter-spacing: 0; font-stretch: 88%; overflow: hidden; text-overflow: ellipsis; }
  .hero-step .n { font-size: 10px; }
  .hero-step .d { display: none; }
  .hero-rail-meter { display: none; }
}