/* ═══ QOL · image-led product intro pages (/sypher, /gamercodes, /animaker) ═══
   Loads after brand.css (header, footer, .wrap, tokens). Each page sets its accent on <body>:
   --ac (accent), --ac-hi (light tint for text on dark), --visit-grad / --visit-fg (CTA fill).
   Glass/opal surfaces, ease cubic-bezier(.16,1,.3,1), domino reveals, 2px lift + gloss sweep. */
.pi{--ease:cubic-bezier(.16,1,.3,1);--edge:rgba(170,200,255,.14);--edge2:color-mix(in srgb,var(--ac) 46%,transparent);
  --glass:rgba(255,255,255,.04);--glass2:rgba(255,255,255,.075);--txt:#eef2fb;--mut:rgba(226,234,250,.72);overflow-x:clip}
.pi .wrap{max-width:1180px}
.pi img{max-width:100%}

/* ── glass primitive ── */
.g{position:relative;overflow:hidden;border:1px solid var(--edge);border-radius:22px;
  background:linear-gradient(160deg,var(--glass2),var(--glass) 55%,color-mix(in srgb,var(--ac) 7%,transparent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 22px 60px -30px rgba(0,0,0,.85);
  transition:transform .6s var(--ease),border-color .6s var(--ease),box-shadow .6s var(--ease)}
.g::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;pointer-events:none;z-index:3;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.14),transparent);transform:skewX(-18deg);opacity:0;
  transition:left .9s var(--ease),opacity .4s var(--ease)}
.g.hov:hover{transform:translateY(-2px);border-color:var(--edge2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 26px 64px -26px color-mix(in srgb,var(--ac) 55%,transparent)}
.g.hov:hover::after{left:120%;opacity:1}

/* ── hero ── */
.pi-hero{position:relative;isolation:isolate;text-align:center;padding:150px 0 150px;min-height:min(94vh,900px);
  display:flex;align-items:center;overflow:hidden}
.pi-hero .bg{position:absolute;inset:0;z-index:-2}
.pi-hero .bg img{width:100%;height:100%;object-fit:cover;opacity:.46;transform:scale(1.04);filter:saturate(1.08)}
.pi-hero .bg.soft img{filter:blur(6px) saturate(1.1);opacity:.4;transform:scale(1.1)}
.pi-hero .bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 50% 42%,rgba(7,10,20,.35),rgba(7,10,20,.82) 78%),
    linear-gradient(180deg,rgba(7,10,20,.7) 0,rgba(7,10,20,.25) 30%,rgba(7,10,20,.55) 70%,#070a14 100%)}
.pi-hero .glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(42% 36% at 50% 38%,color-mix(in srgb,var(--ac) 24%,transparent),transparent 70%)}
.pi-hero .wrap{position:relative}
.pi-mark{display:block;margin:0 auto 22px;height:92px;width:auto;filter:drop-shadow(0 10px 30px color-mix(in srgb,var(--ac) 55%,transparent))}
.pi-mark.tall{height:132px}
.pi-word{display:inline-block;margin:0 0 22px;font-weight:800;font-size:26px;letter-spacing:.14em;color:#fff}
.pi-word b{color:var(--ac-hi);font-weight:800}
.pi-chip{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;font-size:11.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ac-hi);background:rgba(7,10,20,.55);border:1px solid var(--edge2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pi-chip i{width:7px;height:7px;border-radius:50%;background:var(--ac);box-shadow:0 0 12px var(--ac)}
.pi-hero h1{margin:22px auto 0;max-width:15ch;font-size:clamp(40px,7.2vw,92px);line-height:1.02;letter-spacing:-.035em;font-weight:800;
  background:linear-gradient(176deg,#fff 30%,color-mix(in srgb,var(--ac-hi) 70%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent}
.pi-dek{margin:22px auto 0;max-width:600px;font-size:clamp(16.5px,1.6vw,19.5px);line-height:1.6;color:var(--mut)}
.pi-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}

/* buttons */
.pi-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:14px;
  font-weight:700;font-size:15.5px;letter-spacing:.005em;overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease)}
.pi-btn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.42) 50%,transparent 68%);transform:translateX(-135%);transition:transform .7s var(--ease)}
.pi-btn.p{color:var(--visit-fg);background:var(--visit-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 14px 36px -12px color-mix(in srgb,var(--ac) 80%,transparent)}
.pi-btn.s{color:var(--txt);background:rgba(255,255,255,.06);border:1px solid var(--edge);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pi-btn:hover{transform:translateY(-2px)}
.pi-btn:hover::before{transform:translateX(135%)}
.pi-btn.s:hover{border-color:var(--edge2)}
.pi-btn .arr{transition:transform .5s var(--ease)}
.pi-btn:hover .arr{transform:translateX(3px)}
.pi-btn:active{transform:translateY(0) scale(.985);transition-duration:.08s}

/* focus — every interactive element */
.pi a:focus-visible,.pi button:focus-visible,header a:focus-visible,footer a:focus-visible{outline:2px solid var(--ac-hi);outline-offset:3px;border-radius:10px}

/* ── the preview stage (video) ── */
.pi-stagewrap{position:relative;z-index:2;margin-top:-110px}
.pi-stage{padding:10px;border-radius:30px}
.pi-screen{position:relative;aspect-ratio:16/9;border-radius:21px;overflow:hidden;background:#05080f var(--still) center/cover no-repeat}
.pi-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:transparent}
/* .novid only hides the pause button: a missing video renders transparent, so the contract poster (or, if that is missing too, the local still behind it) shows */
.pi-stagecap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 10px 4px 12px}
.pi-stagecap span{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(226,234,250,.6)}
.pi-pause{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;cursor:pointer;
  font:600 12.5px/1 var(--sans);color:var(--txt);background:rgba(255,255,255,.06);border:1px solid var(--edge);transition:border-color .4s var(--ease),background .4s var(--ease)}
.pi-pause:hover{border-color:var(--edge2);background:rgba(255,255,255,.1)}
.pi-pause[hidden]{display:none}
.pi-pause svg{width:12px;height:12px;fill:currentColor}

/* ── proof strip ── */
.pi-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px auto 0;max-width:860px}
.pi-stat{padding:20px 18px;text-align:center}
.pi-stat b{display:block;font-size:clamp(26px,3.2vw,36px);font-weight:800;letter-spacing:-.02em;color:#fff}
.pi-stat span{display:block;margin-top:4px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(226,234,250,.62)}

/* ── sections ── */
.pi-sec{padding:110px 0 0}
.pi-head{text-align:center;max-width:720px;margin:0 auto 40px}
.pi-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ac-hi)}
.pi-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--ac);box-shadow:0 0 10px var(--ac)}
.pi-head h2{margin:14px 0 0;font-size:clamp(30px,4.6vw,56px);line-height:1.04;letter-spacing:-.03em;font-weight:800;color:#fff}
.pi-head p{margin:16px auto 0;max-width:560px;font-size:17px;line-height:1.6;color:var(--mut)}

/* framed screenshot / render with caption */
.pi-shot{margin:0;padding:0}
.pi-shot .frame{position:relative;overflow:hidden;border-radius:21px}
.pi-shot img{display:block;width:100%;height:auto;transition:transform 1.2s var(--ease)}
.pi-shot.hov:hover img{transform:scale(1.025)}
.pi-shot.pad{padding:10px;border-radius:30px}
.pi-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:56px 24px 20px;text-align:left;
  background:linear-gradient(180deg,transparent,rgba(5,8,15,.78) 46%,rgba(5,8,15,.94))}
.pi-cap b{display:block;font-size:19px;font-weight:700;letter-spacing:-.01em;color:#fff}
.pi-cap span{display:block;margin-top:5px;max-width:520px;font-size:14.5px;line-height:1.5;color:rgba(232,238,252,.84)}
.pi-under{padding:16px 8px 6px;text-align:center}
.pi-under b{display:block;font-size:18px;font-weight:700;color:#fff;letter-spacing:-.01em}
.pi-under span{display:block;margin:6px auto 0;max-width:620px;font-size:15px;line-height:1.55;color:var(--mut)}

.pi-duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pi-quad{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pi-quad .frame{aspect-ratio:16/10}
.pi-quad .frame img{width:100%;height:100%;object-fit:cover}

/* roster / gallery grids */
.pi-roster{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pi-fig{margin:0;padding:8px;border-radius:22px}
.pi-fig .frame{border-radius:16px;aspect-ratio:3/4;overflow:hidden;background:#071226}
.pi-fig img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.pi-fig:hover img{transform:scale(1.04)}
.pi-fig figcaption{padding:12px 6px 6px;text-align:center;font-size:14.5px;font-weight:700;color:#fff}
.pi-fig figcaption em{display:block;margin-top:3px;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(226,234,250,.55)}
.pi-worlds{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pi-worlds .pi-fig .frame{aspect-ratio:16/9}
.pi-cast{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:26px 22px 0;border-radius:28px;align-items:end;
  background:radial-gradient(80% 90% at 50% 100%,color-mix(in srgb,var(--ac) 26%,transparent),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.06))}
.pi-cast img{width:100%;height:auto;display:block;transform-origin:50% 100%;transition:transform .7s var(--ease)}
.pi-cast img:hover{transform:translateY(-6px) scale(1.03)}

/* end CTA */
.pi-end{margin-top:120px;text-align:center;padding:88px 28px;border-radius:30px}
.pi-end .bgimg{position:absolute;inset:0;z-index:0}
.pi-end .bgimg img{width:100%;height:100%;object-fit:cover;opacity:.32}
.pi-end .bgimg::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 90% at 50% 50%,rgba(7,10,20,.55),rgba(7,10,20,.9))}
.pi-end>*:not(.bgimg){position:relative;z-index:2}
.pi-end h3{margin:0;font-size:clamp(32px,5vw,60px);line-height:1.04;letter-spacing:-.03em;font-weight:800;color:#fff}
.pi-end p{margin:16px auto 0;max-width:520px;font-size:17px;line-height:1.6;color:var(--mut)}
.pi-more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0 100px}
.pi-more a{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:18px;padding:12px;border-radius:20px}
.pi-more .th{aspect-ratio:4/3;border-radius:12px;overflow:hidden}
.pi-more .th img{width:100%;height:100%;object-fit:cover;display:block}
.pi-more .mk{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ac-hi)}
.pi-more h4{margin:6px 0 0;font-size:17px;font-weight:700;color:#fff;letter-spacing:-.01em}

/* reveal: snap-in, domino stagger set by product-intro.js */
.rv{opacity:0;transform:translateY(18px) scale(.985);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ── tablet (≤1023) ── */
@media (max-width:1023px){
  .pi .wrap{padding:0 32px}
  .pi-hero{padding:130px 0 140px;min-height:0}
  .pi-sec{padding-top:90px}
  .pi-roster{grid-template-columns:repeat(4,1fr);gap:12px}
  .pi-fig{padding:6px}
  .pi-worlds{grid-template-columns:repeat(2,1fr)}
  .pi-cast{grid-template-columns:repeat(6,1fr);padding:20px 14px 0}
  .pi-more a{grid-template-columns:96px 1fr;gap:14px}
}
/* ── phone (≤767) ── */
@media (max-width:767px){
  .pi .wrap{padding:0 16px}
  .pi-hero{padding:112px 0 120px}
  .pi-mark{height:72px}.pi-mark.tall{height:104px}
  .pi-hero h1{font-size:clamp(38px,11vw,52px)}
  .pi-ctas{flex-direction:column;align-items:stretch;max-width:340px;margin-left:auto;margin-right:auto}
  .pi-stagewrap{margin-top:-90px}
  .pi-stage{padding:7px;border-radius:26px;max-width:min(100%,calc(74vh * 9 / 16 + 14px));margin:0 auto}
  .pi-screen{aspect-ratio:9/16;border-radius:20px;background-image:var(--still-9)}
  .pi-stats{grid-template-columns:repeat(3,1fr);gap:8px}
  .pi-stat{padding:14px 6px}
  .pi-stat span{font-size:10px;letter-spacing:.1em}
  .pi-sec{padding-top:76px}
  .pi-head{margin-bottom:28px}
  .pi-head p{font-size:16px}
  .pi-duo,.pi-quad{grid-template-columns:1fr;gap:14px}
  .pi-roster{grid-template-columns:repeat(2,1fr);gap:10px}
  .pi-worlds{grid-template-columns:repeat(2,1fr);gap:10px}
  .pi-cast{grid-template-columns:repeat(3,1fr);gap:6px;padding:16px 10px 0}
  .pi-cap{padding:44px 16px 14px}
  .pi-cap b{font-size:17px}.pi-cap span{font-size:13.5px}
  .pi-end{margin-top:90px;padding:60px 18px}
  .pi-end .bgimg img{opacity:.12;filter:blur(3px)} /* the screenshot's own text read through the CTA headline at .32 */
  .pi-end .pi-ctas{max-width:none}
  .pi-more{grid-template-columns:1fr;margin-bottom:70px}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .g,.g::after,.pi-btn,.pi-btn::before,.pi-shot img,.pi-fig img,.pi-cast img{transition:none}
}

/* header pill on these pages: brand.css mixes the accent 62% with white, which left white text under 3:1 on the
   light blue and green accents. Use each page's CTA fill and ink instead (measured ≥4.5:1 at both gradient stops). */
header .hvisit{background:var(--visit-grad);color:var(--visit-fg);text-shadow:none}

/* short phones (iPhone SE 1st gen is 320x568): the hero CTA row sat at 529-616px, under the fold or under the
   reveal line, so it showed nothing until a scroll. Tighten the hero only when the screen is short. (2026-10-07) */
@media (max-width:767px) and (max-height:620px){
  .pi-hero{padding-top:82px}
  .pi-mark{height:56px;margin-bottom:14px}.pi-mark.tall{height:80px}
  .pi-hero h1{margin-top:14px}
  .pi-ctas{margin-top:22px}
}