/* ═══════════════════════════════════════════════════════════════════
 * academy_theatrical.css — Theatrical UX layer (v1.0)
 * D-T-1, D-T-2, D-T-4
 * O-T-2, O-T-3, O-T-4, O-T-7
 * C-T-1, C-T-2, C-T-5, C-T-8, C-T-9
 * M-T-1, M-T-3, M-T-4, M-T-6, M-T-9
 * N-T-1, N-T-2, N-T-3, N-T-4, N-T-5, N-T-11
 * S-1, S-2, S-4, S-5
 * Mobile-first; respects prefers-reduced-motion.
 * ═══════════════════════════════════════════════════════════════════ */

/* ── D-T-1 · Spatial 3D tile depth (Dashboard hub) ─────────────────── */
.dash-grid{ perspective:1400px; transform-style:preserve-3d; }
.dash-card{ transform: translateZ(0) rotateX(0) rotateY(0); transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .25s, box-shadow .35s; will-change: transform; }
.dash-card:hover{ transform: translateZ(8px) rotateX(.6deg) rotateY(-.8deg); box-shadow: 0 14px 38px -18px rgba(197,165,114,.35), 0 0 0 1px rgba(197,165,114,.18); }
.dash-card[data-depth="0"]{ transform: translateZ(0); }
.dash-card[data-depth="1"]{ transform: translateZ(6px); }
.dash-card[data-depth="2"]{ transform: translateZ(12px); }
.dash-card[data-depth="3"]{ transform: translateZ(18px); }
@media (max-width:1100px){
  .dash-grid{ perspective:none; }
  .dash-card,.dash-card[data-depth]{ transform:none !important; }
  .dash-card:hover{ transform:none !important; box-shadow:0 6px 18px -10px rgba(197,165,114,.22); }
}

/* ── D-T-2 · Generative calligraphy welcome ────────────────────────── */
#dt2-calligraphy{ position:fixed; top:14px; right:14px; width:220px; height:90px; pointer-events:none; z-index:90; opacity:0; }
#dt2-calligraphy.dt2-show{ animation: dt2-fade 5.2s cubic-bezier(.2,.7,.3,1) forwards; }
#dt2-calligraphy path{ fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1400; stroke-dashoffset:1400; filter: drop-shadow(0 0 4px rgba(197,165,114,.45)); }
#dt2-calligraphy.dt2-show path{ animation: dt2-draw 1.2s ease forwards; }
@keyframes dt2-draw{ to{ stroke-dashoffset:0; } }
@keyframes dt2-fade{ 0%{opacity:0} 20%{opacity:1} 78%{opacity:1} 100%{opacity:0} }
@media (max-width:640px){ #dt2-calligraphy{ width:148px; height:62px; top:64px; right:8px; } }

/* ── D-T-4 · Cosmic timeline strip (NY · London · Tokyo · Sydney) ──── */
.dt4-strip{ position:relative; display:flex; gap:6px; padding:10px 14px; margin:0 0 18px; border:1px solid var(--border); border-radius:14px; background: linear-gradient(90deg, rgba(96,165,250,.05), rgba(197,165,114,.05), rgba(125,200,138,.05), rgba(231,123,123,.05)); overflow:hidden; }
.dt4-strip::before{ content:''; position:absolute; inset:0; background: radial-gradient(circle at var(--dt4-cursor, 50%) 50%, rgba(197,165,114,.10), transparent 40%); pointer-events:none; }
.dt4-session{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; padding:8px 10px; border-radius:10px; background: rgba(20,20,28,.55); border:1px solid transparent; position:relative; transition: border-color .25s; }
.dt4-session.dt4-open{ border-color: var(--gold-soft); box-shadow: inset 0 0 22px rgba(197,165,114,.10); }
.dt4-session.dt4-closing{ opacity:.55; }
.dt4-session .dt4-city{ font-size:10px; letter-spacing:1.8px; color:var(--gold); font-weight:700; }
.dt4-session .dt4-clock{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:13px; color:var(--cream); }
.dt4-session .dt4-state{ font-size:9.5px; color:var(--muted); letter-spacing:1.2px; }
.dt4-session.dt4-open .dt4-state{ color: var(--success); }
@media (max-width:640px){
  .dt4-strip{ gap:4px; padding:8px; }
  .dt4-session{ padding:6px 7px; }
  .dt4-session .dt4-city{ font-size:9px; }
  .dt4-session .dt4-clock{ font-size:11px; }
  .dt4-session .dt4-state{ font-size:8.5px; }
}

/* ── O-T-2 · Choreographed FLIP-stagger entrance ───────────────────── */
.dash-grid > .dash-card{ opacity:0; transform: translateY(14px) scale(.985); animation: ot2-enter .55s cubic-bezier(.2,.7,.3,1) forwards; }
.dash-grid > .dash-card:nth-child(1){ animation-delay:.04s }
.dash-grid > .dash-card:nth-child(2){ animation-delay:.10s }
.dash-grid > .dash-card:nth-child(3){ animation-delay:.16s }
.dash-grid > .dash-card:nth-child(4){ animation-delay:.22s }
.dash-grid > .dash-card:nth-child(5){ animation-delay:.28s }
.dash-grid > .dash-card:nth-child(6){ animation-delay:.34s }
.dash-grid > .dash-card:nth-child(7){ animation-delay:.40s }
.dash-grid > .dash-card:nth-child(8){ animation-delay:.46s }
.dash-grid > .dash-card:nth-child(n+9){ animation-delay:.52s }
@keyframes ot2-enter{ to{ opacity:1; transform: translateY(0) scale(1); } }

/* ── O-T-3 · Morphing digit transitions ────────────────────────────── */
.ot3-num{ display:inline-flex; align-items:baseline; gap:1px; line-height:1; font-variant-numeric: tabular-nums; }
.ot3-digit{ position:relative; display:inline-block; height:1em; overflow:hidden; vertical-align:baseline; }
.ot3-digit .ot3-roll{ display:flex; flex-direction:column; transition: transform .55s cubic-bezier(.2,.7,.3,1); }
.ot3-digit .ot3-roll > span{ height:1em; display:flex; align-items:center; }

/* ── O-T-4 · Self-drawing sparklines ───────────────────────────────── */
.ot4-spark{ width:100%; height:32px; }
.ot4-spark path{ fill:none; stroke:var(--gold); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:600; stroke-dashoffset:600; animation: ot4-draw .9s ease forwards; }
.ot4-spark.ot4-pos path{ stroke: var(--success); }
.ot4-spark.ot4-neg path{ stroke: var(--danger); }
@keyframes ot4-draw{ to{ stroke-dashoffset:0; } }

/* ── O-T-7 · Card-flip detail mode ─────────────────────────────────── */
.ot7-flippable{ perspective: 1200px; }
.ot7-flippable .ot7-inner{ position:relative; width:100%; transform-style:preserve-3d; transition: transform .55s cubic-bezier(.2,.7,.3,1); }
.ot7-flippable.ot7-flipped .ot7-inner{ transform: rotateY(180deg); }
.ot7-flippable .ot7-face, .ot7-flippable .ot7-back{ backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ot7-flippable .ot7-back{ position:absolute; inset:0; transform: rotateY(180deg); padding:14px; }

/* ── C-T-1 · Posts arrive on a film-strip roll ─────────────────────── */
.ct1-new-post{ transform-origin: top center; animation: ct1-roll .45s cubic-bezier(.2,.7,.3,1); }
@keyframes ct1-roll{ 0%{ opacity:0; transform: rotateX(-78deg) translateY(-8px); } 100%{ opacity:1; transform: rotateX(0) translateY(0); } }

/* ── C-T-2 · Holographic gold border on verified traders ───────────── */
.ct2-verified-name{ background: linear-gradient(90deg, #ECD292 0%, #FFFFFF 25%, #C5A572 50%, #FFFFFF 75%, #ECD292 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ct2-shimmer 6s linear infinite; }
@keyframes ct2-shimmer{ from{ background-position: 0% 50%; } to{ background-position: 200% 50%; } }
.ct2-verified-ring{ position:relative; }
.ct2-verified-ring::before{ content:''; position:absolute; inset:-3px; border-radius:50%; background: conic-gradient(from var(--ct2-angle,0deg), #ECD292, #FFFFFF, #C5A572, #ECD292); -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%); mask: radial-gradient(circle, transparent 60%, #000 62%); animation: ct2-spin 5s linear infinite; pointer-events:none; }
@keyframes ct2-spin{ to{ --ct2-angle: 360deg; transform: rotate(360deg); } }

/* ── C-T-5 · Sentiment ambient glow ────────────────────────────────── */
.ct5-glow-bull{ box-shadow: 0 0 28px -6px rgba(125,200,138,.22); }
.ct5-glow-bear{ box-shadow: 0 0 28px -6px rgba(231,123,123,.22); }
.ct5-glow-neutral{ box-shadow: 0 0 22px -10px rgba(197,165,114,.20); }
.ct5-glow-mixed{ box-shadow: 0 0 22px -10px rgba(96,165,250,.20); }

/* ── C-T-8 · Reading-time crawl ────────────────────────────────────── */
.ct8-progress{ position:absolute; top:0; left:0; height:1px; background: linear-gradient(90deg, transparent, var(--gold), var(--cream)); width:var(--ct8-pct,0%); transition: width .15s linear; }

/* ── C-T-9 · Composer paper-texture mode ───────────────────────────── */
.ct9-paper{ background-color: #14141c; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .77, 0 0 0 0 .65, 0 0 0 0 .45, 0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-blend-mode: overlay; }

/* ── M-T-1 · Spring-elastic bubble entry ───────────────────────────── */
[data-testid="dm-msg"]{ animation: mt1-pop .32s cubic-bezier(.34,1.56,.64,1); }
@keyframes mt1-pop{ 0%{ opacity:0; transform: translateY(8px) scale(.92); } 100%{ opacity:1; transform: translateY(0) scale(1); } }

/* ── M-T-3 · Animated read receipts ────────────────────────────────── */
.mt3-tick{ display:inline-flex; align-items:center; gap:1px; margin-left:6px; vertical-align:middle; }
.mt3-tick svg{ width:11px; height:11px; transition: stroke .3s, transform .3s; stroke: var(--muted); fill:none; stroke-width:2; }
.mt3-tick.mt3-delivered svg{ stroke: #B8B8C2; }
.mt3-tick.mt3-read svg{ stroke: var(--gold); transform: scale(1.08); }

/* ── M-T-4 · Gold morse-code typing ────────────────────────────────── */
.mt4-typing{ display:inline-flex; gap:3px; align-items:center; height:14px; }
.mt4-typing span{ display:inline-block; width:3px; height:3px; border-radius:50%; background: var(--gold); }
.mt4-typing span:nth-child(1){ animation: mt4-pulse 1.2s infinite ease-in-out; }
.mt4-typing span:nth-child(2){ animation: mt4-pulse 1.2s infinite ease-in-out .15s; }
.mt4-typing span:nth-child(3){ animation: mt4-pulse 1.2s infinite ease-in-out .30s; }
@keyframes mt4-pulse{ 0%,100%{ transform: scale(.7); opacity:.4 } 40%{ transform: scale(1.6); opacity:1 } }

/* ── M-T-6 · Conversation mood ring ────────────────────────────────── */
#dmMessages.mt6-mood-bull{ box-shadow: inset 0 0 0 1px rgba(125,200,138,.22); border-radius:10px; }
#dmMessages.mt6-mood-bear{ box-shadow: inset 0 0 0 1px rgba(231,123,123,.22); border-radius:10px; }
#dmMessages.mt6-mood-neutral{ box-shadow: inset 0 0 0 1px rgba(197,165,114,.18); border-radius:10px; }

/* ── M-T-9 · Squircle avatars + active gold halo ───────────────────── */
.mt9-squircle{ border-radius:30% !important; }
.mt9-online{ position:relative; }
.mt9-online::after{ content:''; position:absolute; right:-2px; bottom:-2px; width:10px; height:10px; border-radius:50%; background: var(--success); border:2px solid var(--ink); box-shadow: 0 0 8px var(--success); animation: mt9-glow 2.4s ease-in-out infinite; }
@keyframes mt9-glow{ 0%,100%{ box-shadow: 0 0 6px rgba(125,200,138,.6) } 50%{ box-shadow: 0 0 14px rgba(125,200,138,.95) } }

/* ── N-T-1 · Gold-leaf flutter on arrival ──────────────────────────── */
.nt1-new{ animation: nt1-flutter .6s cubic-bezier(.34,1.4,.64,1); transform-origin: top center; }
@keyframes nt1-flutter{ 0%{ opacity:0; transform: rotate(-12deg) translateY(-22px) scale(.95); } 55%{ opacity:1; transform: rotate(3deg) translateY(0) scale(1); } 100%{ transform: rotate(0deg) scale(1); } }

/* ── N-T-2 · Stacked 3D card fan (smart-batched) ───────────────────── */
.nt2-stack{ position:relative; padding-bottom:6px; }
.nt2-stack > [data-stack="1"]{ transform: translateY(-4px) translateX(2px) rotate(.6deg) scale(.985); z-index:1; opacity:.84; }
.nt2-stack > [data-stack="2"]{ transform: translateY(-8px) translateX(4px) rotate(1.2deg) scale(.97); z-index:0; opacity:.7; }
.nt2-stack:hover > [data-stack="1"]{ transform: translateY(0) translateX(60px) rotate(2deg) scale(1); opacity:1; }
.nt2-stack:hover > [data-stack="2"]{ transform: translateY(0) translateX(120px) rotate(4deg) scale(1); opacity:1; }
.nt2-stack > *{ transition: transform .45s cubic-bezier(.2,.7,.3,1), opacity .35s; }

/* ── N-T-3 · Diamond glyph rare events ─────────────────────────────── */
.nt3-diamond{ display:inline-block; width:9px; height:9px; transform: rotate(45deg); background: linear-gradient(135deg, #ECD292, var(--gold)); margin: 0 6px -1px; box-shadow: 0 0 10px rgba(197,165,114,.55); }

/* ── N-T-4 · Bell icon Live Activity sway ──────────────────────────── */
.nt4-sway{ display:inline-block; transform-origin: top center; animation: nt4-sway 12s ease-in-out infinite; }
@keyframes nt4-sway{ 0%,90%,100%{ transform: rotate(0) } 92%{ transform: rotate(-15deg) } 94%{ transform: rotate(12deg) } 96%{ transform: rotate(-8deg) } 98%{ transform: rotate(4deg) } }

/* ── N-T-5 · Swipe gestures gold trail ─────────────────────────────── */
.nt5-trail{ position:absolute; pointer-events:none; height:3px; border-radius:99px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity:.9; animation: nt5-fade .35s linear forwards; }
@keyframes nt5-fade{ to{ opacity:0; transform: scaleX(1.4); } }

/* ── N-T-11 · Empty state sparkle ──────────────────────────────────── */
.nt11-sparkle{ display:inline-block; width:12px; height:12px; margin-left:6px; }
.nt11-sparkle span{ position:absolute; display:inline-block; width:2px; height:8px; background: var(--gold); animation: nt11-twinkle 5s ease-in-out infinite; }
@keyframes nt11-twinkle{ 0%, 78%, 100%{ opacity:0; transform: scale(.6) } 86%{ opacity:1; transform: scale(1) } }

/* ── N-F-7 · Streak gold ring on bell ──────────────────────────────── */
.nf7-ring{ position:relative; }
.nf7-ring::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--gold); box-shadow: 0 0 12px rgba(197,165,114,.4); animation: nf7-pulse 3.5s ease-in-out infinite; pointer-events:none; }
@keyframes nf7-pulse{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }

/* ── S-1 · First-of-the-day greeting overlay ───────────────────────── */
#s1-overlay{ position:fixed; inset:0; background: radial-gradient(ellipse at center, rgba(10,10,12,.96), rgba(0,0,0,.99)); display:none; align-items:center; justify-content:center; z-index:9000; flex-direction:column; gap:18px; opacity:0; transition: opacity .8s ease; pointer-events:none; }
#s1-overlay.s1-show{ display:flex; opacity:1; pointer-events:auto; }
#s1-overlay svg{ width:min(560px, 80vw); height:auto; }
#s1-overlay svg path{ fill:none; stroke:var(--gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:2200; stroke-dashoffset:2200; animation: s1-write 1.6s ease forwards; filter: drop-shadow(0 0 14px rgba(197,165,114,.6)); }
@keyframes s1-write{ to{ stroke-dashoffset:0 } }
#s1-overlay .s1-name{ font-family:'Cormorant Garamond', serif; font-size: clamp(20px, 4.5vw, 36px); color: var(--cream); letter-spacing:.5px; opacity:0; animation: s1-fade-in 1s ease 1.4s forwards; }
@keyframes s1-fade-in{ to{ opacity:1 } }

/* ── S-2 · Lesson completion gold dust ─────────────────────────────── */
#s2-canvas{ position:fixed; inset:0; pointer-events:none; z-index:8500; }

/* ── S-4 · Top discussion shoutout overlay ─────────────────────────── */
#s4-overlay{ position:fixed; inset:0; background: radial-gradient(ellipse at center, rgba(197,165,114,.10), rgba(0,0,0,.96)); display:none; align-items:center; justify-content:center; z-index:9100; flex-direction:column; padding:24px; opacity:0; transition: opacity .6s; }
#s4-overlay.s4-show{ display:flex; opacity:1; }
#s4-overlay .s4-overline{ font-size: 11px; letter-spacing: 6px; color: var(--gold); margin-bottom:14px; font-weight:700; }
#s4-overlay .s4-card{ max-width:520px; width:100%; padding:28px; background: linear-gradient(180deg, rgba(20,20,28,.95), rgba(8,8,11,.95)); border:1px solid var(--gold); border-radius:18px; box-shadow: 0 30px 80px -20px rgba(197,165,114,.4); animation: s4-crystal .8s cubic-bezier(.2,.7,.3,1); }
@keyframes s4-crystal{ from{ opacity:0; transform: scale(.92) rotateX(-8deg); } to{ opacity:1; transform: scale(1) rotateX(0); } }

/* ── S-5 · Streak milestones medal ceremony ────────────────────────── */
#s5-overlay{ position:fixed; inset:0; background: radial-gradient(ellipse at center, rgba(0,0,0,.94), #000 70%); display:none; align-items:center; justify-content:center; z-index:9200; flex-direction:column; opacity:0; transition: opacity .6s; }
#s5-overlay.s5-show{ display:flex; opacity:1; }
#s5-overlay .s5-avatar{ width: clamp(100px, 18vw, 160px); height: clamp(100px, 18vw, 160px); border-radius:50%; background: linear-gradient(135deg, var(--gold), var(--cream)); display:grid; place-items:center; font-family:'Cormorant Garamond',serif; font-size: clamp(40px, 7vw, 64px); color:#000; font-weight:700; box-shadow: 0 0 50px rgba(197,165,114,.6); animation: s5-rise 1s cubic-bezier(.2,.7,.3,1); }
@keyframes s5-rise{ from{ transform: translateY(40px) scale(.7); opacity:0 } to{ transform: translateY(0) scale(1); opacity:1 } }
#s5-overlay .s5-ribbon{ margin-top:24px; position:relative; padding: 12px 38px; background: linear-gradient(180deg, var(--gold), #8a6a3a); color: #000; font-family:'Cormorant Garamond',serif; font-size: clamp(36px, 6vw, 64px); font-weight:700; letter-spacing:2px; clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 24px 100%); transform: translateY(-30px); opacity:0; animation: s5-drop .9s cubic-bezier(.34,1.56,.64,1) .5s forwards; }
@keyframes s5-drop{ to{ transform: translateY(0); opacity:1 } }
#s5-overlay .s5-label{ margin-top:18px; font-size: 11px; letter-spacing: 5px; color: var(--gold); font-weight:700; opacity:0; animation: s5-fade .6s ease 1.4s forwards; }
@keyframes s5-fade{ to{ opacity:1 } }
#s5-overlay .s5-actions{ margin-top:32px; display:flex; gap:12px; opacity:0; animation: s5-fade .6s ease 1.8s forwards; }
#s5-overlay button{ padding: 10px 18px; border-radius:99px; font-size:11px; letter-spacing:1.8px; font-weight:700; border:1px solid var(--gold-soft); background:transparent; color:var(--cream); cursor:pointer; font-family:inherit; }
#s5-overlay button.s5-share{ background: var(--gold); color:#000; border-color:var(--gold); }

/* Profile header — mobile clean stack (fix VERIFIED/EDIT PROFILE overlap) */
@media (max-width: 640px){
  .pub-profile-header{ align-items:flex-start !important; }
  .pub-profile-header > div:nth-child(2){ flex:1 1 100%; min-width:0; padding-bottom:0 !important; }
  .pub-profile-actions{ flex:1 1 100%; margin-top:8px; }
  .pub-profile-actions button{ width:100%; }
}

@media (prefers-reduced-motion: reduce){
  .dash-grid > .dash-card, .dash-card, .ct1-new-post, .ct2-verified-name, .ct2-verified-ring::before,
  .nt1-new, .nt4-sway, .nt11-sparkle span, .nf7-ring::after, .mt9-online::after,
  #s1-overlay svg path, #s1-overlay .s1-name, #s4-overlay .s4-card, #s5-overlay .s5-avatar,
  #s5-overlay .s5-ribbon, #s5-overlay .s5-label, #s5-overlay .s5-actions, .ot4-spark path,
  .ot7-flippable .ot7-inner, [data-testid="dm-msg"], .mt4-typing span {
    animation: none !important; transition: none !important;
  }
  .dash-card:hover{ transform:none !important; }
}