/* ==========================================================================
   SEZAR Gallery — the opening intro (partials/site-intro.blade.php)
   --------------------------------------------------------------------------
   The autumn/winter page's loader, in the shop's palette: gold, blush and
   cream discs bloom from a point and swell past the screen, a cream stage
   closes in, the logo arrives with four pieces around it, and — once the page
   underneath has loaded — everything lifts away.

   Loaded by the storefront layout and by the admin panel (render hook), both
   of which already carry the frozen tokens. No colour, spacing or easing here
   is a literal; every duration is a multiple of `--duration-page`.

   TWO PHASES.
     Entrance — `--intro-enter` (1.5s). Every entrance animation runs for
       exactly that long and places itself on it with keyframe percentages,
       so the sequence reads top to bottom as one timeline: 50% is 0.75s.
     Exit — `--intro-exit` (0.6s), started by the script adding `.is-leaving`
       when the entrance is over and the page has loaded.
   Between them the logo holds and the glow breathes, for as long as the page
   takes.
   ========================================================================== */

.site-intro {
  --intro-enter: calc(var(--duration-page) * 3);
  --intro-exit: calc(var(--duration-page) * 1.2);
  /* Which way "outwards" is for a piece on the start side. It mirrors with
     the language, because the pieces' positions are logical. */
  --intro-out: -1;

  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: var(--surface-page);
  cursor: pointer;
  /* The script's signal that the entrance is over: this animation changes
     nothing visible; its `animationend` is what is listened for. It runs
     past the entrance by the stagger of the last piece plus a held moment
     (~0.7s) in which the logo and all four pieces are still, so the
     finished picture registers before anything leaves. */
  animation: sezar-intro-enter calc(var(--intro-enter) + var(--duration-page) * 1.2) linear both;
}

[dir="rtl"] .site-intro { --intro-out: 1; }

html.is-intro { overflow: hidden; }

@keyframes sezar-intro-enter {
  from, to { opacity: 1; }
}

/* ---- discs ------------------------------------------------------------- */
.site-intro-disc {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 30vmax;
  height: 30vmax;
  border-radius: var(--radius-circle);
  scale: 0;
  animation: var(--intro-enter) linear both;
}

.site-intro-disc--gold {
  background:
    repeating-conic-gradient(from 10deg,
      color-mix(in srgb, var(--color-cream-50) 14%, transparent) 0deg 1.5deg,
      transparent 1.5deg 4deg),
    radial-gradient(circle at 36% 30%, var(--color-gold-300) 0%, var(--color-gold-400) 45%, var(--color-gold-600) 100%);
  animation-name: sezar-intro-gold;
}

.site-intro-disc--blush {
  background: radial-gradient(circle at 40% 35%, var(--color-blush-200) 0%, var(--color-blush-300) 55%, var(--color-blush-500) 100%);
  animation-name: sezar-intro-blush;
}

.site-intro-disc--cream {
  background: radial-gradient(circle at 42% 38%, var(--color-white) 0%, var(--color-cream-50) 50%, var(--color-sand-300) 100%);
  animation-name: sezar-intro-cream;
}

/* The stage the logo stands on: the page's own cream, closing in last. */
.site-intro-disc--stage {
  background: radial-gradient(circle at 50% 50%, var(--color-cream-50) 0%, var(--color-cream-100) 12%, var(--color-cream-200) 22%);
  animation-name: sezar-intro-stage;
}

/* Bloom (spring), hold, then swell past the screen (standard). */
@keyframes sezar-intro-gold {
  0%, 3.3% { scale: 0; rotate: 0deg; animation-timing-function: var(--ease-spring); }
  22.9%    { scale: 1; animation-timing-function: linear; }
  27.8%    { scale: 1; animation-timing-function: var(--ease-standard); }
  49%      { scale: 5.2; }
  100%     { scale: 5.2; rotate: 50deg; }
}

@keyframes sezar-intro-blush {
  0%, 7.2% { scale: 0; animation-timing-function: var(--ease-spring); }
  25.2%    { scale: 0.62; animation-timing-function: linear; }
  31.7%    { scale: 0.62; animation-timing-function: var(--ease-standard); }
  53%, 100% { scale: 5.2; }
}

@keyframes sezar-intro-cream {
  0%, 11.1% { scale: 0; animation-timing-function: var(--ease-spring); }
  27.5%     { scale: 0.3; animation-timing-function: linear; }
  35.6%     { scale: 0.3; animation-timing-function: var(--ease-standard); }
  56.9%, 100% { scale: 5.2; }
}

@keyframes sezar-intro-stage {
  0%, 50.7% { scale: 0; animation-timing-function: var(--ease-standard); }
  73.6%, 100% { scale: 5.2; }
}

/* ---- glow and logo ----------------------------------------------------- */
.site-intro-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(40% 40% at 50% 50%,
    color-mix(in srgb, var(--color-gold-400) 30%, transparent) 0%,
    transparent 70%);
  animation:
    sezar-intro-glow var(--intro-enter) linear both,
    sezar-intro-breathe calc(var(--duration-page) * 4) var(--ease-standard) var(--intro-enter) infinite alternate;
}

@keyframes sezar-intro-glow {
  0%, 65.4% { opacity: 0; animation-timing-function: var(--ease-out); }
  85%, 100% { opacity: 1; }
}

/* While the page is still loading: the glow behind the logo breathes, so a
   slow page reads as "on its way" rather than as frozen. */
@keyframes sezar-intro-breathe {
  from { scale: 1; }
  to   { scale: 1.12; }
}

.site-intro-logo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(52vw, calc(var(--space-24) * 3));
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  opacity: 0;
  animation: sezar-intro-logo var(--intro-enter) linear both;
}

@keyframes sezar-intro-logo {
  0%, 63.8% { opacity: 0; scale: 0.75; translate: 0 var(--space-5); animation-timing-function: var(--ease-spring); }
  85%, 100% { opacity: 1; scale: 1; translate: 0 0; }
}

/* ---- the four pieces --------------------------------------------------- */
/* Real product photographs, scaled only (public/images/intro/<season>/).
   Each carries where it arrives from (`--r0`), how it settles (`--r1`) and
   which corner it leaves towards (`--x`, `--y`). */
.site-intro-piece {
  position: absolute;
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 var(--space-5) var(--space-6) color-mix(in srgb, var(--color-espresso-900) 22%, transparent));
  animation: sezar-intro-piece var(--intro-enter) linear both;
  animation-delay: calc(var(--duration-page) * 0.18 * var(--i));
}

.site-intro-piece--1 { --i: 0; --r0: -30deg; --r1: -8deg; --x: 1;  --y: -1; inset-block-start: 9%;  inset-inline-start: 4%; width: 30vw; }
.site-intro-piece--2 { --i: 1; --r0: 25deg;  --r1: 6deg;  --x: 1;  --y: 1;  inset-block-end: 9%;    inset-inline-start: 6%; width: 30vw; }
.site-intro-piece--3 { --i: 2; --r0: 30deg;  --r1: 8deg;  --x: -1; --y: -1; inset-block-start: 11%; inset-inline-end: 5%;   width: 28vw; }
.site-intro-piece--4 { --i: 3; --r0: -25deg; --r1: -6deg; --x: -1; --y: 1;  inset-block-end: 8%;    inset-inline-end: 6%;   width: 27vw; }

@media (min-width: 768px) {
  .site-intro-piece--1 { inset-block-start: 12%; inset-inline-start: 14%; width: min(17vw, calc(var(--space-24) * 2)); }
  .site-intro-piece--2 { inset-block-end: 10%;   inset-inline-start: 18%; width: min(16vw, calc(var(--space-24) * 1.9)); }
  .site-intro-piece--3 { inset-block-start: 14%; inset-inline-end: 15%;   width: min(15vw, calc(var(--space-24) * 1.8)); }
  .site-intro-piece--4 { inset-block-end: 9%;    inset-inline-end: 16%;   width: min(15vw, calc(var(--space-24) * 1.8)); }
}

@keyframes sezar-intro-piece {
  0%, 67% {
    opacity: 0; scale: 0.4; rotate: var(--r0); translate: 0 var(--space-12);
    animation-timing-function: var(--ease-spring);
  }
  91.5%, 100% { opacity: 1; scale: 1; rotate: var(--r1); translate: 0 0; }
}

/* ---- exit -------------------------------------------------------------- */
.site-intro.is-leaving {
  animation: sezar-intro-out var(--intro-exit) linear forwards;
}

.site-intro.is-leaving .site-intro-piece {
  animation: sezar-intro-piece-out calc(var(--intro-exit) * 0.8) var(--ease-standard) both;
  animation-delay: calc(var(--duration-page) * 0.06 * var(--i));
}

.site-intro.is-leaving .site-intro-logo {
  animation: sezar-intro-logo-out calc(var(--intro-exit) * 0.7) var(--ease-standard) calc(var(--intro-exit) * 0.15) both;
}

.site-intro.is-leaving .site-intro-glow {
  animation: sezar-intro-glow-out calc(var(--intro-exit) * 0.6) var(--ease-standard) both;
}

@keyframes sezar-intro-out {
  0%, 55% { opacity: 1; }
  100%    { opacity: 0; visibility: hidden; }
}

/* Each piece flies out towards its own corner: `--x` is 1 for a piece on the
   start side, and `--intro-out` turns that into left or right. */
@keyframes sezar-intro-piece-out {
  from { opacity: 1; scale: 1; rotate: var(--r1); translate: 0 0; }
  to   { opacity: 0; scale: 1.4; rotate: var(--r1); translate: calc(var(--x) * var(--intro-out) * 35vw) calc(var(--y) * 30vh); }
}

@keyframes sezar-intro-logo-out {
  from { opacity: 1; scale: 1; }
  to   { opacity: 0; scale: 1.2; }
}

@keyframes sezar-intro-glow-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* A tap or a key: a short fade from wherever it had reached. Declared after
   `.is-leaving` so it wins when both are set. */
.site-intro.is-skipping {
  animation: sezar-intro-out-skip var(--duration-slow) var(--ease-standard) forwards;
}

@keyframes sezar-intro-out-skip {
  to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  /* The script never inserts the layer under this preference; this is the
     belt to those braces. */
  .site-intro { display: none; }
  html.is-intro { overflow: auto; }
}