/* ============================================================
   ARTINO — part 4: App-screen fragments (Theater theme)
   Tokens + primitives lifted from the ArtistConnect app source:
   curtain black, tungsten text, gold-leaf filament light.
   ============================================================ */

.app {
  --ac-bg: #0A0807;
  --ac-bg2: #14100E;
  --ac-bg3: #1C1612;
  --ac-bg4: #261C16;
  --ac-gold: #C8A45C;
  --ac-text: #FDF4DC;
  --ac-text2: #A89880;
  --ac-text3: #5C4F40;
  --ac-border: rgba(253,244,220,0.07);
  --ac-border2: rgba(253,244,220,0.15);
  --ac-red: #6B1F1F;
  --ac-green: #9CB87A;

  position: relative;
  background: linear-gradient(170deg, var(--ac-bg2), var(--ac-bg));
  border: 1px solid var(--ac-border2);
  border-radius: 24px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(200,164,92,0.07) inset, 0 1px 0 rgba(253,244,220,0.05) inset;
  color: var(--ac-text);
  font-family: var(--display);
  overflow: hidden;
}

/* status-bar hint — sells "this is a phone screen" */
.ac-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 0;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  color: var(--ac-text2); letter-spacing: 0.02em;
}
.ac-status .sig { display: flex; gap: 3px; align-items: flex-end; height: 8px; }
.ac-status .sig i { width: 2.5px; background: var(--ac-text2); border-radius: 1px; display: block; }
.ac-status .sig i:nth-child(1) { height: 3px; }
.ac-status .sig i:nth-child(2) { height: 5px; }
.ac-status .sig i:nth-child(3) { height: 7px; }
.ac-status .sig i:nth-child(4) { height: 8px; opacity: 0.45; }

/* app bar */
.ac-appbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 8px;
}
.ac-logo { font-family: var(--display); font-style: italic; font-size: 19px; color: var(--ac-text); letter-spacing: -0.01em; }
.ac-logo::before { content: "✦ "; color: var(--ac-gold); font-style: normal; font-size: 12px; vertical-align: 2px; }
.ac-bell { position: relative; width: 26px; height: 26px; display: grid; place-items: center; color: var(--ac-text2); }
.ac-bell .dot { position: absolute; top: 0; right: 0; min-width: 13px; height: 13px; border-radius: 8px; background: var(--ac-red); color: #fff; font-family: var(--body); font-size: 8px; font-weight: 700; display: grid; place-items: center; border: 1.5px solid var(--ac-bg); }

/* mono kicker (timestamps, tags) */
.ac-kicker {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ac-text3);
}
.ac-row .ac-kicker { white-space: nowrap; }
.ac-kicker.gold { color: var(--ac-gold); }
.ac-kicker.dim2 { color: var(--ac-text2); }

/* serif display inside app */
.ac-serif { font-family: var(--display); color: var(--ac-text); letter-spacing: -0.01em; line-height: 1.05; }

/* Spotlight — the app's signature button: no rectangle, a pool of warm
   light + a 1px gold filament under italic serif text */
.ac-spot {
  position: relative; isolation: isolate;
  display: inline-block; padding: 9px 18px; text-align: center;
  font-family: var(--display); font-style: italic; font-size: 13.5px;
  color: var(--ac-text); letter-spacing: -0.01em; white-space: nowrap;
}
.ac-spot::before {
  content: ""; position: absolute; inset: -55% -14%; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(200,164,92,0.42) 0%, rgba(200,164,92,0.15) 30%, transparent 64%);
  transition: opacity 0.4s;
}
.ac-spot::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ac-gold); opacity: 0.65;
  box-shadow: 0 8px 18px rgba(200,164,92,0.16);
  transition: opacity 0.4s, box-shadow 0.4s;
}
.ac-spot.quiet { color: var(--ac-text2); font-style: italic; }
.ac-spot.quiet::before { opacity: 0; }
.ac-spot.quiet::after { opacity: 0.18; box-shadow: none; }

/* avatar — initials in italic serif, gold filament ring + halo */
.ac-av {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ac-bg3), var(--ac-bg4));
  border: 1px solid rgba(200,164,92,0.4);
  box-shadow: 0 0 14px rgba(200,164,92,0.2);
  font-family: var(--display); font-style: italic; font-size: 13px; color: var(--ac-text);
  overflow: hidden;
}
.ac-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* divider + rows */
.ac-div { height: 1px; background: var(--ac-border); border: 0; margin: 10px 0; }
.ac-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* tab bar hint at fragment base */
.ac-tabbar {
  display: flex; justify-content: space-around; align-items: center;
  padding: 9px 10px 11px; border-top: 1px solid var(--ac-border);
  background: rgba(10,8,7,0.7);
}
.ac-tabbar svg { width: 17px; height: 17px; stroke: var(--ac-text3); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ac-tabbar .on svg { stroke: var(--ac-text); }
.ac-tabbar span { display: grid; place-items: center; gap: 2px; font-family: var(--mono); font-size: 7px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ac-text3); }
.ac-tabbar span.on { color: var(--ac-text); }

/* generic media chip over photos */
.ac-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 100px;
  background: rgba(10,8,7,0.62); backdrop-filter: blur(4px);
  font-family: var(--mono); font-size: 8px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ac-text); white-space: nowrap;
}

/* status pill (NEW / CONFIRMED) */
.ac-state {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 100px; white-space: nowrap;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--ac-border2); color: var(--ac-text2);
}
.ac-state.gold { color: var(--ac-gold); border-color: rgba(200,164,92,0.45); background: rgba(200,164,92,0.08); }
.ac-state.green { color: var(--ac-green); border-color: rgba(156,184,122,0.45); background: rgba(156,184,122,0.08); }

/* ============================================================
   HERO — home feed phone
   ============================================================ */
.feed-phone { width: 282px; border-radius: 34px; }
.hero-feed.app { position: absolute; right: 5%; bottom: 16vh; left: auto; top: auto; }
/* frag fragments keep their absolute anchors despite .app */
.frag.app { position: absolute; }
.feed-viewport { height: 332px; overflow: hidden; position: relative; }
.feed-scroll { transition: transform 3.6s cubic-bezier(0.33, 0, 0.15, 1); will-change: transform; }
.feed-phone.play .feed-viewport .feed-scroll { transform: translateY(-462px); }
.feed-post { padding: 0 12px 12px; }
.feed-media { position: relative; height: 158px; border-radius: 14px; overflow: hidden; }
.feed-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feed-media .grad { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10,8,7,0.85) 100%); }
.feed-id { position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; align-items: center; gap: 8px; }
.feed-id .nm { font-size: 12px; font-weight: 500; color: #fff; font-family: var(--body); }
.feed-id .sb { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(253,244,220,0.7); margin-top: 1px; }
.feed-actions { display: flex; align-items: center; gap: 14px; padding: 9px 4px 0; font-family: var(--body); font-size: 10.5px; color: var(--ac-text2); }
.feed-scroll-hint { position: absolute; right: 8px; top: 10px; bottom: 10px; width: 2.5px; border-radius: 2px; background: var(--ac-border); overflow: hidden; }
.feed-scroll-hint::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 24%; border-radius: 2px; background: rgba(200,164,92,0.6); transition: transform 3.6s cubic-bezier(0.33, 0, 0.15, 1); }
.feed-phone.play .feed-scroll-hint::after { transform: translateY(320%); }

/* upcoming booking strip (home feed) */
.ac-upcoming { margin: 2px 12px 12px; padding: 9px 11px 9px 14px; border-radius: 12px; background: var(--ac-bg2); border: 1px solid var(--ac-border); position: relative; }
.ac-upcoming::before { content: ""; position: absolute; left: 6px; top: 11px; bottom: 11px; width: 3px; border-radius: 2px; background: var(--ac-gold); }

/* ============================================================
   PORTFOLIO — talent tabs switch on hover
   ============================================================ */
.pf-frag { width: 330px; }
.pf-tabs { display: flex; gap: 0; position: relative; margin-top: 10px; border-bottom: 1px solid var(--ac-border); }
.pf-tabs .t { flex: 1; text-align: center; padding: 8px 0; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ac-text3); transition: color 1s var(--ease); }
.pf-ind { position: absolute; bottom: -1px; left: 0; width: 50%; height: 1.5px; background: var(--ac-gold); box-shadow: 0 4px 12px rgba(200,164,92,0.4); transition: transform 1.1s var(--ease); }
.pf-frag .t1 { color: var(--ac-text); }
.pf-frag.play .t1 { color: var(--ac-text3); }
.pf-frag.play .t2 { color: var(--ac-text); }
.pf-frag.play .pf-ind { transform: translateX(100%); }
.pf-panels { position: relative; margin-top: 12px; height: 158px; }
.pf-panel { position: absolute; inset: 0; transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.pf-panel .pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pf-panel .pgrid .c { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
.pf-panel .pgrid .c.big { grid-column: span 2; grid-row: span 2; }
.pf-panel .pgrid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-panel .pgrid .c::after { content: ""; position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at center, rgba(10,8,7,0.0), rgba(10,8,7,0.25)); }
.pf-panel .meta { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.pf-a { opacity: 1; transform: none; }
.pf-b { opacity: 0; transform: translateX(14px); pointer-events: none; }
.pf-frag.play .pf-a { opacity: 0; transform: translateX(-14px); }
.pf-frag.play .pf-b { opacity: 1; transform: none; }

/* ============================================================
   PRICING — add-talent step; second talent crossfades in on hover
   ============================================================ */
.pr-frag { width: 320px; }
.pr-steps { display: flex; gap: 5px; margin: 4px 0 10px; }
.pr-steps i { flex: 1; height: 3px; border-radius: 2px; background: var(--ac-bg3); }
.pr-steps i.on { background: var(--ac-gold); }
.pr-panels { position: relative; height: 196px; margin-top: 10px; }
.pr-panel { position: absolute; inset: 0; transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.pr-a { opacity: 1; }
.pr-b { opacity: 0; transform: translateY(10px); pointer-events: none; }
.pr-frag.play .pr-a { opacity: 0; transform: translateY(-10px); }
.pr-frag.play .pr-b { opacity: 1; transform: none; }
.pr-row { display: flex; align-items: center; justify-content: space-between; padding: 8.5px 0; font-family: var(--body); font-size: 12.5px; color: var(--ac-text); }
.pr-row .sub { color: var(--ac-text2); font-size: 11px; }
.pr-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--ac-border2); }
.pr-total .amt { font-family: var(--display); font-style: italic; font-size: 26px; color: var(--ac-gold); }
.ac-toggle { width: 32px; height: 18px; border-radius: 100px; background: rgba(253,244,220,0.12); position: relative; flex: none; }
.ac-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ac-text); transition: transform 0.3s var(--ease), background 0.3s; }
.ac-toggle.on { background: var(--ac-gold); }
.ac-toggle.on::after { transform: translateX(14px); background: #14100E; }
.pr-talent-chip { position: relative; height: 16px; width: 92px; }
.pr-talent-chip .ac-kicker { position: absolute; right: 0; top: 0; transition: opacity 1s; white-space: nowrap; }
.pr-talent-chip .k2 { opacity: 0; }
.pr-frag.play .k1 { opacity: 0; }
.pr-frag.play .k2 { opacity: 1; }

/* ============================================================
   BOOKING — counter-quote plays out on hover
   ============================================================ */
.bk-frag { width: 300px; }
.bk-quote { margin-top: 10px; border: 1px solid rgba(200,164,92,0.35); border-radius: 14px; overflow: hidden; }
.bk-quote .qhead { padding: 6px 12px; background: rgba(200,164,92,0.1); }
.bk-quote .qbody { padding: 10px 12px 12px; }
.bk-amt { font-family: var(--display); font-style: italic; font-size: 24px; color: var(--ac-text); }
.bk-btns { display: flex; gap: 8px; margin-top: 10px; }
.bk-btns .b { flex: 1; text-align: center; padding: 8px 0; border-radius: 10px; background: var(--ac-bg3); font-family: var(--body); font-size: 11px; font-weight: 600; color: var(--ac-text2); transition: background 0.7s var(--ease), color 0.7s var(--ease), box-shadow 0.7s var(--ease); }
.bk-btns .b.accept { background: rgba(200,164,92,0.14); color: var(--ac-gold); }
.bk-frag.play .b.counter { background: rgba(200,164,92,0.18); color: var(--ac-gold); box-shadow: 0 0 0 1px rgba(200,164,92,0.45) inset; }
.bk-frag.play .b.accept { opacity: 0.45; }

/* counter-quote editor — slides open on hover instead of chat */
.bk-counter {
  margin-top: 10px; border-radius: 14px;
  background: rgba(200,164,92,0.06); border: 0 solid rgba(200,164,92,0.3);
  opacity: 0; transform: translateY(10px); max-height: 0; padding: 0 12px; overflow: hidden;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), max-height 0.8s var(--ease), padding 0.7s var(--ease), border-width 0.7s var(--ease);
}
.bk-frag.play .bk-counter {
  opacity: 1; transform: none; max-height: 230px; padding: 11px 12px 12px; border-width: 1px;
  transition-delay: 0.55s;
}
.bkc-head { display: flex; align-items: center; justify-content: space-between; }
.bkc-amt-row { display: flex; align-items: center; gap: 10px; margin: 9px 0 5px; }
.bkc-step { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--ac-bg3); border: 1px solid var(--ac-border2); color: var(--ac-text2); font-size: 15px; line-height: 1; font-family: var(--body); }
.bkc-step.on { color: var(--ac-gold); border-color: rgba(200,164,92,0.5); background: rgba(200,164,92,0.12); }
.bkc-amt { position: relative; flex: 1; text-align: center; height: 30px; }
.bkc-amt b { position: absolute; left: 0; right: 0; top: 0; font-family: var(--display); font-style: italic; font-size: 25px; font-weight: 500; transition: opacity 0.6s var(--ease); }
.bkc-amt .a1 { color: var(--ac-text2); }
.bkc-amt .a2 { color: var(--ac-gold); opacity: 0; }
.bk-frag.play .bkc-amt .a1 { opacity: 0; transition-delay: 1.1s; }
.bk-frag.play .bkc-amt .a2 { opacity: 1; transition-delay: 1.1s; }
.bkc-line { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; font-family: var(--body); font-size: 11.5px; color: var(--ac-text2); border-top: 1px solid var(--ac-border); }
.bkc-line .v { color: var(--ac-text); }
.bkc-send { text-align: center; margin-top: 9px; }

/* shared chat bubbles (used by inbox fragment) */
.bk-bubble { max-width: 86%; padding: 8px 11px; border-radius: 12px; font-family: var(--body); font-size: 11.5px; line-height: 1.45; margin-top: 8px; opacity: 0; transform: translateY(8px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.bk-bubble.me { margin-left: auto; background: rgba(200,164,92,0.14); border: 1px solid rgba(200,164,92,0.3); color: var(--ac-text); border-bottom-right-radius: 3px; }
.bk-bubble.them { background: var(--ac-bg3); border: 1px solid var(--ac-border); color: var(--ac-text); border-bottom-left-radius: 3px; }
.bk-state { position: relative; min-width: 104px; height: 22px; }
.bk-state .ac-state { position: absolute; right: 0; top: 0; transition: opacity 0.5s var(--ease); }
.bk-state .st2 { opacity: 0; }
.bk-frag.play .bk-state .st1 { opacity: 0; transition-delay: 1.8s; }
.bk-frag.play .bk-state .st2 { opacity: 1; transition-delay: 1.8s; }

/* tickets mini-card (kept tiny) */
.tk-frag { width: 236px; }
.tk-bar { height: 5px; border-radius: 100px; background: rgba(253,244,220,0.1); overflow: hidden; margin: 8px 0 7px; }
.tk-bar i { display: block; height: 100%; width: 64%; border-radius: 100px; background: linear-gradient(90deg, var(--ac-gold), #E5D5B0); transition: width 1.4s var(--ease) 0.2s; }
.tk-frag.play .tk-bar i { width: 89%; }
.tk-count { position: relative; height: 16px; font-family: var(--mono); font-size: 11px; color: var(--ac-text); white-space: nowrap; }
.tk-count b { position: absolute; left: 0; top: 0; font-weight: 500; transition: opacity 0.5s 0.7s; }
.tk-count .n2 { opacity: 0; }
.tk-frag.play .n1 { opacity: 0; }
.tk-frag.play .n2 { opacity: 1; }

/* ============================================================
   CHAT — typing dots resolve into confirmation on hover
   ============================================================ */
.ch-frag { width: 312px; }
.ch-pin { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 12px; background: rgba(200,164,92,0.08); border: 1px solid rgba(200,164,92,0.25); }
.ch-pin .bar { width: 3px; align-self: stretch; border-radius: 2px; background: var(--ac-gold); }
.ch-reply { position: relative; min-height: 38px; margin-top: 8px; }
.ch-reply .ch-typing, .ch-reply .ch-final { position: absolute; left: 0; top: 0; margin-top: 0; }
.ch-typing { display: inline-flex; gap: 4px; padding: 9px 12px; border-radius: 12px; border-bottom-left-radius: 3px; background: var(--ac-bg3); border: 1px solid var(--ac-border); opacity: 0; transform: translateY(6px); }
.ch-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ac-text2); }
.ch-frag.play .ch-typing i { animation: chDot 1s infinite; }
.ch-frag.play .ch-typing i:nth-child(2) { animation-delay: 0.15s; }
.ch-frag.play .ch-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chDot { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.ch-frag.play .ch-typing { animation: chReveal 2.7s var(--ease) forwards; }
@keyframes chReveal { 0% { opacity: 0; transform: translateY(6px); } 16% { opacity: 1; transform: none; } 64% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateY(-4px); } }
.ch-final { opacity: 0; transform: translateY(8px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.ch-frag.play .ch-final { opacity: 1; transform: none; transition-delay: 2.05s; }

/* ============================================================
   PUBLISH EVENT — goes live on hover
   ============================================================ */
.pub-frag { width: 330px; }
.pub-field { margin-top: 10px; }
.pub-field .lbl { display: block; font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ac-text3); margin-bottom: 4px; }
.pub-field .box { position: relative; display: block; padding: 9px 12px; border-radius: 10px; background: rgba(10,8,7,0.65); border: 1px solid var(--ac-border2); min-height: 35px; transition: border-color 0.7s var(--ease); }
.pub-field .ph { font-family: var(--body); font-size: 12px; color: var(--ac-text3); transition: opacity 0.55s var(--ease); }
.pub-field .val { position: absolute; left: 12px; top: 9px; right: 12px; font-family: var(--body); font-size: 12px; color: var(--ac-text); opacity: 0; transform: translateY(3px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.pub-field .val .caret { display: inline-block; width: 1.5px; height: 12px; background: var(--ac-gold); margin-left: 2px; vertical-align: -1px; }
.pub-frag.play .pub-field .val .caret { animation: pubCaret 0.85s steps(2, jump-none) infinite; }
@keyframes pubCaret { 50% { opacity: 0; } }
.pub-frag.play .pub-field .box { border-color: rgba(200,164,92,0.4); }
.pub-frag.play .pub-field .ph { opacity: 0; }
.pub-frag.play .pub-field .val { opacity: 1; transform: none; }
.pub-frag.play .f1 .val, .pub-frag.play .f1 .ph, .pub-frag.play .f1 .box { transition-delay: 0.25s; }
.pub-frag.play .f2 .val, .pub-frag.play .f2 .ph, .pub-frag.play .f2 .box { transition-delay: 0.9s; }
.pub-frag.play .f3 .val, .pub-frag.play .f3 .ph, .pub-frag.play .f3 .box { transition-delay: 1.55s; }
.pub-tiers-lbl { opacity: 0.5; transition: opacity 0.6s var(--ease); }
.pub-frag.play .pub-tiers-lbl { opacity: 1; transition-delay: 1.95s; }
.pub-tiers { margin-top: 4px; }
.pub-tier { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-family: var(--body); font-size: 12px; color: var(--ac-text); opacity: 0; transform: translateY(6px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.pub-tier .d { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.pub-tier .v { font-family: var(--mono); font-size: 11.5px; }
.pub-frag.play .pub-tier.g1 { opacity: 1; transform: none; transition-delay: 2.1s; }
.pub-frag.play .pub-tier.g2 { opacity: 1; transform: none; transition-delay: 2.3s; }
.pub-frag.play .pub-tier.g3 { opacity: 1; transform: none; transition-delay: 2.5s; }
.pub-go { position: relative; margin-top: 13px; text-align: center; opacity: 0.35; transition: opacity 0.7s var(--ease); }
.pub-frag.play .pub-go { opacity: 1; transition-delay: 2.75s; }
.pub-state { position: relative; min-width: 64px; height: 22px; }
.pub-state .ac-state { position: absolute; right: 0; top: 0; transition: opacity 0.5s var(--ease); }
.pub-state .ready { opacity: 0; }
.pub-frag.play .pub-state .draft { opacity: 0; transition-delay: 2.6s; }
.pub-frag.play .pub-state .ready { opacity: 1; transition-delay: 2.6s; }

/* ============================================================
   POSTER — generates on hover
   ============================================================ */
.po-frag { width: 360px; }
.po-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; margin-top: 12px; }
.po-form { display: flex; flex-direction: column; justify-content: space-between; padding: 12px; border-radius: 12px; border: 1px solid var(--ac-border2); background: var(--ac-bg2); }
.po-fields { display: flex; flex-direction: column; gap: 4px; }
.po-form .ttl { font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ac-text3); margin-bottom: 1px; }
.po-det { font-family: var(--body); font-size: 11px; color: var(--ac-text); line-height: 1.4; }
.po-det b { font-family: var(--display); font-style: italic; font-size: 16px; font-weight: 500; color: var(--ac-text); }
.po-det.dim { font-size: 10px; color: var(--ac-text2); }
.po-vibe { font-family: var(--body); font-size: 10px; line-height: 1.5; color: var(--ac-text2); }
.po-gen { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ac-border2); }
.po-gen .g { display: block; position: relative; height: 34px; }
.po-gen .s { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; transition: opacity 0.6s var(--ease); white-space: nowrap; }
.po-gen .s2 { opacity: 0; }
.po-frag.play .po-gen .s1 { opacity: 0; transition-delay: 1.3s; }
.po-frag.play .po-gen .s2 { opacity: 1; transition-delay: 1.3s; }
.po-cell { max-width: 100%; }
.po-out { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; border: 1px solid var(--ac-border2); background: linear-gradient(135deg, var(--ac-bg3), var(--ac-bg2)); width: 100%; }
.po-out img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); filter: blur(7px); transition: opacity 0.9s 0.5s var(--ease), transform 1s 0.5s var(--ease), filter 1s 0.5s var(--ease); }
.po-out .cap { position: absolute; left: 11px; bottom: 11px; right: 11px; z-index: 2; opacity: 0; transform: translateY(6px); transition: opacity 0.6s 1.25s var(--ease), transform 0.6s 1.25s var(--ease); }
.po-out .cap .kk { display: block; font-family: var(--mono); font-size: 6.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #f3d99a; margin-bottom: 5px; text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.po-out .cap .l1 { display: block; font-family: var(--display); font-style: italic; font-size: 21px; font-weight: 500; color: #fff; line-height: 0.96; letter-spacing: -0.01em; text-shadow: 0 2px 12px rgba(0,0,0,0.55); }
.po-out .cap .l1 .amp { font-size: 15px; opacity: 0.7; }
.po-out .cap .rule { display: block; width: 26px; height: 1px; background: var(--ac-gold); opacity: 0.85; margin: 7px 0 6px; }
.po-out .cap .l2 { display: block; font-family: var(--mono); font-size: 7px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(253,244,220,0.95); text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.po-out::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 22%, rgba(28,18,10,0.72) 58%, rgba(14,9,5,0.95)); opacity: 0; transition: opacity 0.9s 0.55s; }
.po-out .shimmer { position: absolute; inset: 0; z-index: 3; background: linear-gradient(105deg, transparent 38%, rgba(253,244,220,0.35) 50%, transparent 62%); transform: translateX(-120%); }
.po-frag.play .po-out img { opacity: 1; transform: none; filter: none; }
.po-frag.play .po-out::before { opacity: 1; }
.po-frag.play .po-out .cap { opacity: 1; transform: none; }
.po-frag.play .po-out .shimmer { transition: transform 1s 0.3s var(--ease); transform: translateX(120%); }

/* ============================================================
   SEARCH — third result slides in on hover
   ============================================================ */
.se-frag { width: 332px; }
.se-seg { display: flex; padding: 3px; border-radius: 100px; background: var(--ac-bg3); border: 1px solid var(--ac-border); margin-top: 10px; }
.se-seg span { flex: 1; text-align: center; padding: 6px 0; border-radius: 100px; font-family: var(--body); font-size: 11px; font-weight: 600; color: var(--ac-text2); }
.se-seg span.on { background: var(--ac-bg); color: var(--ac-text); box-shadow: 0 2px 6px rgba(0,0,0,0.35); }
.se-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.se-res { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--ac-bg2); border: 1px solid var(--ac-border); margin-top: 8px; }
.se-res .nm { font-family: var(--body); font-size: 12.5px; font-weight: 600; color: var(--ac-text); }
.se-res .sb { font-family: var(--body); font-size: 10.5px; color: var(--ac-text2); margin-top: 1px; }
.se-res .rate { font-family: var(--mono); font-size: 11px; color: var(--ac-gold); white-space: nowrap; }
.se-res.r3 { opacity: 0; transform: translateY(10px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.se-frag.play .se-res.r3 { opacity: 1; transform: none; transition-delay: 0.3s; }
.se-more { text-align: center; margin-top: 9px; transition: opacity 0.6s var(--ease); }
.se-frag.play .se-more { opacity: 0; }
.se-wrap3 { height: 0; overflow: visible; }

/* ============================================================
   ROLE SWITCH — knob slides on hover
   ============================================================ */
.sw-frag { width: 296px; text-align: center; }
.sw-seg { position: relative; display: inline-flex; padding: 4px; border-radius: 100px; background: rgba(10,8,7,0.7); border: 1px solid var(--ac-border2); margin: 10px 0 14px; }
.sw-seg .knob { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 100px; background: rgba(200,164,92,0.18); box-shadow: 0 0 0 1px rgba(200,164,92,0.45) inset, 0 0 18px rgba(200,164,92,0.25); transition: transform 0.55s var(--ease); }
.sw-seg span { position: relative; padding: 8px 18px; font-family: var(--display); font-style: italic; font-size: 13px; color: var(--ac-text2); transition: color 0.45s; }
.sw-seg .o1 { color: var(--ac-text); }
.sw-frag.play .knob { transform: translateX(100%); }
.sw-frag.play .o1 { color: var(--ac-text2); }
.sw-frag.play .o2 { color: var(--ac-text); }
.sw-badge { transition: color 0.45s 0.3s, border-color 0.45s 0.3s, background 0.45s 0.3s; }
.sw-frag.play .sw-badge { color: var(--ac-gold); border-color: rgba(200,164,92,0.5); background: rgba(200,164,92,0.1); }

/* ============================================================
   DASHBOARD hover life
   ============================================================ */
.dash-frag.play .bars .bar { animation: barBreathe 1.6s var(--ease); }
.dash-frag .bars .bar:nth-child(2) { animation-delay: 0.06s; }
.dash-frag .bars .bar:nth-child(4) { animation-delay: 0.12s; }
.dash-frag .bars .bar:nth-child(6) { animation-delay: 0.18s; }
@keyframes barBreathe { 0% { transform: scaleY(0.55); } 60% { transform: scaleY(1.05); } 100% { transform: scaleY(1); } }
.dash-frag .bars .bar { transform-origin: bottom; }
.dash-frag.play .donut { transform: rotate(40deg); }
.dash-frag .donut { transition: transform 1.2s var(--ease); }

/* ---- extra analytics charts (artist + event dashboards) ---- */
.dash-row2 { grid-template-columns: 1fr 1fr; margin-top: 14px; }
.dash-line { height: 70px; margin-top: 12px; }
.dash-line svg { width: 100%; height: 100%; overflow: visible; }
.dash-reels { display: flex; flex-direction: column; gap: 7px; }
.dash-reels .rl { display: flex; align-items: center; gap: 9px; font-family: var(--body); font-size: 12px; color: var(--cream); }
.dash-reels .rk { width: 18px; height: 18px; flex: none; border-radius: 5px; display: grid; place-items: center; font-family: var(--mono); font-size: 10px; color: var(--tungsten); background: rgba(232,163,61,0.12); border: 1px solid var(--gold-faint); }
.dash-reels .rn { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-reels .rv { font-family: var(--mono); font-size: 11px; color: var(--grey); white-space: nowrap; }
.hbars { display: flex; flex-direction: column; gap: 11px; }
.hbars .hb { display: flex; align-items: center; gap: 9px; }
.hbars .hl { width: 64px; flex: none; font-family: var(--body); font-size: 11px; color: var(--grey); }
.hbars .ht { flex: 1; height: 8px; border-radius: 100px; background: rgba(244,238,226,0.08); overflow: hidden; }
.hbars .ht i { display: block; height: 100%; width: 0; border-radius: 100px; background: linear-gradient(90deg, var(--tungsten), var(--halo)); transition: width 1.1s var(--ease) 0.1s; }
.evan-frag.is-in .hbars .ht i, .dash-frag.is-in .hbars .ht i { width: var(--w, 100%); }
.hbars .hv { width: 26px; flex: none; text-align: right; font-size: 11px; color: var(--cream); }
.donut-city { background: conic-gradient(var(--tungsten) 0 48%, var(--gold) 48% 79%, var(--violet) 79% 100%); }

/* ============================================================
   HERO image stack + readability scrim
   ============================================================ */
.hero-photo img { opacity: 0; transition: opacity 0.8s ease; }
html[data-hero="crowd"] .hero-img-crowd,
html[data-hero="guitar"] .hero-img-guitar,
html[data-hero="singer"] .hero-img-singer { opacity: 1; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(97deg, rgba(10,8,7,0.92) 0%, rgba(10,8,7,0.72) 30%, rgba(10,8,7,0.28) 56%, transparent 75%);
}
.hero .display em { font-style: italic; color: var(--halo); }

/* parallax-free fragments still get gentle float */
@media (prefers-reduced-motion: reduce) {
  .feed-scroll, .pf-panel, .pr-panel, .bk-bubble, .ch-typing, .ch-final,
  .po-out img, .tk-bar i, .sw-seg .knob, .pub-progress i { transition: none !important; }
  .ch-typing i, .dash-frag .bars .bar { animation: none !important; }
}