/* Baby Editor landing — elisaleco.com style */
:root{--accent:#111;--muted:#666;--yellow:#ffd54a}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;background:#fff;color:var(--accent)}
.wrap{max-width:1100px;margin:0 auto;padding:20px}
.page-header .small-label{font-size:13px;color:rgba(17,18,23,0.55)}

.navbar .nav-component-grid{display:grid;grid-template-columns:auto 1fr auto;align-items:center}
.navbar .nav-menu{justify-self:center}
.navbar .menu-button{justify-self:end}

.game-screen{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#ffffff;animation:heroBg 24s linear infinite;z-index:999;overflow:hidden}
body.game-active .game-screen{display:flex}
body.game-active .page-wrapper{display:none}
.babyeditor-credit{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:1100;display:block;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(17,18,23,0.58);text-decoration:none;border:0;padding:0;margin:0;line-height:1.2;text-align:center;white-space:nowrap}
body.game-active .babyeditor-credit{display:none}
.babyeditor-credit:hover,.babyeditor-credit:focus,.babyeditor-credit:active{color:rgba(17,18,23,0.58);text-decoration:none;outline:none}
@media (max-width:800px){.babyeditor-credit{bottom:14px;font-size:11px;max-width:calc(100vw - 32px);white-space:normal}}
.game-exit{position:absolute;top:24px;right:24px;background:#FFD400;color:#0a0a0a;border:2px solid #0a0a0a;border-radius:0;padding:10px 18px;font-weight:900;letter-spacing:0.18em;text-transform:uppercase;box-shadow:8px 8px 0 rgba(0,0,0,1);cursor:pointer;transition:transform 0.2s ease,box-shadow 0.2s ease}
.game-exit:hover{transform:translateY(-2px) rotate(-2deg);box-shadow:10px 10px 0 rgba(0,0,0,1)}
.game-emoji{position:absolute;pointer-events:none;opacity:1;transition:transform 4s cubic-bezier(.25,.8,.25,1),opacity 4s cubic-bezier(.25,.8,.25,1)}
.game-emoji.trail{transition:transform 1.5s cubic-bezier(.25,.8,.25,1),opacity 1.5s cubic-bezier(.25,.8,.25,1)}

.device-warning{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(255,255,255,0.96);z-index:1200;padding:32px;text-align:center;font-size:18px;color:#0a0a0a}
.device-warning .warning-card{max-width:360px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;display:flex;flex-direction:column;gap:18px;align-items:center}
.warning-home{display:inline-flex;align-items:center;justify-content:center;background:#FFD400;color:#0a0a0a;border:2px solid #0a0a0a;border-radius:0;padding:10px 24px;font-weight:900;letter-spacing:0.18em;text-decoration:none;box-shadow:8px 8px 0 rgba(0,0,0,1)}
.warning-home:hover{transform:translateY(-2px);box-shadow:10px 10px 0 rgba(0,0,0,1)}
body.mobile-warning .device-warning{display:flex}
body.mobile-warning .page-wrapper{filter:blur(2px);pointer-events:none}

.hero-full{height:100vh;display:flex;align-items:center;justify-content:center;padding:140px 40px 40px;position:relative;background:#ffffff;animation:heroBg 24s linear infinite}
.hero-inner{max-width:900px;text-align:center;position:relative;z-index:1}
.hero-heading-stack,.hero-sub{position:relative;top:-100px}
.hero-sub{font-size:18px;color:rgba(17,18,23,0.6);margin:0 0 28px}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.hero-heading-stack{display:flex;flex-direction:column;gap:0;align-items:center;margin-bottom:32px}
.hero-line{overflow:hidden;width:100%}
.hero-heading-text{display:inline-block;font-family:"Aspekta 1000", Georgia, sans-serif;text-transform:uppercase;font-size:clamp(64px,12vw,220px);font-weight:400;line-height:0.9;letter-spacing:-0.02em;color:#0a0a0a;transform:translateY(120%);animation:heroSlideDown 1s cubic-bezier(.25,.85,.25,1) forwards}
.hero-line-top .hero-heading-text{font-family:"Nyght Serif", Georgia, serif;font-size:clamp(72px,13vw,240px);letter-spacing:-0.01em;text-transform:uppercase}
.hero-line-bottom .hero-heading-text{transform:translateY(-120%);animation-name:heroSlideUp;animation-delay:.15s}
@keyframes heroSlideDown{to{transform:translateY(0)}}
@keyframes heroSlideUp{to{transform:translateY(0)}}
@keyframes heroBg{
  0%{background-color:#ffffff}
  16%{background-color:#ffffff}
  24%{background-color:#e6615e}
  32%{background-color:#fd7f97}
  40%{background-color:#e581a8}
  48%{background-color:#908ae4}
  56%{background-color:#66a5d8}
  64%{background-color:#53b2d3}
  72%{background-color:#7bb5b4}
  80%{background-color:#dcba6a}
  86%{background-color:#dd9f62}
  91%{background-color:#df594e}
  94%{background-color:#e86464}
  97%{background-color:#fd7f97}
  100%{background-color:#ffffff}
}

.cta-row{display:flex;justify-content:center;margin-top:50px}
/* match elisaleco.com floating portfolio CTA */
.cta-yellow{position:relative;display:inline-block;background:#FFD400 !important;color:#0a0a0a !important;padding:14px 20px;border-radius:0;border:2px solid #0a0a0a !important;font-weight:900;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none !important;box-shadow:8px 8px 0 rgba(0,0,0,1) !important;transform:translateY(18px) rotate(-2deg);opacity:0;transition:transform 180ms ease, box-shadow 180ms ease, opacity 220ms ease}
.cta-yellow.is-ready{opacity:1;transform:translateY(0) rotate(-2deg);animation:punk-float 2.8s ease-in-out infinite}
.cta-yellow:hover{transform:translateY(-2px) rotate(-4deg);box-shadow:10px 10px 0 rgba(0,0,0,1)}
@keyframes punk-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(-1deg)}}

/* responsive */
@media (max-width:800px){.hero-title{font-size:36px}.cta-yellow{padding:12px 20px}}