/* =====================================================================
   ViaCraft Studios — Scroll driven laptop hero
   The lid opens as you scroll, code streams across the screen and
   resolves into the ViaCraft Studios brand mark.
   ===================================================================== */

.hero {
  position: relative;
  --hero-track: 360vh;
  --lid: -104;        /* lid angle in deg, set by JS  */
  --cam: -16;         /* camera tilt in deg           */
  --zoom: 0.86;       /* laptop scale                 */
  --lift: -18;        /* vertical offset, % of width  */
  --power: 0;         /* screen backlight 0..1        */
  --copy: 1;          /* headline visibility 0..1     */
  --reveal: 0;        /* brand reveal 0..1            */
  --cta: 0;           /* CTA visibility 0..1          */
}

.hero__track {
  position: relative;
  height: var(--hero-track);
}

.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

/* ---- ambient background ------------------------------------------- */
.hero__aura {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(760px 500px at 50% 18%, rgba(30, 155, 255, calc(0.1 + var(--power) * 0.16)), transparent 66%),
    radial-gradient(900px 600px at 15% 90%, rgba(122, 92, 255, 0.12), transparent 62%);
}

.hero__beam {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(1100px, 120vw);
  height: 460px;
  z-index: -1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(30, 155, 255, 0.5), transparent 62%);
  filter: blur(70px);
  opacity: calc(var(--power) * 0.5);
}

.hero__rings {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1180px, 150vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background:
    repeating-radial-gradient(circle at center,
      rgba(255, 255, 255, 0.045) 0 1px,
      transparent 1px 84px);
  -webkit-mask-image: radial-gradient(circle at center, #000 10%, transparent 68%);
  mask-image: radial-gradient(circle at center, #000 10%, transparent 68%);
  animation: ringSpin 60s linear infinite;
}

@keyframes ringSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ---- headline ------------------------------------------------------- */
/* The headline is taken out of flow so the laptop can stay optically
   centred in the stage no matter how far the lid has opened. */
.hero__copy {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  text-align: center;
  margin-inline: auto;
  max-width: 880px;
  padding: calc(var(--header-h) + clamp(8px, 3.4vh, 38px)) var(--gutter) 0;
  opacity: var(--copy);
  transform: translateY(calc((1 - var(--copy)) * -46px));
  pointer-events: none;
}

.hero__copy .eyebrow { margin-bottom: 16px; }

.hero__title {
  font-size: clamp(1.85rem, 4.9vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

.hero__title em {
  font-style: normal;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__sub {
  font-size: clamp(0.92rem, 1.3vw, 1.08rem);
  color: var(--muted);
  max-width: 620px;
  margin-inline: auto;
}

/* ---- stage / laptop ------------------------------------------------- */
.hero__scene {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  place-items: center;
  perspective: 1900px;
  perspective-origin: 50% 42%;
}

.laptop {
  /* the 74vh term keeps the whole machine inside short viewports */
  --w: min(880px, 70vw, calc(102vh - 150px));
  position: relative;
  width: var(--w);
  transform-style: preserve-3d;
  transform:
    translateY(calc(var(--lift) * var(--w) / 100))
    rotateX(calc(var(--cam) * 1deg))
    scale(var(--zoom));
  will-change: transform;
}

/* --- lid ------------------------------------------------------------- */
.laptop__lid {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10.2;
  transform-origin: 50% 100%;
  transform: rotateX(calc(var(--lid) * 1deg));
  transform-style: preserve-3d;
  will-change: transform;
}

.laptop__face {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--w) * 0.018);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* screen side */
.laptop__face--screen {
  transform: translateZ(0.6px);
  padding: calc(var(--w) * 0.013) calc(var(--w) * 0.013) calc(var(--w) * 0.028);
  background: linear-gradient(165deg, #2b3444 0%, #161c27 42%, #0c111a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 34px 70px -28px rgba(0, 0, 0, 0.9);
}

.laptop__cam {
  position: absolute;
  top: calc(var(--w) * 0.0052);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--w) * 0.006);
  height: calc(var(--w) * 0.006);
  border-radius: 50%;
  background: #05070c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
  z-index: 4;
}

.laptop__cam::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: rgba(30, 155, 255, 0.9);
  opacity: calc(var(--power) * 0.9);
}

/* back side (aluminium shell) */
.laptop__face--back {
  transform: rotateY(180deg) translateZ(0.6px);
  display: grid;
  place-items: center;
  background:
    linear-gradient(150deg, #333c4c 0%, #1d232f 38%, #10151e 70%, #262e3c 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 2px 0 rgba(255, 255, 255, 0.16);
}

.laptop__face--back::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(112deg,
    rgba(255, 255, 255, 0.035) 0 2px,
    transparent 2px 5px);
  opacity: 0.7;
}

.laptop__badge {
  position: relative;
  width: 22%;
  opacity: 0.9;
  filter: drop-shadow(0 0 22px rgba(30, 155, 255, calc(0.25 + var(--power) * 0.55)));
}

/* --- screen ---------------------------------------------------------- */
.screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--w) * 0.008);
  overflow: hidden;
  background: #04060b;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.screen::after { /* backlight bloom */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(120% 80% at 50% 0%, rgba(30, 155, 255, 0.14), transparent 60%);
  opacity: var(--power);
}

.screen__off { /* dark overlay while the lid is still closed */
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #04060b;
  opacity: calc(1 - var(--power));
  pointer-events: none;
}

.screen__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(var(--w) * 0.009);
  padding: calc(var(--w) * 0.009) calc(var(--w) * 0.014);
  background: linear-gradient(180deg, #10161f, #0a0f16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--font-mono);
  font-size: clamp(6px, calc(var(--w) * 0.0132), 12px);
  color: #5d6b81;
  opacity: var(--power);
}

.screen__dots { display: flex; gap: calc(var(--w) * 0.006); }

.screen__dots i {
  width: calc(var(--w) * 0.0092);
  height: calc(var(--w) * 0.0092);
  border-radius: 50%;
  background: #2b3442;
}

.screen__dots i:nth-child(1) { background: #ff5f57; }
.screen__dots i:nth-child(2) { background: #febc2e; }
.screen__dots i:nth-child(3) { background: #28c840; }

.screen__tab {
  padding: calc(var(--w) * 0.004) calc(var(--w) * 0.012);
  border-radius: 5px;
  background: rgba(30, 155, 255, 0.12);
  color: #7cc6ff;
  border: 1px solid rgba(30, 155, 255, 0.22);
}

.screen__path { margin-left: auto; opacity: 0.6; }

.screen__body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* code area */
.code {
  position: absolute;
  inset: 0;
  padding: calc(var(--w) * 0.014) calc(var(--w) * 0.018);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: clamp(6.5px, calc(var(--w) * 0.0148), 14px);
  line-height: 1.62;
  color: #93a4bd;
  opacity: calc(var(--power) * (1 - var(--reveal)));
  transition: opacity 0.12s linear;
}

.code__inner { will-change: transform; }

.code__ln {
  display: flex;
  gap: calc(var(--w) * 0.014);
  white-space: pre;
}

.code__no {
  flex: none;
  width: 2.1em;
  text-align: right;
  color: #303c4e;
  user-select: none;
}

.code__tx { white-space: pre-wrap; word-break: break-word; }

.t-key { color: #ff79c6; }
.t-fn { color: #57c1ff; }
.t-str { color: #7ee787; }
.t-num { color: #ffb86c; }
.t-com { color: #4b5769; font-style: italic; }
.t-var { color: #e6edf7; }
.t-op { color: #8ba0bb; }
.t-cls { color: #ffd479; }
.t-brand { color: #57c1ff; font-weight: 700; text-shadow: 0 0 12px rgba(30, 155, 255, 0.8); }

.caret {
  display: inline-block;
  width: 0.55em;
  height: 1.02em;
  vertical-align: -0.18em;
  background: #57c1ff;
  box-shadow: 0 0 10px rgba(30, 155, 255, 0.9);
  animation: caretBlink 1s steps(2, start) infinite;
}

@keyframes caretBlink { 50% { opacity: 0; } }

/* brand reveal layer */
.screen__reveal {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(var(--w) * 0.016);
  text-align: center;
  padding: calc(var(--w) * 0.02);
  opacity: var(--reveal);
  transform: scale(calc(0.94 + var(--reveal) * 0.06));
  pointer-events: none;
  background: radial-gradient(70% 90% at 50% 50%, rgba(9, 20, 38, 0.96), rgba(4, 6, 11, 0.99));
}

.screen__reveal img {
  width: min(74%, calc(var(--w) * 0.6));
  filter: drop-shadow(0 0 calc(var(--w) * 0.035) rgba(30, 155, 255, 0.55));
}

.screen__reveal p {
  font-family: var(--font-mono);
  font-size: clamp(6px, calc(var(--w) * 0.0135), 13px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #7f92ac;
}

.screen__reveal .ok {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: clamp(6px, calc(var(--w) * 0.0128), 12px);
  color: #7ee787;
  letter-spacing: 0.1em;
}

.screen__reveal .ok::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: #7ee787;
  box-shadow: 0 0 10px #7ee787;
}

/* scan sweep across the screen while compiling */
.screen__scan {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: calc(var(--power) * 0.55);
  background: repeating-linear-gradient(180deg,
    rgba(255, 255, 255, 0.028) 0 1px,
    transparent 1px 3px);
  mix-blend-mode: overlay;
}

.screen__glare {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(118deg,
    rgba(255, 255, 255, 0.11) 0%,
    rgba(255, 255, 255, 0.03) 24%,
    transparent 46%);
  opacity: calc(0.45 + (1 - var(--power)) * 0.35);
}

/* --- deck ------------------------------------------------------------- */
.laptop__deck {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9.6;
  /* the deck is folded away from the camera, so most of its layout
     height is reclaimed to keep the laptop optically centred */
  margin-bottom: calc(var(--w) * -0.36);
  transform-origin: 50% 0%;
  transform: rotateX(76deg);
  transform-style: preserve-3d;
  border-radius: 0 0 calc(var(--w) * 0.03) calc(var(--w) * 0.03);
  background:
    linear-gradient(180deg, #262e3b 0%, #1b222d 22%, #222a37 76%, #2c3542 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    inset 0 2px 0 rgba(255, 255, 255, 0.13);
  padding: calc(var(--w) * 0.05) calc(var(--w) * 0.055) calc(var(--w) * 0.03);
}

.laptop__hinge {
  position: absolute;
  top: calc(var(--w) * -0.004);
  left: 12%;
  right: 12%;
  height: calc(var(--w) * 0.009);
  border-radius: 999px;
  background: linear-gradient(180deg, #0b0f16, #1e2530);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.keys {
  display: grid;
  gap: calc(var(--w) * 0.007);
  margin-bottom: calc(var(--w) * 0.022);
}

.keys__row {
  display: grid;
  gap: calc(var(--w) * 0.007);
  grid-template-columns: repeat(var(--n, 14), 1fr);
}

.keys__row i {
  height: calc(var(--w) * 0.026);
  border-radius: calc(var(--w) * 0.004);
  background: linear-gradient(180deg, #10151d, #0a0e15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 1px 1px rgba(0, 0, 0, 0.5);
}

.keys__row i.wide { grid-column: span 4; }
.keys__row i.lit {
  background: linear-gradient(180deg, #123049, #0c1c2c);
  box-shadow:
    inset 0 1px 0 rgba(120, 200, 255, 0.28),
    0 0 calc(var(--w) * 0.01) rgba(30, 155, 255, calc(var(--power) * 0.55));
}

.pad {
  width: 34%;
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  border-radius: calc(var(--w) * 0.006);
  background: linear-gradient(180deg, #171d27, #131922);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.laptop__lip {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: calc(var(--w) * -0.006);
  height: calc(var(--w) * 0.014);
  border-radius: 0 0 999px 999px;
  background: linear-gradient(180deg, #2c3542, #141a23);
}

.laptop__notch {
  position: absolute;
  left: 50%;
  bottom: calc(var(--w) * 0.002);
  transform: translateX(-50%);
  width: 12%;
  height: calc(var(--w) * 0.007);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
}

/* floor shadow + light spill */
.laptop__shadow {
  position: absolute;
  left: 50%;
  bottom: calc(var(--w) * -0.075);
  width: 86%;
  height: calc(var(--w) * 0.1);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.72), transparent 70%);
  filter: blur(26px);
  z-index: -1;
}

.laptop__spill {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 120%;
  height: 70%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(30, 155, 255, 0.45), transparent 66%);
  filter: blur(60px);
  opacity: calc(var(--power) * 0.7);
  z-index: -1;
  pointer-events: none;
}

/* ---- CTA under the laptop -------------------------------------------- */
.hero__cta {
  position: relative;
  z-index: 4;
  margin-top: clamp(18px, 4vh, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding-inline: var(--gutter);
  opacity: var(--cta);
  transform: translateY(calc((1 - var(--cta)) * 22px));
  pointer-events: var(--cta-pe, none);
}

/* ---- scroll cue ------------------------------------------------------- */
.hero__cue {
  margin-bottom: 250px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: var(--copy);
  transition: opacity 0.25s linear;
  pointer-events: none;
}

.hero__cue i {
  width: 24px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  position: relative;
}

.hero__cue i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 3px;
  height: 7px;
  border-radius: 3px;
  background: var(--brand);
  transform: translateX(-50%);
  animation: cueDrop 1.8s var(--e-in-out) infinite;
}

@keyframes cueDrop {
  0% { transform: translate(-50%, 0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-50%, 15px); opacity: 0; }
}

/* ---- phase rail ------------------------------------------------------- */
.hero__rail {
  position: absolute;
  right: clamp(12px, 2.6vw, 34px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: grid;
  gap: 16px;
  pointer-events: none;
}

.hero__rail li {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color var(--t-fast);
}

.hero__rail li b {
  font-weight: 400;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity var(--t-fast), transform var(--t-fast);
}

.hero__rail li::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: all var(--t-fast);
}

.hero__rail li.is-on { color: var(--brand-light); }
.hero__rail li.is-on b { opacity: 1; transform: none; }
.hero__rail li.is-on::after {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 12px var(--brand);
}

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero__rail { display: none; }
}

@media (max-width: 960px) {
  .hero { --hero-track: 320vh; }
  .laptop { --w: min(720px, 78vw, calc(102vh - 150px)); }
}

@media (max-width: 680px) {
  .hero { --hero-track: 290vh; }
  .laptop { --w: min(85vw, calc(102vh - 130px)); }
  .hero__scene { perspective: 1700px; }
  .hero__cue { font-size: 0.6rem; letter-spacing: 0.2em; }
}

@media (max-height: 640px) and (min-width: 681px) {
  .laptop { --w: min(560px, 72vw, calc(102vh - 130px)); }
}

/* Landscape phones: shrink aggressively so everything fits */
@media (max-height: 520px) {
  .hero__copy { display: none; }
  .laptop { --w: min(480px, 62vw, calc(106vh - 110px)); }
  .hero__cue { display: none; }
}

/* ---- fallbacks --------------------------------------------------------- */
.no-js .hero__track { height: auto; }
.no-js .hero__stage { position: static; height: auto; padding-block: 140px 80px; }
.no-js .hero { --lid: -4; --cam: 0; --zoom: 1; --lift: -2; --power: 1; --copy: 1; --reveal: 1; --cta: 1; --cta-pe: auto; }
.no-js .hero__cue { display: none; }

/* Reduced motion keeps the scroll-driven lid (the user drives it) but
   drops everything that moves on its own. */
@media (prefers-reduced-motion: reduce) {
  .hero { --hero-track: 240vh; }
  .hero__rings,
  .hero__cue i::after,
  .caret { animation: none; }
  .hero__cue i::after { opacity: 1; }
}