/* =================== finishing details =================== */

/* hatching intro */
#hatch { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; align-content: center; gap: 18px;
  background: radial-gradient(700px 500px at 30% 20%, #ffe3f0, transparent 60%), radial-gradient(700px 500px at 80% 90%, #dcf1ff, transparent 60%), #fdf7fb;
  transition: opacity .6s ease, visibility .6s; cursor: pointer; }
#hatch.done { opacity: 0; visibility: hidden; }
#hatch .h-egg { position: relative; width: 110px; height: 138px; }
#hatch .h-egg svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#hatch .h-top { transform-origin: 50% 60%; }
#hatch.go .h-egg svg { animation: h-wobble 1s ease-in-out; }
#hatch.go .h-top { animation: h-pop .7s .95s cubic-bezier(.3,.7,.3,1) forwards; }
#hatch.go .h-bot { animation: h-fade .5s 1.25s ease forwards; }
#hatch .h-logo { width: min(420px, 70vw); opacity: 0; transform: scale(.6) translateY(-40px); }
#hatch.go .h-logo { animation: h-rise .8s 1.05s cubic-bezier(.2,.9,.2,1.15) forwards; }
#hatch b { font: 800 34px var(--display); letter-spacing: .04em; opacity: 0; background: linear-gradient(90deg, #12c2b2, #1aa6e6, #5b6cf0, #8b5cf6, #a24fe0); -webkit-background-clip: text; background-clip: text; color: transparent; }
#hatch.go b { animation: h-fade-in .6s 1.3s ease forwards; }
#hatch .h-stage { position: relative; display: grid; place-items: center; }
#hatch .h-stage .h-egg { position: absolute; left: 50%; top: 50%; margin: -69px 0 0 -55px; }
@keyframes h-wobble { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(7deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } }
@keyframes h-pop { to { transform: translate(40px, -120px) rotate(70deg); opacity: 0; } }
@keyframes h-fade { to { opacity: 0; transform: translateY(30px); } }
@keyframes h-rise { to { opacity: 1; transform: none; } }
@keyframes h-fade-in { to { opacity: 1; } }

/* panels reveal */
.reveal-ready .panel, .reveal-ready .zone-head, .reveal-ready .hero-copy, .reveal-ready .hero-orb { opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .8s ease var(--d, 0ms), transform .8s cubic-bezier(.2,.8,.2,1) var(--d, 0ms), border-color .3s, box-shadow .3s; }
.reveal-ready .panel.in, .reveal-ready .zone-head.in, .reveal-ready .hero-copy.in, .reveal-ready .hero-orb.in { opacity: 1; transform: none; }
.reveal-ready .panel.in:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 22px 40px -24px color-mix(in srgb, var(--c, var(--zone)) 55%, transparent), 0 2px 6px -3px rgba(120,40,110,.12); }

/* light that follows the cursor */
.panel::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c, var(--zone)) 13%, transparent), transparent 65%); }
.panel:hover::after { opacity: 1; }

/* buttons: a shine sweeps across on hover */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); transform: skewX(-20deg); transition: left .7s ease; pointer-events: none; }
.btn-solid::after { z-index: 1; opacity: .7; }
.btn:hover::after { left: 130%; }

/* skin swatch of every section */
.skin-chip { display: inline-flex; align-items: center; gap: 7px; font: 600 10.5px var(--mono); letter-spacing: .12em; color: var(--muted); }
.skin-chip i { width: 18px; height: 12px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 30%, #fff, var(--c) 65%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.skin-chip b { color: var(--c); }

/* zone number: gradient stroke with a hint of fill */
.zn { -webkit-text-stroke: 1.5px var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%); -webkit-background-clip: text; background-clip: text; }

/* vertebrae between sections (horizontal body only) */
.joint { display: none; }
@media (min-width: 1000px) and (min-height: 600px) {
  .zone + .zone::before { display: none; }
  .joint { flex: none; width: 58px; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 0 26px; position: relative; z-index: 1; }
  .joint .jv { flex: 1; width: 2px; border-radius: 2px; background: linear-gradient(var(--p), var(--c)); opacity: .45; }
  .joint .jd { width: 12px; height: 12px; transform: rotate(45deg); border-radius: 3px; background: linear-gradient(135deg, var(--p), var(--c)); box-shadow: 0 0 0 4px #fff, 0 6px 14px -4px var(--c); }
  .joint .jl { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 10.5px var(--mono); letter-spacing: .32em; color: var(--c); white-space: nowrap; padding: 8px 0; }
}

/* scales orbiting the hero logo */
.orb-scales { position: absolute; inset: 0; animation: spin 40s linear infinite; pointer-events: none; z-index: 2; }
.orb-scales i { position: absolute; left: 50%; top: 50%; width: 14px; height: 18px; margin: -9px 0 0 -7px; transform: rotate(var(--a)) translateY(calc(-1 * min(150px, 35vw) - 8px)) rotate(180deg) scale(var(--s));
  background: linear-gradient(160deg, #fff, var(--c) 70%); border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%; box-shadow: 0 4px 10px -4px var(--c); opacity: .9; }
.orb-logo { filter: drop-shadow(0 14px 24px rgba(91,108,240,.25)); }

/* the scale pattern behind the page drifts slowly while you travel */
body::before { background-position: var(--px, 0px) 0; }

@media (prefers-reduced-motion: reduce) { #hatch { display: none; } }