/* The contact place: one card falling from the stratosphere. The scene is pinned, scroll is the
   fall, the sky descends behind the card, the card travels left to right, the verso is always the
   Hunter licence back and the recto changes while the card has its back turned. Every size on the
   card is in container units, so the card at 400px is the card at 520px, smaller. */

.about { padding: 0; }
.about__kicker { display: none; }
/* The page opens transparent over the live stratosphere the card just flew into; the painted sky only fades in once the fall begins. */
.view--contact { --v-bg: transparent; scrollbar-width: none; }
.view--contact::-webkit-scrollbar { display: none; }
.view--contact .about { padding: 0; }
.fall__after { background: #03050c; }
.view--contact .view__panel { padding: 0; max-width: none; }

/* ---------- The pinned stage ---------- */

.fall__hold { position: relative; height: 1000dvh; }
.fall__stage { position: sticky; top: 0; height: 100dvh; overflow: hidden; }

/* ---------- The sky, from the stratosphere down ---------- */

.fall__sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.fall__sky::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 400%;
  background: linear-gradient(180deg, #02030a 0%, #060b1f 12%, #0b1e4a 28%, #17457f 46%, #3a86c8 64%, #7fb9e6 82%, #cfe4f4 100%);
  transform: translateY(calc(var(--p, 0) * -75%)); opacity: min(1, calc(var(--p, 0) * 5));
}
.fall__stars {
  position: absolute; left: 0; right: 0; top: 0; height: 160%;
  background-image: radial-gradient(#fff 0.7px, transparent 0.9px), radial-gradient(rgba(255, 255, 255, .6) 0.5px, transparent 0.7px);
  background-size: 160px 160px, 90px 90px; background-position: 0 0, 40px 70px;
  opacity: calc(min(1, calc(var(--p, 0) * 5)) * (1 - var(--p, 0) * 3.2)); transform: translateY(calc(var(--p, 0) * -120%));
}
.fall__sun {
  position: absolute; left: 74%; top: 78%; width: 46vmin; height: 46vmin; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0 14%, #fff1b8 22%, rgba(255, 190, 90, .85) 34%, rgba(255, 130, 60, .35) 52%, rgba(255, 110, 60, 0) 70%);
  filter: blur(4px); transform: translate(-50%, -50%) translateY(calc(var(--p, 0) * 130vh)); opacity: max(0, calc(1 - var(--p, 0) * 2.6));
}
.fall__sun::after { content: ""; position: absolute; left: -120%; right: -120%; top: 42%; height: 26%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 200, 120, .7), rgba(255, 150, 80, .25) 45%, transparent 72%); filter: blur(10px); }
.fall__earth {
  position: absolute; left: 50%; top: 86%; width: 340vmax; height: 340vmax; border-radius: 50%;
  border-top: 2px solid rgba(170, 214, 255, .85);
  background: radial-gradient(ellipse at 50% 0%, rgba(80, 150, 230, .55), rgba(20, 60, 130, .3) 5%, rgba(4, 8, 20, .95) 11%);
  box-shadow: 0 -30px 120px rgba(120, 190, 255, .35);
  transform: translate(-50%, calc(var(--p, 0) * 140vh)); opacity: max(0, calc(1 - var(--p, 0) * 2.4));
}
.fall__cloud {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: calc(var(--w) * .3); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 255, 255, .92), rgba(255, 255, 255, .4) 42%, rgba(255, 255, 255, 0) 70%);
  filter: blur(14px); transform: translateY(calc(var(--p, 0) * var(--d) * -320vh)); opacity: min(1, calc(var(--p, 0) * 5));
}
.fall__lines {
  position: absolute; inset: -20% 0; opacity: var(--drop, 0);
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .22) 0 2px, transparent 2px 38px), repeating-linear-gradient(180deg, transparent 0 17px, rgba(255, 255, 255, .12) 17px 18px, transparent 18px 61px);
  mask: linear-gradient(90deg, #000 0, transparent 30%, transparent 70%, #000);
}

/* Each fight is a tiny, isolated Easter egg inside the atmosphere. The world
   remains the composition; these transparent cutouts never become wallpaper. */
.fall__world { position: absolute; inset: 0; opacity: 0; overflow: hidden; transition: opacity 700ms var(--ease-out); }
.fall__world i, .fall__world svg { position: absolute; display: block; }
.fall__world svg { left: -4%; right: -4%; width: 108%; height: 36%; bottom: 0; }
/* Parallax inside a world: --s runs 0 to 1 while the reader falls through it; the near layer moves most. */
.fall__world .is-far { transform: translateY(calc(var(--s, 0) * -3vh)); }
.fall__world .is-mid { transform: translateY(calc(var(--s, 0) * -7vh)) scale(calc(1 + var(--s, 0) * .04)); }
.fall__world .is-near { transform: translateY(calc(var(--s, 0) * -13vh)) scale(calc(1 + var(--s, 0) * .09)); transform-origin: 50% 100%; }
.about[data-stage="1"] .fall__world--genki, .about[data-stage="2"] .fall__world--namek, .about[data-stage="3"] .fall__world--wasteland { opacity: 1; }
.about[data-stage="4"] .fall__world--wasteland { opacity: calc(1 - var(--land, 0)); }
.about[data-stage="5"] .fall__world--wasteland { opacity: 1; }
.about[data-stage="5"] .fall__world--wasteland svg { transform: translateY(calc((1 - var(--rise, 0)) * 30vh)); }

/* The Genkidama over Namek's night: a violet sky full of sparkles, the sphere and its rays, a moon, the rocky range below. */
.genki__sky { inset: 0; background: linear-gradient(180deg, #1f1657 0%, #3a2585 30%, #5c3ba0 55%, #8a63b9 74%, #5f6e86 88%, #35494a 100%); }
.fall__world .genki__stars { inset: 0; width: 100%; height: 100%; fill: #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .8)); transform: translateY(calc(var(--s, 0) * -3vh)); }
.genki__stars path { animation: twinkle 2.6s ease-in-out infinite alternate; animation-delay: var(--d, 0s); transform-box: fill-box; }
@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }
.genki__planet { right: -8vmin; top: 12%; width: 54vmin; height: 54vmin; border-radius: 50%; transform: translateY(calc(var(--s, 0) * -4vh));
  background: radial-gradient(circle at 38% 34%, #d8dff0 0 8%, #aab6d0 30%, #7d89a8 62%, #4e5876 100%);
  box-shadow: inset -6vmin -4vmin 10vmin rgba(20, 20, 60, .55), 0 0 40px rgba(210, 220, 255, .25); }
.genki__planet::before { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: .5;
  background: radial-gradient(circle at 26% 62%, rgba(60, 70, 100, .7) 0 5%, transparent 7%), radial-gradient(circle at 62% 30%, rgba(60, 70, 100, .7) 0 4%, transparent 6%), radial-gradient(circle at 70% 70%, rgba(60, 70, 100, .6) 0 7%, transparent 9%), radial-gradient(circle at 45% 80%, rgba(60, 70, 100, .6) 0 3%, transparent 5%); }
.genki__rays { left: 50%; top: 34%; width: 92vmin; height: 92vmin; border-radius: 50%; transform: translate(-50%, -50%) translateY(calc(var(--s, 0) * -6vh)); mix-blend-mode: screen; opacity: .9;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0 2.2deg, rgba(220, 235, 255, .9) 2.6deg 3.2deg, rgba(255, 255, 255, 0) 3.8deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 0 26%, #000 30%, rgba(0, 0, 0, .6) 40%, transparent 50%); mask: radial-gradient(circle, transparent 0 26%, #000 30%, rgba(0, 0, 0, .6) 40%, transparent 50%); animation: rays 4s ease-in-out infinite alternate; }
@keyframes rays { to { transform: translate(-50%, -50%) translateY(calc(var(--s, 0) * -6vh)) rotate(4deg) scale(1.06); } }
.genki__bomb { left: 50%; top: 34%; width: 50vmin; height: 50vmin; border-radius: 50%; transform: translate(-50%, -50%) translateY(calc(var(--s, 0) * -6vh));
  background: radial-gradient(circle at 48% 46%, #ffffff 0 34%, #eaf8ff 52%, #9fd8ff 72%, rgba(120, 190, 255, .55) 86%, rgba(120, 190, 255, 0) 100%);
  box-shadow: 0 0 60px 20px rgba(200, 235, 255, .7), 0 0 200px 70px rgba(120, 170, 255, .35); animation: bomb 2.2s ease-in-out infinite alternate; }
@keyframes bomb { to { box-shadow: 0 0 80px 28px rgba(200, 235, 255, .85), 0 0 240px 90px rgba(120, 170, 255, .45); } }
.genki__mounts--far { height: 36%; transform: translateY(calc(var(--s, 0) * -6vh)); opacity: .9; }
.genki__mounts--near { height: 34%; transform: translateY(calc(var(--s, 0) * -12vh)) scale(calc(1 + var(--s, 0) * .08)); transform-origin: 50% 100%; }
.genki__glow { left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, rgba(140, 220, 120, 0), rgba(140, 220, 120, .35)); mix-blend-mode: screen; pointer-events: none; }

/* Namek: a green sky, two suns, blue-green ground and the ajisa trees in three rows. */
.namek__sky { inset: 0; background: linear-gradient(180deg, #d5f7e4 0%, #8ee2bf 34%, #46b992 62%, #2c8f7a 100%); }
.namek__sun { border-radius: 50%; background: radial-gradient(circle, #fffef0 0 40%, rgba(255, 253, 220, .85) 58%, rgba(255, 250, 200, 0) 70%); filter: blur(1px); }
.namek__sun--a { left: 68%; top: 12%; width: 16vmin; height: 16vmin; } .namek__sun--b { left: 20%; top: 22%; width: 9vmin; height: 9vmin; opacity: .85; }
.namek__far { height: 42%; transform: translateY(calc(var(--s, 0) * -3vh)); }
.namek__mid { height: 44%; transform: translateY(calc(var(--s, 0) * -7vh)) scale(calc(1 + var(--s, 0) * .04)); transform-origin: 50% 100%; }
.namek__near { height: 46%; transform: translateY(calc(var(--s, 0) * -13vh)) scale(calc(1 + var(--s, 0) * .09)); transform-origin: 50% 100%; filter: drop-shadow(0 -6px 18px rgba(0, 40, 30, .35)); }

/* The wasteland where the clash happened: pale sky, distant blue ranges, orange mesas, sand and grass. */
.waste__sky { inset: 0; background: linear-gradient(180deg, #3f9fcf 0%, #7fcbe6 38%, #c9e8f0 66%, #e6d9b6 100%); }
.waste__cloud { left: 12%; top: 9%; width: 22vw; height: 6vh; border-radius: 50%; background: radial-gradient(ellipse at 50% 60%, #fff, rgba(255, 255, 255, .5) 55%, transparent 75%); filter: blur(3px); transform: translateX(calc(var(--s, 0) * 6vw)); }
.waste__far { height: 40%; transform: translateY(calc(var(--s, 0) * -3vh)); opacity: .85; }
.waste__mid { height: 46%; transform: translateY(calc(var(--s, 0) * -7vh)) scale(calc(1 + var(--s, 0) * .04)); transform-origin: 50% 100%; }
.waste__near { height: 48%; transform: translateY(calc(var(--s, 0) * -13vh)) scale(calc(1 + var(--s, 0) * .1)); transform-origin: 50% 100%; filter: drop-shadow(0 -8px 22px rgba(120, 70, 20, .25)); }

/* The ground, seen from above as the card comes down: sand, grass, cracks, and the crater Yamcha never left. */
.fall__ground { position: absolute; inset: 0; z-index: 1; opacity: var(--land, 0); perspective: 1100px; perspective-origin: 50% 100%; pointer-events: none; }
.ground__plane { position: absolute; inset: -30% -70%; transform-origin: 50% 100%; -webkit-mask: linear-gradient(180deg, transparent 0, #000 22%, #000 100%); mask: linear-gradient(180deg, transparent 0, #000 22%, #000 100%);
  transform: rotateX(calc(var(--rise, 0) * 58deg)) translateY(calc(var(--rise, 0) * 16vh)) scale(calc(.62 + var(--land, 0) * .38 - var(--rise, 0) * .18));
  background: radial-gradient(ellipse at 50% 50%, #e7c891 0%, #d9b478 55%, #bf9256 100%); }
.ground__cracks { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(110, 70, 30, .35); stroke-width: 3; stroke-linecap: round; }
.ground__patch { position: absolute; border-radius: 50%; background: radial-gradient(ellipse, #5fc65f 0 55%, rgba(80, 180, 80, 0) 75%); opacity: .85; }
.ground__patch--a { left: 30%; top: 30%; width: 16%; height: 12%; } .ground__patch--b { right: 30%; top: 26%; width: 13%; height: 11%; } .ground__patch--c { left: 42%; bottom: 8%; width: 18%; height: 10%; }
.ground__crater { position: absolute; left: 50%; top: 50%; width: min(84vmin, 820px); height: auto; transform: translate(-60%, -46%); filter: drop-shadow(0 0 40px rgba(60, 30, 10, .35)); }
.ground__dust { position: absolute; left: 50%; top: 50%; width: 70vmin; height: 70vmin; border-radius: 50%; transform: translate(-30%, -40%) scale(.2); opacity: 0;
  background: radial-gradient(circle, rgba(232, 208, 160, 0) 40%, rgba(232, 208, 160, .85) 52%, rgba(232, 208, 160, 0) 70%); filter: blur(6px); }
.about[data-stage="4"] .ground__dust, .about[data-stage="5"] .ground__dust { animation: dust 1100ms var(--ease-out) forwards; }
@keyframes dust { 20% { opacity: .9; } to { transform: translate(-30%, -40%) scale(1.5); opacity: 0; } }
/* The card layer follows the ground through the rise, so the landed card stays in the crater. */
.fall__scene { transform-origin: 50% 100%; transform: rotateX(calc(var(--rise, 0) * 58deg)) translateY(calc(var(--rise, 0) * 16vh)) scale(calc(1 - var(--rise, 0) * .18)); }

/* Gohan rises into frame with his father behind him, then the Kamehameha crosses the screen. */
.fall__gohan { position: absolute; left: 6%; bottom: -4%; z-index: 1; height: min(78vh, 720px); aspect-ratio: 232 / 436; pointer-events: none; opacity: min(1, calc(var(--rise, 0) * 3)); transform: translateY(calc((1 - var(--rise, 0)) * 70vh)); }
.gohan__figure { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .6)); }
.gohan__aura { position: absolute; left: 50%; top: 56%; width: 160%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); mix-blend-mode: screen; opacity: calc(var(--rise, 0) * .9);
  background: radial-gradient(circle, rgba(255, 244, 160, .9) 0 18%, rgba(255, 214, 90, .5) 40%, rgba(255, 190, 60, 0) 70%); filter: blur(8px); animation: aura 900ms ease-in-out infinite alternate; }
@keyframes aura { to { transform: translate(-50%, -50%) scale(1.12); } }
.gohan__beam { position: absolute; left: 92%; top: 43%; height: 9vh; width: 120vw; transform-origin: 0 50%; transform: rotate(-9deg) scaleX(0); border-radius: 50% 0 0 50% / 50% 0 0 50%; mix-blend-mode: screen;
  background: linear-gradient(180deg, rgba(120, 200, 255, 0), rgba(160, 230, 255, .9) 25%, #ffffff 50%, rgba(160, 230, 255, .9) 75%, rgba(120, 200, 255, 0)); filter: blur(2px) drop-shadow(0 0 30px #6fd0ff); }
.gohan__flash { position: absolute; inset: -200vh -200vw; background: #dff6ff; opacity: 0; pointer-events: none; }
.about.is-firing .gohan__beam { animation: beam 900ms cubic-bezier(.2, .9, .2, 1) forwards; }
.about.is-firing .gohan__flash { animation: flash 700ms ease-out forwards; }
.about.is-firing .fall__stage { animation: shake 420ms ease-out 1; }
@keyframes beam { 0% { transform: rotate(-9deg) scaleX(0); } 100% { transform: rotate(-9deg) scaleX(1); } }
@keyframes flash { 0% { opacity: 0; } 12% { opacity: .85; } 100% { opacity: 0; } }
@keyframes shake { 0%, 100% { translate: 0 0; } 20% { translate: -8px 4px; } 40% { translate: 7px -5px; } 60% { translate: -5px 3px; } 80% { translate: 3px -2px; } }
.about[data-stage="5"] .fall__copy { top: 16%; transform: none; left: auto; right: var(--gutter); }
.view--contact:has(.about[data-stage="3"]) .view__back, .view--contact:has(.about[data-stage="4"]) .view__back { color: #2a1a0c; }
.about:not([data-stage="0"]) .fall__cloud { opacity: calc(min(1, calc(var(--p, 0) * 5)) * .3 * (1 - var(--land, 0))); }
.fall__lines { opacity: calc(var(--drop, 0) * (1 - var(--land, 0))); }
.fall__egg{position:absolute;z-index:2;width:clamp(140px,19vw,270px);aspect-ratio:1;background-size:contain;background-position:center;background-repeat:no-repeat;opacity:0;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));transition:opacity 380ms ease,transform 700ms var(--ease-out);pointer-events:none}
.fall__egg--beerus{right:5%;top:10%;background-image:url('/media/contact/beerus.webp');transform:translateX(16px) scale(.85)}
.fall__egg--buu{right:3%;top:4%;background-image:url('/media/contact/buu.webp');transform:translateX(16px) scale(.82)}
.fall__egg--namek{right:4%;bottom:8%;background-image:url('/media/contact/namek.webp');transform:translateX(16px) scale(.78)}
.fall__egg--vegeta{left:3%;bottom:7%;width:clamp(150px,20vw,280px);background-image:url('/media/contact/vegeta.webp');transform:translateX(-16px) scale(.84)}
.about[data-stage="0"] .fall__egg--beerus,.about[data-stage="1"] .fall__egg--buu,.about[data-stage="2"] .fall__egg--namek,.about[data-stage="3"] .fall__egg--vegeta{opacity:.94;transform:translateX(0) scale(1)}

.fall__hud {
  position: absolute; left: var(--gutter); bottom: clamp(20px, 4vh, 40px); z-index: 2; display: grid; gap: 6px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 241, 234, .7);
}
.fall__hud b { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- The card ---------- */

.fall__scene { position: absolute; inset: 0; z-index: 1; perspective: 1300px; display: grid; place-items: center; pointer-events: none; }
.card {
  --ry: 0deg; --rx: 0deg; --rz: 0deg; --x: 0vw; --y: 0vh; --scale: 1; --blur: 0px; --tx: 0deg; --ty: 0deg; --gx: 50%; --gy: 40%; --travel: 1; --iy: 0vh; --irz: 0deg; --irx: 0deg;
  --cream: #efe6d2; --cream-2: #e4d8bb; --ink: #241d10; --ink-2: #5a4f38; --line: rgba(36, 29, 16, .28); --accent-card: #b5471e;
  container-type: inline-size; width: min(520px, 92vw); aspect-ratio: 1.586; border-radius: 14px; cursor: pointer; pointer-events: auto;
  transform: translate(calc(var(--x) * var(--travel)), calc(var(--y) + var(--iy))) scale(var(--scale)); filter: blur(var(--blur));
}
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.card__body {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: rotateZ(calc(var(--rz) + var(--irz))) rotateX(calc(var(--rx) + var(--tx) + var(--irx))) rotateY(calc(var(--ry) + var(--ty)));
}
.card__ply { position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(90deg, #8d9098, #d8dbe2 30%, #a3a6ae 55%, #e6e8ee 80%, #9a9da5); transform: translateZ(var(--z)); }
.card__recto, .card__verso {
  position: absolute; inset: 0; border-radius: 14px; overflow: hidden; backface-visibility: hidden;
  transform: translateZ(1.8px); box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .45), 0 0 0 1px rgba(0, 0, 0, .25);
}
.card__verso { transform: rotateY(180deg) translateZ(1.8px); }
.face { position: absolute; inset: 0; padding: 4cqi; font-family: var(--sans); color: var(--ink); background: linear-gradient(155deg, var(--cream), var(--cream-2)); }
.face[hidden] { display: none; }
.face__tex { position: absolute; inset: 0; pointer-events: none; opacity: .07; background: repeating-radial-gradient(circle at 0 0, #000 0, transparent 2px, transparent 6px); }
/* The metal: a brushed grain, a hard specular band that walks with the turn, a bright rim. */
.card__metal {
  position: absolute; inset: 0; pointer-events: none; z-index: 4; mix-blend-mode: overlay; opacity: .65;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 7px),
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .95) 47%, rgba(255, 255, 255, .95) 49%, transparent 58%);
  background-size: 100% 100%, 100% 100%, 260% 100%; background-position: 0 0, 0 0, calc(var(--gx) * 2.6 - 80%) 0;
}
.face__gloss {
  position: absolute; inset: 0; pointer-events: none; z-index: 5; mix-blend-mode: soft-light; opacity: .9;
  background: radial-gradient(farthest-corner at var(--gx) var(--gy), rgba(255, 255, 255, .95), rgba(255, 255, 255, .25) 30%, rgba(255, 255, 255, 0) 62%);
}

/* recto 1: the student card */
.face--camipro { background: linear-gradient(160deg, #ffffff, #eef0f3); color: #111; }
.camipro__top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.camipro__top img { height: 4.6cqi; width: auto; }
.camipro__word { font-weight: 500; font-size: 5cqi; letter-spacing: -.02em; color: #e2001a; line-height: 1; }
.camipro__chip { position: absolute; left: 4cqi; top: 27%; width: 12cqi; height: 9.2cqi; border-radius: 1.4cqi; background: linear-gradient(135deg, #e8cb74, #b98f2b 55%, #ecd58f); box-shadow: inset 0 0 0 .3cqi rgba(0, 0, 0, .18); }
.camipro__chip i { position: absolute; left: 0; right: 0; height: .3cqi; background: rgba(60, 40, 0, .35); }
.camipro__chip i:nth-child(1) { top: 30%; } .camipro__chip i:nth-child(2) { top: 50%; } .camipro__chip i:nth-child(3) { top: 70%; }
.camipro__id { position: absolute; left: 4cqi; bottom: 13%; z-index: 1; }
.camipro__name { margin: 0 0 .8cqi; font-weight: 500; font-size: 4.6cqi; letter-spacing: .02em; line-height: 1.1; }
.camipro__role { margin: 0 0 .8cqi; font-size: 2.8cqi; color: #444; }
.camipro__no { margin: 0; font-family: var(--mono); font-size: 2.1cqi; letter-spacing: .06em; color: #666; }
.camipro__photo { position: absolute; right: 4cqi; top: 22%; width: 22cqi; aspect-ratio: 3 / 4; border-radius: 3px; overflow: hidden; background: #e6e6e6; border: 1px solid rgba(0, 0, 0, .12); }
.camipro__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.camipro__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 7%; background: #e2001a; }

/* recto 2: LinkedIn */
.face--linkedin { background: linear-gradient(160deg, #ffffff, #eef2f6); color: #191919; }
.li__banner { position: absolute; inset: 0 0 auto 0; height: 30%; background: linear-gradient(120deg, #0a66c2, #1f85de 60%, #5aa9ea); }
.li__mark { position: absolute; top: 3.4cqi; right: 4cqi; width: 8cqi; height: 8cqi; border-radius: 1.4cqi; background: #fff; display: grid; place-items: center; }
.li__mark svg { width: 6cqi; height: 6cqi; fill: #0a66c2; }
.li__avatar { position: absolute; left: 4cqi; top: 17%; width: 17cqi; height: 17cqi; border-radius: 50%; overflow: hidden; border: .7cqi solid #fff; background: #dfe6ee; box-shadow: 0 .6cqi 1.6cqi rgba(0, 0, 0, .2); }
.li__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.li__name { position: absolute; left: 4cqi; top: 50%; margin: 0; font-weight: 500; font-size: 4.4cqi; line-height: 1.1; }
.li__head { position: absolute; left: 4cqi; top: 62%; margin: 0; max-width: 58%; font-size: 2.5cqi; line-height: 1.3; color: #444; }
.li__meta { position: absolute; left: 4cqi; bottom: 6%; margin: 0; font-size: 2.2cqi; color: #6b6b6b; }
.li__snap { position: absolute; right: 4cqi; bottom: 8%; width: 24cqi; height: 16cqi; border: 1px solid #dfe3e8; border-radius: 1cqi; padding: 2cqi; display: flex; align-items: flex-end; gap: 1.4cqi; background: #f7f9fb; }
.li__snap i { flex: 1; background: #0a66c2; border-radius: .4cqi .4cqi 0 0; opacity: .85; }
.li__snap i:nth-child(1) { height: 45%; } .li__snap i:nth-child(2) { height: 78%; } .li__snap i:nth-child(3) { height: 100%; }

/* recto 3: the GitHub profile card */
.face--github { background: linear-gradient(160deg, #161b22, #0d1117); color: #e6edf3; }
.gh__avatar { position: absolute; left: 4cqi; top: 4cqi; width: 17cqi; height: 17cqi; border-radius: 50%; overflow: hidden; border: .5cqi solid #30363d; background: #21262d; }
.gh__avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.gh__who { position: absolute; left: 24cqi; right: 12cqi; top: 4.6cqi; }
.gh__name { margin: 0; font-weight: 500; font-size: 4.2cqi; line-height: 1.1; }
.gh__login { margin: .4cqi 0 1.6cqi; font-family: var(--mono); font-size: 2.6cqi; color: #8b949e; }
.gh__bio { margin: 0 0 1.4cqi; font-size: 2.5cqi; line-height: 1.35; color: #c9d1d9; }
.gh__meta { margin: 0; display: flex; flex-wrap: wrap; gap: .4cqi 2.4cqi; font-size: 2.2cqi; color: #8b949e; }
.gh__meta span:last-child { color: #58a6ff; }
.gh__mark { position: absolute; top: 4cqi; right: 4cqi; width: 6cqi; height: 6cqi; fill: #e6edf3; opacity: .9; }
.gh__pins { position: absolute; left: 4cqi; right: 4cqi; bottom: 4cqi; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqi; }
.gh__pins li { display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: .8cqi; padding: 1.6cqi 2cqi; border: 1px solid #30363d; border-radius: 1.2cqi; background: rgba(255, 255, 255, .02); font-size: 2cqi; color: #8b949e; }
.gh__pins b { grid-column: 1 / -1; font-family: var(--mono); font-weight: 500; font-size: 2.5cqi; color: #58a6ff; margin-bottom: .6cqi; }
.gh__pins i { width: 1.6cqi; height: 1.6cqi; border-radius: 50%; background: var(--c); }
.gh__pins span { grid-column: 1 / -1; margin-top: .8cqi; font-size: 2.1cqi; line-height: 1.3; color: #c9d1d9; }

/* recto 4: the airmail envelope */
.face--email { background: linear-gradient(160deg, #f6efdf, #ebe1c9); color: var(--ink); }
.em__edge { position: absolute; inset: 0; pointer-events: none; padding: 1.6cqi; box-sizing: border-box; background: repeating-linear-gradient(45deg, #c8102e 0 3.2cqi, #f6efdf 3.2cqi 6.4cqi, #1d4ea6 6.4cqi 9.6cqi, #f6efdf 9.6cqi 12.8cqi); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; -webkit-mask-composite: xor; opacity: .9; }
.em__avion { position: absolute; left: 6cqi; top: 5cqi; margin: 0; padding: .6cqi 1.6cqi; border: 1px solid #1d4ea6; color: #1d4ea6; font-family: var(--mono); font-size: 2cqi; letter-spacing: .18em; }
.em__stamp { position: absolute; top: 4.6cqi; right: 6cqi; width: 13cqi; height: 15cqi; padding: 1cqi; box-sizing: border-box; background: #fff; display: grid; place-items: center; align-content: center; gap: .6cqi; border: .5cqi dotted #cfc8b8; outline: 1px solid rgba(0, 0, 0, .1); }
.em__stamp img { width: 8cqi; height: auto; }
.em__stamp span { font-family: var(--mono); font-size: 2cqi; letter-spacing: .1em; color: #e2001a; }
.em__post { position: absolute; top: 5.4cqi; right: 21cqi; margin: 0; padding: 1.2cqi 1.8cqi; border: .4cqi double rgba(36, 29, 16, .55); border-radius: 50%; color: rgba(36, 29, 16, .6); font-family: var(--mono); font-size: 1.9cqi; letter-spacing: .1em; text-align: center; transform: rotate(-12deg); }
.em__post small { display: block; font-size: 1.6cqi; margin-top: .3cqi; }
.em__to { position: absolute; left: 12cqi; top: 44%; margin: 0; font-family: "Caveat Brush", cursive; font-size: 5cqi; color: var(--ink-2); }
.em__addr { position: absolute; left: 18cqi; top: 46%; margin: 0; font-family: var(--mono); font-weight: 500; font-size: 3.5cqi; color: #1b1712; }
.em__addr span { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; border-right: .5cqi solid #1b1712; padding-right: .6cqi; animation: em-type 1.6s steps(25, end) 300ms both, em-caret 1s step-end infinite; }
@keyframes em-type { from { width: 0; } to { width: 26ch; } }
@keyframes em-caret { 50% { border-color: transparent; } }
.em__note { position: absolute; left: 18cqi; top: 60%; margin: 0; font-family: "Caveat Brush", cursive; font-size: 3.6cqi; color: var(--ink-2); }
.em__seal { position: absolute; right: 8cqi; bottom: 6cqi; width: 12cqi; height: 12cqi; border-radius: 50%; display: grid; place-items: center; color: #f7c9b6;
  background: radial-gradient(circle at 35% 30%, #d9583a, #a8341f 55%, #7d2114); box-shadow: 0 .8cqi 1.6cqi rgba(0, 0, 0, .35), inset 0 0 0 .8cqi rgba(255, 255, 255, .08), inset 0 -.6cqi 1cqi rgba(0, 0, 0, .3); }
.em__seal::before { content: ""; position: absolute; inset: -1.2cqi; border-radius: 50%; background: radial-gradient(circle, transparent 58%, rgba(168, 52, 31, .55) 62%, transparent 70%); }
.em__seal svg { width: 6cqi; height: 6cqi; fill: currentColor; opacity: .9; }
.face--final{display:grid;align-content:center;justify-items:center;text-align:center;background:radial-gradient(circle at 50% 50%,#eafaff,#87cbe6 52%,#173b64);color:#071b2b}.final__small{margin:0;font:600 2cqi var(--mono);letter-spacing:.18em}.final__mark{position:absolute;right:5cqi;top:3cqi;margin:0;font:700 10cqi serif;color:rgba(255,255,255,.3)}.face--final h3{margin:2cqi 0 1cqi;font:500 7cqi/1 var(--display)}.face--final>p:last-of-type{margin:0;font-size:3cqi}

/* verso: the exact left-hand licence face supplied by the owner, turned on its side. */
.face--verso { padding: 0; background: #0e0e10; }
.verso__port {
  position: absolute; left: 50%; top: 50%; width: 63cqi; height: 96.3cqi; transform: translate(-50%, -50%) rotate(-90deg);
  background: url("/media/scenes/hunter-licence-reference.png") left top / 202.53% 100% no-repeat;
}

.fall__unpin { display: none; }

/* ---------- Copy, dots, the plain list ---------- */

.fall__copy { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: min(32%, 30rem); left: var(--gutter); display: grid; opacity: calc(1 - var(--verso, 0) * 1.6); }
.about[data-stage="4"] .fall__copy, .about[data-stage="5"] .fall__copy { opacity: 1; }
.about[data-stage="5"] .fall__hud, .about[data-stage="4"] .fall__egg { opacity: 0; }
.about[data-side="right"] .fall__copy { left: auto; right: var(--gutter); }
.fall__text { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(12px); transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out), visibility 0s linear 320ms; }
.fall__text[data-active] { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.fall__text h2 { margin: 8px 0 14px; font: 400 clamp(2.4rem, 4.4vw, 3.9rem)/1 'Bangers', 'Permanent Marker', cursive; letter-spacing: .035em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff6b8 0%, #ffd53c 38%, #ff9c1a 66%, #ff5a1f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1px rgba(70, 22, 0, .6);
  filter: drop-shadow(2px 3px 0 #2b1100) drop-shadow(0 10px 22px rgba(0, 0, 0, .55)); }
.fall__text .eyebrow { margin: 0; color: rgba(244, 241, 234, .75); }
.fall__text .lead { margin: 0; max-width: 24rem; color: rgba(244, 241, 234, .85); }
.about[data-stage="3"] .fall__text .lead, .about[data-stage="3"] .fall__text .eyebrow, .about[data-stage="3"] .fall__hud, .about[data-stage="3"] .fall__hud b, .about[data-stage="4"] .fall__hud, .about[data-stage="4"] .fall__hud b { color: #2a1a0c; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.fall__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.view .fall__btn {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; padding: 12px 18px; border-radius: 8px;
  min-height: 44px; display: inline-flex; align-items: center; background: var(--accent); color: #0b1020; border: 1px solid var(--accent); cursor: pointer;
}
.view .fall__btn--ghost { background: rgba(5, 8, 20, .35); color: var(--text); border-color: rgba(244, 241, 234, .35); }
.fall__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .view .fall__btn--ghost:hover { border-color: var(--accent); color: var(--accent); } }

.fall__dots { position: absolute; left: 50%; bottom: clamp(16px, 3vh, 28px); transform: translateX(-50%); z-index: 2; list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.fall__dots button { width: 28px; height: 28px; padding: 0; background: none; border: 0; cursor: pointer; display: grid; place-items: center; }
.fall__dots button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(244, 241, 234, .5); transition: transform 300ms var(--ease-out), background 300ms; }
.fall__dots button[aria-current="true"]::before { background: var(--accent); transform: scale(1.7); box-shadow: 0 0 12px var(--accent); }
.fall__dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 50%; }

.fall__after { list-style: none; margin: 0; padding: 32px var(--gutter) 96px; display: flex; flex-direction: column; gap: 10px; font-family: var(--mono); font-size: .875rem; letter-spacing: .04em; }
.fall__after a { color: var(--text-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.fall__after a:hover, .fall__after a:focus-visible { color: var(--accent); }

/* ---------- Entrance, once, when the view opens ---------- */

/* The card arrives as the licence the reader just watched land, in the same place, then turns over to the student card. */
.view.is-open .card__body { animation: card-turn 900ms var(--ease-in-out) 320ms backwards; }
.view.is-open .fall__copy { animation: fall-in 700ms var(--ease-out) 420ms backwards; }
@keyframes card-turn { from { transform: rotateZ(calc(var(--rz) + var(--irz))) rotateX(calc(var(--rx) + var(--tx) + var(--irx))) rotateY(calc(var(--ry) + var(--ty) + 180deg)); } }
@keyframes fall-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Fallbacks ---------- */

@media (pointer: coarse) { .card { --tx: 0deg; --ty: 0deg; } }

@media (max-width: 900px) {
  .fall__scene { inset: 56px 0 46%; }
  .card { --travel: .12; width: min(88vw, 400px); }
  .fall__copy { top: auto; bottom: 64px; transform: none; width: auto; left: var(--gutter); right: var(--gutter); text-align: center; justify-items: center; transition: none; }
  .about[data-side="right"] .fall__copy { left: var(--gutter); right: var(--gutter); }
  .fall__text .lead { margin: 0 auto; }
  .fall__cta { justify-content: center; }
  .fall__hud { left: auto; right: var(--gutter); bottom: 14px; text-align: right; font-size: 11px; }
  .fall__dots { left: var(--gutter); transform: none; bottom: 14px; gap: 4px; }
  .about[data-stage="4"] .card, .about[data-stage="5"] .card { --travel: 1; }
  .ground__crater { width: 118vmin; transform: translate(-72%, -52%); }
  .fall__gohan { left: -4%; height: min(66vh, 620px); }
}

@media (prefers-reduced-motion: reduce), (max-height: 560px) {
  .fall__hold { height: auto; }
  .fall__stage { position: static; height: auto; padding: 88px var(--gutter) 40px; display: grid; grid-template-columns: 1fr; gap: 24px; overflow: visible; }
  .fall__stars, .fall__earth, .fall__cloud, .fall__lines, .fall__hud, .fall__dots, .fall__world, .fall__egg, .fall__ground, .fall__gohan { display: none; }
  .fall__scene { transform: none; }
  .fall__scene { position: static; inset: auto; display: grid; justify-items: center; gap: 18px; }
  .fall__copy { position: static; transform: none; width: auto; text-align: center; justify-items: center; transition: none; }
  .fall__text .lead { margin: 0 auto; }
  .fall__cta { justify-content: center; }
  .card { transform: none; filter: none; }
  .card__body { transform: none; transition: transform 600ms var(--ease-in-out); }
  .card.is-flipped .card__body { transform: rotateY(180deg); }
  .fall__unpin { display: block; font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; min-height: 44px; padding: 10px 18px; border-radius: 8px; background: var(--bg-2); color: var(--text); border: 1px solid rgba(244, 241, 234, .3); cursor: pointer; }
  .fall__text { visibility: visible; opacity: 1; transform: none; margin-bottom: 20px; }
  .view.is-open .card__body, .view.is-open .fall__copy { animation: none; }
  .em__addr span { animation: none; width: auto; border-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .card__body, .fall__text, .fall__dots button::before { transition-duration: 0.01s; } }