/* Dave's Dog Depot — digital menu board, built for a seamless 16s MP4 loop.
   Loop discipline: every infinite animation has a period that divides 16s, so
   the last frame of a 16s capture flows back into the first with no seam.
   Animate only opacity/transform (plus a couple of background sweeps) to keep
   frame capture smooth. */

@font-face { font-family:"Anton"; src:url(fonts/anton.woff2) format("woff2"); font-display:block; }
@font-face { font-family:"Permanent Marker"; src:url(fonts/permanent-marker.woff2) format("woff2"); font-display:block; }
@font-face { font-family:"Space Mono"; src:url(fonts/space-mono-400.woff2) format("woff2"); font-weight:400; font-display:block; }
@font-face { font-family:"Space Mono"; src:url(fonts/space-mono-700.woff2) format("woff2"); font-weight:700; font-display:block; }

:root{
  --char:#211b16; --char2:#37291d;
  --cream:#f3e7c9; --cream2:#efe0bb; --paper:#f7eed6;
  --mustard:#f2b211; --mustard-d:#d2900c;
  --ketchup:#c5362a; --ketchup-d:#9c281f;
  --relish:#5a8a3c; --teal:#2c8f86;
  --grape:#7a2fc4; --grape-d:#4a1a86; --gold:#ffce2e; --gold-d:#c8961a;
  --f-display:"Anton",Impact,sans-serif;
  --f-mark:"Permanent Marker","Comic Sans MS",cursive;
  --f-mono:"Space Mono",ui-monospace,monospace;
  --f-body:system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ width:100%; height:100%; background:var(--char); }
.grain-defs{ position:absolute; }

/* Hold every animation at phase 0 until the page signals ready, so recording
   starts on a clean frame. menu.js removes .preroll once fonts+images settle. */
body.preroll *, body.preroll *::before, body.preroll *::after{
  animation-play-state:paused !important;
}

.board{
  position:relative; width:1920px; height:1128px; margin:0 auto; overflow:hidden;
  display:grid; grid-template-rows:172px 1fr 60px;
  background:var(--cream);
  background-image:
    radial-gradient(rgba(33,27,22,.09) 1px, transparent 1.7px),
    radial-gradient(circle at 50% 50%, var(--cream) 0%, var(--cream2) 70%, #e7d4a8 100%);
  background-size:14px 14px, 100% 100%;
  color:var(--char); font-family:var(--f-body);
}
/* paper grain overlay */
.board::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:30; opacity:.045;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Brand bar ─────────────────────────────────────────────────── */
.marquee{
  position:relative; display:flex; align-items:center; gap:40px; padding:0 46px;
  background:var(--char);
  background-image:linear-gradient(180deg,#2a221b,#191310);
  color:var(--cream); border-bottom:7px solid var(--mustard);
  box-shadow:0 6px 0 var(--ketchup);
}
.brand{ display:flex; align-items:center; gap:26px; }
.brand__est{
  font-family:var(--f-mark); font-size:23px; line-height:.95; text-align:center;
  color:var(--char); background:var(--mustard); padding:12px 14px; border-radius:50%;
  transform:rotate(-11deg); box-shadow:0 0 0 4px var(--char), 0 0 0 7px var(--mustard);
  animation:stampWobble 8s ease-in-out infinite;
}
.brand__name{
  font-family:var(--f-display); font-size:78px; line-height:.84; letter-spacing:.5px;
  text-transform:uppercase; color:var(--cream);
  text-shadow:5px 5px 0 var(--ketchup), 9px 9px 0 rgba(0,0,0,.35);
}
.brand__tag{
  font-family:var(--f-mark); font-size:26px; color:var(--mustard); transform:rotate(-1.5deg);
  align-self:flex-end; padding-bottom:18px;
}
.neon{ margin-left:auto; text-align:center; transform:rotate(2deg); }
.neon__open{
  display:block; font-family:var(--f-mark); font-size:64px; color:#ff5a47;
  text-shadow:0 0 8px #ff5a47, 0 0 22px #ff2d16, 0 0 40px #c5160a;
  animation:neonFlicker 4s steps(1,end) infinite;
}
.neon__sub{ font-family:var(--f-mono); font-size:15px; letter-spacing:2px; color:#7fd7ff;
  text-shadow:0 0 6px #2bb7ff, 0 0 16px #2bb7ff; }
.banner{
  position:absolute; top:202px; right:64px; display:none; align-items:center; justify-content:center;
  width:150px; height:150px; transform:rotate(13deg); z-index:40;
}
.banner span{
  font-family:var(--f-display); font-size:30px; line-height:.9; text-align:center; color:var(--grape-d);
  background:radial-gradient(circle,var(--gold) 60%,var(--gold-d));
  width:128px; height:128px; border-radius:50%; display:grid; place-items:center;
  box-shadow:0 0 0 5px var(--grape-d), 0 0 22px var(--gold);
  animation:badgeSpin 16s linear infinite, auraPulse 2s ease-in-out infinite;
}

/* ── Layout split ──────────────────────────────────────────────── */
.layout{ display:grid; grid-template-columns:1fr 1fr; min-height:0; }
.menu{
  position:relative; padding:30px 40px 18px; display:flex; flex-direction:column; gap:14px;
  border-right:4px dashed rgba(33,27,22,.35);
}

.sec{
  display:flex; align-items:baseline; gap:18px; font-family:var(--f-display);
  font-size:46px; text-transform:uppercase; color:var(--ketchup); letter-spacing:1px;
  line-height:1; margin-bottom:2px;
}
.sec::before{ content:"🌭"; -webkit-text-fill-color:initial; font-size:34px; }
.sides .sec::before{ content:"🍟"; }
.sec span{ position:relative; }
.sec em{ font-family:var(--f-mark); font-size:21px; color:var(--char2); font-style:normal;
  transform:rotate(-2deg); margin-left:auto; }

.list{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.item__line{ display:flex; align-items:baseline; gap:10px; }
.item__name{ font-family:var(--f-display); font-size:33px; letter-spacing:.4px; color:var(--char); white-space:nowrap; }
.dots{ flex:1; border-bottom:3px dotted rgba(33,27,22,.4); transform:translateY(-7px); }
.item__price{ font-family:var(--f-mono); font-weight:700; font-size:27px; color:var(--relish); }
.item__price::before{ content:"$"; opacity:.7; }
.item__desc{ font-size:18.5px; line-height:1.22; color:var(--char2); max-width:46ch; }
.item__desc em{ font-style:normal; color:var(--ketchup-d); font-weight:700; }
.list--sides .item__name{ font-size:30px; }

.note{
  margin-top:auto; font-family:var(--f-mark); font-size:23px; color:var(--char);
  background:var(--mustard); align-self:flex-start; padding:7px 16px; transform:rotate(-1deg);
  box-shadow:3px 3px 0 var(--ketchup);
}
.note b{ color:var(--ketchup-d); }

/* ── Anniversary featured dogs ─────────────────────────────────── */
.featured{ display:none; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:6px; }
.feat{
  position:relative; overflow:hidden; border-radius:14px; padding:16px 18px 18px; color:#fff;
  box-shadow:0 6px 0 rgba(0,0,0,.3);
}
.feat__name{ font-family:var(--f-display); font-size:30px; text-transform:uppercase; line-height:.95; }
.feat__emoji{ -webkit-text-fill-color:initial; }
.feat__desc{ font-family:var(--f-mark); font-size:21px; margin-top:4px; }
.feat__price{ font-family:var(--f-mono); font-weight:700; font-size:24px; margin-top:8px; }

.feat--surprise{ background:linear-gradient(135deg,#8a37e0,#52169c); }
.feat--surprise .feat__name{ color:#fff; text-shadow:0 0 12px #d7a3ff; }
.feat__sparks{ position:absolute; inset:0; pointer-events:none; }
.feat__sparks i{ position:absolute; width:14px; height:14px; background:
  radial-gradient(circle, #fff 0 18%, transparent 22%),
  conic-gradient(from 0deg, transparent, #ffe9ff 25%, transparent 50%, #ffe9ff 75%, transparent);
  border-radius:50%; opacity:0; animation:twinkle 2s ease-in-out infinite; }
.feat__sparks i:nth-child(1){ left:12%; top:22%; animation-delay:0s; }
.feat__sparks i:nth-child(2){ left:78%; top:16%; animation-delay:.5s; }
.feat__sparks i:nth-child(3){ left:64%; top:64%; animation-delay:1s; }
.feat__sparks i:nth-child(4){ left:24%; top:70%; animation-delay:1.5s; }
.feat__sparks i:nth-child(5){ left:46%; top:34%; animation-delay:.75s; transform:scale(.7); }
.feat__sparks i:nth-child(6){ left:88%; top:54%; animation-delay:.25s; transform:scale(1.3); }
.feat__price--mystery{ height:34px; width:160px; overflow:hidden; position:relative;
  background:rgba(0,0,0,.28); border-radius:7px; padding:0 10px; }
.feat__price--mystery .reel{ position:absolute; left:10px; top:0; display:flex; flex-direction:column;
  animation:reel 4s steps(5,end) infinite; }
.feat__price--mystery .reel span{ height:34px; line-height:34px; color:var(--gold);
  text-shadow:0 0 8px var(--gold); }

.feat--broly{ background:linear-gradient(135deg,#3a2a08,#7a5708); }
.feat--broly .feat__name{ color:var(--gold); text-shadow:0 0 14px var(--gold), 0 0 30px var(--gold-d); }
.feat--broly .feat__desc{ color:#fff8e0; }
.feat__aura{ position:absolute; left:50%; top:50%; width:240px; height:240px; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,206,46,.85) 0%, rgba(255,206,46,.25) 40%, transparent 68%);
  animation:auraPulse 2s ease-in-out infinite; }
.feat__rays{ position:absolute; left:50%; top:50%; width:520px; height:520px; transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg, rgba(255,225,120,.5) 0deg 7deg, transparent 7deg 18deg);
  -webkit-mask:radial-gradient(circle, transparent 26%, #000 30%);
  mask:radial-gradient(circle, transparent 26%, #000 30%);
  opacity:.45; animation:spin 8s linear infinite; }
.feat--broly .feat__name,.feat--broly .feat__desc,.feat--broly .feat__price{ position:relative; z-index:2; }
.feat__price--power{ color:#1c1407; background:var(--gold); display:inline-block; padding:3px 12px;
  border-radius:6px; letter-spacing:1px; box-shadow:0 0 16px var(--gold);
  animation:powerThrob 1s ease-in-out infinite; }

/* ── Right showcase ────────────────────────────────────────────── */
.showcase{ position:relative; padding:26px 40px 22px; display:flex; flex-direction:column; }
.stage{ position:relative; flex:1; }
.slot{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:14px;
  opacity:0; will-change:opacity,transform;
  animation:slotcycle 16s linear infinite both;
}
/* Phased so HOME holds across the loop seam (fully visible at t=0 and t=16),
   then S1→S2→S3 each take a 4s window. All delays keep periods dividing 16s. */
.slot[data-slot="0"]{ animation-delay:-2s; }
.slot[data-slot="1"]{ animation-delay:-14s; }
.slot[data-slot="2"]{ animation-delay:-10s; }
.slot[data-slot="3"]{ animation-delay:-6s; }

.slot__kicker{ font-family:var(--f-mono); font-weight:700; font-size:21px; letter-spacing:3px;
  text-transform:uppercase; color:var(--teal); }
.slot__title{ font-family:var(--f-display); font-size:84px; line-height:.86; text-transform:uppercase;
  color:var(--ketchup); text-shadow:4px 4px 0 var(--mustard); }
.slot__body{ font-size:27px; line-height:1.28; color:var(--char2); max-width:24ch; }
.slot__body b{ color:var(--ketchup-d); }
.slot__sub{ font-family:var(--f-mark); font-size:25px; color:var(--char); }

/* HOME hero */
.slot--home{ align-items:flex-start; }
.hero{ position:relative; align-self:center; background:var(--paper); border:8px solid var(--char);
  border-radius:12px; padding:22px 26px; transform:rotate(-3deg); box-shadow:10px 12px 0 rgba(0,0,0,.22);
  margin-bottom:8px; animation:plateSway 8s ease-in-out infinite; }
.hero::before{ content:""; position:absolute; inset:-8px; border-radius:12px; z-index:-1;
  background:repeating-linear-gradient(45deg,var(--mustard) 0 14px,var(--ketchup) 14px 28px); opacity:.0; }
.hero__dog{ display:block; width:520px; height:auto; mix-blend-mode:multiply; }
.hero__steam{ position:absolute; left:50%; top:-6px; transform:translateX(-50%); width:200px; height:80px; }
.hero__steam i{ position:absolute; bottom:0; width:14px; height:14px; border-radius:50%;
  background:rgba(255,255,255,.0); box-shadow:0 0 16px 10px rgba(255,255,255,.55);
  opacity:0; animation:steam 4s ease-out infinite; }
.hero__steam i:nth-child(1){ left:30%; animation-delay:0s; }
.hero__steam i:nth-child(2){ left:50%; animation-delay:1.33s; }
.hero__steam i:nth-child(3){ left:70%; animation-delay:2.66s; }

/* special art */
.slot__art{ display:flex; align-items:center; gap:18px; height:240px; }
.slot--special .slot__art{ justify-content:flex-start; }
.big-emoji{ font-size:150px; line-height:1; filter:drop-shadow(5px 6px 0 rgba(0,0,0,.18));
  animation:emojiBob 2s ease-in-out infinite; -webkit-text-fill-color:initial; }
.price-pop{ font-family:var(--f-display); font-size:74px; color:#fff; background:var(--ketchup);
  padding:6px 18px; border-radius:50% 50% 50% 50%/60% 60% 60% 60%; transform:rotate(-8deg);
  box-shadow:0 0 0 5px var(--char); animation:pricePulse 2s ease-in-out infinite; }

.dots-nav{ display:flex; gap:12px; justify-content:center; padding-top:8px; }
.dots-nav i{ width:14px; height:14px; border-radius:50%; background:rgba(33,27,22,.25);
  animation:dotcycle 16s linear infinite both; }
.dots-nav i[data-d="0"]{ animation-delay:-2s; }
.dots-nav i[data-d="1"]{ animation-delay:-14s; }
.dots-nav i[data-d="2"]{ animation-delay:-10s; }
.dots-nav i[data-d="3"]{ animation-delay:-6s; }

/* ── Bottom ticker ─────────────────────────────────────────────── */
.ticker{ background:var(--char); color:var(--mustard); overflow:hidden; display:flex; align-items:center;
  border-top:5px solid var(--ketchup); }
.ticker__track{ display:flex; white-space:nowrap; font-family:var(--f-mono); font-weight:700;
  font-size:24px; letter-spacing:1px; animation:scroll 16s linear infinite; }
.ticker__track span{ padding-right:14px; }

/* ── Mode toggles ──────────────────────────────────────────────── */
.anniv-only{ display:none; }
html[data-mode="anniversary"] .trad{ display:none; }
html[data-mode="anniversary"] .featured.anniv-only{ display:grid; }
html[data-mode="anniversary"] .banner.anniv-only{ display:flex; }
html[data-mode="anniversary"] .slot__art.anniv-only{ display:flex; }
html[data-mode="anniversary"] h2.anniv-only,
html[data-mode="anniversary"] p.anniv-only{ display:block; }
html[data-mode="anniversary"] span.anniv-only{ display:inline; }
/* anniversary turns the board electric */
html[data-mode="anniversary"] .board{ background-color:#f0e3c0; }
html[data-mode="anniversary"] .slot__title{ animation:annivHue 8s ease-in-out infinite; }
html[data-mode="anniversary"] .sec{ color:var(--grape); }
html[data-mode="anniversary"] .sec::before{ content:"🎉"; }
html[data-mode="anniversary"] .sides .sec::before{ content:"🥳"; }
/* Two featured cards eat vertical room — compress the list so everything fits. */
html[data-mode="anniversary"] .menu{ padding-top:18px; gap:8px; }
html[data-mode="anniversary"] .sec{ font-size:37px; }
html[data-mode="anniversary"] .list{ gap:5px; }
html[data-mode="anniversary"] .item__name{ font-size:28px; }
html[data-mode="anniversary"] .list--sides .item__name{ font-size:26px; }
html[data-mode="anniversary"] .item__desc{ font-size:16px; line-height:1.18; }
html[data-mode="anniversary"] .feat{ padding:12px 16px 13px; }
html[data-mode="anniversary"] .note{ font-size:20px; padding:6px 14px; }

/* ── Keyframes (all periods divide 16s) ────────────────────────── */
@keyframes slotcycle{
  0%{ opacity:0; transform:translateY(26px) scale(.984); }
  4%{ opacity:1; transform:translateY(0) scale(1); }
  21%{ opacity:1; transform:translateY(0) scale(1); }
  25%{ opacity:0; transform:translateY(-26px) scale(.984); }
  100%{ opacity:0; transform:translateY(26px) scale(.984); }
}
@keyframes dotcycle{
  0%{ background:var(--ketchup); transform:scale(1.4); }
  24.9%{ background:var(--ketchup); transform:scale(1.4); }
  25%{ background:rgba(33,27,22,.25); transform:scale(1); }
  100%{ background:rgba(33,27,22,.25); transform:scale(1); }
}
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes steam{
  0%{ opacity:0; transform:translateY(0) scale(.7); }
  18%{ opacity:.7; }
  100%{ opacity:0; transform:translateY(-70px) scale(1.5); }
}
@keyframes emojiBob{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-14px) rotate(2deg); } }
@keyframes pricePulse{ 0%,100%{ transform:rotate(-8deg) scale(1); } 50%{ transform:rotate(-6deg) scale(1.08); } }
@keyframes plateSway{ 0%,100%{ transform:rotate(-3deg); } 50%{ transform:rotate(-1deg); } }
@keyframes stampWobble{ 0%,100%{ transform:rotate(-11deg) scale(1); } 50%{ transform:rotate(-7deg) scale(1.05); } }
@keyframes neonFlicker{ 0%,40%,44%,70%,100%{ opacity:1; } 42%,68%{ opacity:.35; } 88%{ opacity:.7; } }
@keyframes twinkle{ 0%,100%{ opacity:0; transform:scale(.4) rotate(0deg); } 50%{ opacity:1; transform:scale(1) rotate(45deg); } }
@keyframes reel{ from{ transform:translateY(0); } to{ transform:translateY(-83.3333%); } }
@keyframes auraPulse{ 0%,100%{ transform:translate(-50%,-50%) scale(.92); opacity:.8; } 50%{ transform:translate(-50%,-50%) scale(1.12); opacity:1; } }
@keyframes spin{ from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes badgeSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes powerThrob{ 0%,100%{ transform:scale(1); box-shadow:0 0 16px var(--gold); } 50%{ transform:scale(1.06); box-shadow:0 0 30px var(--gold); } }
@keyframes annivHue{ 0%,100%{ color:var(--ketchup); text-shadow:4px 4px 0 var(--mustard); } 50%{ color:var(--grape); text-shadow:4px 4px 0 var(--gold); } }