/* Yolk — pixel pets: LCD screen + translucent Y2K handheld shell */
.pet-lcd { display: block; width: 100%; height: auto; }
.pet-lcd .px-off { fill: #e4ff3f; opacity: .07; }
.pet-lcd .px-on, .pet-lcd .px-fx { fill: #e4ff3f; }
.pet-lcd .px-on { filter: drop-shadow(0 0 .35px #e4ff3fb0); }
.pet-bob { animation: pet-bob 1.2s steps(1) infinite; }
.pet-wobble { animation: pet-wobble 1.6s steps(1) infinite; }
.px-blink { animation: px-blink 1s steps(1) infinite; }
@keyframes pet-bob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -1px); } }
@keyframes pet-wobble { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-1px, 0); } 75% { transform: translate(1px, 0); } }
@keyframes px-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Handheld. Size it by setting width on .tama (or its parent). */
.tama {
  --sa: #e4ff3f; --sb: #6f9a00;
  position: relative; width: 100%; aspect-ratio: .86; margin-top: 7%;
  border-radius: 50% 50% 47% 47% / 57% 57% 43% 43%;
  background:
    radial-gradient(60% 40% at 32% 18%, #ffffffc0 0 8%, #ffffff00 40%),
    radial-gradient(90% 70% at 50% 110%, #00000070, #00000000 60%),
    repeating-linear-gradient(90deg, #ffffff0d 0 1px, #ffffff00 1px 14px),
    linear-gradient(160deg, var(--sa), var(--sb));
  box-shadow:
    inset 0 10px 22px #ffffff70, inset 0 -18px 34px #00000059, inset 0 0 0 2px #ffffff30,
    0 28px 60px -12px #000000b0, 0 0 70px -10px color-mix(in srgb, var(--sa) 45%, transparent);
}
.tama-ring {
  position: absolute; left: 50%; top: -9%; width: 15%; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; border: max(3px, .9cqw) solid #d7dbe6;
  background: transparent; box-shadow: inset 0 1px 2px #0006, 0 1px 0 #fff8; z-index: -1;
}
.tama { container-type: inline-size; }
.tama-ring { border-width: 2.4cqw; }
.tama-brand {
  position: absolute; left: 0; right: 0; top: 13.5%; text-align: center;
  font-family: "Syncopate", sans-serif; font-weight: 700; font-size: 5cqw; letter-spacing: .3em; padding-left: .3em;
  color: #00000055; text-shadow: 0 1px 0 #ffffff80;
}
.tama-bezel {
  position: absolute; left: 50%; top: 23%; width: 64%; aspect-ratio: 1.12; transform: translateX(-50%);
  border-radius: 20% 20% 24% 24%; padding: 7.5%;
  background: linear-gradient(180deg, #2a2d38, #0d0e14);
  box-shadow: inset 0 2px 0 #ffffff26, inset 0 -3px 8px #000c, 0 2px 0 #ffffff59, 0 -1px 0 #0005;
}
.tama-screen {
  width: 100%; height: 100%; display: grid; place-items: center; border-radius: 10%;
  padding: 7% 6%; background: radial-gradient(120% 100% at 50% 0%, #182a0c, #0a1306 70%);
  box-shadow: inset 0 0 0 1px #e4ff3f1f, inset 0 6px 14px #0009;
}
.tama-btns { position: absolute; left: 0; right: 0; bottom: 13%; display: flex; justify-content: center; align-items: flex-start; gap: 7%; }
.tama-btns i {
  width: 10.5%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #c9ced9 45%, #8b91a1);
  box-shadow: 0 2px 0 #0000004d, inset 0 -2px 3px #0003;
}
.tama-btns i:nth-child(2) { margin-top: 3.5%; }

@media (prefers-reduced-motion: reduce) { .pet-bob, .pet-wobble, .px-blink { animation: none; } }

/* ---------- Hero (reference layout) ---------- */
.hero-ref .hero-art::before { content: ""; position: absolute; left: 50%; top: 52%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -1;
  background: radial-gradient(closest-side, #e4ff3f1f, #e4ff3f08 45%, transparent 70%); pointer-events: none; }
.hero-ref .hero-stage { justify-content: flex-end; }
.hero-device { position: relative; width: min(62%, 300px); margin-bottom: 10%; animation: tama-float 5s ease-in-out infinite; }
@media (min-width: 1024px) { .hero-device { width: min(64%, 400px); margin-bottom: 15vh; } }
@keyframes tama-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
.hero-ref .hero-floor { width: 30%; }
.dev-photo { position: relative; }
.dev-photo { isolation: isolate; }
.dev-photo img { display: block; width: 100%; height: auto; }
/* Contact shadow as its own layer: CSS drop-shadow on these PNGs shows a box in Safari. */
.dev-photo::after { content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -7%; height: 16%; border-radius: 50%;
  background: radial-gradient(closest-side, #000000b3, #00000059 55%, transparent); }
.dev-screen { position: absolute; display: grid; place-items: center; padding: 4%; border-radius: 6%; background: radial-gradient(120% 100% at 50% 0%, #182a0c, #0a1306 70%); }
.hero-ref .card-persona { top: 30%; }
.hero-ref .tile-lcd { display: block; width: 78%; margin: 9% auto 0; padding: 7% 6%; border-radius: 6px; background: #0a1306; box-shadow: inset 0 0 0 1px #e4ff3f26; }
.hero-ref .pill-status { bottom: 30%; }
.hero-ref .pill-status .mono { font-family: var(--font-mono, ui-monospace, monospace); }
@media (prefers-reduced-motion: reduce) { .hero-device { animation: none; } }
.hero-ref .hero-stage { align-items: center; }
.hero-ref .pill-status { right: 0; bottom: 18%; }
.hero-ref .tile-lcd { width: 66%; margin: 8% auto 0; }
.hero-ref .tile-label { padding-top: 10px; font-size: 10px; }
@media (min-width: 1024px) { .hero-ref .pill-status { right: 2%; bottom: 24%; } .hero-ref .card-persona { left: 2%; } }

/* ---------- See it in action ---------- */
.action-head { text-align: center; margin-bottom: 32px; }
.action-head .display-xl { font-size: clamp(44px, 7vw, 88px); }
.action-head p { margin: 12px auto 0; max-width: 34rem; font-size: 16px; line-height: 1.6; color: var(--fg-muted); }
.action-frame { position: relative; border-radius: 28px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px #ffffff14, 0 40px 120px #00000099; }
.action-frame > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; min-height: 420px; }
.action-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 45%, #000000a6); pointer-events: none; }
.action-feed { position: absolute; z-index: 2; right: 16px; top: 16px; bottom: 76px; width: min(380px, calc(100% - 32px));
  display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 20px; background: #0d0d0fd9; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.action-feed .who { display: flex; align-items: center; gap: 10px; color: var(--fg); }
.action-feed .handle { color: var(--fg-subtle); }
.av-lcd { display: block; width: 32px; height: 32px; padding: 5px 3px; border-radius: 999px; background: #0a1306; box-shadow: inset 0 0 0 1px #e4ff3f33; overflow: hidden; }
.post .av.av-lcd { width: 40px; height: 40px; padding: 7px 4px; background: #0a1306; }
.action-posts { flex: 1; display: flex; flex-direction: column; gap: 10px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
.action-posts .post { background: #151517; }
.action-posts .post .body { font-size: 14px; }
.action-status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-muted); padding-top: 8px; border-top: 1px solid #ffffff12; }
.action-status .dot-live { color: var(--positive); }
.action-status .sep { width: 1px; height: 12px; background: #ffffff26; }
.action-status b { margin-left: auto; color: var(--lime); font-weight: 600; }
.action .demo-toggle { left: 16px; right: auto; }
@media (max-width: 767px) {
  .action-frame { display: flex; flex-direction: column; background: #0d0d0f; }
  .action-frame > img { min-height: 0; aspect-ratio: 4 / 3; }
  .action-frame::after { display: none; }
  .action-feed { position: relative; inset: auto; width: auto; height: 300px; margin: 0; border-radius: 0; background: #0d0d0f; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .action .demo-toggle { top: 12px; left: 12px; bottom: auto; height: 36px; }
}

/* ---------- Three clicks ---------- */
.steps-title { text-align: center; }
.mini-thumbs .tile .tile-lcd { display: block; width: 66%; margin: 8% auto 0; padding: 7% 6%; border-radius: 6px; background: #0a1306; box-shadow: inset 0 0 0 1px #e4ff3f26; }
.shell-dots { display: flex; gap: 8px; margin-top: 6px; }
.shell-dots i { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff9, transparent 45%), var(--c); box-shadow: inset 0 -2px 4px #0005; }
.shell-dots i.on { outline: 2px solid var(--lime); outline-offset: 2px; }
.mini-token .sq-lcd { background: #0a1306; padding: 6px 4px; box-shadow: inset 0 0 0 1px #e4ff3f33; }

/* ---------- Any trend ---------- */
.trend { position: relative; flex: none; width: 220px; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; scroll-snap-align: start; background: #111; }
@media (min-width: 768px) { .trend { width: 250px; } }
.trend img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.trend:hover img { transform: scale(1.05); }
.trend::after { content: ""; position: absolute; inset: 50% 0 0 0; background: linear-gradient(transparent, #000000d9); }
.trend-label { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 16px; font-family: var(--font-cond); font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: -.005em; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .trend img { transition: none; } }

/* ---------- Scene motion (no video: slow push-in + CRT flicker) ---------- */
.action-frame > img { transform-origin: 62% 55%; animation: scene-push 18s ease-in-out infinite alternate; }
.action-frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(40% 45% at 42% 48%, #6dff8a26, transparent 70%); mix-blend-mode: screen; animation: crt-flicker 3.2s steps(1) infinite; }
.action-frame.is-paused > img, .action-frame.is-paused::before { animation-play-state: paused; }
@keyframes scene-push { from { transform: scale(1); } to { transform: scale(1.08) translate(-1.5%, -1%); } }
@keyframes crt-flicker { 0%, 100% { opacity: .9; } 8% { opacity: .55; } 9% { opacity: 1; } 47% { opacity: .75; } 48% { opacity: 1; } 72% { opacity: .85; } }
@media (max-width: 767px) { .action-frame::before { display: none; } }

/* ---------- Photo handheld with live screen ---------- */
.dev-photo img { pointer-events: none; }

/* ---------- Your pet. Your coin. ---------- */
.display-xl .dim { color: #ffffff59; }
.feats-title { font-size: clamp(44px, 8vw, 112px); }
.feats-grid { margin-top: 48px; display: grid; gap: 16px; }
.fx { position: relative; margin: 0; border-radius: 24px; overflow: hidden; background: #111; box-shadow: 0 0 0 1px #ffffff0f; }
.fx img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.fx:hover img { transform: scale(1.04); }
.fx::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #000000d9, #00000026 50%, transparent); pointer-events: none; }
.fx figcaption { position: absolute; z-index: 1; inset: auto 0 0 0; padding: 24px; }
.fx h3 { margin: 0; font-family: var(--font-cond); font-weight: 700; font-size: clamp(30px, 4vw, 48px); text-transform: uppercase; letter-spacing: -.01em; line-height: 1; }
.fx p { margin: 8px 0 0; max-width: 26rem; font-size: 14px; line-height: 1.6; color: #ffffffc4; }
.fx-a, .fx-c { aspect-ratio: 16 / 10; }
.fx-b { aspect-ratio: 4 / 5; }
@media (min-width: 1024px) {
  .feats-grid { grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto; gap: 20px; }
  .fx-a { grid-column: 1 / 8; grid-row: 1; }
  .fx-b { grid-column: 8 / 13; grid-row: 1 / 3; aspect-ratio: auto; margin-top: 120px; }
  .fx-c { grid-column: 1 / 8; grid-row: 2; }
}

/* ---------- Egg to legend ---------- */
.grow-row { list-style: none; margin: 0; padding: 8px 0 0; display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 12px; overflow-x: auto; scrollbar-width: none; }
.grow-row::-webkit-scrollbar { display: none; }
.grow-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 12px 18px; border-radius: 20px;
  background: radial-gradient(70% 55% at 50% 40%, #ffffff12, transparent 70%), #121214; border: 1px solid #ffffff0f; }
.grow-step + .grow-step::before { content: ""; position: absolute; left: -12px; top: 42%; width: 12px; height: 2px; background: #e4ff3f66; }
.grow-dev { width: 74%; max-width: 170px; }
.grow-meta { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.grow-meta b { font-family: var(--font-cond); font-size: 22px; text-transform: uppercase; }
.grow-meta .mono { font-size: 12px; color: var(--fg-subtle); }
.grow-step.is-legend { border-color: #e4ff3f59; box-shadow: 0 0 40px -12px #e4ff3f66; }
.grow-step.is-legend .mono { color: var(--lime); }

/* ---------- Lineup ---------- */
.lineup-img { position: relative; display: block; width: 100%; max-width: 1200px; height: auto; margin: 0 auto;
  -webkit-mask-image: radial-gradient(75% 90% at 50% 50%, #000 60%, transparent); mask-image: radial-gradient(75% 90% at 50% 50%, #000 60%, transparent); }
.tk .av.av-lcd { padding: 5px 3px; }

/* ---------- Meet the species ---------- */
.species-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 168px; gap: 12px; overflow-x: auto; padding: 0 16px 8px; scrollbar-width: none; }
.species-grid::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .species-grid { grid-auto-columns: calc((min(1280px, 100vw) - 64px - 60px) / 6); max-width: 1280px; margin: 0 auto; padding: 0 32px 8px; } }
.sp-tile { margin: 0; display: flex; flex-direction: column; isolation: isolate; border-radius: 18px; overflow: hidden; background: radial-gradient(90% 70% at 50% 35%, #f4f4f4, #d2d2d2 75%, #bdbdbd); }
.sp-dev { display: block; width: 62%; margin: 14% auto 9%; transition: transform .5s var(--ease); }
.sp-tile .dev-photo::after { background: radial-gradient(closest-side, #00000080, #00000033 55%, transparent); }
.sp-tile:hover .sp-dev { transform: translateY(-4px) rotate(-3deg); }
.sp-tile figcaption { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; padding: 10px 14px 12px; background: #0000000d; color: #111; font-size: 12px; }
.sp-tile figcaption b { font-family: var(--font-cond); font-size: 18px; text-transform: uppercase; }
.sp-tile figcaption span { color: #555; }

/* ---------- Live pets ---------- */
.pet-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 1024px) { .pet-cards { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.pet-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; color: var(--fg);
  background: radial-gradient(80% 60% at 50% 35%, #3a3a3e, #121214 75%); border: 1px solid #ffffff14; transition: border-color .2s; }
a.pet-card:hover { border-color: #e4ff3f80; }
.pc-dev { position: absolute; left: 50%; top: 10%; width: 52%; transform: translateX(-50%); }
.pc-tag { position: absolute; top: 12px; left: 12px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; background: #0009; border: 1px solid #ffffff26; color: var(--fg-muted); }
.pc-body { position: relative; padding: 14px; background: linear-gradient(transparent, #000c 40%); }
.pc-st { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--positive); }
.pet-card h3 { margin: 4px 0 0; font-family: var(--font-cond); font-size: clamp(22px, 2.4vw, 30px); text-transform: uppercase; line-height: 1; }
.pc-foot { margin-top: 6px; display: flex; justify-content: space-between; font-size: 12px; color: var(--fg-muted); }

/* ---------- Final CTA ---------- */
.cta-pets { position: relative; overflow: hidden; }
.cta-dev { position: absolute; bottom: -12%; width: 24%; max-width: 300px; z-index: 1; display: none; }
.cta-dev.l { left: 4%; transform: rotate(-12deg); }
.cta-dev.r { right: 4%; transform: rotate(12deg); }
@media (min-width: 900px) { .cta-dev { display: block; } }
@media (prefers-reduced-motion: reduce) { .action-frame > img, .action-frame::before { animation: none; } .fx img, .sp-dev { transition: none; } }
.lineup-img { mix-blend-mode: lighten; }

/* ---------- Launch: pet pickers + handheld preview ---------- */
.lstep-h .lstep-act { margin-left: auto; height: 34px; font-size: 13px; }
.species-pick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.sp-pick { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 8px 10px; border-radius: 14px; border: 1px solid #ffffff1a;
  background: #141416; color: var(--fg-muted); font: 600 12px var(--font-sans); cursor: pointer; transition: border-color .15s, color .15s; }
.sp-pick:hover { border-color: #ffffff40; color: var(--fg); }
.sp-pick.on { border-color: var(--lime); color: var(--fg); box-shadow: 0 0 0 1px var(--lime); }
.sp-lcd { display: block; width: 100%; padding: 10% 8%; border-radius: 8px; background: #0a1306; box-shadow: inset 0 0 0 1px #e4ff3f26; }
.shell-pick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.sh-pick { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px 10px; border-radius: 14px; border: 1px solid #ffffff1a;
  background: #141416; color: var(--fg-muted); font: 500 12px var(--font-sans); cursor: pointer; transition: border-color .15s, color .15s; }
.sh-pick:hover { border-color: #ffffff40; color: var(--fg); }
.sh-pick.on { border-color: var(--lime); color: var(--fg); box-shadow: 0 0 0 1px var(--lime); }
.sh-pick i { width: 34px; aspect-ratio: .86; border-radius: 50% 50% 47% 47% / 57% 57% 43% 43%;
  background: radial-gradient(60% 40% at 32% 22%, #ffffffb0 0 10%, transparent 45%), linear-gradient(160deg, var(--a), var(--b)); box-shadow: inset 0 -4px 8px #0005; }
.voice-hint { display: block; margin-top: 10px; font-size: 13px; }
@media (max-width: 639px) {
  .species-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shell-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pv-pet .pv-dev { width: 64%; margin: 8px auto 22px; }
.pv-stages { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; }
.pv-stages .opt-chip { height: 26px; padding: 0 9px; font-size: 11px; }
.pv-voice { flex-wrap: wrap; }
@media (max-width: 1023px) {
  .pv-card.pv-pet { display: flex; flex-direction: column; align-items: center; }
  .pv-pet .pv-dev { width: 42%; max-width: 200px; margin: 4px auto 16px; }
  .pv-pet .pv-id, .pv-pet .pv-post { width: 100%; }
}
@media (max-width: 1023px) { .pv-pet .pv-id { text-align: center; } .pv-pet .pv-voice { justify-content: center; } }

/* ---------- Explore cards ---------- */
.ex-grid { margin-top: 8px; }
@media (min-width: 640px) and (max-width: 1023px) { .ex-grid { grid-template-columns: repeat(3, 1fr); } }
.ex-card .pc-dev { top: 7%; width: 50%; }
.ex-card .m-prog { margin-top: 10px; height: 4px; border-radius: 999px; background: #ffffff1a; overflow: hidden; }
.ex-card .m-prog i { display: block; height: 100%; background: var(--lime); }
.pc-st.is-legend { color: var(--lime); }

/* ---------- Pet page ---------- */
.mp-dev { width: 58%; max-width: 280px; margin: 8px auto 18px; }
.g-track { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.g-track li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: var(--fg-subtle); }
.g-lcd { display: block; width: 100%; padding: 12% 8%; border-radius: 8px; background: #0a1306; box-shadow: inset 0 0 0 1px #e4ff3f1a; opacity: .35; }
.g-track li.done .g-lcd { opacity: .7; }
.g-track li.on { color: var(--fg); font-weight: 600; }
.g-track li.on .g-lcd { opacity: 1; box-shadow: inset 0 0 0 1px #e4ff3f, 0 0 18px -6px #e4ff3f; }

/* ---------- My pets ---------- */
.mine-art { background: #0a1306 !important; box-shadow: inset 0 0 0 1px #e4ff3f26; }
.mine-lcd { display: block; width: 80%; }

/* ---------- Docs / 404 ---------- */
.pet-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 8px 0 18px; }
.pet-row > span { display: block; padding: 12% 8%; border-radius: 10px; background: #0a1306; box-shadow: inset 0 0 0 1px #e4ff3f26; }
.docs-hero-art[data-dev] { width: 96px; }
.dev-screen, .dev-screen * { box-sizing: border-box; }