/* Short interaction responses, with a quiet shared breath in the hero. */
:root { --motion-settle: var(--brand-motion-settle); --motion-swap: var(--brand-motion-swap); --motion-ease: cubic-bezier(.22,1,.36,1); }
.card { transition: none; will-change: auto; }
.card:hover { transform: none; box-shadow: none; }
.card:hover .card-art { transform: none; }
.card:hover .card-art img { transform: none; }
.card-art, .shot, .gthumb, .thumb, .mini-shots a {
  transition: transform var(--motion-settle) var(--motion-ease), box-shadow var(--motion-settle) var(--motion-ease), border-color var(--brand-motion-feedback), background var(--brand-motion-feedback);
}
.card-art { transform-origin: 50% 50%; will-change: auto; }
.card-art img { transition: transform var(--motion-settle) var(--motion-ease); will-change: auto; }
.card-foot span:last-child { transition: transform var(--motion-settle) var(--motion-ease); }
.card:focus-within .card-art { box-shadow: 4px 5px 0 var(--game-accent), 6px 7px 0 var(--ink); }
.card:focus-within h3, .card:hover h3 { color:var(--text); }
.stage-img { animation: none; }
.stage-previous { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.zoom-btn { z-index: 1; }
@keyframes studio-arrives {
  from { opacity: .75; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes mascot-hello {
  0%, 100% { transform: translateY(0) rotate(0); }
  38% { transform: translateY(-3px) rotate(-5deg); }
  72% { transform: translateY(-1px) rotate(2deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .motion-arrival.is-seen { animation: studio-arrives var(--motion-settle) var(--arrival-delay,0ms) var(--motion-ease) backwards; }
  .motion-arrival:focus-within { animation: none; }
  .mast-mark { transform-origin: 50% 85%; }
  .studio-brand:focus-visible .mast-mark { animation: mascot-hello var(--motion-settle) var(--motion-ease); }
  .card:focus-within .card-art { transform: none; }
  .card:has(:focus-visible) .card-foot span:last-child { transform: translateX(4px); }
  .shot:focus-visible, .mini-shots a:focus-visible { transform: translateY(-3px); }
  .thumb:focus-visible { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .studio-brand:hover .mast-mark { animation: mascot-hello var(--motion-settle) var(--motion-ease); }
  .card:hover .card-art {
    transform: none;
  }
  .card:hover .card-art img { transform: scale(1.025); }
  .card:hover .card-foot span:last-child { transform: translateX(4px); }
  .shot:hover, .mini-shots a:hover { transform: translateY(-3px); }
  .crew:has(.btn:hover) img { translate: 0 -4px; rotate: 3deg; }
  .crew img { transition: translate var(--motion-settle) var(--motion-ease), rotate var(--motion-settle) var(--motion-ease); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) and (min-width: 701px) {
  .mascot-motion {
    transform-box: view-box; transform-origin: 52% 83%;
    transform: translate(calc(var(--art-x,0) * 6px), calc(var(--art-y,0) * 4px - var(--scroll-progress,0) * 16px - var(--mascot-lift,0px)))
      rotate(calc(var(--art-x,0) * 1.5deg - var(--scroll-progress,0) * 1.5deg));
    transition: transform var(--motion-settle) var(--motion-ease);
  }
  .mascot-shadow {
    transform-box: fill-box; transform-origin: center;
    transform: scaleX(calc(1 - var(--scroll-progress,0) * .12));
    transition: transform var(--motion-settle) var(--motion-ease);
  }
  .launch:has(.explore-link:hover, .explore-link:focus-visible) { --mascot-lift: 5px; }
  .stage, .slide-media { transition: transform var(--motion-settle) var(--motion-ease); }
  .stage.is-aimed, .slide-media.is-aimed {
    transform: perspective(1200px) rotateX(calc(var(--art-y,0) * -.8deg)) rotateY(calc(var(--art-x,0) * 1deg));
  }
}
@media (hover: none) {
  .card:hover .card-art { box-shadow: 4px 5px 0 var(--game-accent), 6px 7px 0 var(--ink); }
  .card:hover h3 { color:var(--text); }
  .shot:hover, .thumb:hover, .gthumb:hover, .mini-shots a:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mascot-motion, .mascot-shadow, .stage, .slide-media { transform: none !important; }
  .card:focus-within .card-art, .card:hover .card-art { transform: none; }
  .card:hover .card-art img, .card-foot span:last-child, .crew img { translate: none; }
}
/* Liquid follow-through: the existing paint reacts, then settles within 800ms. */
@keyframes splash-settle {
  0%, 100% { transform: scale(1) skewX(0); }
  22% { transform: scale(1.06,.87) skewX(-2deg); }
  48% { transform: scale(.98,1.09) skewX(1deg); }
  74% { transform: scale(1.015,.98) skewX(0); }
}
/* The egg leads; the keg absorbs the landing and the dotted liquid follows it. */
@keyframes egg-spring {
  0%, 100% { transform: translateY(0) scale(1) rotate(0); }
  14% { transform: translateY(4px) scale(1.025,.95) rotate(-1deg); }
  36% { transform: translateY(-13px) scale(.99,1.015) rotate(2deg); animation-timing-function: cubic-bezier(.42,0,1,1); }
  /* The ink impulse uses this same contact frame, before the landing squash. */
  48% { transform: translateY(0) scale(1) rotate(0); }
  56% { transform: translateY(3px) scale(1.025,.97) rotate(-.7deg); }
  74% { transform: translateY(-3px) scale(.99,1.015) rotate(.5deg); }
  88% { transform: translateY(.8px) scale(1.005,.995) rotate(0); }
}
/* The word shares the egg's wind-up, apex and landing. Em-sized travel keeps
   the playful twist comfortable at phone size without shifting the headline. */
@keyframes crack-spring {
  0%, 100% { transform:translateY(0) rotate(0) scale(1); }
  14% { transform:translateY(.025em) rotate(-1.4deg) scale(1.035,.95); }
  36% { transform:translateY(-.05em) rotate(4deg) scale(.985,1.045); animation-timing-function:cubic-bezier(.42,0,1,1); }
  48% { transform:translateY(0) rotate(-.3deg) scale(1); }
  56% { transform:translateY(.025em) rotate(-1.7deg) scale(1.045,.955); }
  74% { transform:translateY(-.02em) rotate(.9deg) scale(.995,1.02); }
  88% { transform:translateY(.006em) rotate(-.25deg) scale(1.004,.996); }
}
/* Transform-only breaths share a clock and leave a quiet rest between cycles. */
.crack-breath, .crack-word { display: inline-block; transform-origin: 50% 80%; }
/* One flowing horizontal backdrop connects the copy and the opaque mascot. */
.hero-matrix { --matrix-alpha:.6; position:absolute; inset:0; width:100%; height:100%; max-height:640px; z-index:-2; pointer-events:none; overflow:hidden; mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 78%,transparent); }
[data-theme="night"] .hero-matrix { --matrix-alpha:.28; }
.brand-motion .hero-matrix { z-index:-1; }
.brand-motion.launch { background:var(--canvas-start); border-radius:20px; }
.matrix-dot {
  fill:var(--matrix-rest);
  fill:color-mix(in srgb,var(--matrix-ink) var(--liquid-energy,0%),var(--matrix-rest));
  opacity:calc(var(--dot-alpha,.5) * var(--matrix-alpha) * var(--ground-clearance,1));
}
.studio-page .launch-inner { pointer-events:none; }
.studio-page .launch-copy { pointer-events:auto; }
@keyframes matrix-breathe {
  0%, 100% { transform:translateY(0); }
  35% { transform:translateY(-5px); }
  70% { transform:translateY(2px); }
}
@keyframes egg-breathe {
  0%, 18%, 76%, 100% { transform: translateY(0) scale(1); }
  46% { transform: translateY(-.75px) scale(1.007,1.01); }
}
@keyframes crack-breathe {
  0%, 18%, 76%, 100% { transform: translateY(0) scale(1); }
  46% { transform: translateY(-1px) scale(1.014,1.025); }
}
@keyframes keg-recoil {
  0%, 100% { transform: translateY(0) scale(1); }
  14% { transform: translateY(1px) scale(1.012,.99); }
  36% { transform: translateY(0) scale(.995,1.005); }
  56% { transform: translateY(1.5px) scale(1.02,.98); }
  76% { transform: translateY(0) scale(.996,1.004); }
}
/* The egg moves inside the keg. Keep its footprint planted; only the contact
   deepens briefly as the landing transfers weight into the base. */
@keyframes keg-contact {
  0%, 48%, 100% { transform:scale(1); opacity:var(--shadow-contact-opacity,.32); }
  56% { transform:scale(1.04,1.1); opacity:calc(var(--shadow-contact-opacity,.32) * 1.16); }
  72% { transform:scale(1.01,1.02); opacity:calc(var(--shadow-contact-opacity,.32) * 1.04); }
}
@keyframes splash-underline {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.025,.8); }
  64% { transform: scale(.99,1.08); }
}
/* A brief accent peeks out from behind the cover; the image keeps its own clip. */
.grid > .card { isolation: isolate; }
@media (min-width: 350px) {
  .grid > .card::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    top: -21px; right: 12px; width: min(34%,90px); height: 44px;
    background: var(--game-accent); opacity: 0;
    mask: url("/img/brand/brew-splash.svg") center / 100% 100% no-repeat;
    transform-origin: 50% 100%;
  }
}
@keyframes card-splash {
  0%, 100% { opacity: 0; transform: translateY(12px) scale(.82,.55); }
  22% { opacity: 1; transform: translateY(-1px) scale(1.03,1.1); }
  48% { opacity: 1; transform: translateY(2px) scale(.98,.96); }
  72% { opacity: 1; transform: translateY(4px) scale(1,.9); }
}
@keyframes card-touch-splash {
  0% { opacity: .6; transform: translateY(5px) scale(.9,.8); }
  30% { opacity: 1; transform: translateY(1px) scale(1,.96); }
  100% { opacity: 0; transform: translateY(10px) scale(.9,.65); }
}
@keyframes card-touch-rim {
  0%, 100% { box-shadow: 4px 5px 0 var(--game-accent), 6px 7px 0 var(--ink); }
  30% { box-shadow: 4px 5px 0 var(--game-accent), 6px 7px 0 var(--ink), 0 0 0 3px var(--game-accent); }
}
@media (prefers-reduced-motion: no-preference) {
  .launch .egg-breath { transform-box: fill-box; transform-origin: 50% 100%; animation: egg-breathe var(--brand-motion-idle) ease-in-out infinite paused; }
  .crack-breath { animation: crack-breathe var(--brand-motion-idle) ease-in-out infinite paused; }
  .launch.is-idling .egg-breath, .launch.is-idling .crack-breath, .type-motion-grid:has(.launch.is-idling) .crack-breath { animation-play-state: running; }
  .matrix-strand { animation:matrix-breathe var(--brand-motion-idle) ease-in-out infinite paused; animation-delay:calc(var(--strand-phase) * -1s); }
  .matrix-dot { transition:opacity 180ms ease-out; }
  .launch.is-idling .matrix-strand { animation-play-state:running; }
  .hero-matrix.is-playing .matrix-strand, .launch:has(.launch-art.is-splashing) .matrix-strand { animation-play-state:paused; }
  .hero-matrix[data-idle-off] .matrix-strand { animation:none; }
  .launch:has(.launch-art.is-splashing, .hero-matrix.is-playing) .egg-breath,
  :is(.launch,.type-motion-grid):has(.launch-art.is-splashing, .hero-matrix.is-playing) .crack-breath { animation-play-state: paused; }
  .grid > .card.is-splashing:is(:hover, :focus-within)::before { animation: card-splash 740ms var(--motion-ease); }
  .grid > .card.is-splashing.is-touch-splash::before { animation: card-touch-splash var(--brand-motion-touch) var(--motion-ease); }
  .mascot-egg { transform-box: fill-box; transform-origin: 50% 100%; }
  .keg-back, .keg-front { transform-box: view-box; transform-origin: 64px 132px; }
  .shadow-contact { transform-box:fill-box; transform-origin:center; }
  .launch-art.is-splashing .mascot-egg { animation: egg-spring var(--brand-motion-splash) cubic-bezier(.3,.1,.3,1); }
  :is(.launch,.type-motion-grid):has(.launch-art.is-splashing) .crack-word { animation:crack-spring var(--brand-motion-splash) cubic-bezier(.3,.1,.3,1); }
  .launch-art.is-splashing .keg-back, .launch-art.is-splashing .keg-front { animation: keg-recoil var(--brand-motion-splash) var(--motion-ease); }
  .launch-art.is-splashing .shadow-contact { animation:keg-contact var(--brand-motion-splash) cubic-bezier(.3,.1,.3,1); }
  .g-media::before, .crew-mascot::before { transform-origin: 50% 80%; }
  .g-media.is-splashing::before, .crew-mascot.is-splashing::before { animation: splash-settle 700ms var(--motion-ease); }
  .g-media.is-touch-splash::before { animation-duration: var(--brand-motion-touch); }
  .chapter.is-splashing .splash-word::after { animation: splash-underline 650ms var(--motion-ease); transform-origin: left center; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 349px) {
  /* Compact horizontal cards use their rim; no splash near the title. */
  .grid > .card.is-touch-splash .card-art { animation: card-touch-rim var(--brand-motion-touch) var(--motion-ease); }
}
@media (prefers-reduced-motion: reduce) {
  .mascot-egg, .keg-back, .keg-front, .shadow-contact, .crack-word { transform: none !important; }
}