/* LoPEZ Dispenser — production styles
   Recreated from the design handoff. Era locked to mid-century. */

:root{
  --orchid:#FFFCF2;
  --chrome:#CCC5B9;
  --masala:#403D39;
  --warm-black:#252422;
  --vermillion:#EB5E28;
  --bg:#252422;

  --logo-h: clamp(78px, 13vw, 168px);
  --font-display:'Jost', system-ui, sans-serif;
  --font-ui:'Jost', system-ui, sans-serif;
  --label-spacing:0.02em;
  --label-transform:none;
  --tile-radius:30px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--orchid);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ── stage ─────────────────────────────────── */
.stage{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(44px, 8vh, 104px);
  padding:7vh 24px 8vh;
  background:var(--bg);
  overflow:hidden;
  isolation:isolate;
}

/* background fx layers */
.fx{position:absolute;inset:-2px;pointer-events:none;z-index:0;transition:opacity .4s ease;}
.fx-pattern{
  opacity:0;
  background-image:
    linear-gradient(rgba(204,197,185,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204,197,185,.045) 1px, transparent 1px);
  background-size:36px 36px;
  background-position:center;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 45%, #000 35%, transparent 92%);
  mask-image:radial-gradient(120% 120% at 50% 45%, #000 35%, transparent 92%);
}
.fx-grain{
  opacity:0;
  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.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.fx-vignette{
  opacity:0;
  background:radial-gradient(130% 100% at 50% 38%, transparent 42%, rgba(0,0,0,.55) 100%);
}
.stage[data-bg="pattern"] .fx-pattern{opacity:1;}
.stage[data-bg="texture"] .fx-grain{opacity:.5;}
.stage[data-bg="texture"] .fx-vignette{opacity:1;}

/* always-on micro-grain (independent of the Texture bg) */
.fx-micrograin{
  opacity:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  background-size:150px 150px;
  mix-blend-mode:overlay;
}
.stage[data-grain="on"] .fx-micrograin{opacity:.3;}

/* edge-fade dot halftone */
.fx-halftone{
  opacity:0;
  background-image:radial-gradient(circle, rgba(204,197,185,.20) 1px, transparent 1.7px);
  background-size:9px 9px;
  -webkit-mask-image:radial-gradient(118% 118% at 50% 47%, transparent 40%, #000 100%);
  mask-image:radial-gradient(118% 118% at 50% 47%, transparent 40%, #000 100%);
}
.stage[data-halftone="on"] .fx-halftone{opacity:1;}

/* corner registration / crop marks */
.reg{
  position:absolute;width:16px;height:16px;
  border:0 solid rgba(204,197,185,.32);
  opacity:0;z-index:1;pointer-events:none;transition:opacity .45s ease;
}
.stage[data-marks="on"] .reg{opacity:1;}
.reg-tl{top:26px;left:26px;border-top-width:1.5px;border-left-width:1.5px;}
.reg-tr{top:26px;right:26px;border-top-width:1.5px;border-right-width:1.5px;}
.reg-bl{bottom:26px;left:26px;border-bottom-width:1.5px;border-left-width:1.5px;}
.reg-br{bottom:26px;right:26px;border-bottom-width:1.5px;border-right-width:1.5px;}

.stage > *:not(.fx):not(.reg){position:relative;z-index:1;}

/* ── wordmark ──────────────────────────────── */
.brand{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.6vh,20px);}
.wordmark{
  display:flex;
  align-items:flex-end;
  gap:0.01em;
  line-height:1;
}
.wordmark .lo{
  font-family:var(--font-display);
  font-weight:500;
  font-size:calc(var(--logo-h) * 1.46);
  line-height:0.74;
  color:var(--orchid);
  letter-spacing:-0.03em;
  margin-right:0.04em;
  margin-bottom:calc(var(--logo-h) * -0.02);
}
.wordmark svg.pez{height:var(--logo-h);width:auto;display:block;}

.dispenser-word{
  font-family:var(--font-ui);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.62em;
  text-indent:0.62em;
  font-size:clamp(11px, 1.55vw, 19px);
  color:var(--chrome);
  opacity:.85;
}

/* ── tiles ─────────────────────────────────── */
.tray{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(18px, 2.4vw, 34px);
}
.tile{
  --disc:var(--vermillion);
  position:relative;
  width:clamp(150px, 21vw, 208px);
  aspect-ratio:1/1;
  border-radius:var(--tile-radius);
  background:
    linear-gradient(180deg, rgba(255,252,242,.05), rgba(0,0,0,.18));
  border:1px solid rgba(204,197,185,.14);
  box-shadow:0 1px 0 rgba(255,252,242,.05) inset, 0 18px 38px -22px rgba(0,0,0,.9);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(10px,1.4vh,16px);
  padding:clamp(14px,2vh,22px) 14px;
  text-decoration:none;
  color:var(--orchid);
  cursor:pointer;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.34,1.4,.5,1), box-shadow .35s ease, border-color .35s ease;
}
.tile:hover{
  transform:translateY(-6px);
  border-color:rgba(235,94,40,.55);
  box-shadow:0 1px 0 rgba(255,252,242,.08) inset, 0 30px 50px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(235,94,40,.18);
}
.tile:focus-visible{outline:3px solid var(--vermillion);outline-offset:3px;}

/* the dispenser slot behind the disc */
.slot{
  position:absolute;
  top:38%;
  width:clamp(52px,7.4vw,74px);
  height:7px;
  border-radius:6px;
  background:rgba(0,0,0,.42);
  box-shadow:0 1px 0 rgba(255,252,242,.06);
  opacity:0;
  transition:opacity .3s ease;
}

.disc{
  position:relative;
  width:clamp(58px, 8.4vw, 84px);
  height:clamp(58px, 8.4vw, 84px);
  border-radius:50%;
  background:var(--disc);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:0 8px 16px -8px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.25) inset;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.disc svg{width:54%;height:54%;display:block;}
.disc-photo{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.tile:hover .disc{transform:translateY(-4px) scale(1.03);}

/* candy-gloss sweep across the disc on hover */
.disc::after{
  content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(115deg, transparent 33%, rgba(255,255,255,.55) 47%, transparent 60%);
  transform:translateX(-130%);opacity:0;
}
.stage[data-gloss="on"] .tile:hover .disc::after{animation:gloss .95s ease;}
@keyframes gloss{
  0%{transform:translateX(-130%);opacity:0;}
  22%{opacity:1;}
  100%{transform:translateX(130%);opacity:0;}
}

.tile-text{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;}
.tile-label{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(14px,1.4vw,18px);
  line-height:1.12;
  letter-spacing:var(--label-spacing);
  text-transform:var(--label-transform);
  color:var(--orchid);
}
.tile-sub{
  font-family:var(--font-ui);
  font-size:clamp(10px,1vw,12.5px);
  letter-spacing:0.04em;
  color:var(--chrome);
  opacity:.72;
}

.badge{
  position:absolute;
  top:11px;right:11px;
  font-family:var(--font-ui);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--warm-black);
  background:var(--chrome);
  padding:3px 8px;
  border-radius:999px;
  white-space:nowrap;
  z-index:2;
}
.tile[data-state="wip"] .disc{filter:saturate(.55) brightness(.92);}
.tile[data-state="wip"] .disc[data-photo="on"]{filter:none;}

/* inner bevel: top highlight + soft inner shadow */
.tile::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:inset 0 1.5px 0 rgba(255,252,242,.18), inset 0 -12px 22px -16px rgba(0,0,0,.6);
  transition:opacity .35s ease;
}
.stage[data-bevel="on"] .tile::after{opacity:1;}

/* ── animated (dispense) mode ──────────────── */
.stage[data-motion="animated"] .tile:hover .disc{
  transform:translateY(-14px) scale(1.05);
}
.stage[data-motion="animated"] .tile:hover .slot{opacity:1;}
@media (prefers-reduced-motion: no-preference){
  .stage[data-motion="animated"] .disc{
    animation:dispense .62s cubic-bezier(.34,1.56,.64,1) both;
  }
  .stage[data-motion="animated"] .tile:nth-child(1) .disc{animation-delay:.12s;}
  .stage[data-motion="animated"] .tile:nth-child(2) .disc{animation-delay:.26s;}
  .stage[data-motion="animated"] .tile:nth-child(3) .disc{animation-delay:.40s;}
  .stage[data-motion="animated"] .brand{animation:rise .7s ease both;}
}
@keyframes dispense{
  0%{transform:translateY(46px);opacity:0;}
  60%{opacity:1;}
  100%{transform:translateY(0);opacity:1;}
}
@keyframes rise{
  from{transform:translateY(-18px);opacity:0;}
  to{transform:translateY(0);opacity:1;}
}

.foot{
  font-family:var(--font-ui);
  font-size:clamp(10.5px,1.05vw,13px);
  letter-spacing:0.04em;
  color:var(--chrome);
  opacity:.5;
  white-space:nowrap;
}

/* ── 404 page ──────────────────────────────── */
.error{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(10px,1.6vh,18px);text-align:center;
}
.error-code{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(64px,14vw,150px);
  line-height:0.9;
  letter-spacing:-0.04em;
  color:var(--vermillion);
}
.error-kicker{
  font-family:'Space Mono', monospace;
  font-size:clamp(9.5px,1vw,12px);
  letter-spacing:0.34em;text-transform:uppercase;text-indent:0.34em;
  color:var(--chrome);opacity:.7;
}
.error-msg{
  font-family:var(--font-ui);
  font-size:clamp(13px,1.3vw,16px);
  letter-spacing:0.02em;
  color:var(--chrome);opacity:.82;
  max-width:32ch;
}
.home-btn{
  margin-top:clamp(6px,1.2vh,12px);
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(13px,1.3vw,16px);
  letter-spacing:0.02em;
  color:var(--warm-black);
  background:var(--vermillion);
  padding:11px 22px;
  border-radius:999px;
  text-decoration:none;
  box-shadow:0 8px 18px -10px rgba(235,94,40,.8), 0 1px 0 rgba(255,255,255,.25) inset;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.home-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 26px -12px rgba(235,94,40,.9), 0 1px 0 rgba(255,255,255,.3) inset;
}
.home-btn:focus-visible{outline:3px solid var(--orchid);outline-offset:3px;}

/* status-bar footer */
.statusbar{
  display:flex;justify-content:space-between;align-items:center;
  width:min(680px, 86vw);
  padding-top:13px;
  border-top:1px solid rgba(204,197,185,.16);
  font-family:'Space Mono', monospace;
  font-size:clamp(9.5px,1vw,12px);
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--chrome);opacity:.62;
}