/* ============================================================
   LUMINA STUDIO — deck design system
   Dark glassmorphism · purple/pink gradients · Space Grotesk + Inter
   Mirrors the React app's SlideContent vocabulary, dialled up to "B3C" polish.
   ============================================================ */
:root{
  --purple:#B7A6F2; --purple-deep:#7C3AED; --pink:#EC6FA8; --pink-deep:#DB2777;
  --blue:#5B9CF6; --green:#34D399; --orange:#F5B544; --red:#F0696B;
  --bg:#08070F; --surface:#15131F;
  --ink:#F7F7FB; --ink-2:rgba(247,247,251,.72); --ink-3:rgba(247,247,251,.50);
  --line:rgba(255,255,255,.11); --line-soft:rgba(255,255,255,.06);
  --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.028);
  --sg:'Space Grotesk',system-ui,sans-serif; --in:'Inter',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:#050409;color:var(--ink);font-family:var(--in)}
deck-stage:not(:defined){visibility:hidden}

/* every slide gets the lumina backdrop — deep near-black, restrained glows */
deck-stage > section{
  background:
    radial-gradient(1100px 760px at 14% -12%, rgba(124,58,237,.20) 0%, transparent 58%),
    radial-gradient(1000px 800px at 104% 112%, rgba(236,72,153,.12) 0%, transparent 55%),
    radial-gradient(820px 620px at 88% 4%, rgba(99,102,241,.10) 0%, transparent 60%),
    linear-gradient(157deg,#0C0A18 0%, #08070F 56%, #060509 100%);
  color:var(--ink); overflow:hidden;
}
/* refined vignette + faint top sheen */
deck-stage > section::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025) 0%, transparent 16%),
    radial-gradient(130% 130% at 50% 46%, transparent 60%, rgba(3,2,8,.62) 100%);
}

/* layout helpers ------------------------------------------------ */
.wrap{position:absolute; inset:0; display:flex; flex-direction:column; padding:74px 96px; z-index:2}
.wrap.center{align-items:center; justify-content:center; text-align:center}
.grow{flex:1; min-height:0}
.fillgrid{display:grid; gap:22px}
.cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)} .cols-5{grid-template-columns:repeat(5,1fr)}
.cols-6{grid-template-columns:repeat(6,1fr)} .cols-7{grid-template-columns:repeat(7,1fr)}

/* header -------------------------------------------------------- */
.eyebrow{color:var(--purple); font-family:var(--sg); font-weight:600; font-size:15px;
  text-transform:uppercase; letter-spacing:.34em; margin-bottom:14px}
.s-head{text-align:center; margin-bottom:34px}
.s-title{font-family:var(--sg); font-weight:600; color:#fff; text-transform:uppercase;
  letter-spacing:.02em; line-height:1.05; font-size:56px;
  text-shadow:0 2px 38px rgba(124,58,237,.40)}
.s-sub{font-family:var(--sg); font-weight:400; color:var(--ink-2); font-size:24px; margin-top:10px;
  letter-spacing:.01em}
.s-head.sm .s-title{font-size:44px} .s-head.sm{margin-bottom:22px}

/* cards — neutral frosted glass (b3c register) ------------------ */
.card{background:var(--glass); border:1px solid var(--line); border-radius:18px;
  backdrop-filter:blur(20px) saturate(125%); -webkit-backdrop-filter:blur(20px) saturate(125%);
  box-shadow:0 18px 50px -26px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.07)}
.card-l{background:var(--glass-2); border:1px solid var(--line-soft); border-radius:13px;
  backdrop-filter:blur(12px) saturate(120%); -webkit-backdrop-filter:blur(12px) saturate(120%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.p-sm{padding:20px} .p{padding:28px} .p-lg{padding:40px}
.card-top{height:5px;border-radius:99px;margin-bottom:16px}

/* type ---------------------------------------------------------- */
.k{font-family:var(--sg); text-transform:uppercase; letter-spacing:.14em; font-size:14px}
.k-lg{font-family:var(--sg); text-transform:uppercase; letter-spacing:.14em; font-size:16px}
.h3{font-family:var(--sg); font-weight:700; color:#fff; font-size:23px; line-height:1.2}
.h4{font-family:var(--sg); font-weight:600; color:#fff; font-size:18px}
.body{font-family:var(--in); color:var(--ink-2); font-size:18px; line-height:1.6}
.body-sm{font-family:var(--in); color:var(--ink-2); font-size:15px; line-height:1.55}
.body-xs{font-family:var(--in); color:var(--ink-3); font-size:13px; line-height:1.5}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.txt-p{color:var(--purple)} .txt-pk{color:var(--pink)} .txt-bl{color:var(--blue)}
.txt-gr{color:var(--green)} .txt-or{color:var(--orange)} .txt-rd{color:var(--red)}
.txt-w{color:#fff} .txt-w8{color:rgba(255,255,255,.85)} .txt-w6{color:rgba(255,255,255,.62)}
.italic{font-style:italic}
.divline{border-bottom:1px solid var(--line-soft); padding-bottom:12px; margin-bottom:14px}

/* pills / chips ------------------------------------------------- */
.chip{display:inline-block; font-family:var(--in); font-size:13px; color:var(--ink-2);
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:99px;
  padding:4px 13px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.num-badge{flex:none; width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg,var(--purple),var(--pink));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sg); font-weight:700; color:#fff; font-size:18px}
.num-sq{flex:none; width:38px; height:38px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; font-family:var(--sg); font-size:15px}
.dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:8px}

/* list bullets -------------------------------------------------- */
.li{display:flex; gap:10px; align-items:flex-start; font-family:var(--in);
  color:rgba(255,255,255,.85); font-size:15px; line-height:1.5}
.li + .li{margin-top:9px}
.li .mk{flex:none; line-height:1.4}
.stack-2 > * + *{margin-top:14px}
.stack-3 > * + *{margin-top:10px}

/* tone tints ---------------------------------------------------- */
.tint-rd{background:rgba(239,68,68,.09); border:1px solid rgba(239,68,68,.32)}
.tint-gr{background:rgba(16,185,129,.09); border:1px solid rgba(16,185,129,.32)}
.tint-bl{background:rgba(59,130,246,.09); border:1px solid rgba(59,130,246,.32)}
.tint-p{background:rgba(167,139,250,.10); border:1px solid rgba(167,139,250,.34)}
.tint-pk{background:rgba(236,72,153,.10); border:1px solid rgba(236,72,153,.32)}
.tint-or{background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.32)}
.tile{border-radius:12px; padding:14px}

/* decorative waveform + accents (per slide, lightweight) -------- */
.deco-wave{position:absolute; top:42px; display:flex; align-items:center; gap:5px; opacity:.7; z-index:1}
.deco-wave span{width:4px; background:rgba(167,139,250,.7); border-radius:3px}
.deco-wave.l{left:46px} .deco-wave.r{right:46px}
.deco-cube{position:absolute; width:42px; height:42px; border:2px solid rgba(167,139,250,.4);
  transform:rotate(24deg); z-index:1}
.deco-note{position:absolute; color:rgba(167,139,250,.5); font-size:30px; z-index:1}

/* persona image */
.pimg{object-fit:cover; border-radius:18px}
.pimg.round{border-radius:50%; border:3px solid var(--purple)}

/* image slot framing */
image-slot{display:block; background:rgba(15,12,40,.55); border:2px dashed rgba(167,139,250,.45);
  border-radius:14px}

/* tables -------------------------------------------------------- */
.tbl{width:100%; border-collapse:separate; border-spacing:0; font-family:var(--in)}
.tbl th{font-family:var(--sg); text-transform:uppercase; letter-spacing:.08em; font-size:13px;
  color:#fff; text-align:left; padding:12px 14px; background:rgba(167,139,250,.16);
  border-bottom:1px solid var(--line)}
.tbl td{padding:12px 14px; font-size:14px; color:rgba(255,255,255,.85); vertical-align:top;
  border-bottom:1px solid var(--line-soft); line-height:1.45}
.tbl tr:last-child td{border-bottom:none}
.tbl th:first-child{border-top-left-radius:12px} .tbl th:last-child{border-top-right-radius:12px}

/* gradient text accent */
.grad-txt{background:linear-gradient(120deg,var(--purple),var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent}

/* entrance animation — additive only. Base/ frozen state is fully VISIBLE
   (no backwards fill), so captures, print and reduced-motion all show content. */
@media (prefers-reduced-motion:no-preference){
  [data-deck-active] .anim{animation:rise .55s ease forwards}
  [data-deck-active] .anim.d1{animation-delay:.07s}
  [data-deck-active] .anim.d2{animation-delay:.14s}
  [data-deck-active] .anim.d3{animation-delay:.21s}
  [data-deck-active] .anim.d4{animation-delay:.28s}
}
@keyframes rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}

/* ===== inline SVG icons ===== */
.icon{display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; line-height:0}
.ic{width:1em; height:1em; display:block}
/* icon size presets when used as a feature glyph */
.icon.lg .ic{width:34px;height:34px}
.icon.md .ic{width:26px;height:26px}
.icon.sm .ic{width:18px;height:18px}
.icon.xl .ic{width:46px;height:46px}
/* circular icon badge (sample-style headers) */
.ibadge{flex:none; width:42px; height:42px; border-radius:12px; display:inline-flex;
  align-items:center; justify-content:center; background:rgba(167,139,250,.14);
  border:1px solid var(--line)}
.ibadge .ic{width:22px;height:22px}
.ibadge.pk{background:rgba(236,72,153,.14); border-color:rgba(236,72,153,.34)}
.ibadge.bl{background:rgba(59,130,246,.14); border-color:rgba(59,130,246,.34)}
.ibadge.gr{background:rgba(16,185,129,.14); border-color:rgba(16,185,129,.34)}
.ibadge.rd{background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.32)}
.ibadge.or{background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.32)}

/* ===== floating animation (decorative; gated for reduced motion) ===== */
@media (prefers-reduced-motion:no-preference){
  .float{animation:floaty 3.6s ease-in-out infinite}
  .float-slow{animation:floaty 5.5s ease-in-out infinite}
  .spin-slow{animation:spinslow 26s linear infinite}
  .pulse-ring{animation:pulsering 3s ease-in-out infinite}
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes spinslow{to{transform:rotate(360deg)}}
@keyframes pulsering{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.7;transform:scale(1.12)}}

/* ===== journey emotion curve (sample-style, animated faces) ===== */
.emo-band{position:relative; width:100%; min-height:150px; height:100%}
.emo-svg{position:absolute; inset:0; width:100%; height:100%}
.emo-line{filter:drop-shadow(0 0 6px rgba(167,139,250,.6))}
@media (prefers-reduced-motion:no-preference){
  [data-deck-active] .emo-line{stroke-dasharray:2600; stroke-dashoffset:2600; animation:draw 1.4s ease forwards .2s}
}
@keyframes draw{to{stroke-dashoffset:0}}
.emo-pt{position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column;
  align-items:center; gap:4px; width:96px}
.emo-face{width:42px; height:42px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.emo-cap{font-family:var(--in); font-size:11px; line-height:1.2; color:rgba(255,255,255,.78);
  text-align:center; text-wrap:balance}
.emo-row{position:relative; border-radius:12px; background:rgba(15,12,40,.6);
  border:1px solid var(--line-soft); overflow:hidden}

/* ===== decorative motion (musical) ===== */
@media (prefers-reduced-motion:no-preference){
  .deco-note{animation:floaty 4.2s ease-in-out infinite}
  .deco-note:nth-of-type(odd){animation-duration:5.1s}
  .deco-cube{animation:floaty 6s ease-in-out infinite}
  .deco-wave span{animation:eq 1.3s ease-in-out infinite alternate; transform-origin:bottom}
  .deco-wave span:nth-child(1){animation-delay:0s}.deco-wave span:nth-child(2){animation-delay:.12s}
  .deco-wave span:nth-child(3){animation-delay:.24s}.deco-wave span:nth-child(4){animation-delay:.36s}
  .deco-wave span:nth-child(5){animation-delay:.48s}.deco-wave span:nth-child(6){animation-delay:.30s}
  .deco-wave span:nth-child(7){animation-delay:.18s}.deco-wave span:nth-child(8){animation-delay:.42s}
  .deco-wave span:nth-child(9){animation-delay:.22s}.deco-wave span:nth-child(10){animation-delay:.34s}
}
@keyframes eq{from{transform:scaleY(.45)}to{transform:scaleY(1.15)}}

/* ===== ambient floating glyph field (very subtle, premium) ===== */
.ambient{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.amb{position:absolute; transform:translate(-50%,-50%); color:rgba(183,166,242,.05);
  display:block}
.amb svg{width:100%; height:100%; display:block}
.wrap{z-index:2}

/* ===== 3D pointer tilt + cursor spotlight on cards ===== */
.tilt{--rx:0deg; --ry:0deg; --mx:50%; --my:50%;
  transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease}
.tilt.tilt-on{transition:transform .08s ease-out, box-shadow .2s ease;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9),
             0 0 0 1px rgba(255,255,255,.08),
             inset 0 1px 0 rgba(255,255,255,.10)}
.tilt::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .3s ease; z-index:3; mix-blend-mode:screen;
  background:radial-gradient(420px circle at var(--mx) var(--my), rgba(150,130,230,.20), transparent 46%)}
.tilt.tilt-on::before{opacity:1}
@media (prefers-reduced-motion:reduce){ .tilt{transform:none!important} }