/* Living worlds: critters, tap reactions, night life and the small page-wide interactions in studio-critters.js. */

/* The oversized panorama must never swallow clicks meant for the family switcher above it. */
.audience-switcher { position: relative; z-index: 3; }
.world-backdrop { pointer-events: none; }
.world-backdrop .critter,
.world-backdrop .world-windmill,
.world-backdrop .world-swing,
.world-backdrop .world-bubble { pointer-events: visiblePainted; cursor: pointer; }
.world-backdrop .critter:hover { filter: brightness(1.06) drop-shadow(0 0 4px #fff); }
.world-float, .bubble-pop { pointer-events: none; }
.bubble-pop path { stroke: #8EC3E6; stroke-width: 2; stroke-linecap: round; }

/* Sun: slow rays; a tap makes it beam. */
.sun-rays, .world-block, .world-ball, .cat-tail, .kite-tail { transform-box: fill-box; }
.sun-rays { transform-box: view-box; transform-origin: 0 0; }
.world-awake .sun-rays { animation: world-spin 50s linear infinite; }
.world-sun.beaming .sun-rays { animation-duration: 2.4s; }
.sun-face { opacity: 0; transition: opacity .3s; }
.world-sun.beaming .sun-face { opacity: 1; }
@keyframes world-spin { to { rotate: 360deg; } }

/* Clouds sail across the whole sky instead of nodding in place. */
.world-awake .world-cloud { animation: cloud-sail 70s ease-in-out infinite alternate; }
@keyframes cloud-sail { from { translate: -60px 0; } to { translate: 90px 6px; } }

/* Barn: the door swings open on a curious goose. */
.barn-door { transform-box: fill-box; transform-origin: 0 50%; transition: scale .55s cubic-bezier(.3,1.5,.5,1); }
.barn-door.open { scale: .16 1; }
.barn-peeker { transform-box: fill-box; transform-origin: 50% 100%; }
.door-open .barn-peeker { animation: peek-bob .9s ease-in-out infinite alternate; }
@keyframes peek-bob { from { rotate: -6deg; } to { rotate: 8deg; } }

/* Cat: dozing on the fence, swishing; a tap wakes it for a moment. */
.cat-tail { transform-origin: 0 0; }
.world-awake .cat-tail { animation: cat-tail 3.2s ease-in-out infinite; }
.farm-cat.awake .cat-tail { animation-duration: .5s; }
@keyframes cat-tail { 0%,100% { rotate: -8deg; } 50% { rotate: 10deg; } }
.cat-awake { display: none; }
.farm-cat.awake .cat-awake { display: inline; }
.farm-cat.awake .cat-sleepy, .farm-cat.awake .cat-zzz { display: none; }
.cat-head { transform-box: fill-box; transform-origin: 70% 90%; transition: translate .25s, rotate .25s; }
.farm-cat.awake .cat-head { translate: 0 -3px; rotate: -8deg; }
.cat-zzz text { opacity: 0; }
.world-awake .cat-zzz text { animation: cat-zzz 3.2s ease-in-out infinite; }
.world-awake .cat-zzz text + text { animation-delay: 1.1s; }
@keyframes cat-zzz { 0% { opacity: 0; translate: 0 6px; } 40% { opacity: .9; } 100% { opacity: 0; translate: 6px -8px; } }

/* Chicks peck; their walking is driven from JS. */
.chick-body { transform-box: fill-box; transform-origin: 40% 100%; }
.world-chick.pecking .chick-body { animation: chick-peck .5s ease-in-out 3; }
@keyframes chick-peck { 50% { rotate: 32deg; } }

.bee-wings { transform-box: fill-box; transform-origin: 50% 100%; }
.world-awake .bee-wings { animation: bee-buzz .07s linear infinite alternate; }
@keyframes bee-buzz { to { scale: 1 .45; } }

/* Playground. */
.kite-tail { transform-origin: 50% 0; }
.world-awake .kite-tail { animation: kite-tail 1.4s ease-in-out infinite alternate; }
@keyframes kite-tail { from { skew: 14deg 0deg; } to { skew: -14deg 0deg; } }
.slide-rider { opacity: 0; }
.swing-gosling { pointer-events: none; }
.world-block { transform-origin: 50% 50%; }
.world-ball { transform-origin: 50% 50%; }

/* Night looks. */
.world-night { display: none; }
html[data-theme] .world-night { display: inline; }

.world-star { animation: star-twinkle 3.4s ease-in-out infinite; animation-delay: var(--twinkle); }
.world-firefly { fill: #FFFDE0; filter: drop-shadow(0 0 6px #FFF27A) drop-shadow(0 0 16px #FFE45C) brightness(1.5); animation: firefly 6s ease-in-out infinite; animation-delay: var(--fly); }
@keyframes star-twinkle { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes firefly { 0%,100% { opacity: .1; translate: 0 0; } 30% { opacity: 1; } 50% { translate: var(--fly-x) var(--fly-y); opacity: .9; } 70% { opacity: .2; } }
.goose-scene:not([data-visible=true]) .world-backdrop *, .page-sleeping .world-backdrop * { animation-play-state: paused; }

/* Feathers puffed from the tapped goose. */
.goose-feather { position: absolute; z-index: 6; width: 20px; height: 20px; margin: -10px 0 0 -10px; pointer-events: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21C6 13 11 5 20 3c0 9-6 15-14 16' fill='%23fff' stroke='%23455467' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M4 21 15 9' stroke='%239FB3C2' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* Cards lean toward the pointer with a soft glare. */
.app-card { transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .35s cubic-bezier(.2,.8,.3,1), border-color .2s, background .2s, box-shadow .3s; position: relative; }
.app-card.is-tilting { transition: transform .08s linear, border-color .2s, background .2s, box-shadow .3s; box-shadow: 0 18px 40px -22px #1f2a4466; }
.app-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), #ffffff73, transparent 45%); }
.app-card.is-tilting::after { opacity: 1; }
.app-card .app-logo-art img { transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.app-card:hover .app-logo-art img { transform: rotate(-4deg) scale(1.06); }

/* Scroll entrance. */
.will-rise { opacity: 0; translate: 0 34px; }
.will-rise.has-risen { opacity: 1; translate: 0 0; transition: opacity .7s ease-out, translate .8s cubic-bezier(.2,.8,.3,1); }
.studio-principle.will-rise:nth-child(2) { transition-delay: .12s; }
.studio-principle.will-rise:nth-child(3) { transition-delay: .24s; }
.studio-principle .principle-art { transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.studio-principle:hover .principle-art { transform: translateY(-6px) rotate(-1.5deg); }

/* Footer patrol. */
.studio-footer { position: relative; }
.footer-gosling { position: absolute; top: -44px; left: 0; width: 46px; height: 46px; cursor: pointer; opacity: 0; }

/* Construction pages: poppable letters and numbers. */
.construction-art { overflow: visible; }
.drift-token { position: absolute; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 2px solid var(--hue); border-radius: 14px; background: #fff; color: var(--hue); font: 800 22px/1 var(--display, sans-serif); cursor: pointer; user-select: none; animation: token-drift 6s ease-in-out infinite; transition: scale .3s cubic-bezier(.3,1.8,.5,1), opacity .3s; }
.drift-token:hover { scale: 1.15; }
.drift-token.popped { scale: 1.8; opacity: 0; }
@keyframes token-drift { 0%,100% { translate: 0 0; rotate: -6deg; } 50% { translate: 0 -12px; rotate: 6deg; } }
html[data-theme] .drift-token { background: var(--surface); }

@media (prefers-reduced-motion: reduce) {
  .world-backdrop *, .footer-gosling, .drift-token { animation: none !important; }
  .app-card, .will-rise { transform: none; translate: none; opacity: 1; }
}

/* Only the painted goose takes taps, so the sky and critters around it stay reachable. */
.hero .hero-goose, .hero .hero-goose .goose-anim { pointer-events: none; }
.hero .hero-goose .goose-anim * { pointer-events: visiblePainted; }
.hero .world-hotspot:hover { background: transparent; }
.hero .world-hotspot { cursor: pointer; }
html[data-theme] .world-sun { opacity: 1; }
html[data-theme] .sun-rays { display: none; }
html[data-theme] .world-sun > circle { fill: #F6F0D2; }
html[data-theme] .world-sun > circle + circle { fill: #E3DDBC; }