/* Forsidens hero med splashens slåssky, der puffer til logoet, og Fingerspurt-kortet. */
.hero { position: relative; overflow-x: clip; height: calc(var(--logo) * 1.5); --logo: min(46vw, 300px); --cloud: calc(var(--logo) * 1.3); --R: calc(var(--cloud) * 0.6); --sq: 0.3; --boil-ms: 360ms; --lap-ms: 900ms; --limb-lap-ms: 3400ms; --llap: calc(var(--limb-lap-ms) / 2); --fight-ms: 1500ms; --poof-ms: 200ms; --kb-ms: 2200ms; --kb-from: 0.84; }
.hero .center { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }

.hero .logo { position: absolute; left: 0; top: 0; margin: 0; width: var(--logo); transform: translate(-50%, -50%); opacity: 0; animation: logo-in 1ms step-start var(--fight-ms) forwards; }
.hero .logo img { width: 100%; height: auto; animation: kb var(--kb-ms) cubic-bezier(.2,.7,.2,1) var(--fight-ms) forwards; }
@keyframes logo-in { to { opacity: 1; } }
@keyframes kb { from { transform: scale(var(--kb-from)) translateY(4%); } to { transform: scale(1) translateY(0); } }

/* Fem rystelser = kamptiden. */
.hero .cloud { position: absolute; left: 0; top: 0; width: var(--cloud); height: calc(var(--cloud) * 212 / 372); transform: translate(-50%, -50%); animation: shake 0.3s linear 5, cloud-gone 1ms step-start calc(var(--fight-ms) + var(--poof-ms)) forwards; }
@keyframes shake { 0% { translate: 0 0; } 25% { translate: 1.2% -1%; } 50% { translate: -1% 0.8%; } 75% { translate: 0.8% 1.2%; } 100% { translate: 0 0; } }
/* Skyen kan ikke animere sit eget display væk; børnene arver display gennem variablen, og display: none stopper deres uendelige animationer. */
@keyframes cloud-gone { to { visibility: hidden; --cloud-show: none; } }
.hero .cloud > * { display: var(--cloud-show, block); }
.hero .frame { position: absolute; inset: 0; opacity: 0; animation: boil var(--boil-ms) linear infinite; }
.hero .frame svg, .hero .star svg, .hero .dash svg, .hero .puff svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hero .frame.b { animation-delay: calc(var(--boil-ms) * -0.6667); }
.hero .frame.c { animation-delay: calc(var(--boil-ms) * -0.3333); }
@keyframes boil { 0%, 33.32% { opacity: 1; } 33.33%, 100% { opacity: 0; } }

.hero .dashes, .hero .puffs { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.hero .cloud .frames { position: absolute; inset: 0; z-index: 1; }
.hero .orb.back { z-index: 0; }
.hero .orb.front, .hero .dashes { z-index: 2; }
.hero .puffs { z-index: 3; }
.hero .layer { position: absolute; inset: 0; }
.hero .layer.back { z-index: 0; }
.hero .layer.front { z-index: 2; }
.hero .orb { position: absolute; left: 50%; top: 50%; width: 0; height: 0; rotate: var(--tilt); }
.hero .clip { position: absolute; left: calc(var(--cloud) * -0.8); width: calc(var(--cloud) * 1.6); height: calc(var(--cloud) * 0.5); overflow: hidden; }
.hero .back .clip { top: calc(var(--cloud) * -0.5); }
.hero .front .clip { top: 0; }
.hero .squash { position: absolute; left: 50%; width: 0; height: 0; scale: 1 var(--sq); }
.hero .back .squash { top: 100%; }
.hero .front .squash { top: 0; }
.hero .ring { position: absolute; left: calc(var(--R) * -1); top: calc(var(--R) * -1); width: calc(var(--R) * 2); height: calc(var(--R) * 2); animation: ringspin var(--lap) linear infinite; }
.hero .ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero .sp { position: absolute; left: 50%; top: 50%; width: 0; height: 0; rotate: var(--phi); }
.hero .sx { position: absolute; left: 0; top: 0; translate: var(--R) 0; }
.hero .st { position: absolute; left: 0; top: 0; width: 0; height: 0; scale: 1 calc(1 / var(--sq)); animation: counter var(--lap) linear infinite; }
.hero .star { position: absolute; width: calc(var(--cloud) * 0.075); aspect-ratio: 1; translate: -50% -50%; animation: spin 0.9s linear infinite; }
.hero .limbs { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 0; }
.hero .lt { position: absolute; left: 0; top: 0; rotate: var(--lt, 0deg); }
.hero .lx { position: absolute; left: 0; top: 0; animation: lx var(--llap) ease-in-out infinite alternate; animation-delay: var(--dx); }
.hero .ly { animation: ly var(--llap) ease-in-out infinite alternate; animation-delay: calc(var(--dx) - var(--llap) / 2); }
.hero .lr { animation: lr calc(var(--llap) * 2) linear infinite; animation-delay: var(--dx); }
.hero .lp { position: absolute; left: calc(var(--cloud) * -0.04); top: 0; width: calc(var(--cloud) * var(--w)); translate: 0 -50%; transform-origin: 0 50%; animation: lp var(--pm) cubic-bezier(.3,1.5,.5,1) infinite; animation-delay: var(--pd); }
.hero .lp .lf { opacity: 0; animation: boil var(--boil-ms) linear infinite; }
.hero .lp .lf + .lf { position: absolute; left: 0; top: 0; width: 100%; }
.hero .lp .lf.b { animation-delay: calc(var(--boil-ms) * -0.6667); }
.hero .lp .lf.c { animation-delay: calc(var(--boil-ms) * -0.3333); }
.hero .lp svg { width: 100%; height: auto; display: block; overflow: visible; }
@keyframes lx { from { transform: translateX(calc(var(--cloud) * var(--ra, 0.34))); } to { transform: translateX(calc(var(--cloud) * var(--ra, 0.34) * -1)); } }
@keyframes ly { from { transform: translateY(calc(var(--cloud) * var(--rb, 0.1) * -1)); } to { transform: translateY(calc(var(--cloud) * var(--rb, 0.1))); } }
@keyframes lr { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes lp { 0% { transform: translateX(calc(var(--cloud) * -0.1)) rotate(-14deg); } 28% { transform: translateX(calc(var(--cloud) * var(--reach))) rotate(10deg); } 45% { transform: translateX(calc(var(--cloud) * calc(var(--reach) - 0.02))) rotate(4deg); } 70%, 100% { transform: translateX(calc(var(--cloud) * -0.1)) rotate(-14deg); } }
@keyframes ringspin { to { rotate: 360deg; } }
@keyframes counter { from { rotate: calc(var(--phi) * -1); } to { rotate: calc(var(--phi) * -1 - 360deg); } }
@keyframes spin { to { rotate: 360deg; } }
.hero .dash { position: absolute; left: 0; top: 0; width: calc(var(--cloud) * 0.13); aspect-ratio: 4 / 1; rotate: var(--a); transform-origin: 0 50%; }
.hero .dash > div { width: 100%; height: 100%; animation: zip 0.55s ease-out infinite; animation-delay: var(--d); opacity: 0; }
@keyframes zip { 0% { opacity: 0; transform: translateX(calc(var(--cloud) * 0.36)); } 15% { opacity: 1; } 60%, 100% { opacity: 0; transform: translateX(calc(var(--cloud) * 0.6)); } }

.hero .puff { position: absolute; left: 0; top: 0; width: calc(var(--cloud) * var(--s)); aspect-ratio: 1; translate: -50% -50%; opacity: 0; animation: puffout var(--poof-ms) cubic-bezier(.1,.7,.3,1) var(--fight-ms) forwards; }
.hero .frames { animation: poofbody var(--poof-ms) ease-in var(--fight-ms) forwards; }
.hero .dashes, .hero .limbs { animation: fadeout calc(var(--poof-ms) * 0.4) ease-out var(--fight-ms) forwards; }
.hero .orb { animation: starsoff var(--poof-ms) ease-in var(--fight-ms) forwards; }
@keyframes poofbody { 0% { transform: scale(1); opacity: 1; } 35% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes fadeout { to { opacity: 0; } }
@keyframes starsoff { to { transform: scale(1.9); opacity: 0; } }
@keyframes puffout { 0% { opacity: 1; transform: rotate(var(--a)) translateX(calc(var(--cloud) * 0.2)) rotate(calc(var(--a) * -1)) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--cloud) * 0.78)) rotate(calc(var(--a) * -1)) scale(.35); } }

@media (prefers-reduced-motion: reduce) {
  .hero .cloud { display: none; }
  .hero .logo { opacity: 1; animation: none; }
  .hero .logo img { animation: none; }
}

.studio { font-size: clamp(19px, 3vw, 24px); text-align: center; margin: 0 0 28px; }
.card { display: grid; gap: 20px; }
.card-img { width: 100%; height: auto; border: 4px solid var(--ink); border-radius: 12px; }
.card-body h2, .card-body p { margin: 0 0 0.4em; }
.card-body p:last-of-type { margin-bottom: 12px; }
@media (min-width: 720px) { .card { grid-template-columns: 1fr 1fr; align-items: center; } }