/* ==========================================================
   SHINES RIGHT DESIGNS — MAIN LANDING PAGE
   1. Tokens & base           6. Coloring books (+ entrance)
   2. Halo background         7. Apparel cards (+ entrance)
   3. Glass card & media      8. Redirect loader
   4. Card overlay & badge    9. Responsive & accessibility
   5. Button dock
   ========================================================== */


/* ---------- 1. Tokens & base ---------- */

:root {
  --bg-dark: #020203;
  --gold-accent: #e0ac43;
  --font: 'Plus Jakarta Sans', -apple-system, sans-serif;

  /* Halo stage */
  --halo-speed: 40s;
  --halo-scale: 1;
  --halo-opacity: 0.75;

  /* Halo colours */
  --text-color: #fecf71;
  --r2-color: #f5d382;
  --r3-color: #e0ac43;

  /* Rotating halo text */
  --text-font-size: 52px;
  --text-font-family: 'DM Serif Display', serif;
  --text-letter-spacing: 2px;
  --text-dir: normal;
  --text-glow-val: 4px;

  /* Outer and inner rings (plain circles, so they don't need to turn) */
  --r2-width: 2px;
  --r3-width: 2px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Full-screen experience: never scroll or pan (the fanned apparel cards
   can extend past the card, and mobile Safari needs this on <html> too). */
html { overflow: hidden; }

body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg-dark);
  font-family: var(--font);
}


/* ---------- 2. Halo background ---------- */

.bg-stage-container {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg-dark);
}

.halo-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120vmax;
  height: 120vmax;
  transform: translate(-50%, -50%) scale(var(--halo-scale));
  opacity: var(--halo-opacity);
  pointer-events: none;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

/* Smooth scaling for the bulb images on the ring (fallback chain per browser) */
.halo-svg image {
  image-rendering: auto;
  image-rendering: smooth;
  image-rendering: -webkit-optimize-contrast;
}

/* The text layer and the bulb-glow layer turn as whole pictures around the
   card's centre. Turning the <svg> itself (not shapes inside it) lets the
   browser draw the text once and just rotate the finished layer, which keeps
   it smooth on iPad / Safari. The plain rings don't need to turn: a circle
   looks the same at any angle. */
.halo-spin {
  animation: haloSpin var(--halo-speed) linear infinite;
  animation-direction: var(--text-dir);
  will-change: transform;
}

@keyframes haloSpin {
  from { transform: translate(-50%, -50%) scale(var(--halo-scale)) rotate(0deg); }
  to   { transform: translate(-50%, -50%) scale(var(--halo-scale)) rotate(360deg); }
}

/* Ring bulbs glow as they line up level (3 and 9 o'clock).
   The bulbs start at 12 and 6 o'clock, so with the text turning at a steady
   speed they are level at 25% and 75% of each turn. The glow layer turns with
   the text and fades in and out on the same timing (--halo-speed), so the two
   stay in step. The glow builds just before each line-up, peaks exactly on
   it (at the same strength as the rest of the halo), and fades just after:
     20% → 25% → 30%  (each 5% = 18° of turn; 2s at the default 40s speed).
   To make the glow start earlier / last longer, widen these (e.g. 18% / 32%). */
.halo-glow-layer {
  opacity: 0;
  animation:
    haloSpin var(--halo-speed) linear infinite,
    bulbGlow var(--halo-speed) linear infinite;
  animation-direction: var(--text-dir);
  will-change: transform, opacity;
}

@keyframes bulbGlow {
  0%, 20%  { opacity: 0; animation-timing-function: cubic-bezier(.45,0,.55,1); }
  25%      { opacity: var(--halo-opacity); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  30%, 70% { opacity: 0; animation-timing-function: cubic-bezier(.45,0,.55,1); }
  75%      { opacity: var(--halo-opacity); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  80%, 100% { opacity: 0; }
}

#ring-elem-2 { stroke: var(--r2-color); stroke-width: var(--r2-width); }
#ring-elem-3 { stroke: var(--r3-color); stroke-width: var(--r3-width); }

#text-elem {
  fill: var(--text-color);
  font-family: var(--text-font-family), serif;
  font-size: var(--text-font-size);
  letter-spacing: var(--text-letter-spacing);
  filter: drop-shadow(0 0 var(--text-glow-val) var(--text-color));
}

/* Coloured aura behind the card; JS swaps the gradient per card */
.ambient-glow {
  position: absolute;
  z-index: 1;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,75,20,.25) 0%, rgba(224,172,67,.15) 40%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  transition: background 1.8s ease, transform 1.8s ease;
}


/* ---------- 3. Glass card & media ---------- */

.stage {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  perspective: 1400px;
}

/* Width/height are set by JS to fit the viewport (3:5 portrait). */
.glass-card {
  --dock-responsive-scale: 1;  /* JS shrinks this when the card is narrower than designed (dock + shirt cards) */
  --dock-text-factor: 1;       /* JS lowers this if the button text + Amazon logo don't fit */
  /* Apparel shirt cards: distance from the card bottom, and card height */
  --shirts-bottom: 92px;
  --shirt-h: calc(271.5px * var(--dock-responsive-scale));
  position: relative;
  overflow: hidden;
  width: 460px;
  height: 767px;
  border-radius: 32px;
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  box-shadow:
    0 40px 80px -15px rgba(0,0,0,.9),
    0 0 40px 0 rgba(0,0,0,.6),
    inset 0 1px 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 1px 0 rgba(0,0,0,.8);
  transform-style: preserve-3d;
  opacity: 0;
  transform: scale(.96) rotateY(0deg);
  transition:
    opacity .8s ease,
    transform 2.6s cubic-bezier(.2,.8,.2,1),
    width .7s cubic-bezier(.16,1,.3,1),
    height .7s cubic-bezier(.16,1,.3,1);
}
.glass-card.is-ready {
  opacity: 1;
  transform: scale(1) rotateY(0deg);
}
.glass-card.no-transition { transition: none; }
/* JS adds this for one frame on rotate/resize: size changes instantly,
   while fades and the spin keep their animations. */
.glass-card.instant-size {
  transition:
    opacity .8s ease,
    transform 2.6s cubic-bezier(.2,.8,.2,1);
}

/* Light that follows the mouse (JS sets --mouse-x / --mouse-y) */
.glare-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,.12), transparent 40%);
}

.media-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
}

.card-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition:
    opacity 1.2s cubic-bezier(.4,0,.2,1),
    filter 1.2s cubic-bezier(.4,0,.2,1),
    transform 1.2s cubic-bezier(.4,0,.2,1);
}
.card-media.active {
  opacity: 1;
  transform: scale(1);
}


/* ---------- 4. Card overlay & badge ---------- */

.card-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.65) 0%, transparent 30%, transparent 55%, rgba(0,0,0,.10) 100%);
}

.card-header,
.card-footer { pointer-events: auto; }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  color: #ffffff;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  backdrop-filter: blur(16px);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
/* Coloring Books card: badge sits 10px higher */
.glass-card.coloring-card-active .status-badge { transform: translateY(-10px); }

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-accent);
  box-shadow: 0 0 10px var(--gold-accent);
}


/* ---------- 5. Button dock (welcome card) ----------
   Sizes scale with --dock-responsive-scale (1 = full size). */

.card-dock {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 5px;
  z-index: 25;
  display: flex;
  gap: calc(12px * var(--dock-responsive-scale));
  padding: calc(5px * var(--dock-responsive-scale));
  border: 1.5px solid rgba(255,186,27,.95);
  border-radius: calc(22px * var(--dock-responsive-scale));
  background:
    radial-gradient(circle at 50% -20%, rgba(255,191,45,.18), transparent 42%),
    linear-gradient(180deg, rgba(52,24,2,.94) 0%, rgba(20,8,1,.96) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 0 0 1px rgba(255,225,126,.08) inset,
    0 0 16px rgba(255,166,0,.38),
    0 0 34px rgba(255,132,0,.18),
    0 12px 30px rgba(0,0,0,.58);
}
/* Hidden on the coloring/apparel cards, where JS empties it */
.card-dock:empty { display: none; }

.dock-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 0;
  gap: calc(12px * var(--dock-responsive-scale));
  width: 0;
  min-width: 0;
  min-height: calc(48px * var(--dock-responsive-scale));
  padding: calc(5px * var(--dock-responsive-scale)) calc(10px * var(--dock-responsive-scale));
  border: 1.5px solid rgba(255,182,18,.92);
  border-radius: calc(18px * var(--dock-responsive-scale));
  background:
    radial-gradient(circle at 50% 10%, rgba(255,190,55,.12), transparent 48%),
    linear-gradient(180deg, rgba(39,17,2,.96) 0%, rgba(11,5,1,.98) 100%);
  color: #ffd66b;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1.08;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(255,232,154,.04),
    0 0 12px rgba(255,168,0,.18);
  transition:
    transform .3s cubic-bezier(.16,1,.3,1),
    box-shadow .3s ease,
    border-color .3s ease,
    background .3s ease;
}
.dock-btn:hover:not(:disabled) {
  border-color: #ffd15a;
  background:
    radial-gradient(circle at 50% 5%, rgba(255,214,96,.20), transparent 50%),
    linear-gradient(180deg, rgba(58,26,2,.98) 0%, rgba(17,7,1,1) 100%);
  box-shadow:
    0 0 16px rgba(255,177,0,.48),
    0 0 28px rgba(255,128,0,.22);
  transform: translateY(-2px);
}
.dock-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
}

.dock-btn span {
  color: #ffe08a;
  text-shadow:
    0 0 4px rgba(255,203,62,.55),
    0 1px 2px rgba(0,0,0,.85);
}

.dock-icon {
  flex: 0 0 calc(28px * var(--dock-responsive-scale));
  width: calc(28px * var(--dock-responsive-scale));
  height: calc(28px * var(--dock-responsive-scale));
  filter:
    drop-shadow(0 0 4px rgba(255,184,20,.85))
    drop-shadow(0 0 10px rgba(255,135,0,.35));
}
.dock-icon.book {
  fill: none;
  stroke: url(#dockIconGoldStroke);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dock-icon.shirt {
  fill: url(#dockIconGoldFill);
  stroke: #ffcb43;
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.dock-label {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

.dock-line-main {
  font-size: calc(.99rem * var(--dock-responsive-scale) * var(--dock-text-factor));
  font-weight: 800;
  letter-spacing: calc(.06em * var(--dock-responsive-scale));
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}

/* "Apparel - [amazon logo]" */
.dock-line-apparel {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(6px * var(--dock-responsive-scale));
  width: 100%;
  line-height: 1;
}
.dock-line-apparel > span,
.dock-line-apparel > img {
  display: inline-flex;
  align-items: center;
}

.dock-separator {
  margin: 0 calc(1px * var(--dock-responsive-scale));
  color: #ffe08a;
  font-weight: 800;
}

/* Tightly cropped logo (no transparent padding), so it's sized directly. */
.amazon-mark {
  display: inline-block;
  flex: 0 0 auto;
  width: calc(71px * var(--dock-responsive-scale) * var(--dock-text-factor));
  height: auto;
  margin-top: calc(6px * var(--dock-responsive-scale));  /* sits ~3px below the text centre, like the "a" baseline */
  vertical-align: middle;
  filter:
    drop-shadow(0 0 4px rgba(255,203,62,.18))
    drop-shadow(0 1px 2px rgba(0,0,0,.45));
}


/* ---------- 6. Coloring books (card 2) ---------- */

.coloring-books-container {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 92px;
  z-index: 15;
  height: 240px;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(22px) scale(.94);
  transition:
    opacity .6s ease,
    transform .6s cubic-bezier(.16,1,.3,1),
    visibility .6s ease;
}
.coloring-books-container.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.book-window {
  position: absolute;
  bottom: 0;
  overflow: hidden;
  width: calc((100% - 57px) / 2);
  aspect-ratio: 134 / 177;
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 16px 36px rgba(0,0,0,.75),
    0 0 20px rgba(224,172,67,.25);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .4s ease, box-shadow .4s ease;
}
.book-window:hover {
  box-shadow:
    0 22px 45px rgba(0,0,0,.85),
    0 0 28px rgba(224,172,67,.5);
}

.book-window.top-book {
  left: 26px;
  bottom: -20px;
  transform: rotate(-4deg);
  transform-origin: center bottom;
}
.book-window.top-book:hover { transform: rotate(-2.5deg) translateY(-4px) scale(1.03); }

.book-window.bottom-book {
  right: 26px;
  bottom: -65px;
  transform: rotate(7deg);
  transform-origin: center bottom;
}
.book-window.bottom-book:hover { transform: rotate(5deg) translateY(-4px) scale(1.03); }

.book-window img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Entrance (JS adds these classes in order):
   books-fly-start → off-screen right, centred on the shared midpoint
   books-stack     → both land stacked on the midpoint (staggered)
   books-opening   → both slide out to their final positions
   Must stay after the hover rules above (same specificity). */
.coloring-books-container.books-animating .book-window {
  transition:
    transform .72s cubic-bezier(.16,1,.3,1),
    opacity .45s ease,
    box-shadow .4s ease;
  will-change: transform, opacity;
}
.coloring-books-container.books-fly-start .book-window {
  opacity: 0;
  transform: translate(calc(var(--book-stack-x, 0px) + 125vw), var(--book-stack-y, 0px)) rotate(0deg) scale(.94);
}
.coloring-books-container.books-stack .book-window {
  opacity: 1;
  transform: translate(var(--book-stack-x, 0px), var(--book-stack-y, 0px)) rotate(0deg) scale(1);
}
.coloring-books-container.books-stack .top-book {
  z-index: 5;
  transition-delay: 0ms;
}
.coloring-books-container.books-stack .bottom-book {
  z-index: 6;
  transition-delay: 110ms;
}
.coloring-books-container.books-opening .book-window {
  transition-delay: 0ms;
  transition-duration: 1.05s, .45s, .4s;
}


/* ---------- 7. Apparel cards (card 3) ---------- */

.apparel-cards-container {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: var(--shirts-bottom);
  z-index: 15;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(22px) scale(.94);
  transition:
    opacity .6s ease,
    transform .6s cubic-bezier(.16,1,.3,1),
    visibility .6s ease;
}
.apparel-cards-container.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.shirt-card {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  /* Sized from the card width: full size on a 508px+ card, smaller on narrower
     cards (e.g. iPad landscape), using the same scale as the button dock. */
  width: calc(217.5px * var(--dock-responsive-scale));
  height: var(--shirt-h);
  border: 1.5px solid rgba(255,103,18,.92);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 6%, rgba(255,196,72,.22), transparent 42%),
    radial-gradient(circle at 50% 46%, rgba(255,72,0,.12), transparent 62%),
    linear-gradient(180deg, rgba(54,12,4,.96) 0%, rgba(15,4,2,.99) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 0 0 1px rgba(255,220,128,.06),
    0 0 14px rgba(255,79,0,.54),
    0 0 30px rgba(255,28,0,.30),
    0 0 46px rgba(255,159,0,.14),
    0 18px 38px rgba(0,0,0,.70);
  transform-origin: center bottom;
  transition:
    transform .4s ease,
    box-shadow .4s ease,
    border-color .4s ease,
    background .4s ease;
}
.shirt-card:hover {
  border-color: rgba(255,176,48,.98);
  background:
    radial-gradient(circle at 50% 6%, rgba(255,221,112,.28), transparent 42%),
    radial-gradient(circle at 50% 46%, rgba(255,72,0,.18), transparent 62%),
    linear-gradient(180deg, rgba(68,14,4,.98) 0%, rgba(18,4,2,1) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,232,164,.10),
    0 0 18px rgba(255,108,0,.72),
    0 0 36px rgba(255,38,0,.42),
    0 0 54px rgba(255,184,36,.22),
    0 22px 45px rgba(0,0,0,.78);
}

/* Warm top glow */
.shirt-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,230,138,.18), transparent 36%),
    linear-gradient(180deg, rgba(255,100,0,.09) 0%, transparent 38%, transparent 100%);
}
/* Inner rim + bottom shade, above the shirt image */
.shirt-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255,188,84,.08),
    inset 0 -12px 22px rgba(0,0,0,.28);
}

.shirt-card img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  padding: 8px;
  object-fit: contain;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter:
    drop-shadow(0 12px 18px rgba(0,0,0,.62))
    drop-shadow(0 0 10px rgba(255,77,0,.16))
    drop-shadow(0 0 18px rgba(255,167,0,.08));
}

/* Fan layout: Lion (left), Dragon (centre, anchor), Baby Dragon (right) */
.shirt-card-left   { z-index: 4; transform: translate(calc(70px * var(--dock-responsive-scale)), calc(25px * var(--dock-responsive-scale))) rotate(-11deg); }
.shirt-card-center { z-index: 3; }
.shirt-card-right  { z-index: 2; transform: translate(calc(-70px * var(--dock-responsive-scale)), calc(25px * var(--dock-responsive-scale))) rotate(11deg); }

.shirt-card-left:hover   { transform: translate(calc(70px * var(--dock-responsive-scale)), calc(21px * var(--dock-responsive-scale))) rotate(-11deg) scale(1.03); }
.shirt-card-center:hover { transform: translateY(-4px) scale(1.03); }
.shirt-card-right:hover  { transform: translate(calc(-70px * var(--dock-responsive-scale)), calc(21px * var(--dock-responsive-scale))) rotate(11deg) scale(1.03); }

/* Entrance (JS adds these classes in order):
   fly-in-start → all three off-screen right
   fly-in-stack → land stacked on the centre card (staggered)
   fan-opening  → side cards slide out to the fan layout */
.apparel-cards-container.apparel-animating .shirt-card {
  transition:
    transform .72s cubic-bezier(.16,1,.3,1),
    opacity .45s ease,
    box-shadow .4s ease,
    border-color .4s ease,
    background .4s ease;
  will-change: transform, opacity;
}
.apparel-cards-container.fly-in-start .shirt-card {
  opacity: 0;
  transform: translate(125vw, 0) rotate(0deg) scale(.94);
}
/* ±100% moves the equal-width side cards exactly over the centre card */
.apparel-cards-container.fly-in-stack .shirt-card-left {
  z-index: 4;
  opacity: 1;
  transform: translate(100%, 0) rotate(0deg) scale(1);
  transition-delay: 0ms;
}
.apparel-cards-container.fly-in-stack .shirt-card-center {
  z-index: 5;
  opacity: 1;
  transform: translate(0, 0) rotate(0deg) scale(1);
  transition-delay: 110ms;
}
.apparel-cards-container.fly-in-stack .shirt-card-right {
  z-index: 6;
  opacity: 1;
  transform: translate(-100%, 0) rotate(0deg) scale(1);
  transition-delay: 220ms;
}
.apparel-cards-container.fan-opening .shirt-card-left,
.apparel-cards-container.fan-opening .shirt-card-right {
  transition-delay: 0ms;
  transition-duration: 1.05s, .45s, .4s, .4s, .4s;
}
.apparel-cards-container.fan-opening .shirt-card-center { transition-delay: 0ms; }

/* Once the fan opens, let the side cards extend past the card's edges
   instead of being clipped. (The media, glare and overlay layers keep the
   rounded corners themselves via border-radius: inherit.) */
.glass-card.apparel-fanned { overflow: visible; }


/* ---------- 8. Redirect loader ---------- */

/* Centred on the card; JS raises it (inline "top") if the books/shirts
   would otherwise reach the progress bar. */
.redirect-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.85);
  transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.redirect-loader.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.loader-icon {
  width: 96px;
  height: 96px;
  padding: 8px;
  border: 3px solid var(--gold-accent);
  border-radius: 50%;
  background: #ffffff;
  object-fit: contain;
  box-shadow:
    0 0 35px rgba(224,172,67,.6),
    0 10px 30px rgba(0,0,0,.8);
}

.progress-track {
  overflow: hidden;
  width: 180px;
  height: 6px;
  border: 1px solid rgba(224,172,67,.4);
  border-radius: 999px;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0,0,0,.6);
}

.progress-fill {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #e0ac43 0%, #fff0a8 50%, #e0ac43 100%);
  box-shadow: 0 0 14px rgba(224,172,67,.9);
  transition: width 3s linear;
}
/* JS adds this briefly to snap the bar back to empty */
.progress-fill.reset {
  width: 0%;
  transition: none;
}


/* ---------- 9. Responsive & accessibility ---------- */

@media (max-width: 900px) {
  .coloring-books-container {
    bottom: 90px;
    height: 226px;
  }
  .book-window { width: calc((100% - 53px) / 2); }
  .book-window.top-book { left: 24px; }
  .book-window.bottom-book { right: 24px; }

  .glass-card {
    --shirts-bottom: 88px;
    --shirt-h: calc(237px * var(--dock-responsive-scale));
  }
  .apparel-cards-container {
    left: 18px;
    right: 18px;
  }
  .shirt-card { width: calc(189px * var(--dock-responsive-scale)); }
  .shirt-card-left  { transform: translate(calc(60px * var(--dock-responsive-scale)), calc(25px * var(--dock-responsive-scale))) rotate(-11deg); }
  .shirt-card-right { transform: translate(calc(-60px * var(--dock-responsive-scale)), calc(25px * var(--dock-responsive-scale))) rotate(11deg); }
}

@media (max-width: 600px) {
  .glass-card { border-radius: 24px; }
  .card-overlay { padding: 18px; }
  .status-badge {
    padding: 7px 11px;
    font-size: .56rem;
  }

  /* Phone dock: same --dock-responsive-scale idea, from a 385px-wide card */
  .card-dock {
    left: 3px;
    right: 3px;
    gap: calc(8px * var(--dock-responsive-scale));
    padding: calc(8px * var(--dock-responsive-scale));
    border-radius: calc(18px * var(--dock-responsive-scale));
  }
  .dock-btn {
    gap: calc(10px * var(--dock-responsive-scale));
    min-height: calc(44px * var(--dock-responsive-scale));
    padding: calc(4px * var(--dock-responsive-scale)) calc(7px * var(--dock-responsive-scale));
    border-radius: calc(14px * var(--dock-responsive-scale));
    font-size: .60rem;
  }
  .dock-icon {
    flex-basis: calc(24px * var(--dock-responsive-scale));
    width: calc(24px * var(--dock-responsive-scale));
    height: calc(24px * var(--dock-responsive-scale));
  }
  .dock-line-main { font-size: calc(.75rem * var(--dock-responsive-scale) * var(--dock-text-factor)); }
  .amazon-mark { width: calc(48px * var(--dock-responsive-scale) * var(--dock-text-factor)); }

  .coloring-books-container {
    bottom: 84px;
    height: 206px;
  }
  .book-window { width: calc((100% - 49px) / 2); }
  .book-window.top-book {
    left: 22px;
    bottom: -40px;
  }
  .book-window.bottom-book { right: 22px; }

  .apparel-cards-container {
    left: 10px;
    right: 10px;
  }
  /* Phone fan scales with the screen so the side cards always fit fully
     (the fanned set is about 2.6 card-widths wide, plus an 8px margin each side). */
  .glass-card {
    --shirt-w: min(148px, calc((100vw - 16px) / 2.6));
    --shirts-bottom: 68px;
    --shirt-h: calc(var(--shirt-w) * 1.25);
  }
  .shirt-card { width: var(--shirt-w); }
  .shirt-card-left        { transform: translate(calc(var(--shirt-w) * .43), 22px) rotate(-11deg); }
  .shirt-card-right       { transform: translate(calc(var(--shirt-w) * -.43), 22px) rotate(11deg); }
  .shirt-card-left:hover  { transform: translate(calc(var(--shirt-w) * .43), 18px) rotate(-11deg) scale(1.03); }
  .shirt-card-right:hover { transform: translate(calc(var(--shirt-w) * -.43), 18px) rotate(11deg) scale(1.03); }
}

/* Phones in landscape: the page is portrait-only */
@media screen and (orientation: landscape) and (max-width: 900px) {
  .stage,
  .bg-stage-container,
  .ambient-glow { display: none; }

  body::before {
    content: "Please rotate your device back to portrait";
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: var(--bg-dark);
    color: #ffffff;
    font-family: var(--font);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.4;
    text-align: center;
  }
}

/* Reduced motion: entrances jump straight to their end state.
   Kept last so it overrides the entrance timings above. */
@media (prefers-reduced-motion: reduce) {
  .coloring-books-container.books-animating .book-window,
  .apparel-cards-container.apparel-animating .shirt-card {
    transition-duration: .01ms;
    transition-delay: 0ms;
  }
}