/* GoPoTa «wow» preview (opt-in, see fx-boot.js). Every rule is scoped under html.fx:
   with the preview off this file changes nothing. Motion only on transform / opacity / filter.
   Motion language: --fx-ease for arrivals and settles, --fx-ease-io for segment «charges»;
   240 / 600 / 1100 ms. The six hard-joined segments are the only colour accent. */
html.fx {
  --fx-ease: cubic-bezier(.16,1,.3,1);
  --fx-ease-io: cubic-bezier(.65,0,.35,1);
  --fx-quick: 240ms;
  --fx-ui: 600ms;
  --fx-slow: 1100ms;
  /* light that the pass material and buttons catch — tuned per surface, never a fixed light-theme grey */
  --fx-sheen: rgba(255,255,255,.55);
  --fx-sheen-edge: rgba(255,255,255,.14);
  --fx-glint: rgba(255,255,255,.34);
}
/* dark surfaces: the site theme (data-theme set by app.js) and the dark-green ChatGPT page */
html.fx[data-theme="dark"],
html.fx body.brand-tone-chatgpt {
  --fx-sheen: rgba(255,255,255,.13);
  --fx-sheen-edge: rgba(255,255,255,.035);
  --fx-glint: rgba(255,255,255,.6); /* primary buttons are light here */
}
/* measured per element by fx.js — wins over the theme guess above */
html.fx [data-fx-surface="light"] { --fx-sheen: rgba(255,255,255,.55); --fx-sheen-edge: rgba(255,255,255,.14); --fx-glint: rgba(255,255,255,.7); }
html.fx [data-fx-surface="dark"] { --fx-sheen: rgba(255,255,255,.13); --fx-sheen-edge: rgba(255,255,255,.035); --fx-glint: rgba(255,255,255,.34); }
@media (prefers-color-scheme: dark) {
  html.fx:not([data-theme]) {
    --fx-sheen: rgba(255,255,255,.13);
    --fx-sheen-edge: rgba(255,255,255,.035);
    --fx-glint: rgba(255,255,255,.6);
  }
}

/* ---------- Titles and the storefront wordmark ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Held until fx.js takes over; if it never does, a CSS timer shows them anyway. */
  html.fx.fx-intro .app-main,
  html.fx.fx-intro .app-foot,
  html.fx.fx-intro-mark .brand-wordmark { animation: fx-safety 1ms linear 1.4s both; }
}
@keyframes fx-safety { from { opacity: 0; } to { opacity: 1; } }

html.fx .fx-w { display: inline-block; clip-path: inset(-.25em -.3em -.14em -.3em); }
html.fx .fx-wi { display: inline-block; }

html.fx .brand-wordmark { position: relative; }
html.fx .brand-wordmark.fx-hold,
html.fx .brand-wordmark.fx-hold > span:not(.fx-mark) { color: transparent; }
html.fx .fx-mark { position: absolute; inset: 0; pointer-events: none; color: var(--ink); }
html.fx .fx-mark > span {
  position: absolute;
  left: var(--fx-x); top: var(--fx-y);
  height: var(--fx-h); line-height: var(--fx-h);
  white-space: pre;
  transform-origin: 50% 80%;
  will-change: transform, opacity, filter;
}
html.fx .fx-mark > .fx-mark-dot { color: #7e9e71; transform-origin: 50% 70%; }

html.fx .brand-brandline { position: relative; }
html.fx .fx-charge { position: absolute; left: 0; right: 0; bottom: -2px; height: 4px; pointer-events: none; }
html.fx .fx-charge > i {
  position: absolute; top: 0; bottom: 0;
  left: var(--fx-l, 0); width: var(--fx-w, 0);
  background: var(--fx-seg);
  transform-origin: left center;
}
html.fx .fx-charge > i:first-child { border-radius: 4px 0 0 4px; }
html.fx .fx-charge > i:last-child { border-radius: 0 4px 4px 0; }
@media (max-width: 700px) { html.fx .fx-charge { height: 3px; bottom: -1.5px; } }

/* ---------- Storefront passes: deep tilt, foil, glare, fan-out ---------- */
html.fx .brand-object[data-pass-object] {
  --fx-x: -.45; --fx-y: -.35; --fx-exit: 0;
  transform: perspective(900px) translate3d(0,var(--pass-scroll-y),0)
             rotateX(calc(var(--pass-tilt-x) * 3)) rotateY(calc(var(--pass-tilt-y) * 2.6)) rotateZ(var(--pass-scroll-turn));
  transition: transform 900ms var(--fx-ease);
}
html.fx .brand-object.is-tracking { transition-duration: 160ms; }
html.fx .brand-pass {
  translate: calc(var(--fx-x) * 9px + var(--fx-exit) * -44px) calc(var(--fx-y) * 7px + var(--fx-exit) * 60px);
  rotate: calc(var(--fx-exit) * -7deg);
  transition: transform 340ms var(--motion-settle), box-shadow 340ms var(--motion-settle), filter 140ms ease;
}
html.fx .brand-pass--back {
  translate: calc(var(--fx-x) * -6px + var(--fx-exit) * 60px) calc(var(--fx-y) * -5px + var(--fx-exit) * -36px);
  rotate: calc(var(--fx-exit) * 9deg);
}
/* the single sweep of the approved look is replaced by the pointer-driven glare */
@media (prefers-reduced-motion: no-preference) { html.fx .brand-pass::before { opacity: 0; } }

html.fx .fx-foil,
html.fx .fx-glare { position: absolute; z-index: 1; pointer-events: none; }
/* Foil: thin bands of the six brand tones with hard joins, revealed by a soft travelling mask. */
html.fx .fx-foil {
  inset: -60%;
  background: repeating-linear-gradient(118deg,
    var(--rainbow-green) 0 3px, var(--rainbow-orange) 3px 6px, var(--rainbow-red) 6px 9px,
    var(--rainbow-purple) 9px 12px, var(--rainbow-blue) 12px 15px, var(--rainbow-yellow) 15px 18px);
  -webkit-mask-image: linear-gradient(118deg, transparent 34%, rgba(0,0,0,.7) 46%, #000 50%, rgba(0,0,0,.7) 54%, transparent 66%);
  mask-image: linear-gradient(118deg, transparent 34%, rgba(0,0,0,.7) 46%, #000 50%, rgba(0,0,0,.7) 54%, transparent 66%);
  mix-blend-mode: overlay;
  opacity: .16;
  transform: translate3d(calc(var(--fx-x) * 22%), calc(var(--fx-y) * 10%), 0);
  transition: opacity var(--fx-ui) var(--fx-ease);
}
html.fx .brand-pass--back .fx-foil { opacity: .12; }
html.fx .fx-glare {
  left: -50%; top: -50%; width: 200%; height: 200%;
  background: radial-gradient(closest-side, rgba(255,255,255,.2), rgba(255,255,255,.07) 40%, rgba(255,255,255,0) 70%);
  opacity: .6;
  transform: translate3d(calc(var(--fx-x) * 26%), calc(var(--fx-y) * 26%), 0);
  transition: opacity var(--fx-ui) var(--fx-ease);
}
html.fx .fx-tracking .fx-glare { opacity: 1; }
html.fx .fx-tracking .fx-foil { opacity: .26; }
html.fx .fx-tracking .brand-pass--back .fx-foil { opacity: .18; }
html.fx .fx-pass-shadow {
  position: absolute; z-index: -1;
  left: 12%; right: 10%; bottom: 6%; height: 34%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(18,39,31,.34), rgba(18,39,31,0));
  filter: blur(14px);
  opacity: calc(1 - var(--fx-exit) * .7);
  transform: translate3d(calc(var(--fx-x) * -26px), calc(var(--fx-y) * -10px + 26px), 0) scale(calc(1 + var(--fx-y) * .06 + var(--fx-exit) * .35));
  pointer-events: none;
}

/* ---------- Storefront statement ---------- */
html.fx .fx-statement h2 {
  font-size: clamp(42px, 6.4vw, 92px);
  line-height: 1.02;
  letter-spacing: -.055em;
  max-width: 11em;
}
html.fx .fx-fill { opacity: calc(.14 + .86 * var(--fx-fill, 1)); }
html.fx .fx-step {
  opacity: var(--fx-step, 1);
  transform: translate3d(0, calc((1 - var(--fx-step, 1)) * 64px), 0);
}

/* ---------- Storefront scene: GoPoTa → GPT in depth ---------- */
html.fx .fx-scene .brand-morph {
  perspective: 1800px;
  transform: scale(calc(.94 + var(--fx-f, 0) * .14));
  transform-origin: 50% 60%;
}
html.fx .fx-scene .brand-morph > span { transform-origin: 50% 100%; }
html.fx .fx-scene .brand-morph > .fx-scene-keep {
  translate: 0 calc((1 - var(--fx-a, 1)) * .42em) calc(var(--fx-f, 0) * 40px);
  rotate: x calc((1 - var(--fx-a, 1)) * -55deg);
  opacity: var(--fx-a, 1);
}
html.fx .fx-scene .brand-morph > .fx-scene-fold {
  translate: 0 calc((1 - var(--fx-a, 1)) * .42em) calc(var(--fx-f, 0) * -220px);
  rotate: x calc((1 - var(--fx-a, 1)) * -55deg);
  opacity: calc(var(--fx-a, 1) * (1 - var(--brand-fold, 0)));
}
html.fx .brand-gradient.fx-bar { position: relative; overflow: hidden; background: none; }
html.fx .fx-bar > i {
  position: absolute; left: 0; top: 0; bottom: 0; width: calc(100% / 6);
  background: var(--fx-seg);
  transform-origin: left center;
}
html.fx .fx-bar > i:nth-child(2) { transform: translateX(100%); }
html.fx .fx-bar > i:nth-child(3) { transform: translateX(200%); }
html.fx .fx-bar > i:nth-child(4) { transform: translateX(300%); }
html.fx .fx-bar > i:nth-child(5) { transform: translateX(400%); }
html.fx .fx-bar > i:nth-child(6) { transform: translateX(500%); }

/* ---------- Storefront product cards ---------- */
html.fx .brand-product-art { transition: transform var(--fx-ui) var(--fx-ease), box-shadow var(--fx-ui) var(--fx-ease); }
html.fx .fx-spot {
  position: absolute; z-index: 1; left: 0; top: 0;
  width: 460px; height: 460px; margin: -230px 0 0 -230px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.62), rgba(255,255,255,.2) 45%, rgba(255,255,255,0));
  opacity: 0;
  transform: translate3d(var(--fx-sx, 50%), var(--fx-sy, 50%), 0);
  transition: opacity var(--fx-ui) var(--fx-ease);
  pointer-events: none;
}
html.fx .brand-product-art .gp-art__word { translate: calc(var(--fx-px, 0) * -14px) calc(var(--fx-py, 0) * -8px); }
/* the hover lift is motion: with «reduce motion» the card stays as it is without fx */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.fx .brand-product.fx-hot .fx-spot { opacity: 1; }
  html.fx .brand-product:hover .brand-product-art {
    transform: translate3d(0,-6px,0);
    box-shadow: 0 26px 40px -24px rgba(23,43,35,.45), 0 2px 6px rgba(23,43,35,.08);
  }
  html.fx .brand-product:hover .brand-product-art > .gp-art { transform: none; }
}
@media not ((hover: hover) and (pointer: fine)) {
  html.fx .brand-product-art { transform: scale(calc(.94 + .06 * var(--fx-enter, 1))); transition: none; }
}

/* ---------- Product page cover: the same material as the pass ---------- */
html.fx .fx-cover {
  --fx-x: -.5; --fx-y: -.4; --fx-t: 0;
  transform: perspective(1100px) rotateX(calc(var(--fx-y) * var(--fx-t) * -3deg)) rotateY(calc(var(--fx-x) * var(--fx-t) * 4deg));
}
html.fx .fx-cover > :not(.fx-light):not(.fx-foil):not(.fx-glare) { position: relative; z-index: 1; }
html.fx .fx-cover > .fx-foil,
html.fx .fx-cover > .fx-glare { z-index: 2; }
html.fx .fx-cover > .fx-foil { opacity: .1; }
html.fx .fx-cover.fx-tracking > .fx-foil { opacity: .2; }
html.fx .fx-light {
  position: absolute; z-index: 0; left: -45%; top: -60%; width: 130%; height: 170%;
  border-radius: 50%;
  pointer-events: none;
  opacity: .9;
}
html.fx body.brand-tone-chatgpt .fx-light { background: radial-gradient(closest-side, rgba(150,214,160,.42), rgba(150,214,160,0)); }
html.fx body.brand-tone-claude .fx-light { background: radial-gradient(closest-side, rgba(255,222,192,.5), rgba(255,222,192,0)); }
@media (prefers-reduced-motion: no-preference) {
  html.fx .fx-light { animation: fx-drift 26s var(--fx-ease-io) infinite alternate; }
  html.fx .fx-light.is-paused { animation-play-state: paused; }
}
@keyframes fx-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(58%,34%,0); } }

/* ---------- Price odometer ---------- */
html.fx .fx-odo-host { position: relative; }
html.fx .fx-odo-on { color: transparent !important; }
html.fx .fx-odo { position: absolute; left: 0; top: 0; white-space: pre; color: var(--fx-odo-color); pointer-events: none; }
html.fx .fx-odo-cell { position: relative; display: inline-block; clip-path: inset(-.16em -.1em); }
html.fx .fx-odo-sizer { visibility: hidden; }
html.fx .fx-odo-reel {
  position: absolute; left: 0; right: 0; top: var(--fx-odo-top, 0px);
  display: flex; flex-direction: column; align-items: center;
  line-height: var(--fx-odo-row, 1.6em);
  will-change: transform;
}
html.fx .fx-odo-reel > span { display: block; height: var(--fx-odo-row, 1.6em); }
html.fx .fx-odo-ch::before { content: attr(data-ch); }
html.fx .fx-odo-reel > span::before { content: attr(data-d); }

/* ---------- Buttons ---------- */
html.fx .fx-mag {
  translate: var(--fx-mx, 0px) var(--fx-my, 0px);
  transition: transform .2s, filter .2s, scale var(--fx-quick) var(--fx-ease);
}
html.fx .fx-mag.fx-pressed { scale: .96; transition: transform .2s, filter .2s, scale 90ms ease-out; }
/* busy: the six segments charge one by one */
@media (prefers-reduced-motion: no-preference) {
  html.fx .gp-btn.is-loading::after { animation: fx-busy 1.3s infinite; }
}
@keyframes fx-busy {
  0% { transform: scaleX(0); opacity: 1; animation-timing-function: steps(6, end); }
  78% { transform: scaleX(1); opacity: 1; animation-timing-function: ease-out; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* ---------- View transitions: product art travels from the card ---------- */
html.fx .page-product .app-main > .gp-art,
html.fx .page-product .app-main > .app-cover { view-transition-name: fx-art; }

/* ---------- Glass tab indicator ---------- */
html.fx .fx-glassbar .gp-tab { position: relative; z-index: 1; }
html.fx .fx-glassbar .gp-tab[aria-current="page"] { background: transparent; }
html.fx .fx-pill {
  position: absolute; z-index: 0;
  left: var(--fx-pl, 0); top: var(--fx-pt, 0);
  width: var(--fx-pw, 0); height: var(--fx-ph, 0);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.38));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(28,48,43,.06), 0 6px 16px -6px rgba(28,48,43,.28), 0 0 0 .5px rgba(28,48,43,.1);
  opacity: 0;
  pointer-events: none;
}
html.fx .fx-pill.is-on { opacity: 1; }
html.fx[data-theme="dark"] .fx-pill,
html.fx body.brand-tone-chatgpt .fx-pill { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 16px -6px rgba(0,0,0,.5); }
@media (prefers-color-scheme: dark) {
  html.fx:not([data-theme]) .fx-pill { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 16px -6px rgba(0,0,0,.5); }
}

/* ---------- Reading progress in the top hairline ---------- */
html.fx .fx-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 31; height: 3px; pointer-events: none; display: none; }
html.fx.fx-reading .fx-progress { display: block; }
html.fx.fx-reading .app-stripe { opacity: .28; }
html.fx .fx-progress > i {
  position: absolute; top: 0; bottom: 0; width: calc(100% / 6);
  background: var(--fx-seg);
  transform-origin: left center;
  transform: scaleX(0);
}
html.fx .fx-progress > i:nth-child(2) { left: calc(100% / 6); }
html.fx .fx-progress > i:nth-child(3) { left: calc(200% / 6); }
html.fx .fx-progress > i:nth-child(4) { left: 50%; }
html.fx .fx-progress > i:nth-child(5) { left: calc(400% / 6); }
html.fx .fx-progress > i:nth-child(6) { left: calc(500% / 6); }

/* ---------- The conductor: beats ---------- */
html.fx .fx-b { transition: transform var(--fx-slow) var(--fx-ease) var(--fx-d, 0ms), opacity var(--fx-ui) var(--fx-ease) var(--fx-d, 0ms); }
html.fx .fx-pre[data-fx="rise"] { opacity: 0; transform: translate3d(0,30px,0); }
html.fx [data-fx="card"] { transform-origin: 50% 0%; }
html.fx .fx-pre[data-fx="card"] { opacity: 0; transform: perspective(1000px) translate3d(0,64px,0) rotateX(16deg) scale(.95); }
html.fx .fx-b[data-fx="stamp"] { transition-duration: var(--fx-ui), var(--fx-quick); }
html.fx .fx-pre[data-fx="stamp"] { opacity: 0; transform: scale(.45) rotate(-12deg); }
/* mask: the element stays, its words travel */
html.fx .fx-b[data-fx="mask"] { transition: none; }
html.fx .fx-b[data-fx="mask"] .fx-wi { transition: transform var(--fx-slow) var(--fx-ease); transition-delay: calc(var(--fx-d, 0ms) + var(--fx-i, 0) * 60ms); }
html.fx .fx-pre[data-fx="mask"] .fx-wi { transform: translate3d(0,115%,0); }
/* a dot label («● Как активировать») keeps its dot hidden until its words arrive — no lonely dot while the film waits */
html.fx .fx-b[data-fx="mask"].gp-dot::before { transition: transform var(--fx-ui) var(--fx-ease) var(--fx-d, 0ms), opacity var(--fx-quick) var(--fx-ease) var(--fx-d, 0ms); }
html.fx .fx-pre[data-fx="mask"].gp-dot::before { opacity: 0; transform: scale(.3); }
/* numbered section: badge stamps, title rises, thread charges */
html.fx .fx-b[data-fx="section"] { transition: none; }
html.fx [data-fx="section"] h2 { clip-path: inset(-.4em -2em -.3em -.4em); }
html.fx .fx-sec-t { display: inline-block; }
html.fx .fx-b[data-fx="section"] .fx-sec-t { transition: transform var(--fx-slow) var(--fx-ease) calc(var(--fx-d, 0ms) + 90ms); }
html.fx .fx-b[data-fx="section"] .gp-num { transition: transform var(--fx-ui) var(--fx-ease) var(--fx-d, 0ms), opacity var(--fx-quick) var(--fx-ease) var(--fx-d, 0ms); }
html.fx .fx-pre[data-fx="section"] .gp-num { transform: scale(.4) rotate(-12deg); opacity: 0; }
html.fx .fx-pre[data-fx="section"] .fx-sec-t { transform: translate3d(0,120%,0); }
/* thread: six segments charging one after another */
html.fx .fx-thread-host { position: relative; }
html.fx .fx-thread { position: absolute; left: 0; bottom: -1px; display: flex; width: 96px; height: 3px; pointer-events: none; z-index: 1; }
html.fx .fx-thread--wide { top: -1px; bottom: auto; width: 100%; }
html.fx .fx-thread > i { flex: 1; background: var(--fx-seg); transform-origin: left center; }
html.fx .fx-b[data-fx="thread"] { transition: none; }
html.fx .fx-b[data-fx="thread"] > i { transition: transform 360ms var(--fx-ease-io); transition-delay: calc(var(--fx-d, 0ms) + 200ms + var(--fx-i, 0) * 70ms); }
html.fx .fx-pre[data-fx="thread"] > i,
html.fx .fx-thread.fx-pre > i { transform: scaleX(0); }
html.fx .brand-section-head.fx-thread-host > .fx-thread { bottom: -14px; }
html.fx .app-hero.fx-thread-host > .fx-thread { bottom: -10px; }
html.fx .brand-loyalty .fx-thread, html.fx .brand-help .fx-thread { bottom: -18px; }

/* ---------- The pass material on every card ---------- */
html.fx .fx-mat { position: relative; }
html.fx .fx-sheen { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
html.fx .fx-sheen::before {
  content: ""; position: absolute; left: -240px; top: -240px; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--fx-sheen), var(--fx-sheen-edge) 50%, rgba(255,255,255,0));
  transform: translate3d(var(--fx-mx, -600px), var(--fx-my, -600px), 0);
  opacity: 0;
  transition: opacity var(--fx-ui) var(--fx-ease);
}
html.fx .fx-mat-on > .fx-sheen::before { opacity: 1; }
html.fx.fx-touch .fx-sheen::before { opacity: .7; }
@media (hover: hover) and (pointer: fine) {
  html.fx .fx-mat { transition: translate var(--fx-ui) var(--fx-ease); }
  html.fx .fx-mat:hover { translate: 0 -3px; }
  /* a material card that is still arriving keeps its beat: the hover lift must not replace the entrance */
  html.fx .fx-mat.fx-b { transition: transform var(--fx-slow) var(--fx-ease) var(--fx-d, 0ms), opacity var(--fx-ui) var(--fx-ease) var(--fx-d, 0ms), translate var(--fx-ui) var(--fx-ease); }
}

/* ---------- Buttons catch the light once ---------- */
html.fx .fx-glint { overflow: hidden; }
html.fx .brand-btn.fx-glint { position: relative; }
html.fx .fx-glint::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 30%, var(--fx-glint) 50%, rgba(255,255,255,0) 70%);
  transform: translateX(-120%);
}
@media (prefers-reduced-motion: no-preference) {
  html.fx .fx-glint::before { animation: fx-glint var(--fx-slow) var(--fx-ease) var(--fx-gd, 0ms) both; }
}
@keyframes fx-glint { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@media (prefers-reduced-motion: no-preference) {
  html.fx .app-input:focus, html.fx .gp-input:focus { translate: 0 -2px; }
  html.fx .app-input, html.fx .gp-input { transition: translate var(--fx-quick) var(--fx-ease), border-color var(--fx-quick) ease, box-shadow var(--fx-quick) ease; }
}

/* ---------- Storefront: sections hand over; GOPOTA is collected ---------- */
/* The leaving section only settles back a little: at .45 a card under the header looked disabled («Подробнее» greyed out). */
html.fx .fx-recede { transform-origin: 50% 100%; transform: scale(calc(1 - var(--fx-out, 0) * .04)); opacity: calc(1 - var(--fx-out, 0) * .16); }
html.fx .fx-collect { display: inline-block; opacity: calc(.12 + .88 * var(--fx-c, 1)); transform: translate3d(0, calc((1 - var(--fx-c, 1)) * .35em), 0) scale(calc(.8 + .2 * var(--fx-c, 1))); }

/* ---------- Checkout sheet ---------- */
html.fx .fx-sheet-stripe { position: absolute; top: 0; left: 30px; right: 30px; height: 2px; border-radius: 0 0 3px 3px; pointer-events: none; }
html.fx .fx-sheet-stripe > i { transform-origin: left center; }

/* ---------- Order success: one film — fx-ceremony.css ---------- */

/* ---------- Support ---------- */
html.fx .fx-sent { height: 3px; margin-top: 10px; }
html.fx .fx-sent > i { transform-origin: left center; }

/* ---------- 404: throwable wordmark ---------- */
html.fx .fx-toy {
  display: flex;
  font-size: clamp(76px, 17vw, 210px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.085em;
  color: var(--ink);
  padding: 6px 0 22px;
  user-select: none; -webkit-user-select: none;
}
html.fx .fx-toy-l {
  position: relative;
  display: inline-block;
  padding-bottom: .14em;
  cursor: grab;
  touch-action: none;
  will-change: transform;
}
html.fx .fx-toy-l::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .04em; min-height: 4px; background: var(--fx-seg); }
html.fx .fx-toy-l.is-held { cursor: grabbing; z-index: 2; }

/* ---------- Reduced motion: everything static and visible ---------- */
@media (prefers-reduced-motion: reduce) {
  html.fx .brand-object[data-pass-object] { transform: none; transition: none; }
  html.fx .brand-pass,
  html.fx .fx-mag,
  html.fx .brand-product-art,
  html.fx .brand-product-art .gp-art__word,
  html.fx .fx-scene .brand-morph > span { translate: none; scale: none; rotate: none; }
  html.fx .brand-product-art,
  html.fx .fx-cover,
  html.fx .fx-scene .brand-morph { transform: none; transition: none; }
  html.fx .fx-fill, html.fx .fx-step { opacity: 1; transform: none; }
  html.fx .fx-light { animation: none; }
  html.fx .fx-recede, html.fx .fx-collect { transform: none; opacity: 1; }
  html.fx .fx-mat:hover { translate: none; }
}