/* Joyavista website: scene layout & kinetic type (builds on base.css tokens) */

.scroll-track { position: relative; z-index: 0; pointer-events: none; }
#content.cinema { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.scene { position: absolute; inset: 0; padding: calc(var(--gutter) * 2.4) var(--gutter) calc(var(--gutter) * 1.1); display: flex; flex-direction: column; justify-content: flex-end; perspective: 1000px; }
.scene .inner { position: relative; width: 100%; }
.scene a, .scene button, .scene li, .scene .mail { pointer-events: auto; }
.scene .ln { display: block; transform-style: preserve-3d; }
.scene .w { display: inline-block; white-space: nowrap; transform-style: preserve-3d; }
.scene .ch { display: inline-block; transform-origin: 50% 60%; backface-visibility: hidden; }
.scene:not(.live) .ch { will-change: transform, opacity; }

.flash { position: fixed; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(60% 60% at 60% 45%, rgba(230,255,245,.9), rgba(29,207,151,.25) 45%, transparent 75%); opacity: 0; mix-blend-mode: screen; }

/* ---------- Scene navigator ---------- */
.scene-nav { position: fixed; right: calc(var(--gutter) * 0.6); top: 50%; transform: translateY(-50%); z-index: 12; display: flex; flex-direction: column; gap: 6px; }
.scene-nav button { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 6px 4px; font-family: var(--font); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }
.scene-nav button span { opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .3s; white-space: nowrap; }
.scene-nav button i { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--ink-faint); transition: all .35s; }
.scene-nav button:hover span, .scene-nav button:focus-visible span, .scene-nav button.on span { opacity: 1; transform: none; }
.scene-nav button.on { color: var(--ink); }
.scene-nav button.on i { background: var(--joya-green); border-color: var(--joya-green); box-shadow: 0 0 10px var(--joya-green); height: 18px; border-radius: 4px; }
.scene-nav button:focus-visible { outline: 1px solid var(--joya-green); outline-offset: 2px; }

/* ---------- 0 · What we make (opening) + 1 · Why: characters assemble, then shatter toward the camera ---------- */
.s0 .headline, .s1 .headline { font-size: clamp(42px, 5.4vw, 96px); line-height: .98; letter-spacing: -.025em; font-weight: 400; perspective: 900px; }
.s0 .headline span:last-child, .s1 .headline span:last-child, .s4 .closing span:last-child { color: inherit; -webkit-text-stroke: inherit; }
.s0 .headline .ln:last-child, .s1 .headline .ln:last-child { color: transparent; -webkit-text-stroke: 1px rgba(251,250,249,.85); }
.s0 .ch, .s1 .headline .ch {
  --a: clamp(0, calc(var(--in) * 2.2 - var(--i) / var(--n) * 1.2), 1);
  --b: clamp(0, calc(var(--out) * 1.7 - (1 - var(--i) / var(--n)) * 0.5), 1);
  transform: translate3d(calc(var(--rx) * var(--b) * 70vw), calc((1 - var(--a)) * .9em + var(--ry) * var(--b) * 70vh), calc((1 - var(--a)) * -300px + var(--b) * 900px))
             rotateX(calc((1 - var(--a)) * 80deg)) rotateY(calc(var(--rz) * var(--b) * 160deg)) rotateZ(calc(var(--rx) * var(--b) * 120deg));
  opacity: calc(var(--a) - var(--b) * 1.1);
}
.s1 .headline .ln:last-child .ch:not(.lock) { color: rgba(29,207,151,.75); -webkit-text-stroke: 0; }
.s0 .hint { position: absolute; right: 0; bottom: calc(var(--gutter) * -0.85); }
.s0 .eyebrow, .s0 .hint { opacity: calc(var(--in) * 1.5 - 0.4 - var(--out) * 3); transform: translateY(calc((1 - var(--in)) * 20px - var(--out) * 60px)); }

/* hero benefits: rise in after the headline, fan out toward the camera on exit */
.s1 .benefits { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(24px, 3.2vw, 44px); border-top: 1px solid var(--rule); max-width: 1120px; perspective: 900px; }
.s1 .benefits li { --a: clamp(0, calc(var(--in) * 2.6 - 1 - var(--i) * 0.12), 1); --b: clamp(0, calc(var(--out) * 2.2 - (3 - var(--i)) * 0.12), 1);
  padding: 18px 22px 0 0; opacity: calc(var(--a) - var(--b) * 1.3);
  transform: translate3d(calc(var(--b) * (var(--i) - 1.5) * 18vw), calc((1 - var(--a)) * 26px), calc(var(--b) * 700px)); }
.s1 .benefits li::before { content: ""; display: block; width: 9px; height: 9px; margin-bottom: 14px; background: var(--joya-green); clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%); box-shadow: 0 0 10px var(--joya-green); }
.s1 .benefits h3 { font-weight: 400; font-size: clamp(16px, 1.4vw, 21px); margin-bottom: 8px; }
.s1 .benefits p { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); max-width: 28ch; }

/* services cards (scene 0): rise out of the depth after the headline, then warp past the camera */
.s1 .section-label, .s2 .section-label, .s3 .section-label { opacity: calc(var(--in) * 1.4 - var(--out) * 2.5); }
.s0 .services { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); perspective: 900px; margin-top: clamp(22px, 3vw, 40px); }
.s0 .services li {
  --a: clamp(0, calc(var(--in) * 2.4 - 0.9 - var(--i) * 0.13), 1);
  --b: clamp(0, calc(var(--out) * 2 - (3 - var(--i)) * 0.15), 1);
  padding: 22px 24px 24px; border-right: 1px solid var(--rule); cursor: default; outline: none;
  transform: translate3d(0, calc((1 - var(--a)) * 30vh), calc((1 - var(--a)) * -700px + var(--b) * 1100px)) rotateX(calc((1 - var(--a)) * -55deg + var(--b) * 25deg));
  opacity: calc(var(--a) - var(--b) * 1.3);
  transition: background .4s;
}
.s0 .services li:first-child { padding-left: 0; }
.s0 .services li:last-child { border-right: 0; }
.s0 .services li.focus { background: linear-gradient(to top, rgba(29,207,151,.10), transparent 70%); }
.s0 .services .n { font-size: 11px; letter-spacing: .18em; color: var(--joya-green); display: block; margin-bottom: 18px; }
.s0 .services h3 { font-weight: 400; font-size: clamp(19px, 1.7vw, 27px); line-height: 1.05; letter-spacing: -.01em; margin-bottom: 12px; transition: color .35s; }
.s0 .services li.focus h3 { color: var(--joya-green); }
.s0 .services p { font-size: 14px; line-height: 1.5; color: var(--ink-soft); max-width: 26ch; }

/* ---------- 3 · The studio: a giant counting number behind the story ---------- */
.s3 .big-num { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.s3 .big-num span { font-size: clamp(260px, 46vw, 760px); line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(29,207,151,.38); background: linear-gradient(180deg, rgba(29,207,151,.10), transparent 70%); -webkit-background-clip: text; background-clip: text;
  transform: translate3d(8vw, -6vh, 0) scale(calc(0.7 + var(--in) * 0.3 + var(--out) * 1.2)); opacity: calc(var(--in) - var(--out) * 1.5); font-variant-numeric: tabular-nums; }
.s3 .stat-label { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 18px; opacity: calc(var(--in) * 1.5 - 0.3 - var(--out) * 3); }
.s3 .stat-label b { font-weight: 400; color: var(--joya-green); font-variant-numeric: tabular-nums; }
.s3 .founder { font-size: clamp(20px, 2.1vw, 32px); line-height: 1.35; color: var(--ink-soft); max-width: 36ch; }
.s3 .wd { display: inline-block;
  --a: clamp(0, calc(var(--in) * 2.2 - 0.6 - var(--i) * 0.012), 1);
  --b: clamp(0, calc(var(--out) * 2 - var(--i) * 0.012), 1);
  opacity: calc(var(--a) - var(--b) * 1.4); transform: translate3d(0, calc((1 - var(--a)) * .8em), 0) scale(calc(1 - var(--b) * 0.3)); }
.s3 .wd[data-em] { color: var(--ink); }

/* ---------- 4 · Contact: the closing line assembles from flying shards ---------- */
.s4 .inner { display: flex; flex-direction: column; gap: 22px; }
.s4 .closing { font-weight: 400; font-size: clamp(40px, 6.4vw, 110px); line-height: .98; letter-spacing: -.03em; perspective: 900px; }
.s4 .closing .ln:last-child { color: transparent; -webkit-text-stroke: 1px rgba(251,250,249,.85); }
.s4 .ch { --a: clamp(0, calc(var(--in) * 1.7 - (1 - var(--i) / var(--n)) * 0.6), 1);
  transform: translate3d(calc(var(--rx) * (1 - var(--a)) * 60vw), calc(var(--ry) * (1 - var(--a)) * 60vh), calc((1 - var(--a)) * -900px)) rotateZ(calc(var(--rz) * (1 - var(--a)) * 240deg)) rotateY(calc(var(--rx) * (1 - var(--a)) * 140deg));
  opacity: var(--a); }
.s4 .closing-line, .s4 .contact, .s4 .foot, .s4 .legal { --a2: clamp(0, calc(var(--in) * 2.4 - 1.4), 1); opacity: var(--a2); transform: translateY(calc((1 - var(--a2)) * 24px)); }
.s4 .closing-line { font-size: clamp(15px, 1.25vw, 18px); color: var(--ink-soft); max-width: 46ch; }
.s4 .contact { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.s4 .cta-label { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--joya-green); display: flex; align-items: center; gap: 12px; }
.s4 .cta-label::before { content: ""; width: 28px; height: 1px; background: var(--joya-green); }
.s4 .mail-big { font-size: clamp(26px, 3.6vw, 58px); line-height: 1.05; letter-spacing: -.02em; color: var(--ink); text-decoration: none; pointer-events: auto;
  background: linear-gradient(var(--joya-green), var(--joya-green)) 0 100% / 0 2px no-repeat; padding-bottom: 6px; transition: background-size .45s cubic-bezier(.2,.7,.2,1), color .3s; overflow-wrap: anywhere; }
.s4 .mail-big:hover, .s4 .mail-big:focus-visible { background-size: 100% 2px; color: #fff; outline: none; }
.s4 .contact-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.s4 .copy-mail { all: unset; pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font); font-size: 14px; color: var(--void); background: var(--ink); padding: 13px 20px; border-radius: 999px; transition: background .3s; }
.s4 .copy-mail svg { width: 16px; height: 16px; }
.s4 .copy-mail:hover, .s4 .copy-mail.done { background: var(--joya-green); }
.s4 .copy-mail:focus-visible { outline: 2px solid var(--joya-green); outline-offset: 3px; }
.s4 .note { font-size: 13px; color: var(--ink-soft); max-width: 36ch; }
.s4 .mail { font-size: 14px; color: var(--ink-soft); border-bottom: 1px solid var(--rule); padding-bottom: 3px; user-select: all; }
.s4 .foot { display: flex; justify-content: space-between; gap: 16px; margin-top: clamp(20px, 5vw, 60px); padding-top: 18px; border-top: 1px solid var(--rule); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.s4 .foot .dia { width: 16px; vertical-align: -2px; margin-right: 8px; }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .s0 .services { grid-template-columns: 1fr 1fr; }
  .s0 .services li { padding: 18px 14px 20px 0 !important; border-right: 0; border-bottom: 1px solid var(--rule); }
  .s0 .services li:nth-child(odd) { border-right: 1px solid var(--rule); }
  .s0 .services li:nth-child(even) { padding-left: 14px !important; }
  .s0 .services .n { margin-bottom: 14px; }
  .s0 .services h3 { font-size: 20px; }
  .s0 .services p { font-size: 13px; }
  .s1 .benefits { grid-template-columns: 1fr 1fr; margin-top: 18px; }
  .s1 .benefits li { padding: 12px 12px 4px 0; }
  .s1 .benefits li::before { margin-bottom: 8px; }
  .s1 .benefits h3 { font-size: 15px; margin-bottom: 4px; }
  .s1 .benefits p { font-size: 12px; line-height: 1.4; }
  .scene-nav { right: 6px; }
  .scene-nav button span { display: none; }
  }
@media (max-width: 700px) {
  .s0 .headline .ln, .s4 .closing .ln { display: block; }
  .s0 .hint { display: none; }
  .s3 .big-num span { transform: translate3d(0, -18vh, 0) scale(calc(0.7 + var(--in) * 0.3 + var(--out) * 1.2)); }
  .s4 .foot { flex-direction: column; }
}

/* ---------- Reduced motion: an ordinary stacked page ---------- */
body.static #content.cinema { position: relative; }
body.static .scene { position: relative; min-height: 100svh; visibility: visible !important; }
body.static .scene *:not(svg):not(svg *) { transform: none !important; opacity: 1 !important; filter: none !important; clip-path: none !important; }
body.static .scene-nav { display: none; }

.s1 .benefits li { cursor: default; outline: none; transition: background .4s; pointer-events: auto; }
.s1 .benefits li.focus h3 { color: var(--joya-green); }
.s1 .benefits h3 { transition: color .35s; }
.s0 .headline.offer .ln:first-child .ch { color: var(--ink); }
.s0 .headline.offer { font-size: clamp(38px, 4.6vw, 84px); }
@media (max-width: 700px) {
  .s0 .headline, .s1 .headline, .s0 .headline.offer { font-size: clamp(27px, 8.2vw, 44px); }
  .s0 .services { margin-top: 16px; }
  .s0 .services .n { margin-bottom: 8px; }
  .s0 .services h3 { font-size: 16px; margin-bottom: 6px; }
  .s0 .services p { font-size: 12px; line-height: 1.4; }
}

.s4 .legal { margin-top: -10px; font-size: 10.5px; line-height: 1.5; letter-spacing: .04em; color: var(--ink-faint); max-width: 90ch; }
@media (max-width: 700px) { .s4 .inner { gap: 16px; } .s4 .legal { font-size: 10px; } }