/*
 * DivyGfx home, scroll effects layer (pairs with /assets/js/home-fx.js).
 *   .dgp   "Our process" pinned scroll scene with the 3D product model
 *   .dgm   scroll-driven statement marquee under the stats
 *   [data-fx] hooks: scrubbed values arrive as CSS variables from the script
 * Only the individual transform properties (translate / scale / rotate) are used on
 * existing elements, so nothing here fights the transforms Framer animates.
 */

/* ------------------------------------------------------------- hero */
[data-fx="hero"] { opacity: calc(1 - var(--fx, 0) * 1.15); scale: calc(1 - var(--fx, 0) * .07); translate: 0 calc(var(--fx, 0) * 70px); transform-origin: 50% 40%; }

/* ------------------------------------------------- scrubbed helpers */
[data-fx="rise"] { scale: calc(1 - var(--fx, 0) * .085); transform-origin: 50% 0; }
[data-fx="cta"] { scale: calc(1 - var(--fx, 0) * .1); transform-origin: 50% 0; }
[data-fx="word"] { translate: 0 calc(var(--fx, 0) * 42%); opacity: calc(1 - var(--fx, 0) * .9); }
[data-fx-tilt] { transition: rotate .25s ease-out, scale .25s ease-out; will-change: rotate; }
[data-fx-tilt]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--glow, 0); transition: opacity .3s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 81, 71, .13), transparent 70%); }

/* ---------------------------------------------------------- marquee */
.dgm { position: relative; width: 100%; max-width: 100vw; min-width: 0; align-self: stretch; flex: none; contain: inline-size; overflow: hidden;
  padding: 28px 0 84px; font-family: Satoshi, "Satoshi Placeholder", system-ui, sans-serif; font-weight: 700; font-size: clamp(54px, 9.4vw, 136px); line-height: 1.02; letter-spacing: -.055em;
  color: #0f1115; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.dgm-row { display: flex; align-items: center; gap: .32em; width: max-content; white-space: nowrap; will-change: transform; }
.dgm-row:nth-child(1) { transform: translate3d(calc(var(--fx, 0) * -22% - 2%), 0, 0); }
.dgm-row:nth-child(2) { transform: translate3d(calc(var(--fx, 0) * 22% - 30%), 0, 0); color: transparent; -webkit-text-stroke: 1.5px rgba(15, 17, 21, .36); }
.dgm-row i { flex: none; width: .2em; height: .2em; border-radius: 50%; background: #ff5147; }
.dgm-row:nth-child(2) i { background: none; box-shadow: inset 0 0 0 1.5px rgba(15, 17, 21, .36); }
.dgm-row em { font-style: normal; background: linear-gradient(92deg, #ff5147, #ff8a3d 45%, #7c5cff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------------------------------------------------- process */
.dgp {
  --ink: #0f1115; --ink-2: #323745; --muted: #50576b; --muted-2: #697289; --line: #e5eaf0; --accent: #ff5147;
  --head: Satoshi, "Satoshi Placeholder", system-ui, sans-serif; --ease: cubic-bezier(.2, .8, .2, 1);
  position: relative; isolation: isolate; width: 100%; max-width: 100vw; min-width: 0; align-self: stretch; flex: none; box-sizing: border-box;
  font-family: Inter, "Inter Placeholder", system-ui, sans-serif; font-size: 16px; line-height: 24px; letter-spacing: -.03em; color: var(--ink); text-align: left;
  border-top: 1px solid rgba(15, 17, 21, .06);
}
.dgp *, .dgp *::before, .dgp *::after { box-sizing: border-box; }
.dgp-pin { position: relative; overflow: hidden; }
.dgp-pin::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(560px 420px at 76% 46%, rgba(255, 81, 71, .09), transparent 70%), radial-gradient(520px 420px at 92% 78%, rgba(124, 92, 255, .08), transparent 70%); }
.dgp-pin::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image: linear-gradient(rgba(15, 17, 21, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 17, 21, .045) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(46% 56% at 74% 50%, #000, transparent); mask-image: radial-gradient(46% 56% at 74% 50%, #000, transparent); }
.dgp-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 96px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }

.dgp-eyebrow { position: relative; display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 500; line-height: 18px; color: var(--ink); }
.dgp-eyebrow::before, .dgp-eyebrow::after { content: ""; position: absolute; width: 7px; height: 7px; border: 1.5px solid var(--accent); }
.dgp-eyebrow::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.dgp-eyebrow::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.dgp h2 { margin: 14px 0 12px; font-family: var(--head); font-weight: 700; font-size: 40px; line-height: 48px; letter-spacing: -.05em; color: var(--ink); }
.dgp h2 em { display: block; font-style: normal; background: linear-gradient(92deg, #697289, #9faac1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dgp-sub { margin: 0; max-width: 400px; color: var(--muted); }

/* steps */
.dgp-steps { position: relative; list-style: none; margin: 30px 0 0; padding: 0; }
.dgp-rail { position: absolute; left: 19px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.dgp-rail i { position: absolute; inset: 0; background: linear-gradient(180deg, #ff5147, #ff8a3d); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
.dgp-step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; width: 100%; margin: 0; padding: 9px 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dgp-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
.dgp-num { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 2px 6px -2px rgba(15, 17, 21, .1);
  font-family: "Fragment Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0; color: var(--muted-2); transition: background-color .4s ease, color .4s ease, box-shadow .4s ease, scale .5s var(--ease); }
.dgp-body { min-width: 0; padding-top: 6px; }
.dgp-body b { display: block; font-family: var(--head); font-weight: 700; font-size: 22px; line-height: 28px; letter-spacing: -.04em; color: var(--ink); transition: color .4s ease; }
.dgp-desc { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s var(--ease), opacity .4s ease; }
.dgp-desc > span { overflow: hidden; min-height: 0; }
.dgp-desc p { margin: 0; padding: 6px 0 10px; max-width: 420px; font-size: 15px; line-height: 23px; color: var(--muted); }
.dgp-step.is-done .dgp-num { background: #fff1f0; color: var(--accent); box-shadow: 0 0 0 1px #ffd6d3; }
.dgp-step.is-on .dgp-num { background: var(--ink); color: #fff; box-shadow: 0 0 0 1px var(--ink), 0 8px 18px -8px rgba(15, 17, 21, .55); scale: 1.08; }

/* stage */
.dgp-stage { position: relative; display: none; min-width: 0; }
.dgp-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .9s ease; }
.dgp-stage.is-3d canvas { opacity: 1; }
.dgp-ghost { position: absolute; left: 50%; top: 50%; translate: -50% -54%; font-family: var(--head); font-weight: 900; font-size: min(46vh, 380px); line-height: 1; letter-spacing: -.07em; color: rgba(15, 17, 21, .045); user-select: none; pointer-events: none; }
.dgp-ghost span { display: block; animation: dgpGhost .7s var(--ease) both; }
@keyframes dgpGhost { from { opacity: 0; translate: 0 26px; filter: blur(6px); } }
.dgp-orb { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; transition: opacity .6s ease;
  background: radial-gradient(circle at 34% 30%, #ffb199, #ff5147 46%, #7c5cff 100%); filter: blur(2px) saturate(1.05); box-shadow: 0 50px 80px -30px rgba(255, 81, 71, .45); animation: dgpOrb 7s ease-in-out infinite; }
.dgp-stage.is-3d .dgp-orb { opacity: 0; animation: none; }
@keyframes dgpOrb { 50% { translate: -50% -56%; scale: 1.04; } }
.dgp-cap { position: absolute; left: 50%; bottom: 0; translate: -50% 0; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 6px; border-radius: 99px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(15, 17, 21, .06), 0 10px 26px -12px rgba(15, 17, 21, .36); font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.dgp-cap i { display: grid; place-items: center; height: 28px; padding: 0 10px; border-radius: 99px; background: var(--ink); color: #fff; font: normal 11px/1 "Fragment Mono", ui-monospace, monospace; letter-spacing: 0; }
.dgp-cap span { display: inline-block; animation: dgpCap .5s var(--ease) both; }
@keyframes dgpCap { from { opacity: 0; translate: 0 8px; } }
.dgp-hint { position: absolute; right: 0; bottom: 6px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted-2); transition: opacity .4s ease; }
.dgp-hint::before { content: ""; width: 1px; height: 26px; background: linear-gradient(var(--accent), transparent); animation: dgpHint 1.6s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes dgpHint { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.dgp[data-step]:not([data-step="0"]) .dgp-hint { opacity: 0; }

/* static mode (phones, tablets, reduced motion): a simple list that reveals as it scrolls in */
.dgp[data-mode="static"] .dgp-step { cursor: default; padding: 12px 0; opacity: 0; translate: 0 22px; transition: opacity .7s ease, translate .8s var(--ease); }
.dgp[data-mode="static"] .dgp-step.is-in { opacity: 1; translate: none; }
.dgp[data-mode="static"] .dgp-rail i { transition: transform .6s var(--ease); }

/* pinned mode: the section is tall, its content sticks and the scroll drives the scene */
@media (min-width: 1000px) {
  .dgp[data-mode="pin"] { height: 440vh; }
  .dgp[data-mode="pin"] .dgp-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
  .dgp[data-mode="pin"] .dgp-wrap { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); align-items: center; gap: 48px; padding: 104px 24px 36px; }
  .dgp[data-mode="pin"] .dgp-stage { display: block; height: min(calc(100vh - 150px), 680px); }
  .dgp[data-mode="pin"] .dgp-body b { color: #9aa2b5; }
  .dgp[data-mode="pin"] .dgp-step.is-on .dgp-body b, .dgp[data-mode="pin"] .dgp-step:hover .dgp-body b { color: var(--ink); }
  .dgp[data-mode="pin"] .dgp-step.is-done .dgp-body b { color: var(--muted); }
  .dgp[data-mode="pin"] .dgp-step:not(.is-on) .dgp-desc { grid-template-rows: 0fr; opacity: 0; }
}
@media (min-width: 1000px) and (max-height: 760px) {
  .dgp[data-mode="pin"] h2 { font-size: 34px; line-height: 40px; margin: 10px 0 8px; }
  .dgp[data-mode="pin"] .dgp-sub { display: none; }
  .dgp[data-mode="pin"] .dgp-steps { margin-top: 18px; }
  .dgp[data-mode="pin"] .dgp-step { padding: 6px 0; }
}
@media (max-width: 640px) {
  .dgp-wrap { padding: 72px 20px; }
  .dgp h2 { font-size: 32px; line-height: 38px; }
  .dgm { padding: 12px 0 56px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-fx], [data-fx-tilt] { scale: none !important; translate: none !important; rotate: none !important; }
  .dgm-row { transform: none !important; }
  .dgp[data-mode="static"] .dgp-step { opacity: 1; translate: none; transition: none; }
  .dgp-orb, .dgp-hint::before, .dgp-ghost span, .dgp-cap span { animation: none; }
}

/* ── Hero title: rotating tech icon (driven by /assets/js/home-hero-tech.js) ──
   Replaces the static Figma glyph in the headline tile. Drawn as a pseudo-element
   so the Framer markup stays untouched. */
html.dg-hti .framer-1f4iwyc .framer-1gkv95x { visibility: hidden; }
html.dg-hti .framer-1f4iwyc::after {
  content: "";
  position: absolute;
  inset: 9px;
  background: var(--dg-hti) center / contain no-repeat;
  opacity: 1;
  transform: none;
  transition: opacity .26s ease, transform .26s cubic-bezier(.3, 1.3, .5, 1);
}
html.dg-hti-out .framer-1f4iwyc::after { opacity: 0; transform: translateY(-12px) scale(.7); }
html.dg-hti-pre .framer-1f4iwyc::after { opacity: 0; transform: translateY(12px) scale(.7); transition: none; }
@media (prefers-reduced-motion: reduce) {
  html.dg-hti .framer-1f4iwyc::after { transition: opacity .26s ease; transform: none !important; }
}