/* ============================================================
   DAS PLOP — Flensburger POS × Social  |  Design System
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&family=Inconsolata:wght@400;500;700&display=swap');

:root{
  /* ---- Palette  (black & green — matches source deck) ---- */
  --navy-950:#000000;
  --navy-900:#0a0a0a;
  --navy-800:#141618;
  --navy-700:#1a1c1e;
  --navy-600:#26292c;
  --green-deep:#122a18;
  --gold:#3cb44b;
  --gold-bright:#5bd16b;
  --cream:#ededed;
  --cream-dim:#cfd2cf;
  --paper:#0a0a0a;
  --ink:#ededed;
  --cap-red:#2a7a37;
  --strand:#7bd88a;

  --bg:var(--navy-900);
  --fg:var(--cream);
  --muted:#9a9a9a;
  --hair:rgba(60,180,75,.24);

  --ff-disp:'Montserrat',system-ui,sans-serif;
  --ff-text:'Inter',system-ui,sans-serif;
  --ff-mono:'Consolas','Inconsolata',ui-monospace,monospace;

  --ease:cubic-bezier(.2,.75,.2,1);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;}
deck-stage:not(:defined){visibility:hidden}
deck-stage{background:#000;}

/* every slide */
section.slide{
  width:1920px;height:1080px;overflow:hidden;
  background:var(--bg);color:var(--fg);
  font-family:var(--ff-text);
  position:relative;
  --pad:120px;
}
section.slide.paper{ --bg:var(--paper); --fg:var(--ink); --muted:rgba(19,36,63,.6); --hair:rgba(19,36,63,.16); }

/* ---------- Type scale ---------- */
.kicker{font-family:var(--ff-mono);font-size:24px;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);font-weight:700;}
.eyebrow{font-family:var(--ff-mono);font-size:20px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);}
h1.disp{font-family:var(--ff-disp);font-weight:900;line-height:.92;letter-spacing:-.01em;font-size:clamp(60px,9vw,150px);margin:0;}
h2.disp{font-family:var(--ff-disp);font-weight:800;line-height:.95;letter-spacing:-.01em;font-size:96px;margin:0;}
.lede{font-size:30px;line-height:1.45;color:var(--muted);font-weight:400;max-width:18em;}
.label{font-family:var(--ff-mono);font-weight:700;font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);}

/* gold underline flourish */
.rule{height:3px;width:96px;background:var(--gold);border:0;border-radius:2px;}

/* numbered tag */
.numtag{font-family:var(--ff-disp);font-weight:900;font-size:30px;color:var(--navy-900);background:var(--gold);
  width:64px;height:64px;display:grid;place-items:center;border-radius:50%;letter-spacing:0;}

/* chips */
.chip{font-family:var(--ff-mono);font-size:16px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--hair);color:var(--cream);padding:10px 18px;border-radius:999px;}
.paper .chip{color:var(--ink);}

/* image frame */
.shot{position:relative;overflow:hidden;background:var(--navy-800);}
.shot img{width:100%;height:100%;object-fit:cover;display:block;}
.shot::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(60,180,75,.35);pointer-events:none;}
.shot .cap{position:absolute;left:0;bottom:0;font-family:var(--ff-mono);font-size:16px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream);background:rgba(8,10,12,.82);padding:9px 16px;backdrop-filter:blur(3px);}

/* placeholder striped */
.ph{background:
   repeating-linear-gradient(45deg,rgba(60,180,75,.10) 0 14px,transparent 14px 28px),var(--navy-800);
   display:grid;place-items:center;color:var(--muted);font-family:var(--ff-mono);font-size:14px;letter-spacing:.18em;text-transform:uppercase;}

/* ===========================================================
   Entrance animation system
   base style = visible end-state; animate FROM hidden only
   while the slide is active + motion allowed
   =========================================================== */
@media (prefers-reduced-motion:no-preference){
  [data-deck-active] .rise{animation:rise .8s var(--ease) both;animation-delay:var(--d,0s);}
  [data-deck-active] .fade{animation:fade .9s var(--ease) both;animation-delay:var(--d,0s);}
  [data-deck-active] .wipe{animation:wipe 1s var(--ease) both;animation-delay:var(--d,0s);}
  [data-deck-active] .grow{animation:grow .9s var(--ease) both;animation-delay:var(--d,0s);}
  [data-deck-active] .blurin{animation:blurin .9s var(--ease) both;animation-delay:var(--d,0s);}
  [data-deck-active] .slidein{animation:slidein .9s var(--ease) both;animation-delay:var(--d,0s);}
}
@keyframes rise{from{opacity:0;transform:translateY(40px)}}
@keyframes fade{from{opacity:0}}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes grow{from{opacity:0;transform:scale(.82)}}
@keyframes blurin{from{opacity:0;filter:blur(14px);transform:translateY(14px)}}
@keyframes slidein{from{opacity:0;transform:translateX(60px)}}

/* shot ken-burns on active */
@media (prefers-reduced-motion:no-preference){
  [data-deck-active] .shot.kb img{animation:kenburns 14s ease-out both;}
}
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1)}}

/* ---------- Sound toggle ---------- */
#sound-btn{position:fixed;right:22px;top:22px;z-index:60;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(60,180,75,.5);
  background:rgba(10,10,10,.72);backdrop-filter:blur(6px);color:var(--gold);cursor:pointer;
  display:grid;place-items:center;transition:transform .2s var(--ease),background .2s;}
#sound-btn:hover{transform:scale(1.08);background:rgba(20,42,74,.0);background:rgba(28,40,30,.92);}
#sound-btn svg{width:22px;height:22px;}

/* ---------- Tweak modifiers ---------- */
body.motion-off *{animation:none !important;transition:none !important;}
body.motion-subtle [data-deck-active] .rise,
body.motion-subtle [data-deck-active] .fade,
body.motion-subtle [data-deck-active] .wipe,
body.motion-subtle [data-deck-active] .grow,
body.motion-subtle [data-deck-active] .blurin,
body.motion-subtle [data-deck-active] .slidein{animation-duration:.42s !important;animation-delay:0s !important;}
body.motion-subtle .shot.kb img,
body.motion-subtle .cap-disc{animation:none !important;}