/* =====================================================================
   experience.css  —  loading screen + "how a packet is born" (UHD, ingredient-pour build)
   Loaded only by index.html, after components.css. Additive: new .ss-* /
   #ss-* selectors only. Colours/type from tokens.css. Uses the REAL logo
   at assets/logo-badge.png (a transparent circular cut of the real mark).

   RESOLUTION NOTES (2560x1440 "1440p" target, also 4K / hi-DPI laptops)
   · Every shape is vector (CSS gradients, clip-paths, inline SVG). The
     only raster is the logo, and it is always drawn at or below its
     native 885px, so it never upsamples.
   · The packet is laid out at its LARGEST size and the engine only ever
     scales it DOWN (scale <= 1). Browsers rasterise a will-change layer
     at its layout size, so scaling *up* is what makes 3D layers go soft.
     Here they never do.
   · Sizing is in vmin, so the stage grows continuously with the screen
     instead of stopping at a laptop max-width. A >= 2000px tier bumps
     type and chrome one step further.
   · No blur filters anywhere (motion, backdrop or depth-of-field).
   ===================================================================== */

/* =====================================================================
   1) LOADING SCREEN — the real logo fills in from the bottom (0 -> 100%)
   ===================================================================== */
#ss-loader {
  position: fixed; inset: 0; z-index: 9990;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(20px, 2.6vmin, 36px); padding: 24px;
  background:
    radial-gradient(120% 90% at 50% 36%, rgba(255,246,221,.92), rgba(255,246,221,0) 62%),
    var(--color-bg);
  color: var(--color-ink);
  opacity: 1; visibility: visible;
  transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s, background .9s ease;
}
body.ss-gated { overflow: hidden; }                       /* the film waits behind the gate */
#ss-loader.ss-loader--burst { background: rgba(246,184,71,0); }   /* the gate fades under the blocks */
#ss-loader .ss-launch { margin-top: 6px; font-size: clamp(15px, 1.6vmin, 22px); padding: .9em 2.2em; letter-spacing: .02em;
  box-shadow: 0 22px 44px -18px rgba(58,42,28,.7); transition: opacity .3s ease, transform .2s ease; }
#ss-loader.is-loading .ss-launch { opacity: 0; pointer-events: none; }
#ss-loader .ss-loader__meter[hidden] { display: none; }
#ss-loader .ss-loader__logo, #ss-loader .ss-loader__cap, #ss-loader .ss-loader__meter { transition: opacity .4s ease; }
#ss-burst { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9995; pointer-events: none; }
#ss-loader.ss-loader--out { opacity: 0; visibility: hidden; transform: scale(1.05); pointer-events: none;
  transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s; }

.ss-loader__logo { position: relative; width: clamp(190px, 34vmin, 460px); aspect-ratio: 1 / 1; }
.ss-loader__logo > span {
  position: absolute; inset: 0;
  background: url("../assets/logo-badge.png") center / contain no-repeat;
  filter: drop-shadow(0 14px 22px rgba(58,42,28,.28));
}
.ss-loader__logo .ss-ghost { opacity: .16; }        /* the not-yet-filled ghost */
.ss-loader__logo .ss-fill {                          /* fills bottom -> top      */
  -webkit-mask-image: linear-gradient(to top, #000 calc(var(--ss-p, 0) * 100%), transparent 0);
          mask-image: linear-gradient(to top, #000 calc(var(--ss-p, 0) * 100%), transparent 0);
}
/* progress ring around the mark: a conic sweep masked to a thin annulus */
.ss-loader__logo .ss-ring {
  position: absolute; inset: -7%; border-radius: 50%; background: none; filter: none;
  background: conic-gradient(var(--color-ink) calc(var(--ss-p, 0) * 360deg), rgba(58,42,28,.10) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}
.ss-loader__cap { font-family: var(--font-serif); font-style: italic; font-size: clamp(16px, 2.2vmin, 26px);
  color: var(--color-ink-2); text-align: center; margin: 0; }
.ss-loader__meter { width: clamp(190px, 34vmin, 460px); display: flex; align-items: center; gap: 12px; }
.ss-loader__track { position: relative; flex: 1 1 auto; height: 4px; background: var(--tint);
  border-radius: var(--radius-pill); overflow: hidden; }
#ssl-bar { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--color-ink); border-radius: var(--radius-pill); }
#ssl-pct { flex: 0 0 auto; min-width: 3.2ch; text-align: right; font-family: var(--font-sans);
  font-weight: 700; font-size: clamp(13px, 1.3vmin, 16px); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }

/* =====================================================================
   2) "HOW A PACKET IS BORN"
   ===================================================================== */
#ss-born {
  position: relative; height: 660vh; overflow-x: clip;             /* room for 6 beats, poured one piece at a time */
  width: 100vw; margin-left: calc(50% - 50vw);                      /* full-bleed out of .container */
  /* engine-driven variables (set from js/ss-experience.js) */
  --ss-t: 0; --ss-gloss: 50%; --ss-shadow-s: 1; --ss-shadow-o: .45; --ss-title-o: 1; --ss-squash: 0;
}

.ss-born__stage {
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h));
  perspective: 150vmin; perspective-origin: 50% 46%;
  display: grid; place-items: center; overflow: hidden;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
}

/* ---- lighting + floor ------------------------------------------------ */
.ss-born__light { position: absolute; left: 50%; top: 50%; width: 120vmin; height: 120vmin; z-index: 0;
  transform: translate(-50%, -48%);
  background:
    radial-gradient(closest-side, rgba(255,246,221,.90) 0%, rgba(255,246,221,.55) 32%, rgba(255,246,221,0) 70%);
  pointer-events: none; }
.ss-born__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 0;
  background: linear-gradient(to top, rgba(58,42,28,.14), rgba(58,42,28,.04) 55%, rgba(58,42,28,0));
  pointer-events: none; }

/* ---- title ------------------------------------------------------------ */
.ss-born__title { position: absolute; top: clamp(12px, 3.6vh, 44px); left: 0; right: 0; text-align: center; z-index: 5;
  opacity: var(--ss-title-o); transition: opacity .3s linear; }
.ss-born__title .eyebrow { display: block; font-size: clamp(11px, 1.1vmin, 15px); }
.ss-born__title h2 { font-family: var(--font-serif); font-size: clamp(26px, 4.6vmin, 68px);
  letter-spacing: -.02em; margin-top: 6px; font-variation-settings: 'SOFT' 30, 'WONK' 1; }

/* ---- the pour canvases + the ingredient source ------------------------- */
#ss-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
#ss-sand { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
#ss-source { display: none !important; position: absolute; top: 17%; left: 50%; transform: translateX(-50%); z-index: 4;
  align-items: center; gap: .6em; opacity: 0; transition: opacity .35s ease;       /* retired: pieces stream from above the frame */
  font-family: var(--font-sans); font-weight: 700; font-size: clamp(13px, 1.5vmin, 22px); color: var(--color-ink);
  background: rgba(255,246,221,.88); border: 1px solid rgba(58,42,28,.22); padding: .6em 1.15em; border-radius: var(--radius-pill);
  box-shadow: 0 14px 28px -16px rgba(58,42,28,.55), inset 0 1px 0 rgba(255,255,255,.6); will-change: transform; }
#ss-source::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 14px; height: 14px; margin-left: -7px;
  background: inherit; border: inherit; border-top: 0; border-left: 0; transform: rotate(45deg); border-radius: 0 0 4px 0; }
#ss-source.is-pouring { transform: translateX(-50%); }
.ss-source__dot { width: .9em; height: .9em; border-radius: 50%; box-shadow: inset 0 -2px 3px rgba(0,0,0,.18), 0 0 0 1px rgba(58,42,28,.15); }

/* ---- the packet --------------------------------------------------------
   Laid out at its FINAL (largest) size; the engine scales it <= 1 only.  */
.ss-packet-wrap { position: relative; z-index: 2; display: grid; place-items: center;
  width: min(45vw, 40vh); transform-origin: 50% 100%;                  /* ~45% of the screen's height in its resting pose, up to 45% of its width */
  transform: translateY(6vmin) scaleY(calc(1 - var(--ss-squash) * .035)) scaleX(calc(1 + var(--ss-squash) * .018)); }
.ss-packet__shadow { position: absolute; left: 50%; bottom: -6%; width: 92%; height: 12%;
  border-radius: 50%; z-index: 0;
  background: radial-gradient(closest-side, rgba(58,42,28,.55), rgba(58,42,28,.22) 55%, rgba(58,42,28,0));
  transform: translateX(-50%) scale(var(--ss-shadow-s)); opacity: var(--ss-shadow-o); }
.ss-packet { position: relative; width: 100%; z-index: 1;
  transform-style: preserve-3d; will-change: transform; backface-visibility: hidden;
  -webkit-box-reflect: below 2px linear-gradient(transparent 64%, rgba(0,0,0,.20)); }

.ss-packet__seal { position: absolute; top: -6%; left: 6%; width: 88%; height: 8.5%; z-index: 3;
  background:
    repeating-linear-gradient(to right, rgba(255,246,221,.14) 0 1px, transparent 1px 4px),
    linear-gradient(to bottom, #5a4433, #3A2A1C 55%, #2c1f14);
  transform-origin: top center; transform: scaleY(0);
  clip-path: polygon(0 0,100% 0,100% 45%,92% 100%,84% 45%,76% 100%,68% 45%,60% 100%,52% 45%,44% 100%,36% 45%,28% 100%,20% 45%,12% 100%,4% 45%,0 100%); }
.ss-packet__seal::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: rgba(255,246,221,0); }
.is-sealed .ss-packet__seal::after { animation: ss-crimp .5s ease-out 1; }
@keyframes ss-crimp { 0% { background: rgba(255,246,221,.95); box-shadow: 0 0 18px 4px rgba(255,246,221,.8); }
                      100% { background: rgba(255,246,221,0); box-shadow: 0 0 0 0 rgba(255,246,221,0); } }

.ss-packet__body { position: relative; aspect-ratio: 0.82 / 1; border-radius: 4.6% / 3.8%;
  overflow: hidden; display: grid; place-items: center; z-index: 2;
  border: 2px solid #2c1f14;
  filter: drop-shadow(0 3vmin 3.2vmin rgba(58,42,28,.30)); }
.ss-packet__foil { position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 1px, transparent 1px 3px),
    linear-gradient(to bottom, #FFF9E8 0%, #FFF3D6 50%, #F8E6BE 100%); }
.ss-packet__edge { position: absolute; inset: 0; pointer-events: none; z-index: 5;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 22px 0 34px -26px rgba(255,255,255,.75),
    inset -26px 0 38px -26px rgba(58,42,28,.32),
    inset 0 -22px 30px -24px rgba(58,42,28,.22); }
.ss-packet__gloss { position: absolute; inset: -20% -40%; pointer-events: none; z-index: 6;
  background: linear-gradient(112deg,
    transparent 38%, rgba(255,255,255,.10) 44%, rgba(255,255,255,.62) 50%, rgba(255,255,255,.10) 56%, transparent 62%);
  background-size: 180% 100%; background-position-x: var(--ss-gloss);
  mix-blend-mode: screen; opacity: .85; }
.ss-packet__notch { position: absolute; top: 9%; right: -1px; width: 7px; height: 12px; z-index: 6;
  background: var(--color-bg); border: 2px solid #2c1f14; border-right: 0; border-radius: 6px 0 0 6px; }
.ss-packet__base { position: relative; height: 3.2%; margin: 0 4%; z-index: 1;
  background: repeating-linear-gradient(to right, rgba(255,246,221,.14) 0 1px, transparent 1px 4px), #3A2A1C;
  border-radius: 0 0 6px 6px; }

.ss-packet__label { position: relative; width: 44%; aspect-ratio: 1; z-index: 3; transform: translateY(-34%);
  background: url("../assets/logo-badge.png") center / contain no-repeat;
  filter: drop-shadow(0 .5vmin 1vmin rgba(58,42,28,.28)); }
.ss-packet__copy { position: absolute; left: 0; right: 0; bottom: 5.5%; z-index: 4; text-align: center; pointer-events: none; }
.ss-packet__copy b { display: block; font-family: var(--font-serif); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(14px, 2.2vmin, 40px); color: var(--color-ink); line-height: 1.05;
  font-variation-settings: 'SOFT' 30, 'WONK' 1; }
.ss-packet__copy span { display: block; margin-top: .35em; font-family: var(--font-sans); font-weight: 700;
  font-size: clamp(8px, .95vmin, 16px); letter-spacing: .22em; text-transform: uppercase; color: var(--color-ink-2); }

/* ---- beat captions ------------------------------------------------------ */
.ss-born__caps { position: absolute; left: 0; right: 0; bottom: clamp(40px, 7vh, 110px); height: 7.4em; z-index: 5;
  text-align: center; padding-inline: 18px; pointer-events: none; }
/* the theme, huge, behind the packet: the same words three times, stacked,
   in a 70s display face, in the site's own brown and deeper yellow only */
#ss-word { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0; pointer-events: none; user-select: none; }
#ss-word .ss-word__l { display: block; font-family: 'Shrikhand', 'Fraunces', Georgia, serif; font-weight: 400;
  font-size: clamp(44px, 13.5vmin, 240px); line-height: .84; letter-spacing: .01em; white-space: nowrap; }
#ss-word .ss-word__l:nth-child(1) { color: var(--color-ink); opacity: .10; }
#ss-word .ss-word__l:nth-child(2) { color: var(--color-yellow-d); opacity: .75; }
#ss-word .ss-word__l:nth-child(3) { color: var(--color-ink); opacity: .10; }
#ss-word.is-in .ss-word__l { animation: ss-word-in .7s ease both; }
#ss-word.is-in .ss-word__l:nth-child(2) { animation-delay: .08s; --ss-o: .75; }
#ss-word.is-in .ss-word__l:nth-child(1), #ss-word.is-in .ss-word__l:nth-child(3) { --ss-o: .10; }
#ss-word.is-in .ss-word__l:nth-child(3) { animation-delay: .16s; }
@keyframes ss-word-in { from { opacity: 0; transform: translateY(6px); } to { opacity: var(--ss-o, .1); transform: none; } }
.ss-born__cap { position: absolute; left: 0; right: 0; opacity: 0; transform: translateY(1.2em);
  transition: opacity .42s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.ss-born__caps[data-dir="back"] .ss-born__cap { transform: translateY(-1.2em); }
.ss-born__cap.is-in { opacity: 1; transform: none; }
.ss-born__cap.is-out { opacity: 0; transform: translateY(-1.2em); }
.ss-born__caps[data-dir="back"] .ss-born__cap.is-out { transform: translateY(1.2em); }
.ss-born__cap small { display: block; font-family: var(--font-sans); font-weight: 700; letter-spacing: .3em;
  font-size: clamp(10px, 1.05vmin, 15px); color: var(--color-ink-2); margin-bottom: .55em; font-variant-numeric: tabular-nums; }
.ss-born__cap h3 { font-family: var(--font-serif); font-size: clamp(22px, 3.9vmin, 58px); letter-spacing: -.015em;
  font-variation-settings: 'SOFT' 30, 'WONK' 1; }
.ss-born__cap p { font-family: var(--font-serif); font-style: italic; color: var(--color-ink-2);
  font-size: clamp(14px, 1.75vmin, 26px); margin: .3em 0 0; }
.ss-born__cap .ss-born__more { font-family: var(--font-sans); font-style: normal; font-weight: 500; color: var(--color-ink-2);
  font-size: clamp(13px, 1.2vmin, 18px); line-height: 1.5; max-width: 54ch; margin: .7em auto 0; opacity: .9; }

/* ---- progress row (bottom, centred) + dots --------------------------------- */
.ss-born__rail { position: absolute; left: 50%; bottom: clamp(14px, 3vh, 40px); transform: translateX(-50%); z-index: 5;
  display: flex; flex-direction: row; align-items: center; gap: 16px; }
.ss-born__count { font-family: var(--font-sans); font-weight: 700; font-size: clamp(11px, 1.15vmin, 16px);
  letter-spacing: .18em; color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.ss-born__count b { color: var(--color-ink); }
.ss-born__rail-track { position: relative; height: 2px; width: clamp(120px, 20vmin, 300px); background: var(--hairline); border-radius: 2px; }
#ss-rail-fill { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--ss-t) * 100%); background: var(--color-ink); border-radius: 2px; }
.ss-born__dots { display: flex; flex-direction: row; gap: 9px; }
.ss-born__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--hairline); transition: background .3s, transform .3s; }
.ss-born__dots i[data-on="1"] { background: var(--color-ink); transform: scale(1.45); }

/* ---- 1440p and up: one more step of scale on chrome and type ------------ */
@media (min-width: 2000px) and (min-height: 1100px) {
  .ss-born__title .eyebrow { letter-spacing: .34em; }
  .ss-born__rail { gap: 20px; }
  .ss-born__dots i { width: 9px; height: 9px; }
  .ss-born__rail-track { height: 3px; }
  .ss-packet__body { border-width: 3px; }
  .ss-packet__notch { width: 10px; height: 18px; border-width: 3px; }
}

@media (max-width: 1000px) {
  .ss-born__rail { display: none; }
  .ss-born__caps { bottom: 16vh; }
}
@media (max-width: 760px) {
  #ss-born { height: 560vh; }
  .ss-packet-wrap { width: min(78vw, 40vh);
    transform: translateY(-5vh) scaleY(calc(1 - var(--ss-squash) * .035)) scaleX(calc(1 + var(--ss-squash) * .018)); }
  .ss-packet { -webkit-box-reflect: below 0 linear-gradient(transparent, transparent); } /* Chromium ignores `none`; a clear mask hides it */
  .ss-born__caps { bottom: 19vh; }
  #ss-source { top: 18%; }
}

/* reduced motion: static finished packet, no sticky scroll journey */
@media (prefers-reduced-motion: reduce) {
  #ss-born { height: auto; }
  .ss-born__stage { position: static; height: auto; padding: var(--space-7) 0; overflow: visible; }
  .ss-packet { will-change: auto; }
  #ss-canvas, #ss-source, .ss-born__rail { display: none; }
}