/* ============================================================
   Reel ad — shared scaffold + 4 direction styles
   Built on Arc tokens. Base canvas is 1080×1920 (9:16);
   index.html scales each reel down to fit its artboard.
   ============================================================ */

/* ---------- BASE REEL CANVAS ---------- */
.reel {
  position: relative;
  width: 1080px;
  height: 1920px;
  overflow: hidden;
  background: #181021;
  color: #fff;
  /* Poppins across the ad (body + the large item names) */
  --font-body: 'Poppins', system-ui, sans-serif;
  --font-display: 'Poppins', system-ui, sans-serif;
  font-family: var(--font-body);
  --pad: 76px;
  --deal: var(--accent);        /* recolorable via Tweaks */
  --scrim-deep: 24, 16, 33;     /* deep plum — text contrast anchor */
  --scrim-mauve: 141, 107, 159; /* brand mauve #8D6B9F */
  -webkit-font-smoothing: antialiased;
}

/* ---------- PHOTO LAYER (full-bleed, slow Ken-Burns) ---------- */
.reel-photo { position: absolute; inset: 0; z-index: 0; }
.reel-photo .ken {
  position: absolute; inset: 0;
  transform-origin: center;
  animation: reel-ken 14s ease-in-out infinite alternate;
}
@keyframes reel-ken {
  from { transform: scale(1.03); }
  to   { transform: scale(1.13); }
}
.reel-photo image-slot { width: 100%; height: 100%; display: block; }

/* Duotone fallback behind the slot — shows through the near-transparent
   empty state so an unfilled reel still reads as a composed frame. */
.photo-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 30% 18%, #6E5385 0%, transparent 60%),
    linear-gradient(150deg, #2A2035 0%, #15101D 100%);
}
.photo-fallback i {
  font-size: 280px;
  color: rgba(255,255,255,0.16);
}

/* ---------- SCRIMS ---------- */
.scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.scrim-bottom {
  background: linear-gradient(to top,
    rgba(var(--scrim-deep),0.95) 0%, rgba(var(--scrim-deep),0.80) 14%,
    rgba(var(--scrim-mauve),0.46) 32%, rgba(var(--scrim-mauve),0.12) 50%,
    rgba(var(--scrim-mauve),0) 64%);
}
.scrim-top {
  background: linear-gradient(to bottom,
    rgba(var(--scrim-mauve),0.42) 0%, rgba(var(--scrim-mauve),0.10) 24%, rgba(var(--scrim-mauve),0) 40%);
}

/* ---------- UI OVERLAY ---------- */
.reel-ui {
  position: absolute; inset: 0; z-index: 2;
  padding: var(--pad);
  display: flex; flex-direction: column;
  box-sizing: border-box;
  transition: opacity 0.4s ease;
}
.reel.out .reel-ui { opacity: 0; }

.reel-top { display: flex; align-items: center; justify-content: space-between; }
.reel-bottom { margin-top: auto; }

/* ---------- BRAND MARK ---------- */
.brand { display: flex; align-items: center; gap: 16px; }
.brand svg { width: 44px; height: 44px; display: block; }
.brand .wordmark {
  font-family: var(--font-display);
  font-size: 36px; line-height: 1; letter-spacing: -0.02em;
  font-weight: 600;
  color: #fff;
}

/* ---------- CATEGORY / KICKER / LABELS ---------- */
.cat-pill {
  display: inline-flex; align-items: center; gap: 12px;
  white-space: nowrap;
  height: 60px; padding: 0 26px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255,255,255,0.42);
  font-size: 25px; font-weight: var(--fw-medium);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff;
}
.cat-pill i { font-size: 30px; opacity: 0.85; }

.kicker {
  display: inline-flex; align-items: center; gap: 14px;
  white-space: nowrap;
  font-size: 27px; font-weight: var(--fw-medium);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff;
}
.kicker .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--deal); }
.kicker.on-deal { color: color-mix(in srgb, var(--deal) 55%, #fff); }

/* ---------- ITEM NAME ---------- */
.item-name {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 22px 0 0;
  text-wrap: balance;
}

/* ---------- CONDITION ---------- */
.condition {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 25px; font-weight: var(--fw-medium);
  letter-spacing: 0.02em; color: rgba(255,255,255,0.82);
}
.condition i { font-size: 30px; color: var(--success); }

/* ---------- PRICE ROW ---------- */
.price-row { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.price-now {
  font-size: 92px; font-weight: var(--fw-medium);
  line-height: 1; letter-spacing: -0.02em; color: #fff;
}
.price-was {
  font-size: 44px; color: rgba(255,255,255,0.55);
  text-decoration: line-through; text-decoration-thickness: 2px;
}
.price-off {
  font-size: 34px; font-weight: var(--fw-medium);
  color: color-mix(in srgb, var(--deal) 60%, #fff);
}

/* ---------- CTA ---------- */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  height: 100px; padding: 0 48px;
  background: var(--deal); color: #fff;
  border-radius: var(--radius-pill);
  font-size: 35px; font-weight: var(--fw-medium); letter-spacing: -0.01em;
}
.cta i { font-size: 38px; }
.cta-pulse { animation: reel-cta 2.6s ease-in-out infinite; }
@keyframes reel-cta {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

/* ============================================================
   ENTRANCE ANIMATIONS — base state is the visible end-state;
   .play forces each layer in from a hidden start (backwards fill),
   so no-JS / reduced-motion / export shows full content.
   ============================================================ */
.reel.play .an-fade  { animation: reel-fade 0.7s var(--ease-default) backwards; }
.reel.play .an-up    { animation: reel-up   0.8s var(--ease-default) backwards; }
.reel.play .an-tag   { animation: reel-tag  0.7s var(--ease-default) backwards; }
.reel.play .an-stamp { animation: reel-stamp 0.9s var(--ease-spring) backwards; }
.reel.play .an-wipe  { animation: reel-wipe 0.9s var(--ease-default) backwards; }

@keyframes reel-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes reel-up   { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
@keyframes reel-tag  { from { opacity: 0; transform: translateX(-72px); } to { opacity: 1; transform: none; } }
@keyframes reel-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ============================================================
   DIRECTION 1 — EDITORIAL  (calm Arc, serif name + clean price)
   ============================================================ */
.reel.d1 { --fb-1: #2A2530; --fb-2: #3E3AB8; --fb-3: #14131A; }
.reel.d1 .reel-bottom { display: flex; flex-direction: column; gap: 32px; }
.reel.d1 .item-name { font-size: 96px; max-width: 88%; }
.reel.d1 .price-block { display: flex; flex-direction: column; gap: 18px; }
.reel.d1 .cta { align-self: flex-start; margin-top: 12px; }

/* ============================================================
   DIRECTION 2 — PRICE STICKER  (garage-sale stamp, treasure-hunt)
   ============================================================ */
.reel.d2 { --fb-1: #2E2A24; --fb-2: #4a3f8f; --fb-3: #141118; }
.reel.d2 .stamp {
  position: absolute; top: 232px; right: 64px; z-index: 3;
  width: 286px; height: 286px; border-radius: 50%;
  background: var(--deal); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: rotate(-9deg);
}
.reel.play .stamp { animation: reel-stamp 0.9s var(--ease-spring) backwards; }
@keyframes reel-stamp {
  0%   { opacity: 0; transform: scale(1.9) rotate(-26deg); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(-9deg); }
}
.reel.d2 .stamp .cap { font-size: 26px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.reel.d2 .stamp .price { font-size: 60px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; margin-top: 8px; }
.reel.d2 .stamp .price small { font-size: 0.62em; font-weight: 500; }
.reel.d2 .reel-bottom { display: flex; flex-direction: column; gap: 30px; }
.reel.d2 .item-name { font-size: 84px; max-width: 82%; }
.reel.d2 .price-tag {
  display: inline-flex; align-items: center; gap: 22px; align-self: flex-start;
  background: #fff; color: var(--ink-950);
  border-radius: var(--radius-lg); padding: 22px 34px;
}
.reel.d2 .price-tag .price-now { font-size: 76px; color: var(--ink-950); }
.reel.d2 .price-tag .price-was { color: var(--ink-400); font-size: 40px; }
.reel.d2 .cta { align-self: flex-start; }

/* ============================================================
   DIRECTION 3 — DISCOUNT HERO  (bold, savings-forward type)
   ============================================================ */
.reel.d3 { --fb-1: #201E2E; --fb-2: #3E3AB8; --fb-3: #100F18; }
.reel.d3 .scrim-bottom {
  background: linear-gradient(to top,
    rgba(var(--scrim-deep),0.96) 0%, rgba(var(--scrim-deep),0.86) 26%,
    rgba(var(--scrim-mauve),0.42) 50%, rgba(var(--scrim-mauve),0.10) 66%,
    rgba(var(--scrim-mauve),0) 78%);
}
.reel.d3 .reel-bottom { display: flex; flex-direction: column; gap: 24px; }
.reel.d3 .item-name { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: 60px; max-width: 84%; letter-spacing: -0.02em; }
.reel.d3 .hero-price { display: flex; align-items: baseline; gap: 10px; line-height: 0.86; }
.reel.d3 .hero-price .big {
  font-size: 208px; font-weight: 600;
  letter-spacing: -0.045em; color: #fff;
}
.reel.d3 .hero-price .cur { font-size: 100px; font-weight: 600; color: color-mix(in srgb, var(--deal) 65%, #fff); }
.reel.d3 .cta { align-self: stretch; margin-top: 12px; }

/* ============================================================
   DIRECTION 4 — GALLERY TAG  (curated auction-lot frame)
   ============================================================ */
.reel.d4 { --fb-1: #24222A; --fb-2: #34324a; --fb-3: #121118; }
.reel.d4 .frame-border {
  position: absolute; inset: 40px; z-index: 2;
  border: 2px solid rgba(255,255,255,0.66);
  pointer-events: none;
}
.reel.play .frame-border { animation: reel-fade 1s var(--ease-default) backwards; animation-delay: 0.1s; }
.reel.d4 .reel-ui { padding: 76px; }
.reel.d4 .lot {
  font-family: var(--font-mono);
  font-size: 24px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.9);
}
.reel.d4 .panel {
  background: rgba(24,16,33,0.84);
  border: 1.5px solid rgba(var(--scrim-mauve),0.34);
  border-radius: var(--radius-lg);
  padding: 44px 46px;
  display: flex; flex-direction: column; gap: 26px;
}
.reel.d4 .item-name { font-size: 76px; margin: 0; max-width: 100%; }
.reel.d4 .panel-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.reel.d4 .off-tag {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  font-size: 26px; color: rgba(255,255,255,0.6);
}
.reel.d4 .off-tag .pct { font-size: 52px; font-weight: var(--fw-medium); color: color-mix(in srgb, var(--deal) 62%, #fff); letter-spacing: -0.01em; }
.reel.d4 .cta { height: 92px; }

/* ============================================================
   LISTING CONTENT — wordmark, subtitle, specs, taglines
   ============================================================ */
.wordmark .si { color: color-mix(in srgb, var(--deal) 72%, #fff); }

.item-sub {
  font-size: 34px; font-weight: 400;
  color: rgba(255,255,255,0.7); letter-spacing: 0.01em;
  margin-top: 12px;
}

/* value-only chip row: 2008 · Bencin · Avtomatik · 425 KM */
.spec-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  font-size: 27px; font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.86); letter-spacing: 0.01em;
}
.spec-chips .sep { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.4); }

/* key/value table for the gallery panel */
.spec-list { display: flex; flex-direction: column; }
.spec-list .srow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 16px 0; border-top: 1.5px solid rgba(255,255,255,0.13);
}
.spec-list .srow:first-child { border-top: none; padding-top: 0; }
.spec-list .k {
  font-size: 23px; font-weight: var(--fw-medium);
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5);
}
.spec-list .v { font-size: 31px; font-weight: 600; color: #fff; letter-spacing: -0.005em; }

/* brand taglines */
.tagline {
  font-size: 27px; font-weight: 600; letter-spacing: -0.01em; color: #fff;
}
.tagline .accent { color: color-mix(in srgb, var(--deal) 64%, #fff); }
.subtagline {
  font-size: 23px; font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.52); letter-spacing: 0.02em;
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .reel-photo .ken { animation: none; transform: scale(1.05); }
  .reel.play .an-fade, .reel.play .an-up, .reel.play .an-tag,
  .reel.play .an-stamp, .reel.play .an-wipe,
  .reel.play .stamp, .reel.play .frame-border { animation: none; }
  .cta-pulse { animation: none; }
  .reel.out .reel-ui { opacity: 1; }
}