/* The Door Geek — Howdens brand tokens, matching the Howdens Fire Door system
   (same Rooster weights, same palette, same logo assets). */
@font-face{font-family:'Rooster';src:url(assets/fonts/Rooster-Light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Rooster';src:url(assets/fonts/Rooster-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Rooster';src:url(assets/fonts/Rooster-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Rooster';src:url(assets/fonts/Rooster-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Rooster';src:url(assets/fonts/Rooster-Black.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}

:root{
  /* Howdens brand palette (per brand guidelines + Fire Door system) */
  --howdens-red:#D22630;
  --howdens-red-dark:#A81E26;
  --howdens-red-light:#FDE0E2;
  --howdens-black:#000000;
  --howdens-grey:#F5F5F5;
  --howdens-grey-mid:#A4A4A4;
  --howdens-grey-dark:#646363;
  --howdens-white:#FFFFFF;
  --howdens-cream:#F5F0E3;
  --howdens-blue:#28343C;
  --font:'Rooster', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* aliases used below */
  --red:var(--howdens-red);
  --red-dark:var(--howdens-red-dark);
  --ink:var(--howdens-black);
  --grey:var(--howdens-grey-dark);
  --grey-light:var(--howdens-grey-mid);
  --cream:var(--howdens-cream);
  --blue:var(--howdens-blue);
  --white:var(--howdens-white);
  --radius:999px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--white);
  color:var(--ink);
  overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;
}
.app{
  min-height:100vh;
  min-height:100dvh;
  display:flex;flex-direction:column;
  padding:
    calc(env(safe-area-inset-top,0px) + 18px)
    calc(env(safe-area-inset-right,0px) + 20px)
    calc(env(safe-area-inset-bottom,0px) + 18px)
    calc(env(safe-area-inset-left,0px) + 20px);
}

/* header */
.hdr{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto}
.hdr__logo{height:56px;width:auto;display:block}
.hdr__brand{
  margin:0;display:flex;align-items:center;gap:10px;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:900;color:var(--howdens-black);
}
.hdr__rule{display:block;width:26px;height:2px;background:var(--howdens-red)}
.hdr__sub{
  margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--howdens-grey-dark);font-weight:700;
}

/* stage */
.stage{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:10px 0}

/* the button */
.talk{
  position:relative;
  width:min(76vw, 320px);
  aspect-ratio:1/1;
  border:0;padding:0;margin:0;
  border-radius:var(--radius);
  background:var(--red);
  color:var(--white);
  font-family:inherit;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 14px 34px rgba(210,38,48,.28), inset 0 -6px 0 rgba(0,0,0,.10);
  transition:transform .12s ease, box-shadow .25s ease, background .25s ease;
  display:flex;align-items:center;justify-content:center;
}
.talk:active{transform:scale(.975)}
.talk.is-idle{animation:breathe 4.2s ease-in-out infinite}
.talk.is-live{background:var(--red-dark)}
.talk.is-error{background:var(--grey)}

@keyframes breathe{0%,100%{box-shadow:0 14px 34px rgba(210,38,48,.24), inset 0 -6px 0 rgba(0,0,0,.10)}50%{box-shadow:0 20px 44px rgba(210,38,48,.36), inset 0 -6px 0 rgba(0,0,0,.10)}}

.talk__viz{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.talk__pulse{
  position:absolute;inset:-14%;border-radius:var(--radius);z-index:0;
  background:radial-gradient(circle, rgba(210,38,48,.20) 0%, rgba(210,38,48,0) 62%);
  opacity:0;transition:opacity .3s ease;
}
.talk.is-live .talk__pulse{opacity:1;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.06);opacity:.9}}

.talk__label{
  position:relative;z-index:2;text-align:center;line-height:1.02;
  padding:0 26px;pointer-events:none;
}
.talk__lead{display:block;font-size:clamp(15px,4.6vw,19px);font-weight:400;opacity:.92;letter-spacing:.01em}
.talk__name{
  display:block;margin-top:4px;
  font-size:clamp(27px,8.6vw,40px);font-weight:900;letter-spacing:-.01em;
}

/* status */
.status{
  margin:0;text-align:center;font-size:15px;color:var(--grey);
  min-height:20px;font-weight:700;letter-spacing:.01em;padding:0 8px;
}
.status.is-live{color:var(--red)}

/* explicit interrupt button — only visible while the Door Geek is talking */
.interrupt{
  appearance:none;border:2px solid var(--howdens-red);background:var(--howdens-white);color:var(--howdens-red);
  font-family:inherit;font-weight:700;font-size:16px;letter-spacing:.02em;
  padding:12px 26px;border-radius:var(--radius);cursor:pointer;
  box-shadow:0 4px 14px rgba(210,38,48,.14);
}
.interrupt:active{transform:scale(.97);background:var(--howdens-red-light)}
.interrupt[hidden]{display:none}

/* captions */
.captions{
  width:100%;max-width:560px;
  display:flex;flex-direction:column;gap:8px;
  max-height:30vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:2px 2px 6px;
}
.cap{
  border-radius:16px;padding:10px 14px;font-size:15.5px;line-height:1.4;
  background:var(--cream);color:var(--blue);
  align-self:flex-start;max-width:92%;
  animation:fade .22s ease both;
}
.cap--me{align-self:flex-end;background:var(--blue);color:var(--white)}
.cap--think{background:#fff;border:1px dashed var(--grey-light);color:var(--grey);font-style:italic}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* footer */
.ftr{
  flex:0 0 auto;text-align:center;color:var(--grey);font-size:12px;line-height:1.45;
  padding-top:10px;border-top:1px solid #EFEFEF;
}
.ftr p{margin:0}
.ftr__note{margin-top:4px !important;color:var(--grey-light)}

/* wider screens */
@media (min-width:720px){
  .talk{width:340px}
  .captions{max-height:34vh}
}

@media (prefers-reduced-motion:reduce){
  .talk.is-idle{animation:none}
  .talk__pulse{animation:none !important}
  .cap{animation:none}
}