/* Home + Add page polish (layered over styles.css). */
/* Picture-palace lighting: a deco sunburst behind the marquee, a brass-framed sign with
   warm bulbs and a backlit letterboard, lightbox poster frames that switch on as they
   scroll in, a marquee-lit search box and a lobby poster rack for the pot. Cards stay flat. */

:root {
  --th-brass-edge: linear-gradient(160deg, #fff0b8 0%, #e2ad45 22%, #7c5413 48%, #f0c463 70%, #8a5f17 100%);
  --th-brass-soft: linear-gradient(180deg, rgba(248, 220, 140, 0.75), rgba(168, 120, 31, 0.35));
  --th-warm: 255, 214, 140;
  --th-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 22'%3E%3Cg fill='none' stroke='%23e9b44c' stroke-width='1.2'%3E%3Cpath d='M70 2l9 9-9 9-9-9z'/%3E%3Cpath d='M46 11h12M82 11h12'/%3E%3Cpath d='M36 6l5 5-5 5M104 6l-5 5 5 5'/%3E%3Cpath d='M29 6l5 5-5 5M111 6l-5 5 5 5' opacity='.55'/%3E%3C/g%3E%3Cpath d='M70 6.5l4.5 4.5-4.5 4.5-4.5-4.5z' fill='%23f6d27a'/%3E%3Ccircle cx='20' cy='11' r='1.8' fill='%23e9b44c'/%3E%3Ccircle cx='120' cy='11' r='1.8' fill='%23e9b44c'/%3E%3C/svg%3E");
}

/* =========================================================================
   HOME: hero
   ========================================================================= */

/* A warm practical light falling from the valance onto the sign. */
.page[data-page="home"] .home-top::before {
  content: ""; position: absolute; left: 50%; top: -60px; z-index: 0; pointer-events: none;
  width: min(1100px, 140vw); height: 78%; transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 70% at 50% 0%, rgba(var(--th-warm), 0.13), rgba(var(--th-warm), 0.04) 55%, transparent 75%);
}

/* Poster wall: lightbox frames + parallax (vars set by fx-home.js). */
.page[data-page="home"] .wall {
  opacity: calc(0.24 - var(--th-sn, 0) * 0.2);
  transform:
    translate3d(calc(var(--th-nx, 0) * -34px), calc(var(--th-ny, 0) * -22px + var(--th-sy, 0px) * 0.22), 0)
    perspective(1400px) rotateX(14deg) scale(1.1);
}
.page[data-page="home"] .wall-row img,
.page[data-page="home"] .wall-row .ph {
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 228, 160, 0.35), 0 0 0 4px #0d0806, 0 0 0 5px rgba(233, 180, 76, 0.3), 0 0 26px rgba(var(--th-warm), 0.18);
}

/* Deco sunburst behind the marquee (element added by fx-home.js). */
.page[data-page="home"] .th-sunburst {
  --th-sw: min(1600px, 210vw);
  position: absolute; left: calc(50% - var(--th-sw) / 2); top: calc(50% - var(--th-sw) * 0.54); z-index: 0; pointer-events: none;
  width: var(--th-sw); height: var(--th-sw);
  translate: calc(var(--th-nx, 0) * -14px) calc(var(--th-ny, 0) * -10px + var(--th-sy, 0px) * 0.18);
  background: repeating-conic-gradient(from 0deg, rgba(246, 210, 122, 0.075) 0deg 3.5deg, transparent 3.5deg 10deg);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 16%, #000 24%, rgba(0, 0, 0, 0.55) 44%, transparent 68%);
  mask-image: radial-gradient(circle closest-side, transparent 16%, #000 24%, rgba(0, 0, 0, 0.55) 44%, transparent 68%);
}

/* Light spill around the sign. Lives on the hero so it always sits behind the marquee. */
.page[data-page="home"] .home-hero::before {
  content: ""; position: absolute; left: 50%; top: 0; z-index: -1; pointer-events: none;
  width: min(1180px, 150vw); height: 560px; transform: translateX(-50%);
  background:
    radial-gradient(ellipse 42% 46% at 50% 44%, rgba(255, 220, 150, 0.22), rgba(255, 180, 90, 0.07) 58%, transparent 75%),
    radial-gradient(ellipse 30% 12% at 50% 92%, rgba(255, 214, 140, 0.12), transparent 70%);
}

/* The marquee sign: a bevelled brass frame around a dark deco box. */
.page[data-page="home"] .marquee {
  border: 7px solid transparent; border-radius: 24px;
  margin-top: 30px; margin-bottom: 38px;
  translate: calc(var(--th-nx, 0) * 6px) calc(var(--th-ny, 0) * 4px);
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(var(--th-warm), 0.1), transparent 70%) padding-box,
    repeating-linear-gradient(90deg, rgba(233, 180, 76, 0.045) 0 1px, transparent 1px 22px) padding-box,
    linear-gradient(180deg, #2a170f, #120a08 80%) padding-box,
    var(--th-brass-edge) border-box;
  box-shadow:
    0 0 0 2px #1a0f08,
    0 0 0 3px rgba(246, 210, 122, 0.25),
    0 0 70px -12px rgba(255, 214, 140, 0.45),
    0 60px 120px -50px rgba(255, 196, 110, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.7),
    inset 0 0 70px rgba(0, 0, 0, 0.72);
}
/* Fan-shaped crown on top of the sign. */
.page[data-page="home"] .marquee::before {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 7px); width: 190px; height: 50px; margin-left: -95px; pointer-events: none;
  border-radius: 95px 95px 0 0 / 50px 50px 0 0;
  background:
    radial-gradient(ellipse 13% 26% at 50% 100%, #fff3c4 0 60%, #b8862e 64%, transparent 68%),
    radial-gradient(ellipse 50% 100% at 50% 100%, transparent 0 88%, #f6d27a 89% 93%, transparent 94%),
    repeating-conic-gradient(from -90deg at 50% 100%, #f2c766 0deg 6deg, #5a3a0c 6deg 12deg),
    #1a0f08;
  filter: drop-shadow(0 -4px 16px rgba(246, 210, 122, 0.35));
}
/* Brass plinth under the crown. */
.page[data-page="home"] .marquee::after {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); width: 236px; height: 6px; margin-left: -118px; border-radius: 3px; pointer-events: none;
  background: linear-gradient(180deg, #fff0b8, #c8922f 50%, #6e4910);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

/* Warmer bulbs with a filament highlight and a socket ring; the chase keeps a dim glow. */
.page[data-page="home"] .marquee .bulb {
  width: 12px; height: 12px;
  background: radial-gradient(circle at 42% 38%, #fff 0 16%, #ffe9ae 30%, #f4b94a 62%, #8a5a14 100%);
  box-shadow: 0 0 0 2px #22140b, 0 0 5px 2px rgba(255, 236, 170, 0.95), 0 0 16px 4px rgba(246, 186, 90, 0.5), 0 0 34px 8px rgba(246, 170, 70, 0.16);
  animation-name: thChase;
}
@keyframes thChase {
  0%, 33% { opacity: 1; }
  34%, 100% { opacity: 0.42; filter: saturate(0.6) brightness(0.65); box-shadow: 0 0 0 2px #22140b, 0 0 3px rgba(246, 186, 90, 0.35); }
}

/* Small caps lines flanked by brass rules. */
.page[data-page="home"] .marquee-top,
.page[data-page="home"] .marquee-bottom { display: flex; align-items: center; justify-content: center; gap: 12px; }
.page[data-page="home"] .marquee-top::before, .page[data-page="home"] .marquee-top::after,
.page[data-page="home"] .marquee-bottom::before, .page[data-page="home"] .marquee-bottom::after {
  content: ""; flex: 0 1 44px; min-width: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold));
}
.page[data-page="home"] .marquee-top, .page[data-page="home"] .marquee-bottom { white-space: nowrap; }
@media (max-width: 380px) {
  .page[data-page="home"] .marquee-top, .page[data-page="home"] .marquee-bottom { gap: 8px; letter-spacing: 0.12em; }
}
.page[data-page="home"] .marquee-top::after, .page[data-page="home"] .marquee-bottom::after { background: linear-gradient(270deg, transparent, var(--gold)); }
.page[data-page="home"] .marquee-top { color: var(--gold-2); text-shadow: 0 0 12px rgba(246, 210, 122, 0.45); }
.page[data-page="home"] .marquee-bottom { color: #c9b796; }

/* Backlit letterboard: hot centre, brass rail, raised plastic letters. */
.page[data-page="home"] .letterboard {
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(50% - 2px), rgba(22, 12, 9, 0.13) calc(50% - 2px) 50%),
    radial-gradient(ellipse 75% 95% at 50% 50%, #fffef8 0%, #fdf3db 50%, #ecd8ad 100%);
  box-shadow:
    0 0 0 2px #1d110c, 0 0 0 4px #b8862e, 0 0 0 5px #1d110c,
    0 0 50px rgba(255, 240, 200, 0.42), 0 0 130px rgba(255, 210, 130, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.85), inset 0 0 36px rgba(170, 120, 50, 0.32);
}
.page[data-page="home"] .letterboard .ch { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), 0 3px 4px rgba(70, 36, 10, 0.28); }

.page[data-page="home"] .lede { color: var(--cream); opacity: 0.9; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9); }

/* CTA buttons: lacquered red with a brass collar, and a brass-outlined ghost. */
.page[data-page="home"] .cta { gap: 16px; }
.page[data-page="home"] .cta .btn { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; transition: transform 0.4s var(--spring), box-shadow 0.35s ease, background 0.3s ease, filter 0.2s; }
.page[data-page="home"] .cta .btn.primary {
  background:
    radial-gradient(120% 130% at 50% -30%, rgba(255, 120, 125, 0.75) 0%, transparent 55%),
    linear-gradient(180deg, #df303d, #9c0b1f 70%, #7a0818);
  border-color: rgba(255, 222, 150, 0.8); color: #fff6e4; text-shadow: 0 1px 0 rgba(60, 0, 10, 0.6);
  box-shadow:
    0 0 0 3px #1a0d0a, 0 0 0 4px rgba(233, 180, 76, 0.6),
    0 16px 34px -12px rgba(200, 16, 46, 0.95), 0 0 46px -10px rgba(226, 58, 70, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(60, 0, 10, 0.45);
}
.page[data-page="home"] .cta .btn.primary:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 3px #1a0d0a, 0 0 0 4px rgba(246, 210, 122, 0.95),
    0 22px 44px -12px rgba(200, 16, 46, 1), 0 0 70px -8px rgba(226, 58, 70, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 0 rgba(60, 0, 10, 0.45);
}
.page[data-page="home"] .cta .btn.ghost {
  border: 1px solid transparent; color: var(--gold-2);
  background: linear-gradient(180deg, rgba(26, 15, 10, 0.92), rgba(10, 6, 5, 0.92)) padding-box, var(--th-brass-soft) border-box;
  box-shadow: 0 0 0 3px rgba(10, 6, 5, 0.6), 0 14px 30px -14px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 236, 190, 0.08);
}
.page[data-page="home"] .cta .btn.ghost:hover {
  transform: translateY(-3px); color: #fff3c4;
  background: linear-gradient(180deg, rgba(52, 32, 16, 0.95), rgba(18, 11, 7, 0.95)) padding-box, linear-gradient(180deg, #fbe39a, #b8862e) border-box;
  box-shadow: 0 0 0 3px rgba(10, 6, 5, 0.6), 0 0 40px -10px rgba(246, 210, 122, 0.55), 0 18px 34px -14px rgba(0, 0, 0, 0.9);
}
.page[data-page="home"] .cta .btn:active {
  transform: translateY(1px) scale(0.98); transition-duration: 0.12s;
  filter: brightness(0.94);
}

/* Stats: brass-rimmed box-office counters. */
.page[data-page="home"] .stat {
  border: 1px solid transparent; border-radius: 10px; padding: 10px 18px 10px 16px; gap: 10px;
  background: linear-gradient(180deg, rgba(30, 18, 12, 0.94), rgba(12, 7, 6, 0.94)) padding-box, var(--th-brass-soft) border-box;
  box-shadow: 0 12px 26px -14px #000, inset 0 1px 0 rgba(255, 236, 190, 0.08);
}
.page[data-page="home"] .stat b { font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(246, 210, 122, 0.45); }
.page[data-page="home"] .stat span { font: 700 10px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: #b6a68c; }
.page[data-page="home"] .now-stat { background: linear-gradient(180deg, rgba(60, 10, 16, 0.94), rgba(18, 7, 7, 0.94)) padding-box, linear-gradient(180deg, rgba(255, 120, 125, 0.8), rgba(140, 20, 30, 0.5)) border-box; }
.page[data-page="home"] .now-stat span { font: 600 13px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); }


/* =========================================================================
   HOME: Popular right now
   ========================================================================= */
.page[data-page="ideas"] .featured { padding-top: 56px; }
.page[data-page="ideas"] .featured-head { text-align: center; margin-bottom: 26px; }
.page[data-page="ideas"] .featured-head > div { display: flex; flex-direction: column; align-items: center; }
.page[data-page="ideas"] .featured-head::before {
  content: ""; display: block; height: 22px; margin: 0 auto 30px; max-width: 760px;
  background:
    var(--th-ornament) center / 140px 22px no-repeat,
    linear-gradient(90deg, transparent, rgba(233, 180, 76, 0.55)) left center / calc(50% - 76px) 1px no-repeat,
    linear-gradient(270deg, transparent, rgba(233, 180, 76, 0.55)) right center / calc(50% - 76px) 1px no-repeat;
}
.page[data-page="ideas"] .featured-head .title {
  font-size: clamp(40px, 6.4vw, 78px); text-wrap: balance;
  text-shadow: 0 0 36px rgba(246, 210, 122, 0.22), 0 2px 0 #2a170c;
}
.page[data-page="ideas"] .featured-head .sub { max-width: 44ch; text-wrap: balance; }

/* Genre tabs: brass tabs with an "on air" pilot light. */
.page[data-page="ideas"] .genre-bar {
  gap: 10px; padding: 6px 20px 16px; margin-bottom: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
}
@media (min-width: 900px) {
  .page[data-page="ideas"] .genre-bar { flex-wrap: wrap; justify-content: center; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 899px) {
  .page[data-page="ideas"] .genre-bar button:first-child { margin-left: auto; }
  .page[data-page="ideas"] .genre-bar button:last-child { margin-right: auto; }
}
.page[data-page="ideas"] .genre-bar button {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 13px; border-radius: 8px;
  font: 700 11px/1 var(--mono); letter-spacing: 0.14em; color: #b6a68c;
  background: linear-gradient(180deg, rgba(26, 15, 10, 0.9), rgba(10, 6, 5, 0.9)); border-color: rgba(233, 180, 76, 0.22);
  transition: color 0.2s, border-color 0.25s, box-shadow 0.3s, transform 0.35s var(--spring), background 0.25s;
}
.page[data-page="ideas"] .genre-bar button::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: #4a3424; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
  transition: background 0.25s, box-shadow 0.25s;
}
.page[data-page="ideas"] .genre-bar button:hover { color: var(--gold-2); border-color: rgba(246, 210, 122, 0.55); box-shadow: 0 0 22px -8px rgba(246, 210, 122, 0.6); }
.page[data-page="ideas"] .genre-bar button:active { transform: translateY(1px) scale(0.97); }
.page[data-page="ideas"] .genre-bar button[aria-selected="true"] {
  color: var(--ink); border-color: rgba(255, 240, 190, 0.8);
  background: radial-gradient(120% 140% at 50% -30%, rgba(255, 255, 255, 0.55), transparent 55%), var(--brass);
  box-shadow: 0 0 0 2px #1a0d0a, 0 0 0 3px rgba(233, 180, 76, 0.5), 0 10px 26px -8px rgba(233, 180, 76, 0.85);
}
.page[data-page="ideas"] .genre-bar button[aria-selected="true"]::before { background: var(--red-2); box-shadow: 0 0 6px 1px rgba(226, 58, 70, 0.9); }

/* =========================================================================
   Poster cards (Home popular grid + Add results): lit lightboxes, flat.
   No tilt anywhere: hover lifts a few px, brightens the frame and the backlight.
   ========================================================================= */
:is(.page[data-page="ideas"], .page[data-page="add"]) .result { transform-style: flat; }
:is(.page[data-page="ideas"], .page[data-page="add"]) .result .poster-box {
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(255, 228, 160, 0.38), 0 0 0 4px #140b08, 0 0 0 5px rgba(233, 180, 76, 0.38), 0 0 0 6px #0a0605,
    0 0 26px -6px rgba(var(--th-warm), 0.2), 0 20px 36px -14px rgba(0, 0, 0, 0.95);
  transition: transform 0.45s var(--spring), box-shadow 0.4s ease;
}
/* The backlight glowing out from behind each poster. */
:is(.page[data-page="ideas"], .page[data-page="add"]) .result::before {
  content: ""; position: absolute; left: -12%; right: -12%; top: -8%; aspect-ratio: 2 / 3.1; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 214, 140, 0.34), rgba(255, 170, 80, 0.1) 60%, transparent);
  opacity: 0; transition: opacity 0.4s ease;
}
:is(.page[data-page="ideas"], .page[data-page="add"]) .result .glare {
  background:
    radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 244, 214, 0.32), transparent 52%),
    linear-gradient(180deg, rgba(255, 244, 214, 0.14), transparent 28%);
  mix-blend-mode: screen;
}
:is(.page[data-page="ideas"], .page[data-page="add"]) .result:not(.in):is(:hover, :focus-visible) .poster-box {
  transform: translateY(-6px) scale(1.025);
  box-shadow:
    0 0 0 1px rgba(255, 240, 190, 0.95), 0 0 0 4px #140b08, 0 0 0 5px rgba(246, 210, 122, 0.85), 0 0 0 6px #0a0605,
    0 0 46px -4px rgba(var(--th-warm), 0.5), 0 30px 46px -18px rgba(0, 0, 0, 0.95);
}
:is(.page[data-page="ideas"], .page[data-page="add"]) .result:not(.in):is(:hover, :focus-visible)::before { opacity: 1; }
:is(.page[data-page="ideas"], .page[data-page="add"]) .result:not(.in):active .poster-box { transform: translateY(-2px) scale(0.985); transition-duration: 0.12s; }
:is(.page[data-page="ideas"], .page[data-page="add"]) .result .r-title { color: var(--cream); transition: color 0.25s; }
:is(.page[data-page="ideas"], .page[data-page="add"]) .result:not(.in):is(:hover, :focus-visible) .r-title { color: var(--gold-2); }
:is(.page[data-page="ideas"], .page[data-page="add"]) .result .r-year { font-size: 11px; letter-spacing: 0.06em; color: #a08f74; }
:is(.page[data-page="ideas"], .page[data-page="add"]) .result.in .poster-box { box-shadow: 0 0 0 1px rgba(233, 180, 76, 0.2), 0 0 0 4px #140b08, 0 0 0 5px rgba(233, 180, 76, 0.16), 0 20px 36px -14px rgba(0, 0, 0, 0.95); }

/* "+ Insert" as a cream admit-one ticket. */
:is(.page[data-page="ideas"], .page[data-page="add"]) .result .add-chip {
  padding: 8px 16px; border: 0; border-radius: 3px; background: var(--cream); color: var(--red);
  font: 400 14px/1 var(--display); letter-spacing: 0.12em;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.7);
  -webkit-mask: radial-gradient(circle 5px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 5px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 5px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 5px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
:is(.page[data-page="ideas"], .page[data-page="add"]) .result.in .add-chip { background: #1a100c; color: var(--gold-2); font: 700 10px/1 var(--mono); letter-spacing: 0.1em; padding: 8px 12px; }

/* Rank numerals in gilded deco. */
.page[data-page="ideas"] .result .rank {
  top: 6px; right: 9px; font-size: 34px; color: transparent; text-shadow: none;
  background: linear-gradient(180deg, #fff6d0 0%, #f6d27a 45%, #b8862e 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 1px #000);
}
.page[data-page="ideas"] .featured-grid .result:nth-child(-n + 3) .rank { font-size: 44px; }

/* Lightbox "switches on" once it has risen into place. */
@media (prefers-reduced-motion: no-preference) {
  .page[data-page="ideas"] .featured-grid .result.revealed .poster-box {
    animation: thLightOn 1.1s ease-out calc(var(--d, 0ms) + 160ms) backwards;
  }
}
@keyframes thLightOn {
  0% { filter: brightness(0.12) saturate(0.3); }
  38% { filter: brightness(1.22) saturate(1.1); }
  50% { filter: brightness(0.7); }
  64% { filter: brightness(1.08); }
  100% { filter: none; }
}

/* Popular grid spacing so frames never touch. */
.page[data-page="ideas"] .featured-grid { gap: 32px 24px; }
@media (max-width: 520px) {
  .page[data-page="ideas"] .featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 14px; }
  :is(.page[data-page="ideas"], .page[data-page="add"]) .result .poster-box {
    box-shadow: 0 0 0 1px rgba(255, 228, 160, 0.38), 0 0 0 3px #140b08, 0 0 0 4px rgba(233, 180, 76, 0.38), 0 0 22px -6px rgba(var(--th-warm), 0.2), 0 16px 28px -12px rgba(0, 0, 0, 0.95);
  }
  .page[data-page="ideas"] .result .rank { font-size: 26px; top: 4px; right: 6px; }
  .page[data-page="ideas"] .featured-grid .result:nth-child(-n + 3) .rank { font-size: 32px; }
  .page[data-page="ideas"] .result .imdb-chip { top: 5px; left: 5px; font-size: 10px; padding: 3px 5px; }
  :is(.page[data-page="ideas"], .page[data-page="add"]) .result .add-chip { font-size: 12px; padding: 7px 12px; bottom: 8px; }
  .page[data-page="ideas"] .featured-head::before { margin-bottom: 22px; }
}

/* =========================================================================
   ADD
   ========================================================================= */
.page[data-page="add"] .page-head .eyebrow {
  display: inline-block; padding: 7px 14px 7px 15px; border-radius: 3px; background: var(--cream); color: var(--red); letter-spacing: 0.22em;
  -webkit-mask: radial-gradient(circle 4px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 4px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 4px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 4px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.page[data-page="add"] .page-head .title { text-shadow: 0 0 36px rgba(246, 210, 122, 0.22), 0 2px 0 #2a170c; }
.page[data-page="add"] .page-head::after {
  content: ""; display: block; width: min(420px, 80%); height: 22px; margin-top: 20px;
  background:
    var(--th-ornament) left center / 140px 22px no-repeat,
    linear-gradient(90deg, rgba(233, 180, 76, 0.55), transparent) 146px center / calc(100% - 146px) 1px no-repeat;
}

/* Name plate */
.page[data-page="add"] .search-row { gap: 16px; align-items: end; }
.page[data-page="add"] .name-field > span { color: var(--gold); margin-bottom: 9px; }
.page[data-page="add"] .name-field input {
  height: 56px; border-radius: 12px; border: 1px solid transparent; font-weight: 600;
  background: linear-gradient(180deg, #0c0706, #150d0a) padding-box, var(--th-brass-soft) border-box;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8), 0 12px 26px -16px #000;
}
.page[data-page="add"] .name-field input:focus {
  background: linear-gradient(180deg, #0c0706, #1a100b) padding-box, linear-gradient(180deg, #fbe39a, #b8862e) border-box;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 0 4px rgba(233, 180, 76, 0.12), 0 0 34px -10px rgba(246, 210, 122, 0.5);
}

/* The search box as a little marquee: brass band, bulbs top and bottom, glass inside. */
.page[data-page="add"] .search-field {
  height: 90px; padding: 0 24px; border-radius: 20px; border: 11px solid transparent;
  background:
    radial-gradient(ellipse 60% 140% at 50% -20%, rgba(var(--th-warm), 0.09), transparent 70%) padding-box,
    linear-gradient(180deg, #0b0605, #050303) padding-box,
    linear-gradient(180deg, #2c190d, #170d08) border-box;
  box-shadow:
    0 0 0 1px #c99536, 0 0 0 3px #1a0f08, 0 0 0 4px rgba(233, 180, 76, 0.28),
    inset 0 0 0 1px rgba(233, 180, 76, 0.45), inset 0 3px 16px rgba(0, 0, 0, 0.9),
    0 30px 60px -30px rgba(0, 0, 0, 0.9), 0 0 60px -20px rgba(var(--th-warm), 0.25);
  transition: box-shadow 0.4s ease;
}
.page[data-page="add"] .search-field::before,
.page[data-page="add"] .search-field::after {
  content: ""; position: absolute; left: 14px; right: 14px; height: 8px; pointer-events: none;
  background:
    radial-gradient(circle at 4px 4px, #fffbe8 0 1.4px, #f6d27a 2.4px, rgba(246, 210, 122, 0) 4px) 0 0 / 54px 8px repeat-x,
    radial-gradient(circle at 4px 4px, #9b7a3a 0 1.6px, #5a3e14 3px, rgba(90, 62, 20, 0) 4px) 0 0 / 18px 8px repeat-x;
  filter: drop-shadow(0 0 3px rgba(255, 214, 140, 0.85));
  transition: filter 0.3s;
}
.page[data-page="add"] .search-field::before { top: -10px; }
.page[data-page="add"] .search-field::after { bottom: -10px; }
@media (prefers-reduced-motion: no-preference) {
  .page[data-page="add"] .search-field::before,
  .page[data-page="add"] .search-field::after { animation: thBulbChase 1.5s steps(3) infinite; }
  .page[data-page="add"] .search-field::after { animation-direction: reverse; }
  .page[data-page="add"] .search-field:focus-within::before,
  .page[data-page="add"] .search-field:focus-within::after { animation-duration: 0.9s; }
}
@keyframes thBulbChase { from { background-position: 0 0, 0 0; } to { background-position: 54px 0, 0 0; } }
.page[data-page="add"] .search-field:focus-within {
  box-shadow:
    0 0 0 1px #f6d27a, 0 0 0 3px #1a0f08, 0 0 0 4px rgba(246, 210, 122, 0.55),
    inset 0 0 0 1px rgba(246, 210, 122, 0.7), inset 0 3px 16px rgba(0, 0, 0, 0.9),
    0 0 90px -16px rgba(var(--th-warm), 0.5), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
.page[data-page="add"] .search-field:focus-within::before,
.page[data-page="add"] .search-field:focus-within::after { filter: drop-shadow(0 0 4px rgba(255, 224, 160, 1)) brightness(1.25); }
.page[data-page="add"] .search-field.th-pulse::before,
.page[data-page="add"] .search-field.th-pulse::after { filter: drop-shadow(0 0 6px rgba(255, 236, 190, 1)) brightness(1.6); transition: none; }
.page[data-page="add"] .search-field svg { width: 26px; height: 26px; color: var(--gold-2); filter: drop-shadow(0 0 8px rgba(246, 210, 122, 0.5)); }
.page[data-page="add"] .search-field input { font-size: clamp(22px, 3vw, 32px); color: var(--cream); caret-color: var(--gold-2); }
.page[data-page="add"] .search-field input::placeholder { font-style: italic; color: #7d6f5d; }
.page[data-page="add"] .search-field input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-left: 10px; cursor: pointer; opacity: 0.8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' stroke='%23e9b44c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.page[data-page="add"] .search-field input::-webkit-search-cancel-button:hover { opacity: 1; }
.page[data-page="add"] .search-status { margin-top: 22px; font: 500 12px/1.4 var(--mono); letter-spacing: 0.04em; color: #a99c89; }

/* Results grid: room for frames, flat lightboxes. */
.page[data-page="add"] .results { gap: 30px 22px; perspective: none; }
@media (max-width: 520px) { .page[data-page="add"] .results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; } }

/* "In the pot": a lobby poster rack on velvet with picture lights. */
.page[data-page="add"] .pot {
  position: relative; padding: 26px 24px 20px; border-radius: 16px; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(233, 180, 76, 0.3);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--th-warm), 0.1), transparent 70%),
    linear-gradient(180deg, rgba(12, 5, 5, 0.8), rgba(7, 3, 3, 0.94) 80%),
    url("/art/velvet.webp") center top / 360px auto repeat;
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.1), inset 0 0 90px rgba(0, 0, 0, 0.75), 0 34px 70px -34px #000;
}
.page[data-page="add"] .pot::before {
  content: ""; position: absolute; inset: 7px; z-index: -1; border: 1px solid rgba(233, 180, 76, 0.16); border-radius: 11px; pointer-events: none;
}
.page[data-page="add"] .pot-head { gap: 14px; margin-bottom: 8px; padding-bottom: 14px; border-bottom: 1px solid rgba(233, 180, 76, 0.14); }
.page[data-page="add"] .pot-head h3 { font-size: 30px; text-shadow: 0 0 24px rgba(246, 210, 122, 0.25); }
.page[data-page="add"] .count {
  min-width: 34px; text-align: center; padding: 6px 10px 5px; border-radius: 6px; font: 400 18px/1 var(--display); letter-spacing: 0.02em;
  box-shadow: 0 0 0 2px #1a0d0a, 0 0 0 3px rgba(233, 180, 76, 0.45), 0 0 18px -2px rgba(246, 210, 122, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.page[data-page="add"] .pot-go {
  padding: 10px 16px 9px 18px; border-radius: 3px; background: var(--cream); color: var(--red);
  font: 400 15px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.9);
  -webkit-mask: radial-gradient(circle 5px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 5px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 5px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 5px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  transition: transform 0.35s var(--spring), background 0.2s;
}
.page[data-page="add"] .pot-go:hover { transform: translateY(-2px) rotate(-2deg); background: #fffaf0; }
.page[data-page="add"] .pot-go:active { transform: translateY(1px) scale(0.97); transition-duration: 0.1s; }

.page[data-page="add"] .pot-rail {
  counter-reset: th-pot; gap: 24px; padding: 30px 10px 12px;
  scrollbar-color: rgba(233, 180, 76, 0.35) transparent;
}
.page[data-page="add"] .pot-rail:empty { padding: 0; }
.page[data-page="add"] .chip { counter-increment: th-pot; transition: transform 0.4s var(--spring); }
.page[data-page="add"] .chip img,
.page[data-page="add"] .chip .ph {
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 228, 160, 0.45), 0 0 0 3px #140b08, 0 0 0 4px rgba(233, 180, 76, 0.5), 0 16px 26px -10px #000;
  transition: box-shadow 0.35s ease;
}
/* Picture light: a brass hood over each poster with a soft warm cone. */
.page[data-page="add"] .chip::before {
  content: ""; position: absolute; left: -10px; right: -10px; top: -16px; height: 120px; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, #fbe39a, #b8862e 60%, #5e3f0e) 50% 6px / 52px 5px no-repeat,
    radial-gradient(ellipse 46% 100% at 50% 6px, rgba(255, 226, 160, 0.3), rgba(255, 200, 120, 0.08) 55%, transparent 80%);
  mix-blend-mode: screen;
}
/* Lobby number plate. */
.page[data-page="add"] .chip::after {
  content: "No." counter(th-pot, decimal-leading-zero); position: absolute; left: -5px; top: 132px; z-index: 2; pointer-events: none;
  padding: 4px 6px 3px; border-radius: 2px; background: var(--cream); color: var(--red);
  font: 700 9px/1 var(--mono); letter-spacing: 0.08em; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
}
.page[data-page="add"] .chip .x { z-index: 3; }
.page[data-page="add"] .chip:hover { transform: translateY(-4px); }
.page[data-page="add"] .chip:hover img { box-shadow: 0 0 0 1px rgba(255, 240, 190, 0.95), 0 0 0 3px #140b08, 0 0 0 4px rgba(246, 210, 122, 0.85), 0 0 30px -4px rgba(var(--th-warm), 0.5), 0 20px 30px -12px #000; }
.page[data-page="add"] .chip.picked img { box-shadow: 0 0 0 2px var(--gold-2), 0 0 0 4px #140b08, 0 0 0 5px var(--red-2), 0 0 30px rgba(246, 210, 122, 0.55); }
.page[data-page="add"] .chip .c-title { margin-top: 10px; color: var(--cream); }
.page[data-page="add"] .chip .c-by { margin-top: 3px; font: 500 10px/1.2 var(--mono); letter-spacing: 0.04em; color: #8e7f69; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: no-preference) {
  .page[data-page="add"] .chip.pop::before { animation: thLampOn 1.1s ease-out 0.25s backwards; }
}
@keyframes thLampOn { 0% { opacity: 0; } 30% { opacity: 1; filter: brightness(1.8); } 45% { opacity: 0.4; } 60% { opacity: 1; } }

.page[data-page="add"] #potEmpty { display: flex; align-items: center; gap: 16px; padding: 10px 0 4px; font: italic 400 20px/1.3 var(--serif); color: #8e7f69; }
.page[data-page="add"] #potEmpty[hidden] { display: none; }
.page[data-page="add"] #potEmpty::before {
  content: ""; flex: none; width: 40px; aspect-ratio: 2 / 3; border-radius: 3px; border: 1px dashed rgba(233, 180, 76, 0.45);
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--th-warm), 0.12), transparent 70%);
}

@media (max-width: 520px) {
  .page[data-page="add"] .search-field { height: 80px; padding: 0 16px; border-width: 10px; }
  .page[data-page="add"] .pot { padding: 22px 16px 16px; }
  .page[data-page="add"] .pot-head h3 { font-size: 24px; }
  .page[data-page="add"] .pot-go { font-size: 13px; padding: 9px 12px 8px 14px; }
}

/* =========================================================================
   Motion: sunburst drift. Decorative motion stops for reduced motion.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .page[data-page="home"] .th-sunburst { animation: thSun 240s linear infinite; }
}
@keyframes thSun { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .page[data-page="home"] .marquee { translate: none; }
  .page[data-page="home"] .marquee .bulb { animation: none; opacity: 1; }
}