/*
 * Generated by scripts/port-css.mjs from the CSS Modules that preceded
 * this theme. Edit the rules here — the generator is kept for reference,
 * not re-run against a moved target.
 */

/* ─── components/sections/ThemeCycler.module.css ─────────────────────────────────────── */
.us-tc { position: relative; }

.us-tc-frame {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  overflow: hidden;
  /* Set per theme by the timeline; every accent inherits from it. */
  --brand: #8b5cf6;
}

/* The wash that swaps colour per theme. JS tweens background-color from here
   on, so this value is only the pre-hydration default — keep it matching the
   first theme in THEMES. */
.us-tc-wash {
  position: absolute;
  inset: 0;
  background: var(--wash, #d5e3fb);
  z-index: 0;
  opacity: 1;
  transition: background-color 0.6s ease;
}

/* ── left column ── */
.us-tc-left { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 1.5rem; }

.us-tc-cycler {
  position: relative;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.9;
  font-size: clamp(2.2rem, 5.2vw, 7rem);
  min-height: 1em;
}

/* Colour lives on each word, not here — see the note in ThemeCycler.tsx. */
.us-tc-slot { position: relative; display: block; }
.us-tc-slot-word { position: absolute; inset: 0; white-space: nowrap; }
.us-tc-slot-word[data-first='true'] { position: relative; }

/*
 * ── The resting state before hydration ───────────────────────────────
 *
 * The same fault the hero had, and the same fix. All four themes are rendered
 * at once — the words share one absolute box, the blurbs one grid cell, the
 * stages one stage — and which of them you see is decided in JS by `park()`
 * and `show(0)`. Before that runs, the server's markup paints four headlines,
 * four ledes and four sets of artwork on top of each other.
 *
 * It is less visible here than in the hero only because this section starts
 * below the fold. It is the same bug.
 *
 * **`opacity` alone, no `visibility`.** Unlike the hero, this component parks
 * with plain `opacity` and never writes `visibility` inline — a parked stage is
 * taken out of hit-testing with `pointer-events` instead (see the note on
 * `park`). A `visibility: hidden` here would therefore never be cleared, and
 * the section would stay blank for good.
 *
 * From mount onward these are inert: GSAP writes `opacity` inline, and inline
 * wins. That includes the reduced-motion path, which deliberately sets every
 * word and blurb back to 1 and un-stacks them into a plain list.
 */
.us-tc-slot-word:not([data-first='true']),
.us-tc-blurb > p:not(:first-child),
.us-tc-stages > .us-tc-stage:not(:first-child) {
  opacity: 0;
}

.us-tc-tail { display: block; color: var(--ink-30); }

.us-tc-blurb { position: relative; max-width: 32rem; display: grid; }
.us-tc-blurb > p { grid-area: 1 / 1; }

/* ── the morphing badge behind the product ──
   Sized to the right-hand column and tinted with the brand colour at low
   alpha, so it reads as a shelf shape rather than as a graphic. */
.us-tc-badge {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 66%;
  width: clamp(15rem, 25vw, 25rem);
  translate: -50% -50%;
  overflow: visible;
  pointer-events: none;
}
/* Raised from 0.1 with the wash: a 10% brand tint reads as a shape on a
   near-white ground and as nothing at all on a wash that now carries real
   colour of its own. */
.us-tc-badge path { fill: var(--brand); opacity: 0.14; }

/* ── the staged art ──
   One layer covering the whole pinned area, not just the right column, so a
   character can hang off the top edge or walk the floor under the headline. */
.us-tc-stages {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* The art stops growing where the type does. Prop sizes are percentages of
     this box, but the headline caps at 7rem and the blurb at 32rem — so on a
     fluid full-width section the characters keep scaling past ~1600px and walk
     into the copy. Capping and centring the stage keeps the two in proportion. */
  width: min(100%, 1500px);
  margin-inline: auto;
}
.us-tc-stage { position: absolute; inset: 0; }

/* Layer order inside a stage: badge 1 · behind-props 1 · product 2 ·
   accent 3 · front props 4 · brand mark 5. Every one of these needs an
   explicit z-index — the product's own z-index would otherwise paint over
   any sibling left on `auto`, regardless of DOM order. */
/* Disney's horizon. Full-bleed and under everything on the stage, so it reads
   as landscape rather than as a graphic. Measured against the viewport, not
   the capped stage — like the Minecraft terrain, the ground has to reach both
   page edges at any width. */
.us-tc-ground {
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  /* globals.css resets every bare svg to `max-width: 100%`, which clamps that
     100vw to this stage's 1500px cap and leaves the horizon short of the right
     edge on a wide screen. The Minecraft terrain dodges it by being an <img>
     inside a sized <span>; this one has to opt out explicitly. */
  max-width: none;
  height: clamp(11rem, 26vh, 17rem);
  color: var(--brand);
  overflow: visible;
  pointer-events: none;
}

.us-tc-prop { position: absolute; display: block; z-index: 4; }
/* Only characters with a hover reaction take pointer events. The stage itself
   is switched on and off in show()/park(), so a parked theme cannot intercept
   a hover meant for the live one. */
.us-tc-prop[data-egg] { pointer-events: auto; cursor: pointer; }
/* The swinging Spider-Man pivots about the top of his web line — 64.1% across
   his art, at its very top edge — so the point attached to the Bag button
   stays put while the rest of him swings. */
.us-tc-prop[data-egg='swing'] img { transform-origin: 64.1% 0; }
.us-tc-prop img { width: 100%; height: auto; display: block; }
.us-tc-prop-behind { z-index: 1; }
.us-tc-mobile-extra { display: none; }

/* A terrain strip: full-bleed so it reads as ground rather than as an image,
   and never anti-aliased. Measured against the viewport, not the capped stage —
   the ground has to reach both page edges at any width. */
.us-tc-prop-bleed {
  left: calc(50% - 50vw) !important;
  width: 100vw !important;
  z-index: 1;
}
.us-tc-prop-bleed img { image-rendering: pixelated; }

/* The product cut-out — no card, no frame, it sits straight on the wash.
   Centred with flex rather than `translate: -50%`: GSAP animates this element,
   and taking over an element's transforms clears the individual `translate`
   property, which silently drops the centring. */
.us-tc-product {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  right: calc(9% + var(--rail));
  width: clamp(11rem, 21vw, 20rem);
  display: flex;
  align-items: center;
  filter: drop-shadow(0 34px 34px rgba(20, 16, 26, 0.16));
}
.us-tc-product img { width: 100%; height: auto; display: block; }

/* the brand mark, overlapping the product's top-left corner */
/* The brand mark straddles the product's top-left corner. The offsets are
   tuned against the real bags: they sit ~940px from the left at 1440 wide with
   their top edge between 209% and 246px, so 23%/24% lands the mark on the
   corner for all four rather than floating beside it. */
.us-tc-mark {
  position: absolute;
  z-index: 5;
  right: calc(23% + var(--rail));
  top: 24%;
  display: block;
  width: var(--size, 16%);
  max-width: 100%;
}
.us-tc-mark img { width: 100%; height: auto; display: block; }

/* The unicorn shelf is the one theme whose mark sits *beside* the bag rather
   than on its corner: it is set type, not a logo, and at this size it needs
   clean wash behind it instead of the patterned bag. */
.us-tc-stage[data-theme='unicorn'] .us-tc-mark { right: calc(32% + var(--rail)); }

/* Our own shelf has no brand mark, so it gets a wordmark in the display face.
   Right-aligned so it reaches the product's corner like the image marks do —
   the text is far narrower than the box that positions it. */
.us-tc-wordmark {
  display: block;
  text-align: right;
  /* A script, not the display face: in Archivo 900 caps this read as a second
     headline rather than as a mark sitting on the bag. Sized up because a
     script carries far less optical weight than a geometric sans at the same
     px, and pinned to --pink-deep so it holds against the rainbow behind it
     instead of disappearing into the lilac --brand. */
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0;
  font-size: clamp(2rem, 4.2vw, 4rem);
  line-height: 1.1;
  /* Pacifico's descenders and swashes overhang its line box. */
  padding-bottom: 0.12em;
  color: var(--pink-deep);
}

/* ── drawn accents ──
   Right-hand offsets clear the section rail, same as the product. */
.us-tc-accent { position: absolute; z-index: 3; color: var(--brand); overflow: visible; }
/* Sparkles scale and spin about their own centre. Without fill-box the origin
   is the SVG's origin and they fly in from the corner instead of popping. */
.us-tc-accent [data-sparkle] { transform-box: fill-box; transform-origin: center; }
/* Boxed into the page's top-left corner: below the header (the strands would
   cross the "Shop" link) and narrow enough to stop short of the headline.
   Anchored to the viewport rather than the capped stage — otherwise a wide
   screen pushes it inward, straight over the headline. */
.us-tc-accent-web { top: 7%; left: calc(50% - 50vw); width: min(16%, 15rem); }
.us-tc-accent-arc { right: calc(4% + var(--rail)); top: 11%; width: 40%; }
/* The block frame surrounds the bag, so it belongs *behind* it (z-index 1)
   rather than on the accent layer above the product. */
.us-tc-accent-blocks {
  right: calc(4% + var(--rail));
  top: 50%;
  width: 26%;
  translate: 0 -50%;
  opacity: 0.6;
  z-index: 1;
}
/* Narrower and pushed right so its left leg starts clear of the brand mark.
   The mark is pink and the rainbow's outer band is pink, so any overlap put
   pink script straight on top of a pink arc. Mark on the left of the bag's
   shoulder, rainbow on the right. */
.us-tc-accent-rainbow { right: calc(1% + var(--rail)); top: 7%; width: 21%; }

/* ── Edge steppers ───────────────────────────────────────────────────
 * Manual theme control with no visible control: a strip down each gutter
 * whose popup fades in as the cursor comes near it. The strip itself is
 * never painted — `.edgePop` is the whole of what a visitor sees, and the
 * effect owns its opacity, scale and offset (see ThemeCycler.tsx).
 *
 * `pointer-events` starts at none and the effect turns it on once the cursor
 * is more than half way into the zone. These strips overlap the start of the
 * headline on one side and the hover eggs on the other, and a permanently
 * live strip down each gutter would swallow text selection on one and the
 * egg reactions on the other.
 */
.us-tc-edge {
  position: absolute;
  z-index: 6;
  top: 0;
  bottom: 0;
  /* Wide enough to contain the whole live band: the effect turns clicks on
     within 135px of the edge, so the strip has to reach at least that far or
     a lit popup would sit over dead page. */
  width: clamp(88px, 11vw, 168px);
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none;
  cursor: pointer;
}
.us-tc-edge-prev { left: 0; }
/* Clear of the section rail, which owns the last 68px of the page and has
   its own links in it. The effect measures proximity to this edge, not to
   the section's — see `inset` on Zone. */
.us-tc-edge-next { right: var(--rail); }

/*
 * One capsule, not a chevron and a chip.
 *
 * The popup rides at the cursor's own height, which on the left means it
 * lands on a 7rem headline as often as not. Two separate white shapes
 * floating over display type read as debris; a single pill with a hard edge
 * and a shadow reads as a control that arrived on top of the page.
 */
.us-tc-edge-pop {
  /* Halved into a negative margin so the effect can set `y` to the cursor's
     own height and have the popup sit *on* it rather than hang below it. */
  --pop-h: 48px;
  position: absolute;
  top: 0;
  height: var(--pop-h);
  margin-top: calc(var(--pop-h) / -2);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent);
  box-shadow: 0 14px 34px -16px color-mix(in srgb, var(--brand) 75%, transparent);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
/* Chevron on the outer side of the capsule in both cases, so it points the
   way it takes you. `row-reverse` rather than a second markup order. */
.us-tc-edge-prev .us-tc-edge-pop { left: 14px; padding: 0 0.95rem 0 0.4rem; }
.us-tc-edge-next .us-tc-edge-pop { right: 14px; padding: 0 0.4rem 0 0.95rem; flex-direction: row-reverse; }

.us-tc-edge-arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  /* The theme's own colour, so the control belongs to whatever is on stage. */
  background: color-mix(in srgb, var(--brand) 12%, var(--white));
  color: var(--brand);
}
.us-tc-edge-arrow svg { display: block; }
.us-tc-edge-arrow path {
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.us-tc-edge-word {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Nothing to bring a cursor near. The timer drives these on its own — the
   effect checks the same query before wiring anything up. */
@media (hover: none) {
  .us-tc-edge { display: none; }
}

@media (max-width: 1199px) {
  .us-tc-cycler {
    font-size: clamp(2rem, 4.6vw, 4.4rem);
  }
}

@media (max-width: 899px) {
  /*
   * One column, so the art can no longer sit *beside* the copy — it has to sit
   * under it. `.stages` is `inset: 0` by default, i.e. the whole section, and
   * every prop is positioned as a percentage of that box. With the copy
   * occupying the top of the same box, the bag and the brand mark were laid
   * straight over the blurb: measured across 360-860px, the product's top edge
   * landed ~40px above the blurb's last line at every width, and the mark
   * ~15px above it.
   *
   * So the section reserves a band of padding at its foot, tall enough that
   * everything anchored to the bottom — the bag, the brand mark, the cast on
   * their floor line — comes to rest below the copy instead of on top of it.
   * Measured at 390px: the product's top edge moves from 191 to 287 against a
   * blurb that ends at 232.
   *
   * `.stages` deliberately stays `inset: 0` (the whole section) rather than
   * being clipped to that band. The two Spider-Men and the unicorn are
   * anchored to the *top*, and they are meant to hang from the edge where the
   * white above meets this theme's wash — pinning them to a band at the foot
   * of the section left them hanging from the middle of the colour instead of
   * from where it starts.
   */
  .us-tc-frame {
    --art-band: clamp(19rem, 85vw, 22rem);
    grid-template-columns: 1fr;
    min-height: auto;
    padding-block: 4rem var(--art-band);
    gap: 2rem;
  }
  .us-tc-cycler {
    font-size: clamp(2rem, 7vw, 3.8rem);
  }
  .us-tc-badge {
    left: 50%;
    top: auto;
    bottom: clamp(4rem, 13vw, 6rem);
    translate: -50% 0;
    width: clamp(13rem, 62vw, 17rem);
  }
  /* No transform-based centring here either — see the note on .product. */
  .us-tc-product {
    --product-width: clamp(9.5rem, 44vw, 12rem);
    right: auto;
    left: 50%;
    top: auto;
    bottom: clamp(2rem, 7vw, 3rem);
    width: var(--product-width);
    margin-left: calc(var(--product-width) / -2);
    display: block;
  }
  .us-tc-mark {
    right: auto;
    left: calc(50% - clamp(5.5rem, 25vw, 7rem));
    top: auto;
    bottom: clamp(11.5rem, 44vw, 14rem);
    width: clamp(4.75rem, 20vw, 6.5rem);
  }
  .us-tc-stage[data-theme='unicorn'] .us-tc-mark {
    left: calc(50% - 7.5rem);
    bottom: 13.5rem;
    width: clamp(6rem, 24vw, 9rem);
  }
  .us-tc-stage[data-theme='minecraft'] .us-tc-mark {
    left: calc(50% + clamp(1.25rem, 6vw, 2.5rem));
    bottom: clamp(14.5rem, 58vw, 17rem);
    width: clamp(7rem, 31vw, 9rem);
  }
  .us-tc-accent-web { width: 34%; }
  .us-tc-accent-arc, .us-tc-accent-rainbow, .us-tc-accent-blocks { display: none; }
  /* Top-anchored props collide with the full-width headline on mobile */
  .us-tc-prop[style*="top:"] { display: none; }
  .us-tc-prop:not(.us-tc-prop-bleed)[style*="bottom:"] {
    bottom: clamp(1.5rem, 6vw, 3rem) !important;
    width: clamp(3.4rem, 16vw, 5.2rem) !important;
  }

  /* Disney has three floor characters. Place them as a balanced supporting
     row around the centred product instead of inheriting desktop offsets. */
  .us-tc-stage[data-theme='disney'] [data-prop='disney-rapunzel'] {
    right: auto !important;
    left: clamp(0.6rem, 3vw, 1.5rem) !important;
  }
  .us-tc-stage[data-theme='disney'] [data-prop='disney-ariel'] {
    right: auto !important;
    left: clamp(4.4rem, 21vw, 8rem) !important;
    width: clamp(3rem, 14vw, 4.5rem) !important;
  }
  .us-tc-stage[data-theme='disney'] [data-prop='disney-stitch'] {
    right: clamp(0.75rem, 4vw, 2rem) !important;
    left: auto !important;
  }

  /* The remaining shelves get the same three-point balance as Disney: one
     strong product in the centre and small characters framing it. */
  .us-tc-stage[data-theme='marvel'] [data-prop='marvel-spidey-hang'],
  .us-tc-stage[data-theme='marvel'] [data-prop='marvel-spidey-swing'],
  .us-tc-stage[data-theme='unicorn'] [data-prop='unicorn-rear'] {
    display: block;
    top: auto !important;
  }
  .us-tc-stage[data-theme='marvel'] [data-prop='marvel-ironman'] {
    left: clamp(0.65rem, 3vw, 1.5rem) !important;
    width: clamp(3.8rem, 17vw, 5.2rem) !important;
  }
  .us-tc-stage[data-theme='marvel'] [data-prop='marvel-spidey-hang'] {
    right: clamp(-0.2rem, 1vw, 0.5rem) !important;
    left: auto !important;
    bottom: clamp(1.25rem, 5vw, 2.5rem) !important;
    width: clamp(3.5rem, 15vw, 4.5rem) !important;
  }
  .us-tc-stage[data-theme='marvel'] [data-prop='marvel-spidey-swing'] {
    right: clamp(0.75rem, 4vw, 2rem) !important;
    left: auto !important;
    bottom: clamp(9.5rem, 37vw, 12rem) !important;
    width: clamp(3.7rem, 17vw, 5.2rem) !important;
  }
  .us-tc-stage[data-theme='minecraft'] [data-prop='minecraft-zombies'] {
    left: clamp(0.65rem, 3vw, 1.5rem) !important;
  }
  .us-tc-stage[data-theme='minecraft'] [data-prop='minecraft-golem'] {
    right: clamp(0.4rem, 2vw, 1rem) !important;
    left: auto !important;
  }
  .us-tc-mobile-extra {
    position: absolute;
    z-index: 4;
    left: clamp(0.8rem, 5vw, 2.5rem);
    bottom: clamp(8rem, 33vw, 10.5rem);
    display: block;
    width: clamp(3rem, 14vw, 4.2rem);
  }
  .us-tc-mobile-extra img { display: block; width: 100%; height: auto; }
  .us-tc-stage[data-theme='unicorn'] [data-prop='unicorn-lie'] {
    left: clamp(0.5rem, 2vw, 1rem) !important;
  }
  .us-tc-stage[data-theme='unicorn'] [data-prop='unicorn-leap'] {
    right: clamp(0.5rem, 2vw, 1rem) !important;
    left: auto !important;
  }
  .us-tc-stage[data-theme='unicorn'] [data-prop='unicorn-rear'] {
    right: clamp(0.25rem, 2vw, 1rem) !important;
    left: auto !important;
    bottom: clamp(9rem, 36vw, 11.5rem) !important;
    width: clamp(4rem, 18vw, 5.5rem) !important;
  }
  /* One column, no gutters worth the name, and no cursor. */
  .us-tc-edge { display: none; }
}

/* ── Reduced motion: nothing can cycle, so un-stack the themes into a
   readable list rather than leaving three of four hidden. ── */
.us-tc-frame[data-static='true'] { grid-template-columns: 1fr; min-height: auto; padding-block: 4rem; }
.us-tc-frame[data-static='true'] .us-tc-edge { display: none; }
.us-tc-frame[data-static='true'] .us-tc-wash,
.us-tc-frame[data-static='true'] .us-tc-badge,
.us-tc-frame[data-static='true'] .us-tc-stages { display: none; }
.us-tc-frame[data-static='true'] .us-tc-cycler { font-size: clamp(2rem, 4.4vw, 3.6rem); }
.us-tc-frame[data-static='true'] .us-tc-slot { display: flex; flex-direction: column; gap: 0.1em; color: var(--ink); }
.us-tc-frame[data-static='true'] .us-tc-slot-word { position: relative; opacity: 1 !important; }
.us-tc-frame[data-static='true'] .us-tc-tail { display: none; }
.us-tc-frame[data-static='true'] .us-tc-blurb { display: flex; flex-direction: column; gap: 0.7rem; max-width: none; }
.us-tc-frame[data-static='true'] .us-tc-blurb > p { grid-area: auto; opacity: 1 !important; }