/* ===========================================================================
   C3P-HOE — production styles
   Layout contract: 1 SAFE px = var(--u). Stage = 2736x1536 contain, centered,
   bottom-anchored. Plate 3840x1728 at same scale, SAFE area at (552,192).
   =========================================================================== */
:root{
  --u: min(calc(100vw / 2736), calc(100vh / 1536));
  --gold:#f2c230; --navy:#16245c; --pink:#ff4fa3; --ink:#141218;
  --cream:#f3ece0; --holo:#7fe3ff; --alarm:#ff3b2f;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;overflow:hidden;background:#2a292c;color:var(--cream);
  font-family:'Space Mono',ui-monospace,monospace;-webkit-font-smoothing:antialiased}
body{cursor:default}
img{display:block}

/* ---- layers -------------------------------------------------------------- */
#world{position:fixed;inset:0;overflow:hidden;z-index:0}
#plate{position:absolute;width:calc(3840 * var(--u));height:calc(1728 * var(--u));
  left:calc(50vw - 1920 * var(--u));top:calc(100vh - 1728 * var(--u));
  background:url(assets/L0_bleed_plate.jpg) center/100% 100% no-repeat}
#scene{position:absolute;width:calc(2736 * var(--u));height:calc(1536 * var(--u));
  left:calc(50vw - 1368 * var(--u));top:calc(100vh - 1536 * var(--u))}
.layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#r2{position:absolute;inset:0;pointer-events:none}
#hoe{transform-origin:64.18% 86.2%}
#dome{transform-origin:44.05% 54.3%}
#r2fried{opacity:0}

.shadow{position:absolute;border-radius:50%;background:rgba(10,8,14,.45);z-index:1}
#sh-r2{left:39.5%;top:84.9%;width:17.2%;height:2.6%}
#sh-hoe{left:58.7%;top:85.2%;width:11%;height:2%}

#tint{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 44% 62%, rgba(255,70,20,.30) 0%, rgba(255,70,20,0) 55%)}

#hoe{z-index:3}
#r2{z-index:4}
#fx{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
#beam{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;
  opacity:0;transform-origin:44.05% 50.13%}
body[data-state=fried] #beam{animation:beam-in 250ms ease-out 900ms forwards}
@keyframes beam-in{from{opacity:0;transform:scaleY(.1)}to{opacity:1;transform:scaleY(1)}}

#pop{position:fixed;width:calc(2736 * var(--u));height:calc(1536 * var(--u));
  left:calc(50vw - 1368 * var(--u));top:calc(100vh - 1536 * var(--u));
  z-index:25;pointer-events:none;opacity:0;transform-origin:44.15% 51.43%}
body[data-state=fried] #pop{animation:pop 500ms ease-out forwards}
@keyframes pop{0%{opacity:1;transform:scale(.2)}30%{opacity:1;transform:scale(1.2)}
  60%{opacity:1;transform:scale(1)}70%{opacity:1}100%{opacity:0;transform:scale(1)}}

/* ---- UI box -------------------------------------------------------------- */
#ui{position:fixed;width:calc(2736 * var(--u));height:calc(1536 * var(--u));
  left:calc(50vw - 1368 * var(--u));top:calc(100vh - 1536 * var(--u));
  z-index:10;pointer-events:none}
#ui>*{position:absolute}

/* brand */
#brand{left:4%;top:5%}
#title{font-family:'Shrikhand',cursive;font-size:calc(150 * var(--u));line-height:.95;
  color:var(--gold);-webkit-text-stroke:calc(7 * var(--u)) var(--navy);paint-order:stroke fill;
  text-shadow:calc(10 * var(--u)) calc(10 * var(--u)) 0 var(--pink);letter-spacing:.005em}
.brandrow{display:flex;align-items:center;gap:calc(18 * var(--u));margin-top:calc(24 * var(--u));white-space:nowrap}
#ticker{font-weight:700;font-size:calc(40 * var(--u));padding:calc(8 * var(--u)) calc(22 * var(--u));
  background:var(--pink);color:#fff;border-radius:calc(40 * var(--u));border:calc(4 * var(--u)) solid var(--ink)}
#tag{font-size:calc(30 * var(--u));color:#e8dcc8;opacity:.9}

/* bubble */
#bubble{left:27%;top:36%;max-width:22%;font-size:calc(28 * var(--u));background:var(--cream);
  color:var(--ink);padding:calc(12 * var(--u)) calc(22 * var(--u));border-radius:calc(30 * var(--u));
  border:calc(4 * var(--u)) solid var(--ink);pointer-events:none;z-index:2}
#bubble:after{content:'';position:absolute;right:calc(-26 * var(--u));bottom:calc(-10 * var(--u));
  border:calc(16 * var(--u)) solid transparent;border-left-color:var(--ink)}
body[data-state=fried] #bubble,body[data-state=rebooting] #bubble{
  left:24%;top:72%;background:var(--alarm);color:#fff;border-color:var(--ink)}

/* gauge */
#gauge{left:78%;top:20%;width:15%;height:54%;background:rgba(20,18,24,.78);
  border:calc(5 * var(--u)) solid var(--gold);border-radius:calc(30 * var(--u));
  padding:calc(26 * var(--u));display:flex;flex-direction:column;align-items:center;z-index:2}
#gauge h3{font-size:calc(26 * var(--u));letter-spacing:.12em;color:var(--gold)}
#tube{position:relative;flex:1;width:calc(70 * var(--u));margin:calc(20 * var(--u)) 0;
  transform:translateX(calc(-60 * var(--u)));border:calc(5 * var(--u)) solid var(--cream);
  border-radius:calc(40 * var(--u));background:#221f26;overflow:visible}
#tube .fill{position:absolute;left:calc(8 * var(--u));right:calc(8 * var(--u));bottom:calc(8 * var(--u));
  height:0;border-radius:calc(30 * var(--u));background:var(--alarm);transition:height 40ms linear}
#tube .tick{position:absolute;left:calc(100 * var(--u));white-space:nowrap;font-size:calc(22 * var(--u));color:#cfc4b2}
#tube .tick.red{color:#ff5a4a;font-weight:700}
#temp{font-weight:700;font-size:calc(64 * var(--u));color:#fff;white-space:nowrap;transition:color .1s}
#mood{font-size:calc(24 * var(--u));color:var(--gold);margin-top:calc(6 * var(--u))}
body[data-state=fried] #temp{font-size:calc(46 * var(--u));color:var(--alarm)}
body[data-state=fried] #mood{color:var(--alarm)}
body[data-state=fried] #tube .fill{background:repeating-linear-gradient(45deg,var(--alarm) 0 12px,#ffb02e 12px 24px)}
body[data-state=fried] #mood.blink{animation:blink .6s steps(1) infinite}
@keyframes blink{50%{opacity:.45}}

/* counter */
#count{left:78%;top:76%;width:15%;text-align:center;font-size:calc(24 * var(--u));color:#e8dcc8;z-index:2}
#count b{color:var(--pink)}

/* CTA */
#cta{left:50%;top:87%;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:calc(10 * var(--u));z-index:3}
#lean{position:relative;overflow:hidden;cursor:pointer;font-family:'Shrikhand',cursive;
  font-size:calc(58 * var(--u));color:var(--ink);background:var(--gold);
  padding:calc(18 * var(--u)) calc(70 * var(--u));border-radius:calc(80 * var(--u));
  border:calc(6 * var(--u)) solid var(--ink);box-shadow:0 calc(10 * var(--u)) 0 var(--pink);
  pointer-events:auto;user-select:none;-webkit-user-select:none;touch-action:none}
#lean:disabled{cursor:default;filter:saturate(.85) brightness(.96)}
#lean .p{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,79,163,.55);
  pointer-events:none;transition:width 40ms linear}
#lean .lbl{position:relative}
#hint{font-size:calc(22 * var(--u));color:#e8dcc8;opacity:.85}

/* holo */
#holo{left:6%;top:24%;width:28%;display:none;pointer-events:auto;z-index:4}
.panel{position:relative;border:calc(4 * var(--u)) solid var(--holo);border-radius:calc(18 * var(--u));
  background:
    repeating-linear-gradient(0deg,rgba(127,227,255,.14) 0 calc(4 * var(--u)),rgba(127,227,255,.04) calc(4 * var(--u)) calc(8 * var(--u))),
    rgba(4,26,38,.82);
  box-shadow:0 0 calc(30 * var(--u)) rgba(127,227,255,.5);
  padding:calc(28 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u)) 36%;
  color:var(--holo);min-height:calc(420 * var(--u));
  animation:holo-in 1300ms both, holo-steady 3s linear 1300ms infinite, holo-scan 4s linear infinite}
@keyframes holo-in{0%{opacity:0}76.9%{opacity:0}80.8%{opacity:1}84.6%{opacity:0}
  88.5%{opacity:1}92.3%{opacity:0}96.2%{opacity:1}100%{opacity:1}}
@keyframes holo-steady{0%{opacity:1}8%{opacity:.97}16%{opacity:1}70%{opacity:1}
  72%{opacity:.96}74%{opacity:1}100%{opacity:1}}
@keyframes holo-scan{from{background-position:0 0,0 0}to{background-position:0 calc(240 * var(--u)),0 0}}
.mini{position:absolute;left:3%;bottom:5%;width:30%;height:90%;opacity:.9;mix-blend-mode:screen;
  filter:grayscale(1) brightness(1.6) sepia(1) hue-rotate(150deg) saturate(3)}
.mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom;
  animation:holo-jitter .5s steps(2) infinite}
@keyframes holo-jitter{0%{transform:translateX(1px)}50%{transform:translateX(-1.5px)}100%{transform:translateX(1px)}}
#holo .msg{font-size:calc(34 * var(--u));line-height:1.25;font-weight:700;
  text-shadow:0 0 calc(10 * var(--u)) var(--holo)}
#holo .btns{display:flex;flex-direction:column;gap:calc(14 * var(--u));margin-top:calc(26 * var(--u))}
#holo .hb{font-family:'Space Mono',monospace;font-weight:700;font-size:calc(28 * var(--u));
  padding:calc(12 * var(--u));text-align:center;border:calc(3 * var(--u)) solid var(--holo);
  border-radius:calc(12 * var(--u));color:var(--holo);background:rgba(127,227,255,.12);
  text-decoration:none;cursor:pointer}
#holo .hb.main{background:var(--holo);color:#06202b}
#holo .hb:disabled{opacity:.5;cursor:default}
#copy-status{margin-top:calc(16 * var(--u));min-height:calc(30 * var(--u));
  font-size:calc(24 * var(--u));color:var(--holo);text-align:center}

/* flash + header + loader + sr */
#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:20}
#header{position:fixed;top:calc(30 * var(--u));right:calc(40 * var(--u));display:flex;
  gap:calc(16 * var(--u));z-index:30;pointer-events:none}
#header>*{pointer-events:auto}
.pill{font-family:'Space Mono',monospace;font-weight:700;font-size:calc(28 * var(--u));
  padding:calc(12 * var(--u)) calc(24 * var(--u));border-radius:calc(40 * var(--u));
  background:rgba(20,18,24,.75);border:calc(3 * var(--u)) solid var(--gold);color:var(--gold);
  text-decoration:none;cursor:pointer;white-space:nowrap}
.pill[aria-disabled=true]{opacity:.55;cursor:default}

#sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

#loader{position:fixed;inset:0;z-index:40;background:#2a292c;color:var(--cream);
  display:grid;place-items:center;font-size:calc(30 * var(--u));letter-spacing:.1em;
  transition:opacity .3s ease}
body[data-ready="1"] #loader{opacity:0;pointer-events:none}
#world,#ui,#header{opacity:0;transition:opacity .3s ease}
body[data-ready="1"] #world,body[data-ready="1"] #ui,body[data-ready="1"] #header{opacity:1}
#title{opacity:0;transition:opacity .35s ease}
body.fonts-ready #title{opacity:1}

@media (prefers-reduced-motion: reduce){
  #title,#lean,#lean .p,#tube .fill{transition-duration:.01ms}
}