/* ============================================================
   Laburnum House × Crestron — Design System
   Bright & happy. PLAY blue on white.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Hanken+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* surfaces */
  --bg:        #F6F5F1;
  --bg-2:      #ECECF4;
  --panel:     #FFFFFF;
  --panel-2:   #FCFCFA;
  --line:      rgba(20,42,98,0.10);
  --line-2:    rgba(20,42,98,0.17);

  /* ink */
  --ink:       #0E1B3A;
  --ink-dim:   #45527A;
  --ink-mute:  #8A94B0;

  /* accents */
  --brass:     #2E5FEC;   /* PLAY blue — primary */
  --brass-hi:  #2E5FEC;   /* vivid PLAY blue for emphasis */
  --brass-dk:  #16357F;   /* deep blue */
  --cresnet:   #0E9AA7;   /* diagram wire / data */
  --live:      #1FA84B;   /* on / active */
  --hvac:      #F08A24;   /* climate / warmth */
  --beacon:    #6E54E8;   /* bluetooth / proximity */
  --coral:     #F2674E;   /* warm secondary accent */
  --amber:     #E2A032;   /* warm accent */

  --shadow:    0 24px 60px -26px rgba(20,42,98,0.28);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Hanken Grotesk', system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;
}

*{ box-sizing:border-box; }

deck-stage:not(:defined){ visibility:hidden; }
deck-stage{ background:#D8E2FA; }

section{
  background:
    radial-gradient(115% 85% at 82% -12%, rgba(46,95,236,0.05), transparent 55%),
    radial-gradient(90% 80% at -8% 112%, rgba(242,103,78,0.045), transparent 52%),
    var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---- type primitives ---- */
.kicker{
  font-family:var(--mono);
  font-size:15px; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--brass);
}
.kicker .dim{ color:var(--ink-mute); }

.eyebrow{
  font-family:var(--mono);
  font-size:13px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-mute);
}

h1,h2,h3{ margin:0; font-weight:400; }

.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:0.98;
  letter-spacing:-0.01em;
  color:var(--ink);
}

.title{
  font-family:var(--serif);
  font-weight:500;
  font-size:62px;
  line-height:1.0;
  letter-spacing:-0.01em;
}
.title em{ font-style:italic; color:var(--brass-hi); }

.lede{
  font-size:23px; line-height:1.5; color:var(--ink-dim);
  font-weight:300; max-width:30ch;
}

.body{ font-size:19px; line-height:1.55; color:var(--ink-dim); font-weight:300; }
.mono{ font-family:var(--mono); }

/* hairline + dot accents */
.rule{ height:1px; background:var(--line-2); border:0; }
.dot{ width:7px;height:7px;border-radius:50%;background:var(--brass);display:inline-block; }

/* slide number / footer chrome */
.chrome{
  position:absolute; left:64px; right:64px; bottom:40px;
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:13px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-mute);
}
.chrome .brandmark{ display:flex; align-items:center; gap:12px; white-space:nowrap; }
.chrome > div{ white-space:nowrap; }
.chrome .brandmark b{ color:var(--ink-dim); font-weight:500; }
.chrome .brandmark .playlogo{ height:26px; width:auto; display:block; }

/* generic padded slide frame */
.frame{ position:absolute; inset:0; padding:84px 96px; display:flex; flex-direction:column; }

/* card */
.card{
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--line);
  border-radius:18px;
}

/* chip / tag */
.chip{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-dim);
  border:1px solid var(--line-2); border-radius:999px;
  padding:7px 14px;
}
.chip svg{ width:14px;height:14px; }

/* entrance animation: end-state is base; animate from hidden only when active */
@media (prefers-reduced-motion:no-preference){
  [data-deck-active] .rise{ animation:rise .7s cubic-bezier(.2,.7,.2,1) both; }
  [data-deck-active] .rise-2{ animation:rise .7s .08s cubic-bezier(.2,.7,.2,1) both; }
  [data-deck-active] .rise-3{ animation:rise .7s .16s cubic-bezier(.2,.7,.2,1) both; }
  [data-deck-active] .rise-4{ animation:rise .7s .24s cubic-bezier(.2,.7,.2,1) both; }
  [data-deck-active] .fade{ animation:fade 1s both; }
  [data-deck-active] .draw{ animation:draw 1.4s .2s ease forwards; }
}
@keyframes rise{ from{ opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;} }
@keyframes fade{ from{opacity:0;} to{opacity:1;} }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* range slider for touch UI */
.ts-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:#fff; border:3px solid var(--a,#2E5FEC); cursor:pointer; box-shadow:0 2px 6px rgba(20,42,98,.25); margin-top:-7px; }
.ts-range::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--a,#2E5FEC); cursor:pointer; }
.ts-range::-webkit-slider-runnable-track{ height:6px; border-radius:6px; }