main {
  --aura-x: 0px;
  --aura-y: 0px;
  --gallery-focus: 0;
  --gallery-opacity: 1;
  --gallery-shift: 0px;
  --gallery-y: 0px;
  --gallery-end-correction: 0px;
  --gallery-title-x: 50vw;
  --gallery-title-bottom: 64px;
  --hero-identity-opacity: 1;
  --hero-detail-opacity: 1;
  --compact-opacity: 0;
  --identity-y: 10px;
  --detail-y: 0px;
  --identity-offset: -350px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, .85fr) minmax(380px, 1fr);
  gap: clamp(52px, 8vw, 130px);
  width: min(1240px, calc(100% - 64px));
  height: 100svh;
  margin: 0 auto;
  padding: 0;
}

html,
body { height: 100%; overflow: hidden; overscroll-behavior: none; }

body[data-app="cauldron"] { --app-rgb: 255, 171, 67; }
body[data-app="playcount"] { --app-rgb: 181, 38, 82; }
body[data-app="trai"] { --app-rgb: 242, 112, 101; }

main::before {
  content: "";
  position: fixed;
  z-index: -1;
  top: 28%;
  left: 50%;
  width: min(80vw, 980px);
  aspect-ratio: 1.4;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(var(--app-rgb), .13), rgba(var(--app-rgb), .035) 44%, transparent 72%);
  filter: blur(22px);
  pointer-events: none;
  transform: translate(-50%, -50%) translate3d(var(--aura-x), var(--aura-y), 0);
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}

.wrap { width: auto; margin: 0; }

.hero {
  position: sticky;
  z-index: 1;
  top: 0;
  display: grid;
  height: 100svh;
  align-self: start;
  align-content: center;
  padding: clamp(100px, 14vh, 150px) 0 clamp(72px, 11vh, 110px);
  backface-visibility: hidden;
  isolation: isolate;
}

main.gallery-focused .hero { pointer-events: none; }

.identity {
  display: grid;
  justify-items: start;
  gap: 22px;
  animation: app-identity-arrive .9s .06s cubic-bezier(.16, 1, .3, 1) both;
}

.identity > * { opacity: var(--hero-identity-opacity); will-change: opacity; }

.cosmic-internal .identity,
.cosmic-internal .summary,
.cosmic-internal .screens,
main.gallery-interacted .identity,
main.gallery-interacted .summary,
main.gallery-interacted .screens { animation: none; }

main.identity-in-transit .identity .icon,
main.gallery-focused .identity .icon { animation-play-state: paused; }

.icon {
  width: clamp(66px, 6vw, 82px);
  height: clamp(66px, 6vw, 82px);
  border-radius: 22%;
  object-fit: cover;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .48), 0 0 0 1px rgba(255, 255, 255, .12), 0 0 52px rgba(var(--app-rgb), .16);
  animation: app-icon-drift 6.8s 1.1s ease-in-out infinite alternate;
}

h1 {
  margin: 0;
  color: #f8f9ff;
  font-size: clamp(72px, 8.5vw, 132px);
  font-weight: 400;
  letter-spacing: -.067em;
  line-height: .82;
  text-shadow: 0 0 42px rgba(var(--app-rgb), .12), 0 4px 30px rgba(0, 0, 0, .55);
}

.summary {
  display: grid;
  justify-items: start;
  gap: 25px;
  margin-top: clamp(32px, 5vh, 48px);
  animation: app-summary-arrive .8s .18s cubic-bezier(.16, 1, .3, 1) both;
}

.summary > * {
  opacity: var(--hero-detail-opacity);
  transform: translateY(var(--detail-y));
  will-change: opacity, transform;
}

.app-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.summary p {
  max-width: 480px;
  margin: 0;
  color: rgba(241, 244, 255, .78);
  font-size: clamp(19px, 1.8vw, 25px);
  letter-spacing: -.022em;
  line-height: 1.38;
}

.download {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 2px;
  color: rgba(226, 236, 255, .7);
  font: 10px/1.2 var(--mono);
  letter-spacing: .025em;
  text-decoration: none;
  text-shadow: 0 0 14px rgba(var(--app-rgb), .18);
  transition: color .3s ease, filter .3s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}

.download:hover,
.download:focus-visible { color: #fff; filter: drop-shadow(0 0 9px rgba(var(--app-rgb), .42)); outline: none; transform: translateY(-2px); }

.gallery {
  --gallery-height: 372svh;
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  height: 100svh;
  perspective: 1500px;
  opacity: var(--gallery-opacity);
}

main:not(.gallery-visible) .gallery { pointer-events: none; }

.gallery::before {
  content: "";
  position: fixed;
  z-index: -1;
  top: 50%;
  right: -10vw;
  width: min(65vw, 850px);
  height: 58vh;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(var(--app-rgb), .075), rgba(65, 106, 211, .025) 48%, transparent 72%);
  filter: blur(32px);
  pointer-events: none;
}

.screens {
  --screen-width: min(clamp(240px, 23vw, 286px), calc((100svh - 180px) * .46035));
  --side-spacing: min(clamp(205px, 20vw, 270px), calc(var(--screen-width) * .85 + 76px));
  --side-scale: .72;
  --side-angle: 11deg;
  position: absolute;
  top: 50%;
  width: 100%;
  height: min(76svh, 660px);
  transform: translate3d(var(--gallery-shift), calc(-50% + var(--gallery-y) + var(--gallery-end-correction)), 0);
  animation: gallery-arrive 1s .28s cubic-bezier(.16, 1, .3, 1) both;
  will-change: transform;
  transform-style: preserve-3d;
}

.gallery-title {
  position: fixed;
  z-index: 4;
  top: var(--gallery-title-bottom);
  left: var(--gallery-title-x);
  display: flex;
  width: max-content;
  max-width: calc(100% - 40px);
  margin: 0;
  align-items: center;
  gap: 12px;
  color: rgba(248, 250, 255, .96);
  font: 400 clamp(30px, 3vw, 44px)/1 var(--serif);
  letter-spacing: -.055em;
  text-align: center;
  text-shadow: 0 0 28px rgba(var(--app-rgb), .22), 0 4px 24px rgba(0, 0, 0, .78);
  opacity: var(--compact-opacity);
  transform: translate3d(-50%, -100%, 0);
  pointer-events: none;
  will-change: opacity, transform;
}

.identity-morph {
  position: fixed;
  z-index: 12;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}

.identity-morph-icon,
.identity-morph-title {
  position: absolute;
  display: block;
  margin: 0;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.identity-morph-icon {
  border-radius: 22%;
  object-fit: cover;
  box-shadow: 0 15px 42px rgba(0, 0, 0, .48), 0 0 0 1px rgba(255, 255, 255, .13), 0 0 34px rgba(var(--app-rgb), .17);
}

.identity-morph-title {
  color: #f8f9ff;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.06em;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 36px rgba(var(--app-rgb), .18), 0 4px 28px rgba(0, 0, 0, .65);
}

.gallery-app-icon {
  width: clamp(36px, 3.4vw, 44px);
  height: clamp(36px, 3.4vw, 44px);
  border-radius: 22%;
  object-fit: cover;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .14), 0 0 24px rgba(var(--app-rgb), .18);
}

.screen {
  --scrub-opacity: 0;
  --distance: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--screen-width);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: clamp(18px, 2vw, 27px);
  background: transparent;
  box-shadow: 0 28px 74px rgba(0, 0, 0, .4);
  cursor: default;
  opacity: 0;
  outline: none;
  pointer-events: none;
  transform: translate3d(-50%, -50%, -120px) scale(.82);
  transform-style: preserve-3d;
  transition: transform .52s cubic-bezier(.16, 1, .3, 1), opacity .16s ease;
}

.screen:not([data-position="hidden"]) { will-change: transform, opacity; }

.screen[data-position="previous"],
.screen[data-position="next"] {
  z-index: 1;
  cursor: pointer;
  opacity: var(--side-opacity, .42);
  pointer-events: auto;
}

.screen[data-position="previous"] {
  transform: translate3d(calc(-50% - var(--side-spacing)), -50%, -90px) rotateY(var(--side-angle)) scale(var(--side-scale));
}

.screen[data-position="next"] {
  transform: translate3d(calc(-50% + var(--side-spacing)), -50%, -90px) rotateY(calc(var(--side-angle) * -1)) scale(var(--side-scale));
}

.screen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  background: #0b1020;
  box-shadow: 0 0 0 1px rgba(220, 230, 255, .1), 0 0 48px rgba(var(--app-rgb), .07);
  transform: rotateX(calc(var(--tilt-y, 0) * -1deg)) rotateY(calc(var(--tilt-x, 0) * 1deg));
  transition: transform .32s ease;
  pointer-events: none;
}

.screen[aria-current="true"] {
  --active: 1;
  z-index: 2;
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%, -50%, 0) scale(1);
}

main.gallery-scrubbing .screen {
  z-index: auto;
  cursor: default;
  opacity: var(--scrub-opacity);
  pointer-events: none;
  transform: translate3d(calc(-50% + var(--scrub-x)), -50%, var(--scrub-z)) rotateY(var(--scrub-rotate)) scale(var(--scrub-scale));
  transition: none;
}

/* A hovered outgoing card can retain :hover until the pointer moves. Keep
   hover brightness out of the scrub state so its zero-opacity exit wins. */
main:not(.gallery-scrubbing) .screen[data-position="previous"]:hover,
main:not(.gallery-scrubbing) .screen[data-position="next"]:hover { opacity: .66; }
.screen:focus-visible { box-shadow: 0 0 0 1px rgba(218, 233, 255, .65), 0 0 35px rgba(var(--app-rgb), .25), 0 35px 85px rgba(0, 0, 0, .55); }

.after {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: flex;
  width: max-content;
  justify-content: center;
  gap: 22px;
  margin: 0;
  opacity: 1;
  pointer-events: auto;
  /* The exported screenshots all have 720×1564 intrinsic dimensions. Reserve
     their exact half-height before JavaScript starts, so Support never jumps. */
  transform: translate3d(-50%, calc(var(--screen-width) * 1.0861111111 + 8px), 0);
}

.after a {
  padding: 7px 2px;
  color: rgba(224, 232, 250, .66);
  font: 10px/1 var(--mono);
  text-decoration: none;
  transition: color .25s ease, text-shadow .25s ease;
}

.after a:hover,
.after a:focus-visible { color: #eef4ff; outline: none; text-shadow: 0 0 10px rgba(var(--app-rgb), .35); }

@keyframes app-identity-arrive { from { opacity: 0; filter: blur(6px); transform: translateY(16px) scale(.98); } to { opacity: 1; filter: none; transform: none; } }
@keyframes app-summary-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes gallery-arrive { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: none; } }
@keyframes app-icon-drift { from { transform: translate3d(-2px, -4px, 0) rotate(-1deg); } to { transform: translate3d(3px, 5px, 0) rotate(.9deg); } }

@media (max-width: 900px) {
  main { display: block; width: min(100% - 40px, 680px); }
  .hero { position: absolute; inset: 0; height: 100svh; min-height: 0; text-align: center; }
  .identity,
  .summary { justify-items: center; }
  .summary p { max-width: 600px; }
  .gallery {
    position: absolute;
    inset: 0;
    height: 100svh;
    padding: 0;
  }
  .screens {
    --screen-width: min(62vw, 300px, calc((100svh - 160px) * .46035));
    --side-spacing: min(clamp(150px, 31vw, 245px), calc(var(--screen-width) * .85 + 76px));
    --side-scale: .62;
    --side-angle: 10deg;
    transform: translateY(calc(-50% + var(--gallery-end-correction)));
  }
}

@media (max-width: 520px) {
  main { width: min(100% - 32px, 480px); }
  .hero { min-height: 0; padding: clamp(84px, 13svh, 112px) 0 clamp(64px, 10svh, 90px); }
  .icon { width: 66px; height: 66px; }
  h1 { font-size: clamp(66px, 21vw, 94px); }
  .summary p { font-size: clamp(18px, 5.4vw, 22px); }
  .screens {
    --screen-width: min(76vw, 310px, calc((100svh - 160px) * .46035));
    --side-spacing: 168px;
    --side-scale: .44;
    --side-angle: 8deg;
    --side-opacity: .38;
    height: min(74svh, 620px);
  }
  .gallery-title { gap: 10px; font-size: clamp(28px, 9vw, 38px); }
  .gallery-app-icon { width: 38px; height: 38px; }
}

@media (max-height: 480px) {
  .hero { padding: 66px 0 32px; }
  .identity { gap: 14px; }
  .icon { width: clamp(42px, 10svh, 60px); height: clamp(42px, 10svh, 60px); }
  h1 { font-size: clamp(48px, 11svh, 72px); line-height: .95; }
  .summary { margin-top: 22px; gap: 14px; }
  .summary p { font-size: clamp(16px, 3.1svh, 19px); }
}

@media (prefers-reduced-motion: reduce) {
  main::before { transition: none; }
  .identity,
  .icon,
  .summary,
  .screens,
  .screen img { animation: none; }
  .screen,
  .screen img,
  .download,
  .gallery-title { transition: none; }
}