@font-face{font-family:"Jomhuria Hero";src:url('assets/jomhuria-hero.ttf') format('truetype');font-weight:400;font-style:normal;font-display:block}.hero{position:relative;aspect-ratio:auto;color:#ffe1cd;font-family:Arial,sans-serif;width:100%;height:100svh;min-height:520px;max-height:1400px;overflow:hidden;isolation:isolate;perspective:1400px;background:#232423;touch-action:pan-y}.backdrop{position:absolute;inset:0;background:linear-gradient(0deg,#1c1b1a22,#24242333),url('assets/charcoal.jpg') center/cover;z-index:-3}.backdrop:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 0%,#0005 90%)}.warmth{position:absolute;inset:45% 12% -20%;background:radial-gradient(ellipse at 50% 85%,#ff68133b,transparent 60%);opacity:0;transition:opacity 2s;z-index:-1}.ready .warmth{opacity:1}.hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#fire{z-index:0}#atmosphere{z-index:1}#embers{z-index:5}.headline{position:absolute;inset:0;z-index:2;pointer-events:none;font-family:"Jomhuria Hero",serif;font-weight:400;letter-spacing:-.018em;font-size:clamp(140px,38vw,800px);line-height:.7}.word{position:absolute;display:block;color:#ffe1cd;text-shadow:0 2px 0 #986e56,0 8px 30px #0003;will-change:transform,opacity;opacity:0;white-space:nowrap}.word-big{font-size:1em}.word-med{font-size:.50em}.is-left{right:50.8%;left:auto;text-align:right;transform:translate(-120%,50%) rotate(-30deg)}.is-right{left:50.8%;right:auto;text-align:left;transform:translate(120%,50%) rotate(30deg)}.roa{top:18%}.sted{top:15%}.never{top:56%}.canned{top:57%}.fire{left:6.7%;top:33%;width:34%;transform:translate(-120%,50%) rotate(-30deg)}.born{right:6.8%;top:33%;width:43%;transform:translate(120%,50%) rotate(30deg)}.corn-stage{position:absolute;left:50%;top:7.1rem;height:calc(100% - 7.1rem + 28px);width:auto;aspect-ratio:.4;z-index:3;transform:translateX(-50%);perspective:1100px;pointer-events:none;will-change:transform}.corn{width:100%;height:100%;object-fit:contain;object-position:center top;transform-origin:50% 78%;opacity:0;filter:drop-shadow(14px 8px 22px #0008);will-change:transform}.pepper{position:absolute;object-fit:contain;z-index:4;opacity:0;will-change:transform;filter:drop-shadow(5px 12px 15px #0005)}.p1{width:6.5%;left:23%;top:24%}.p2{width:8.5%;left:26%;top:52%}.p3{width:8%;left:68%;top:76%}.p4{width:11%;left:81%;top:68%}.p5{width:9.5%;left:79%;top:84%}.notes{display:none!important}.hero-card{position:absolute;left:24px;bottom:24px;z-index:6;width:clamp(240px,30vw,420px);max-width:calc(100vw - 48px);height:auto;pointer-events:none;opacity:0;transform:translateY(16px);transition:opacity 1s 1.2s cubic-bezier(.16,1,.3,1),transform 1s 1.2s cubic-bezier(.16,1,.3,1)}.ready .hero-card{opacity:1;transform:translateY(0)}.hero-card img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 28px #0008)}.controls{position:absolute;bottom:25px;right:30px;left:auto;z-index:7;display:flex;justify-content:flex-end;align-items:center;color:#ddd0c1;opacity:0;transition:opacity 1s 3s}.ready .controls{opacity:1}.hint{display:none!important}.hero button{background:#20202080;border:1px solid #8a776854;color:#e6d4c6;padding:10px 17px;border-radius:30px;font-size:11px;cursor:pointer;backdrop-filter:blur(10px)}.hero button:hover{background:#ffe1cd;color:#222}.hero button:focus-visible{outline:2px solid #ff963b;outline-offset:4px}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;z-index:10;background:#222322;letter-spacing:.12em;font-size:12px;transition:opacity .6s}.loading span{height:8px;width:8px;background:#fb8136;border-radius:50%;animation:pulse 1s infinite alternate}.ready .loading,.loading.is-done{opacity:0;pointer-events:none}@keyframes pulse{to{opacity:.2}}
@media(max-width:1024px){.notes{right:6%;font-size:16px;gap:7px}.notes span{padding:7px 11px}.corn-stage{aspect-ratio:.37}.p1{width:8%}.p2{width:10%}.p3{width:10%}.p4{width:13%}.p5{width:11%}}
@media(max-width:700px) and (orientation:portrait){.hero{min-height:540px;max-height:1000px}.headline{font-size:clamp(95px,28vw,150px);line-height:.7}.word-big{font-size:1.15em}.word-med{font-size:.48em}.is-left{right:65%!important;left:auto!important;text-align:right!important}.is-right{left:65%!important;right:auto!important;text-align:left!important}.roa{top:25%}.sted{top:23%}.never{top:46%}.canned{top:47%}.corn-stage{top:16%;height:90%;width:min(42vw,30svh);aspect-ratio:auto}.hero-card{left:50%!important;right:auto!important;bottom:12px!important;width:min(320px,88vw)!important;max-width:92vw!important;transform:translate(-50%,16px)}.ready .hero-card{transform:translate(-50%,0)!important}.controls{right:14px!important;bottom:calc(min(320px,88vw) * (196 / 499) + 16px)!important;left:auto!important}.hero button{padding:9px 12px;font-size:10px}}
@media(max-height:540px) and (orientation:landscape){.hero{min-height:320px;height:100svh}.headline{font-size:clamp(80px,26vw,200px)}.is-left{right:50.8%;left:auto;text-align:right}.is-right{left:50.8%;right:auto;text-align:left}.roa{top:10%}.sted{top:8%}.never{top:54%}.canned{top:55%}.word-med{font-size:.50em}.corn-stage{top:4.2rem;height:calc(100% - 4.2rem + 20px);aspect-ratio:.38}.hero-card{left:16px;bottom:12px;width:clamp(180px,26vw,260px)}.controls{bottom:12px;right:18px;left:auto}.p1{top:13%}.p2{top:59%}.p4{top:57%}.hint{font-size:7px}.hero button{padding:7px 10px}}
@media(prefers-reduced-motion:reduce){.loading span{animation:none}.controls{transition:none}}

/* Warm cursor light and alpha-masked highlights preserve the elote silhouette. */
.corn{position:relative}.corn-photo{display:block;width:100%;height:100%;object-fit:contain;object-position:center top}.corn-sheen{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse 48% 24% at var(--shine-x,50%) var(--shine-y,40%),rgba(255,251,220,.85) 0%,rgba(255,194,92,.32) 35%,transparent 75%);mask:url('assets/elote.webp') center top/contain no-repeat;-webkit-mask:url('assets/elote.webp') center top/contain no-repeat;mix-blend-mode:screen;will-change:opacity}.cursor-light{position:absolute;left:0;top:0;width:clamp(160px,27vw,520px);aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:6;background:radial-gradient(circle,rgba(255,198,119,.16),rgba(255,143,48,.065) 35%,transparent 70%);mix-blend-mode:screen;opacity:0;will-change:transform,opacity}
@media(pointer:coarse){.cursor-light{width:220px}}

/* Low-resolution atmosphere is intentionally soft; keep expensive painting localized. */
#fire{top:auto;bottom:0;height:45%}.corn{filter:drop-shadow(10px 8px 14px #0007)}.pepper{filter:none}.corn-sheen{mix-blend-mode:screen}.cursor-light{mix-blend-mode:screen}.hero button{backdrop-filter:none}

/* Reference loader: outlined charcoal grill, rotating corn, drawn steam. */
.loading{position:fixed;inset:0;display:block;background:#262727 url('assets/loader-charcoal.jpg') center/cover;z-index:400;letter-spacing:normal;transition:opacity .55s ease;contain:paint}.loader-scene{position:absolute;left:50%;top:43%;width:clamp(150px,16vw,320px);height:auto;aspect-ratio:1/2;transform:translate(-50%,-50%);perspective:700px}.loader-grill{display:block;width:100%;height:100%}.loader-cob{position:absolute;width:67%;height:auto;object-fit:contain;transform-origin:center;will-change:transform;filter:drop-shadow(0 2px 1px #0006)}.cob-back{left:13%;top:45%;animation:grill-roll-back 2.6s ease-in-out infinite}.cob-front{left:27%;top:50.8%;animation:grill-roll-front 2.6s ease-in-out infinite}.loader-steam .wisp{transform-box:fill-box;transform-origin:50% 100%;animation:loader-vapor 2.8s ease-in-out infinite}.loader-steam .w2{animation-delay:-.9s}.loader-steam .w3{animation-delay:-1.7s}.loader-steam .w4{animation-delay:-2.3s}.loader-logo{position:absolute;bottom:5%;left:3.4%;width:clamp(75px,11.6vw,220px);height:auto;mask-image:radial-gradient(ellipse at center,#000 48%,#000c 62%,transparent 73%)}.loader-percent{position:absolute;right:4.7%;bottom:4.3%;font-family:"Jomhuria Hero",serif;font-size:clamp(60px,6.7vw,135px);font-weight:400;line-height:.72;color:#fff;font-variant-numeric:tabular-nums;min-width:1.2em;text-align:right}.loader-coals{position:absolute;left:23%;top:46%;width:55%;height:12%;filter:blur(2px);opacity:.7}.loader-coals i{position:absolute;bottom:0;width:9%;height:60%;background:linear-gradient(0deg,transparent,#f57714 45%,#ffc33c 70%,transparent);border-radius:70% 20% 65% 15%;animation:coal-flicker .7s ease-in-out infinite alternate;transform-origin:center bottom}.loader-coals i:nth-child(1){left:9%;animation-delay:-.2s}.loader-coals i:nth-child(2){left:42%;height:82%;animation-delay:-.5s}.loader-coals i:nth-child(3){left:78%;height:65%;animation-delay:-.8s}.loader-coals i:nth-child(4){left:61%;height:43%;animation-delay:-.3s}
@keyframes grill-roll-back{0%,100%{transform:translateY(0) rotate(-8deg) rotateX(0) scaleY(1)}50%{transform:translateY(2px) rotate(4deg) rotateX(26deg) scaleY(.93)}}
@keyframes grill-roll-front{0%,100%{transform:translateY(0) rotate(-7deg) rotateX(23deg) scaleY(.94)}50%{transform:translateY(-2px) rotate(5deg) rotateX(-9deg) scaleY(1)}}
@keyframes loader-vapor{0%,100%{opacity:.45;transform:translateY(4px) skewX(-3deg)}50%{opacity:.9;transform:translateY(-9px) skewX(4deg)}}
@keyframes coal-flicker{from{transform:scaleY(.7) rotate(-10deg);opacity:.3}to{transform:scaleY(1.15) rotate(12deg);opacity:.9}}
@media(max-width:700px) and (orientation:portrait){.loader-scene{width:clamp(155px,43vw,215px);top:43%}.loader-logo{left:5%;bottom:5%;width:96px}.loader-percent{right:6%;bottom:6%;font-size:76px}}
@media(max-height:540px) and (orientation:landscape){.loader-scene{width:auto;height:75svh;top:43%}.loader-logo{width:80px;bottom:4%}.loader-percent{font-size:68px}}
.ready .loader-scene *,.loading.is-done .loader-scene *{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.loader-scene *{animation:none!important}}
h1.headline{margin:0;font-weight:400;letter-spacing:-.018em;line-height:.7;text-transform:none}

/* Portrait phones, large phones, and tablets */
@media (max-width: 1100px) and (orientation: portrait) {
  .word { width: auto; }
  .word-big { font-size: 1.12em; }
  .word-med { font-size: .50em; }
  .is-left { right: 63%!important; left: auto!important; text-align: right!important; }
  .is-right { left: 63%!important; right: auto!important; text-align: left!important; }
  .roa { top: 25%; }
  .sted { top: 23%; }
  .never { top: 48%; }
  .canned { top: 49%; }
  .corn-stage { top: 16%; height: 90%; width: min(44vw, 34svh); aspect-ratio: auto; }
  .hero-card { left: 50%!important; right: auto!important; bottom: 16px!important; width: min(350px, 86vw)!important; transform: translate(-50%, 16px); }
  .ready .hero-card { transform: translate(-50%, 0)!important; }
  .controls { right: 16px!important; bottom: calc(min(350px, 86vw) * (196 / 499) + 20px)!important; left: auto!important; }
}
@media (max-width: 700px) {
  .headline { font-size: clamp(95px, 28vw, 150px); }
  .word-big { font-size: 1.15em; }
  .word-med { font-size: .48em; }
  .is-left { right: 65%!important; left: auto!important; text-align: right!important; }
  .is-right { left: 65%!important; right: auto!important; text-align: left!important; }
  .roa { top: 25%; }
  .sted { top: 23%; }
  .never { top: 46%; }
  .canned { top: 47%; }
  .corn-stage { top: 16%; height: 90%; width: min(42vw, 30svh); aspect-ratio: auto; }
  .hero-card { left: 50%!important; right: auto!important; bottom: 12px!important; width: min(320px, 88vw)!important; max-width: 92vw!important; transform: translate(-50%, 16px); }
  .ready .hero-card { transform: translate(-50%, 0)!important; }
  .controls { right: 14px!important; bottom: calc(min(320px, 88vw) * (196 / 499) + 16px)!important; left: auto!important; }
}
@media (min-width: 701px) and (max-width: 1100px) and (orientation: portrait) {
  .headline { font-size: clamp(110px, 25vw, 180px); }
}