/*
 * Sentimenti — shared page-transition wipe.
 * One file, included identically on every page via a real <link> tag in
 * the outer <head> (outside the DC <x-dc> template, so it is never
 * touched by support.js's HTML-string processing).
 *
 * ---------------------------------------------------------------------
 * MOTION SOURCE: reconstructed from an actual frame-by-frame recording
 * of gucciosteria.com/en/florence/ (Aug 2026 session — see the final
 * report for the full evidence trail: a Playwright video captured at
 * 25fps across 4 real in-app nav clicks, decoded to individual PNG
 * frames and analyzed for luminance/shape). What was actually measured:
 *
 *   - COVER ("in"): the outgoing page cuts to full solid color in one
 *     sampled frame (<=40ms) — reads as instant/decisive, not animated.
 *   - HOLD: ~550-560ms fully covered, measured identically on two
 *     separate transitions (39120ms->39680ms and 47320ms->47880ms into
 *     the recording).
 *   - REVEAL ("out"): ~900-950ms, NOT a straight-line wipe. The new page
 *     appears through a widening dome/arch shape anchored at the bottom-
 *     center of the viewport — wide almost immediately (near full
 *     viewport width within the first ~120ms) while its height/sagitta
 *     keeps growing for the full ~900ms, decelerating near the end. This
 *     is a real echo of Gucci's own arch-photo-frame motif, not a
 *     generic circle or diagonal wipe.
 *
 * Translated to Sentimenti: same cover/hold/reveal rhythm and the same
 * dome shape, in Sentimenti's own accent color (see --transition-color
 * below), reusing the site's existing "settle" easing family for the
 * reveal so it reads as one motion language, not a bolted-on effect.
 * ---------------------------------------------------------------------
 *
 * How it works: a single full-viewport layer, rendered as ::before on
 * <html> (no extra DOM node needed). A CSS mask, shaped as a wide
 * ellipse anchored at bottom-center, cuts a growing/shrinking "window"
 * into the color layer — the window's height is the only animated
 * quantity (--pt-ry, registered via @property so the browser can
 * interpolate it, exactly like it would interpolate a transform). Its
 * width (--pt-rx) is fixed generously wide so the dome already spans
 * most of the viewport almost immediately, matching the measured shape.
 *
 * State, driven from page-transition.js via the data-pt attribute on
 * <html>:
 *   (no attribute)   idle — fully open window, layer invisible
 *   data-pt="cover"  instantly fully closed window, NO transition (used
 *                     on a page that was just navigated into, before its
 *                     own reveal starts, so there is zero flash of
 *                     content)
 *   data-pt="in"     animated close (window shrinks to nothing), played
 *                     on the page being LEFT — fast/decisive
 *   data-pt="out"    animated open (window grows to full coverage),
 *                     played on the page being ENTERED — slow, the
 *                     signature moment
 */

@property --pt-ry {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 190%;
}

:root {
  --transition-color: #5F6B44; /* Sentimenti's own established olive —
                                   already the site's functional "this is
                                   interactive / this is the brand"
                                   signal color (nav hover, CTA arch-
                                   outline stroke), used the same way
                                   Gucci's dark green is: a saturated,
                                   confident, brand-forward color that
                                   reads clearly against content — not
                                   the softer #D8C9A8 tan, which is only
                                   ever a decorative accent (::selection,
                                   a quote border) on this site, never a
                                   signal color. */
  --pt-rx: 60%;    /* fixed — the dome's width, generous enough that it
                        already reads as "full width" almost immediately,
                        matching the measured Gucci shape */
  --pt-ry: 190%;   /* idle default: window fully open, layer invisible.
                        190% (not 100%) so the dome's peak clears the
                        viewport's top corners before the reveal ends —
                        see the corner-distance check in the final report */
}

html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--transition-color);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(
    ellipse var(--pt-rx) var(--pt-ry) at 50% 100%,
    transparent 0%,
    transparent 99.5%,
    #000 100%
  );
  mask-image: radial-gradient(
    ellipse var(--pt-rx) var(--pt-ry) at 50% 100%,
    transparent 0%,
    transparent 99.5%,
    #000 100%
  );
  will-change: mask-image;
}

html[data-pt="cover"] {
  --pt-ry: 0%; /* instant, no transition rule matches this selector */
}

html[data-pt="in"] {
  transition: --pt-ry 180ms cubic-bezier(.55, 0, 1, .45); /* decisive, matches
                                    the near-instant cover Gucci itself shows */
  --pt-ry: 0%;
}

html[data-pt="out"] {
  /* NOTE on this curve: a naive port of the site's existing "settle" ease
     (cubic-bezier(.16,1,.3,1), front-loaded/fast-start) looked right on
     paper but was wrong in practice — because --pt-ry has to travel well
     past 100% to fully clear the viewport's top corners (see --pt-ry's
     comment above), a front-loaded ease made the dome visually cover
     ~75% of the screen in the first 80ms and look fully revealed by
     ~350ms, nothing like the gradual ~900ms build actually measured on
     Gucci. This bezier + duration were fit numerically against the real
     measured reveal curve (area-revealed-per-frame from the recorded
     frames, not just elapsed time) so the ON-SCREEN pace matches what
     was actually observed, not just the nominal CSS duration number. */
  transition: --pt-ry 900ms cubic-bezier(.35, 0, .75, .55);
  --pt-ry: 190%;
}

@media (max-width: 600px) {
  html[data-pt="in"] { transition-duration: 150ms; }
  html[data-pt="out"] { transition-duration: 780ms; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-pt]::before { transition: none !important; }
}