/* =========================================================
   Tree Creative — effect layer (loaded after styles.css)
   html.fx      scripts are running (light effects, infographics)
   html.fx-gl   WebGL + full motion (3D scenes, pinned layouts)
   Without these classes every rule below is inert and the page is the
   regular site. Colours: only the site tokens and the service-card colours.
   ========================================================= */
:root { --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; }

.hero__fx canvas, .cta__fx canvas, .svc-tree canvas { display: block; width: 100%; height: 100%; }

/* ---------- 1-1 nav scroll progress ---------- */
.nav__bar {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--accent), var(--accent-l));
  transform-origin: left; transform: scaleX(0);
}

/* ---------- 1-2 hero headline ---------- */
.hero__line { display: block; }
.hero__title em { font-style: normal; }
html.fx .hero__title em {
  background: linear-gradient(90deg, #f5f5f7 0%, var(--accent-l) 45%, #7fd3ff 60%, #f5f5f7 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: fxSheen 6s linear infinite;
}
/* the lines rise in place of the block fade-in */
html.fx:not(.fx-reduce) .hero__title.reveal,
html.fx:not(.fx-reduce) .hero__sub.reveal,
html.fx:not(.fx-reduce) .hero__links.reveal { opacity: 1; transform: none; transition: none; }
html.fx:not(.fx-reduce) .hero__line { animation: fxRise 1.1s var(--ease) both; }
html.fx:not(.fx-reduce) .hero__line + .hero__line { animation-delay: .12s; }
html.fx:not(.fx-reduce) .hero__sub { animation: fxRise 1.1s .25s var(--ease) both; }
html.fx:not(.fx-reduce) .hero__links { animation: fxRise 1.1s .35s var(--ease) both; }
@keyframes fxSheen { to { background-position: -220% 0; } }
@keyframes fxRise { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } }

/* ---------- 3-1 hero particle logo ---------- */
.hero__slot { display: contents; }
.hero__fx { display: none; }
html.fx-gl .hero__fx { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
html.fx-gl .hero__fx.fx-fail { display: none; }
html.fx-gl .hero__slot {
  display: block; position: relative; margin: 0 auto 6px;
  width: clamp(150px, 26vh, 250px); height: clamp(150px, 26vh, 250px);
}
html.fx-gl .hero__slot .hero__mark { position: absolute; inset: 22%; width: 56%; height: 56%; margin: 0; }
.hero__slot.gl .hero__mark, .cta__slot.gl img { opacity: 0 !important; transition: opacity .6s var(--ease); }

/* ---------- 3-2 contact particle logo ---------- */
.cta__fx, .cta__slot { display: none; }
html.fx-gl .cta:not(.fx-fail) { position: relative; overflow: hidden; }
html.fx-gl .cta:not(.fx-fail) > *:not(.cta__fx) { position: relative; z-index: 1; }
html.fx-gl .cta:not(.fx-fail) .cta__fx {
  display: block; position: absolute; left: 0; right: 0; top: 0; height: min(100%, 980px); z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
html.fx-gl .cta:not(.fx-fail) .cta__slot { display: block; margin: 0 auto 6px; width: clamp(130px, 20vh, 200px); height: clamp(130px, 20vh, 200px); }
.cta__slot img { position: absolute; inset: 22%; width: 56%; height: 56%; }

/* ---------- 1-3 service cards: tilt + gloss ---------- */
html.fx .hl-card {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  transition: transform .45s var(--ease);
}
html.fx .hl-card:hover { --ty: -6px; }
html.fx .hl-card::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.28), transparent 45%);
  opacity: var(--gl, 0); transition: opacity .3s;
}

/* ---------- 3-3 services tree ---------- */
.svc-tree { display: none; }
html.fx-gl .svc-tree {
  display: block; position: relative; max-width: 980px; margin: 0 auto 8px;
  height: clamp(340px, 48vh, 500px); touch-action: pan-y; cursor: grab;
}
html.fx-gl .svc-tree:active { cursor: grabbing; }
html.fx-gl .svc-tree.fx-fail { display: none; }
.svc-tree__labels { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.tl3 {
  position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; will-change: transform;
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12px/1.3 var(--ff-sf); padding: 4px 10px 4px 8px; border-radius: 6px;
  background: rgba(255,255,255,.78); color: var(--ink-2); border: 1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.tl3::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #1f8a4c) 18%, transparent); }
.tl3__no { font: 600 10.5px var(--mono); color: var(--ink-3); letter-spacing: .04em; }
.tl3.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.tl3.on .tl3__no { color: var(--accent-l); }

/* ---------- 1-4 contact magnet ---------- */
.magnet { transition: transform .35s var(--ease), background .25s var(--ease); }

/* ---------- 1-5 showreel viewfinder ---------- */
.vf { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; color: #fff; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; }
.vf__c { position: absolute; width: 34px; height: 34px; border: 2px solid rgba(255,255,255,.85); }
.vf__c.a { top: max(9vh, 70px); left: 6vw; border-right: 0; border-bottom: 0; }
.vf__c.b { top: max(9vh, 70px); right: 6vw; border-left: 0; border-bottom: 0; }
.vf__c.c { bottom: 9vh; left: 6vw; border-right: 0; border-top: 0; }
.vf__c.d { bottom: 9vh; right: 6vw; border-left: 0; border-top: 0; }
.vf__x { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%); }
.vf__x::before, .vf__x::after { content: ""; position: absolute; background: rgba(255,255,255,.7); }
.vf__x::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.vf__x::after { top: 50%; left: 0; right: 0; height: 1px; }
.vf__thirds {
  position: absolute; inset: max(9vh, 70px) 6vw 9vh;
  background:
    linear-gradient(90deg, transparent calc(33.3% - .5px), rgba(255,255,255,.18) 33.3%, transparent calc(33.3% + .5px), transparent calc(66.6% - .5px), rgba(255,255,255,.18) 66.6%, transparent calc(66.6% + .5px)),
    linear-gradient(transparent calc(33.3% - .5px), rgba(255,255,255,.18) 33.3%, transparent calc(33.3% + .5px), transparent calc(66.6% - .5px), rgba(255,255,255,.18) 66.6%, transparent calc(66.6% + .5px));
}
.vf__tl { position: absolute; top: calc(max(9vh, 70px) + 46px); left: 6vw; display: flex; gap: 14px; align-items: center; font-variant-numeric: tabular-nums; }
.vf__rec { display: inline-flex; gap: 6px; align-items: center; color: #ff5f57; }
.vf__rec::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; animation: fxBlink 1s steps(2) infinite; }
.vf__tr { position: absolute; top: calc(max(9vh, 70px) + 46px); right: 6vw; text-align: right; opacity: .85; }
.vf__bl { position: absolute; bottom: calc(9vh + 46px); left: 6vw; display: flex; gap: 4px; align-items: flex-end; height: 46px; }
.vf__bl b { width: 5px; border-radius: 1px; background: linear-gradient(to top, var(--accent-l) 60%, #f5c36b 85%, #ff5f57); animation: fxMeter .5s ease-in-out infinite alternate; }
.vf__br { position: absolute; bottom: calc(9vh + 46px); right: 6vw; text-align: right; opacity: .85; }
@keyframes fxBlink { 50% { opacity: 0; } }
@keyframes fxMeter { from { height: 20%; } to { height: 100%; } }
@media (max-width: 640px) { .vf__tr, .vf__br { display: none; } }
@media (max-width: 560px) { .vf { display: none; } }

/* ---------- 2-4 numbers: micro charts (finished state is the default) ---------- */
.metric__viz { height: 96px; width: 100%; max-width: 180px; margin: 0 auto 14px; }
.metric__viz svg { width: 100%; height: 100%; overflow: visible; }
.seg { stroke-dashoffset: 0; }
.metrics.play .seg { animation: fxDraw 1.2s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes fxDraw { from { stroke-dashoffset: var(--len); } }
.waf rect { fill: #2c2c2e; transform-box: fill-box; transform-origin: center; }
.waf rect.on { fill: var(--accent-l); }
.metrics.play .waf rect.on { animation: fxPop .5s var(--ease) both; animation-delay: calc(var(--i) * 8ms); }
@keyframes fxPop { from { fill: #2c2c2e; transform: scale(.3); } }

/* ---------- 2-5 production flow ---------- */
.pflow { background: var(--paper); padding: clamp(80px, 11vw, 150px) 0; }
.pflow__in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.pflow__tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 14px; }
.pflow__tabs button { border: 0; background: #e8e8ed; color: var(--ink); padding: 8px 18px; border-radius: 980px; cursor: pointer; font: 500 15px var(--ff-sf); transition: background .25s, color .25s; }
.pflow__tabs button:hover { background: #dcdce1; }
.pflow__tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.pflow__tabs button:focus-visible, .pflow__more:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pflow__price { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; align-items: baseline; text-align: center; font: 600 15px var(--ff-sf); color: var(--accent); margin-bottom: 44px; }
.pflow__more { border: 0; background: none; padding: 0; cursor: pointer; font: 500 13px var(--ff-sf); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.pflow__more:hover { color: var(--accent); }
.pflow__steps { --p: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 14px; position: relative; }
.pflow__steps::before, .pflow__steps::after { content: ""; position: absolute; left: 14px; right: 14px; top: 13px; height: 2px; background: #e5e5ea; }
.pflow__steps::after { background: linear-gradient(90deg, var(--accent), var(--accent-l)); transform: scaleX(var(--p)); transform-origin: left; }
.pflow__steps li { position: relative; z-index: 1; display: grid; gap: 6px; align-content: start; text-align: center; justify-items: center; min-width: 0; }
.pflow__dot { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid #d2d2d7; display: grid; place-items: center; font: 600 11px var(--ff-sf); color: var(--ink-3); transition: background .35s var(--ease), border-color .35s, color .35s, box-shadow .35s; }
.pflow__steps li.on .pflow__dot, html:not(.fx) .pflow__dot { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 6px rgba(31,138,76,.12); }
.pflow__steps b { font-family: var(--ff-sf); font-size: 15px; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
.pflow__steps small { font-size: 13px; color: var(--ink-2); line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
html:not(.fx) .pflow__tabs, html:not(.fx) .pflow__more { display: none; }
@media (max-width: 760px) {
  .pflow__steps { grid-template-columns: 1fr; gap: 20px; }
  .pflow__steps::before, .pflow__steps::after { left: 13px; right: auto; top: 14px; bottom: 14px; width: 2px; height: auto; }
  .pflow__steps::after { transform: scaleY(var(--p)); transform-origin: top; }
  .pflow__steps li { grid-template-columns: 28px 1fr; column-gap: 16px; text-align: left; justify-items: start; }
  .pflow__steps li .pflow__dot { grid-row: span 2; }
}