/* ═══ Weirded layer on top of the foez system ═══ */

.brand .brand-mark { width: 22px; height: 22px; border-radius: 0; object-fit: contain; }
.foot .brand .brand-mark { width: 22px; height: 22px; border-radius: 0; }
.loader { background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 45%, #fff 75%, var(--butter) 100%); }
.loader-mark { width: 84px; }
.m-mark { width: 44px; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0; }

/* ─── hero: calm sky on top (CSS, matched to the photo), the field photo only in the lower part,
   one weird thing standing in it with blossoms in front of its base ─── */
.hero-sky { background: linear-gradient(180deg, #7aa4e3 0%, #9fbeef 30%, #c4d7f4 58%, #dfe6ef 70%, #e9e6c8 100%); }
.hero-land { top: 52vh; bottom: -18vh; height: auto;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 9%, #000 22%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 9%, #000 22%); }
.hero-poster { object-position: 50% 36%; }
.hero-things { position: absolute; left: 50%; bottom: calc(18vh + 1vh); width: min(28vh, 34vw); height: min(27vh, 36vw); transform: translateX(-50%); pointer-events: none; z-index: 1; }
.thing {
  position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none;
  transform: translate(-50%, 14px) scale(.96); opacity: 0; filter: blur(6px) drop-shadow(0 22px 20px rgba(60,50,10,.3));
  transition: opacity .9s var(--ease), transform 1.2s var(--ease), filter .9s var(--ease);
}
.thing.wide { height: 70%; }
.thing.on { opacity: 1; transform: translate(-50%, 0) scale(1); filter: blur(0) drop-shadow(0 22px 20px rgba(60,50,10,.3)); }
/* the same photo again, masked to its lowest band, so blossoms overlap the object's base */
.hero-fg { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url("/img/field-wide.jpg") 50% 36% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 52%, #000 62%); mask-image: linear-gradient(180deg, transparent 0%, transparent 52%, #000 62%); }
.hero-fade { height: 13vh; }
.hero-copy { padding-top: clamp(118px, 15.5vh, 170px); }
.hero h1 { font-size: clamp(62px, 9.4vw, 166px); }
.hero-copy .label { opacity: .75; }
.hero-sub { max-width: 520px; opacity: .85; }
.hero-tag {
  position: absolute; z-index: 3; left: 50%; bottom: 5.5vh; transform: translateX(-50%) !important;
  display: flex !important; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 11px; white-space: nowrap;
  font-size: 12.5px; background: rgba(255,255,255,.84); border: 1px solid rgba(13,13,12,.08);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 40px -26px rgba(13,13,12,.45);
}
.hero-tag b { font-weight: 500; font-family: var(--mono); font-size: 12px; }
.hero-tag span:last-child { color: var(--ink-2); }
body:not(.ready) .hero-tag { opacity: 0; }
.dot { background: var(--yolk-deep); }

/* ─── how: ticket + pass in yolk ─── */
.receipt .r-brand { letter-spacing: .3em; }
.pass { background: url("/img/texture.jpg") center / 560px auto; }
.pass::before { background: linear-gradient(160deg, rgba(30,24,0,.08), rgba(30,24,0,.55)); }
.pass-n { font-family: var(--mono) !important; font-size: clamp(54px, 5vw, 80px) !important; letter-spacing: -.04em !important; }
.ps-bg .ps-bg-2 { background: linear-gradient(180deg, var(--yolk-pale) 0%, #fdfbf0 100%); }

/* ─── rail ─── */
.rail-scene { background: linear-gradient(180deg, #fdfbf0 0%, #fff 12%); }
.obj-art { background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 50%, var(--butter) 100%); }
.obj-art img { transform: scale(1.04); }
.obj:hover .obj-art img { transform: scale(1) !important; }
.obj-n { font-family: var(--mono); letter-spacing: .04em; }
.obj-more { margin: -6px 0 0; color: var(--ink-2); max-width: 300px; font-size: 14px; line-height: 1.6; }

/* ─── stack ─── */
.c-3 { background: linear-gradient(180deg, var(--yolk-pale), #fdfbf0); }
.c-4 { background: linear-gradient(180deg, #fbf3dc, #fffdf6); }
.card-obj { height: auto; filter: drop-shadow(0 30px 30px rgba(60,50,10,.22)); }

/* ─── picker ─── */
.chip { display: inline-flex; align-items: center; gap: 10px; }
.chip img { width: 30px; height: 30px; object-fit: contain; mix-blend-mode: multiply; border-radius: 6px; }
.chip.on img { mix-blend-mode: normal; background: #fff; }
.chip small { font: 500 11px/1 var(--mono); color: var(--ink-3); }
.chip.on small { color: rgba(255,255,255,.6); }
.tally-r { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }

/* ─── tech + ledger (from the foez under-the-hood block) ─── */
.tech { padding: clamp(110px, 12vw, 180px) 0 clamp(80px, 9vw, 130px); background: linear-gradient(180deg, #fff 0%, var(--sky-3) 30%, #fff 100%); }
.tech-grid { max-width: var(--max); margin: clamp(56px, 7vw, 96px) auto 0; padding: 0 var(--gut); display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; padding: 22px 0; border-top: 1px solid var(--hair); }
.steps li:last-child { border-bottom: 1px solid var(--hair); }
.steps li > * { grid-column: 2; }
.steps code { justify-self: start; }
.steps li::before { counter-increment: s; content: "0" counter(s); grid-column: 1; grid-row: 1 / span 3; font-size: 11px; letter-spacing: .2em; color: var(--ink-3); padding-top: 9px; }
.steps h3 { font-size: clamp(26px, 2.2vw, 34px); }
.steps p { margin: 6px 0 0; color: var(--ink-2); max-width: 520px; }
.steps code { display: inline-block; margin-top: 10px; padding: 6px 9px; border-radius: 8px; background: var(--yolk-pale); color: var(--ink); word-break: break-all; }
.chain { position: sticky; top: 100px; border-radius: 24px; padding: 22px; background: rgba(255,255,255,.72); border: 1px solid var(--hair); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.chain-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--yolk-deep); animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.chain-n { font-family: var(--serif); font-size: clamp(56px, 6vw, 92px); line-height: .9; letter-spacing: -.03em; margin: 22px 0 6px; }
.chain-sub { margin: 0 0 18px; color: var(--ink-2); font-size: 13px; }
.chain-addr { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hair); font-size: 12.5px; }
.chain-addr a { text-decoration: underline; text-decoration-color: var(--yolk); text-underline-offset: 3px; word-break: break-all; }
.chain-rows { max-height: 320px; overflow: auto; }
.crow { display: grid; grid-template-columns: 40px 1fr auto; gap: 2px 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--hair); font-size: 13px; }
.crow img { grid-row: span 2; width: 40px; height: 40px; object-fit: contain; }
.crow b { font-weight: 500; font-family: var(--mono); font-size: 12.5px; }
.crow span:nth-of-type(2) { text-align: right; font-family: var(--mono); font-size: 12px; }
.crow small { grid-column: 2 / -1; color: var(--ink-3); font-size: 11.5px; }
.crow a { color: var(--yolk-deep); }
.chain-empty { padding: 20px 0 6px; border-top: 1px solid var(--hair); color: var(--ink-3); font-size: 13px; margin: 0; }
.memo { margin: 16px 0 0; padding: 14px; border-radius: 14px; background: var(--yolk-pale); }
.memo p { margin: 0 0 6px; }
.memo code { word-break: break-all; color: var(--yolk-deep); }

/* ─── numbers / finale ─── */
.numbers-bg { object-position: 50% 70%; }
.tile-go { background: url("/img/texture.jpg") center / 600px auto; }
.door-frame img { object-position: 50% 60%; }
.door-cta-row { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.door-main { margin-top: 36px; } .door-main .btn { height: 40px; padding: 0 18px; }
.qs details p a { text-decoration: underline; text-underline-offset: 3px; }

.door-scene, .numbers, .rail-scene { overflow-x: clip; }
html { overflow-x: clip; }
[hidden] { display: none !important; }

@media (max-width: 1000px) {
  .tech-grid { grid-template-columns: 1fr; }
  .chain { position: relative; top: 0; }
  .tally-r { align-items: flex-start; }
}
@media (max-width: 700px) {
  .hero { height: auto; min-height: 100svh; }
  .hero-stage { min-height: 100svh; }
  .hero-land { top: 50vh; }
  .hero-things { width: 46vw; height: 24vh; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(54px, 16.5vw, 96px); }
  .hero-copy { padding-top: 116px; }
  .chip img { width: 24px; height: 24px; }
}

/* ─── finale: sky + field + the whole cast standing in it ─── */
.fin { position: absolute; inset: 0; will-change: transform; }
.fin-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #7aa4e3 0%, #9fbeef 34%, #c4d7f4 56%, #e3e8ef 66%, #e9e6c8 100%); }
.fin-field { position: absolute; left: 0; right: 0; top: 54%; bottom: 0; width: 100%; height: 46%; object-fit: cover; object-position: 50% 36%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%); }
.fin-row { position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); display: flex; align-items: flex-end; gap: clamp(8px, 2.2vw, 40px); }
.fin-row img { height: clamp(90px, 22vh, 250px); width: auto; filter: drop-shadow(0 20px 18px rgba(60,50,10,.28)); }
.fin-row .f-gpu, .fin-row .f-snkrs { height: clamp(62px, 15vh, 170px); }
.fin-row .f-labubu, .fin-row .f-poke { height: clamp(100px, 25vh, 280px); }
.fin-fg { position: absolute; left: 0; right: 0; top: 54%; bottom: 0; background: url("/img/field-wide.jpg") 50% 36% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 60%, #000 74%); mask-image: linear-gradient(180deg, transparent 0%, transparent 60%, #000 74%); }
.door-shade { background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 72%, rgba(255,255,255,.5) 100%); }
.door-content { padding-top: clamp(110px, 17vh, 170px); }
.door-q { font-size: clamp(44px, 6.4vw, 104px); }
.numbers-bg { object-position: 50% 0%; }
.numbers-fade { background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.2) 22%, rgba(255,255,255,0) 40%); }
.numbers { background: linear-gradient(180deg, #fff 0%, #e8effb 14%, #c4d7f4 34%, #b5cdf2 48%, #dfe6ef 60%, #e9e6c8 72%); }
.numbers-bg { top: 46%; bottom: auto; inset: auto 0 auto 0; height: 70%; object-position: 50% 36%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%); mask-image: linear-gradient(180deg, transparent 0%, #000 24%); }
.numbers-fade { display: none; }
@media (max-width: 700px) {
  .fin-row { bottom: 27%; gap: 4px; width: 94vw; justify-content: center; }
  .fin-row img { height: 12vh; max-width: 19vw; object-fit: contain; }
  .fin-row .f-gpu, .fin-row .f-snkrs { height: 8vh; }
  .fin-row .f-labubu, .fin-row .f-poke { height: 13.5vh; }
  .fin-field, .fin-fg { top: 56%; }
  .door-q { font-size: clamp(38px, 11vw, 56px); }
}