/* =====================================================
   FX: intro loader, hero letters, pinned scroll scene, mouse tilt, pause-motion
===================================================== */

/* ---------- intro loader: big counter + skip ---------- */
#loader { grid-auto-flow: row; row-gap: 0; }

.ld-count { display: flex; align-items: flex-start; gap: 4px; margin-top: 22px; font-family: var(--display); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }

.ld-count b { font-size: clamp(3.4rem, 11vw, 7rem); font-weight: 700; min-width: 3ch; text-align: right; background: linear-gradient(180deg, #fff 10%, #b9b39f 110%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.ld-count span { font-size: clamp(1rem, 2.6vw, 1.6rem); margin-top: .5em; color: var(--gold); }

#loader .bar { width: min(260px, 60vw); margin-top: 22px; }

#loader .bar i { animation: none; transform: scaleX(var(--ld, 0)); }

.ld-skip { position: absolute; right: clamp(20px, 4vw, 44px); bottom: clamp(20px, 4vw, 40px); padding: 10px 20px; border-radius: 999px; cursor: pointer; font: 500 .72rem var(--body); letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.75); background: rgba(255,255,255,.05); border: 1px solid var(--line); transition: color .3s, border-color .3s, background .3s; }

.ld-skip:hover,.ld-skip:focus-visible { color: var(--gold); border-color: rgba(242,217,138,.6); outline: none; }

.ld-tag { position: absolute; left: clamp(20px, 4vw, 44px); bottom: clamp(24px, 4vw, 44px); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.4); }

.loaded .ld-count,.loaded .ld-skip,.loaded .ld-tag { opacity: 0; transition: opacity .4s; }


/* ---------- hero name: letters rise through a mask ---------- */
html.js:not(.loaded) .title-in.split { opacity: 1; }

.title-in.split { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; }

.loaded .title-in.split { animation: none; }

.title-in .ch { display: inline-block; overflow: hidden; vertical-align: top; padding: .05em .05em .1em; margin: -.05em -.05em -.1em; }

.title-in .ch i { display: inline-block; font-style: normal; transform: translateY(118%) rotate(7deg); transform-origin: 0 100%;
  background: linear-gradient(180deg, #ffffff 8%, #8f8c85 105%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.loaded .title-in .ch i { animation: chIn 1.5s calc(.5s + var(--k) * .075s) var(--ease-wipe) both; }

@keyframes chIn { from { transform: translateY(118%) rotate(7deg); } to { transform: none; } }

/* ---------- pinned scroll scene ---------- */
.pin { position: relative; z-index: 1; background: radial-gradient(50% 40% at 80% 50%, rgba(242,217,138,.08), transparent 70%), var(--bg); border-top: 1px solid var(--line); }

.pin-track { position: relative; height: 430svh; }

.pin-stick { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; display: flex; align-items: center; padding: 70px var(--pad) 30px; }

.pin-in { width: 100%; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; }

.pin-copy h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.7rem); letter-spacing: -.02em; line-height: 1.12; margin-bottom: clamp(18px, 3svh, 34px); max-width: 15ch; }

.pin-steps { list-style: none; display: grid; gap: 4px; }

.pin-steps li { display: grid; grid-template-columns: auto 1fr; gap: 0 18px; padding: 12px 0; border-top: 1px solid var(--line); opacity: .38; transition: opacity .6s var(--ease-soft, ease); }

.pin-steps li.is-on { opacity: 1; }

.pin-no { font: 600 .8rem var(--display); letter-spacing: .1em; color: var(--gold); padding-top: .35em; min-width: 2.2ch; }

.pin-steps h4 { font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 1.9vw, 1.6rem); letter-spacing: -.01em; transition: color .5s, transform .7s var(--ease-soft, ease); transform-origin: left center; }

.pin-steps li.is-on h4 { color: #fff; transform: translateX(8px); }

.pin-steps .pin-d { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease-soft, ease); }

.pin-steps li.is-on .pin-d { grid-template-rows: 1fr; }

.pin-steps .pin-d p { overflow: hidden; min-height: 0; margin-top: 0; font-size: .98rem; line-height: 1.6; color: rgba(255,255,255,.72); max-width: 44ch; }

.pin-steps li.is-on .pin-d p { margin-top: 8px; }

.pin-meter { display: flex; align-items: center; gap: 14px; margin-top: clamp(16px, 3svh, 30px); font: 500 .78rem var(--display); letter-spacing: .12em; color: rgba(255,255,255,.55); }

.pin-meter b { font-weight: 600; color: var(--gold); }

.pin-meter i { flex: 1; max-width: 220px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.14); overflow: hidden; }

.pin-meter i u { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #fff); transform: scaleX(0); transform-origin: left; text-decoration: none; }


.pin-stage { --w: clamp(250px, 33vw, 500px); justify-self: end; width: 100%; position: relative; height: calc(var(--w) * .8); display: grid; place-items: center; perspective: 1500px; }

.pin-stage::before { content: ""; position: absolute; width: calc(var(--w) * 1.1); height: calc(var(--w) * .3); bottom: 2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(242,217,138,.3), transparent); filter: blur(18px); }

.pin-tilt { position: relative; width: var(--w); height: calc(var(--w) / 2); transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease-out); }

.prism { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-9deg) rotateY(0deg); will-change: transform; }

.face { position: absolute; inset: 0; margin: 0; border-radius: 16px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform: rotateY(calc(var(--i) * 90deg)) translateZ(calc(var(--w) / 2));
  border: 1px solid rgba(242,217,138,.35); box-shadow: 0 30px 60px -24px rgba(0,0,0,.8); background: #0b0a07; filter: brightness(var(--b, 1)); }

.face img { width: 100%; height: 100%; object-fit: cover; display: block; }

.face figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; font: 600 .66rem var(--body); letter-spacing: .2em; text-transform: uppercase; color: #14110a; background: linear-gradient(135deg, #f7ecc4, #e6c76f); }


@media (max-width: 900px) {
  .pin-stick { padding: 64px var(--pad) 16px; align-items: flex-start; }

  .pin-in { grid-template-columns: 1fr; gap: 10px; align-content: start; }

  .pin-stage { order: -1; --w: min(64vw, 320px); justify-self: center; height: calc(var(--w) * .62); margin: 8px 0 28px; }

  .pin-copy h3 { max-width: none; margin-bottom: 12px; font-size: clamp(1.3rem, 5.4vw, 1.8rem); }

  .pin-steps li { padding: 9px 0; }

  .pin-steps .pin-d p { font-size: .9rem; line-height: 1.5; }

  .pin-meter { margin-top: 12px; }

}

@media (max-height: 640px) and (max-width: 900px) { .pin-copy .eyebrow { display: none; }
 }


/* ---------- mouse tilt on service cards ---------- */
.sv-grid { perspective: 1300px; }

.sv-grid > li[data-reveal] { transition-property: opacity, transform, filter, rotate; transition-duration: calc(1.6s * var(--slow, 1)), calc(2s * var(--slow, 1)), calc(1.4s * var(--slow, 1)), .6s;
  transition-delay: calc(var(--d, 0s) * var(--slow, 1)), calc(var(--d, 0s) * var(--slow, 1)), calc(var(--d, 0s) * var(--slow, 1)), 0s; }


/* ---------- pause motion ---------- */
.mo-toggle { margin-left: 14px; padding: 5px 12px; border-radius: 999px; cursor: pointer; font: 500 .72rem var(--body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); background: transparent; border: 1px solid var(--line); transition: color .3s, border-color .3s; }

.mo-toggle:hover,.mo-toggle:focus-visible { color: var(--gold); border-color: rgba(242,217,138,.6); outline: none; }

.mo-toggle[aria-pressed="true"] { color: #14110a; background: var(--gold); border-color: transparent; }

.motion-off *,.motion-off *::before,.motion-off *::after { animation-play-state: paused !important; }


/* ---------- reduced motion: no pinning, everything readable at once ---------- */
html.rm .pin-track { height: auto; }

html.rm .pin-stick { position: relative; height: auto; padding-top: 90px; padding-bottom: 90px; }

html.rm .pin-steps li { opacity: 1; }

html.rm .pin-steps .pin-d { grid-template-rows: 1fr; }

html.rm .pin-steps .pin-d p { margin-top: 8px; }

html.rm .pin-meter { display: none; }

html.rm .face:not(:first-child) { display: none; }

html.rm .title-in .ch i { transform: none; }




/* ---------- process panels on the prism (built with CSS, no project screenshots) ---------- */
.face { font-size: calc(var(--w) / 34); display: flex; flex-direction: column; background: linear-gradient(160deg, #1a160e, #0b0a07 70%); }

.fp-bar { flex: none; display: flex; align-items: center; gap: .45em; padding: .7em 1em; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }

.fp-bar i { width: .65em; height: .65em; border-radius: 50%; background: rgba(255,255,255,.22); }

.fp-bar i:first-child { background: #ff7a7a; }
 .fp-bar i:nth-child(2) { background: #f2d98a; }
 .fp-bar i:nth-child(3) { background: #7be08c; }

.fp-bar span { margin-left: .6em; font: 500 .8em var(--body); color: rgba(255,255,255,.55); }

.fp-bar .url { flex: 1; padding: .3em .9em; border-radius: 99px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.8); }

.fp-body { flex: 1; min-height: 0; padding: 1.2em 1.4em 2.6em; }

.fp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; align-items: center; }

.fp-list { list-style: none; display: grid; gap: 1em; }

.fp-list li { display: flex; align-items: center; gap: .8em; }

.fp-list b { flex: none; width: 1.3em; height: 1.3em; border-radius: .4em; background: var(--gold); position: relative; }

.fp-list b::after { content: ""; position: absolute; left: 32%; top: 14%; width: 28%; height: 52%; border: solid #14110a; border-width: 0 .18em .18em 0; transform: rotate(45deg); }

.fp-list .off b { background: transparent; border: 1px solid rgba(255,255,255,.3); }
 .fp-list .off b::after { display: none; }

.fp-list u,.w-hero u { display: block; height: .7em; width: var(--w, 80%); border-radius: 99px; background: rgba(255,255,255,.22); text-decoration: none; }

.fp-chat { display: grid; gap: .7em; font: 500 .8em/1.35 var(--body); }

.fp-chat p { max-width: 88%; padding: .6em .9em; border-radius: 1em; }

.fp-chat .me { justify-self: end; background: var(--gold); color: #14110a; border-bottom-right-radius: .3em; }

.fp-chat .you { background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); border-bottom-left-radius: .3em; }

.fp-wire { display: grid; gap: 1em; align-content: start; }

.w-nav { display: flex; align-items: center; gap: .8em; }
 .w-nav u { width: 3em; height: 1em; border-radius: .3em; background: var(--gold); margin-right: auto; text-decoration: none; }

.w-nav s { width: 2.2em; height: .6em; border-radius: 99px; background: rgba(255,255,255,.22); }
 .w-nav em,.w-hero em { width: 3.4em; height: 1.3em; border-radius: 99px; border: 1px solid var(--gold); background: rgba(242,217,138,.18); }

.w-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.2em; align-items: center; }

.w-hero > div:first-child { display: grid; gap: .7em; align-content: center; }
 .w-hero u:first-child { height: 1.1em; }

.w-img { height: 6em; border-radius: .8em; border: 1.5px dashed rgba(242,217,138,.6); background: repeating-linear-gradient(135deg, rgba(242,217,138,.1) 0 .5em, transparent .5em 1em); }

.w-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; }
 .w-cards div { height: 3em; border-radius: .6em; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); }

.fp-code { flex: 1; margin: 0; padding: 1em 1.4em 2.6em; overflow: hidden; font: 500 .82em/1.7 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: rgba(255,255,255,.82); white-space: pre; }

.fp-code .k { color: #f2d98a; }
 .fp-code .f { color: #7fc4ff; }
 .fp-code .s { color: #9be3a8; }

.fp-live { display: grid; gap: 1em; align-content: start; }

.fp-live .live { display: inline-flex; align-items: center; gap: .5em; width: max-content; font: 600 .85em var(--body); letter-spacing: .16em; text-transform: uppercase; color: #9be3a8; }

.fp-live .live i { width: .7em; height: .7em; border-radius: 50%; background: #2fe05a; box-shadow: 0 0 .9em #2fe05a; }

.fp-live .chips { display: flex; gap: .6em; flex-wrap: wrap; }
 .fp-live .chips span { padding: .35em .9em; border-radius: 99px; font: 500 .8em var(--body); border: 1px solid rgba(242,217,138,.5); color: var(--gold); background: rgba(242,217,138,.08); }

.face figcaption { z-index: 2; }


/* ---------- section entrances (scroll-linked; set by js/fx.js) ---------- */
html,body { overflow-x: clip; }

[data-enter] { will-change: transform; transform-origin: 50% 0; }


/* ---------- loader: closing message once the counter reaches 100% ---------- */
.ld-welcome { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; gap: 0 .32em; padding: 0 24px; text-align: center; pointer-events: none;
  font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 5.4vw, 4rem); letter-spacing: -.02em; line-height: 1.2; }

.ld-welcome span { display: inline-block; opacity: 0; transform: translateY(40%); filter: blur(8px); }

.ld-welcome .gold { background: linear-gradient(135deg, #fff6dc, #e6c76f); -webkit-background-clip: text; background-clip: text; color: transparent; }

#loader.ld-done .ld-welcome span { animation: ldWord .9s calc(.25s + var(--k) * .14s) var(--ease-out) forwards; }

#loader.ld-done img,#loader.ld-done .ld-count,#loader.ld-done .bar { opacity: 0; transition: opacity .45s; }

@keyframes ldWord { to { opacity: 1; transform: none; filter: none; } }
html.rm .ld-welcome { display: none; }