/* D3MID cloud transition — authoritative final layer. */
main>section>.cloud-gate{
  position:fixed!important;z-index:12!important;inset:0!important;width:100vw!important;height:100svh!important;
  min-height:0!important;overflow:hidden!important;pointer-events:none!important;transform:none!important;
  visibility:hidden!important;opacity:0!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:transparent!important
}
main>section.cloud-active:not(.cloud-current)>.cloud-gate{visibility:hidden!important;opacity:0!important}
main>section.cloud-current>.cloud-gate{visibility:visible!important;opacity:1!important;transition:opacity .42s cubic-bezier(.16,.78,.18,1)!important}
main>section.cloud-current.cloud-finishing>.cloud-gate{opacity:0!important}
@keyframes cloud-near-kick{to{translate:-12vw 8vh;rotate:-2deg}}
@keyframes cloud-mid-kick{to{translate:10vw 6vh;rotate:1.5deg}}
@keyframes cloud-far-kick{to{translate:-6vw 4vh;rotate:-1deg}}
main>section.cloud-finishing>.cloud-gate .voxel-curtain.near .voxel-panel.left{animation:cloud-near-kick .4s cubic-bezier(.12,.82,.18,1) both}
main>section.cloud-finishing>.cloud-gate .voxel-curtain.mid .voxel-panel.right{animation:cloud-mid-kick .42s cubic-bezier(.12,.82,.18,1) both}
main>section.cloud-finishing>.cloud-gate .voxel-curtain.far .voxel-panel.left{animation:cloud-far-kick .44s cubic-bezier(.12,.82,.18,1) both}

/* Soft atmosphere between the voxel banks. It recreates the feeling of
   entering a cloud without ever exposing the edge of a rectangular sprite. */
main>section>.cloud-gate::before{display:none!important;content:none!important}
main>section>.cloud-gate::after{display:none!important;content:none!important}

main>section>.cloud-gate .voxel-curtain.front,
main>section>.cloud-gate .voxel-curtain.back{display:none!important}
main>section>.cloud-gate .voxel-curtain.near,
main>section>.cloud-gate .voxel-curtain.mid,
main>section>.cloud-gate .voxel-curtain.far{display:block!important;position:absolute!important;inset:0!important;opacity:1!important;filter:none!important;background:none!important}
main>section>.cloud-gate .voxel-curtain.near{z-index:3!important}
main>section>.cloud-gate .voxel-curtain.mid{z-index:2!important}
main>section>.cloud-gate .voxel-curtain.far{z-index:1!important}

main>section>.cloud-gate .voxel-panel{
  position:absolute!important;width:66vw!important;height:min(44vw,62svh)!important;min-height:190px!important;max-height:none!important;
  bottom:auto!important;right:auto!important;overflow:visible!important;border:0!important;border-radius:0!important;
  clip-path:none!important;-webkit-mask:none!important;mask:none!important;
  background:transparent url('/cloud-alpha-1.png?v=140') center/contain no-repeat!important;
  box-shadow:none!important;filter:drop-shadow(0 18px 20px #17313c38)!important;mix-blend-mode:normal!important;
  transform-origin:50% 50%!important
}
/* Neutralise the legacy per-depth rules in site.css. Those selectors are
   more specific than the shared panel rule and used to paint an opaque blue
   rectangle behind every mid-depth PNG. */
main>section>.cloud-gate .voxel-curtain.near .voxel-panel,
main>section>.cloud-gate .voxel-curtain.mid .voxel-panel,
main>section>.cloud-gate .voxel-curtain.far .voxel-panel{
  width:66vw!important;height:min(44vw,62svh)!important;min-height:190px!important;max-height:none!important;
  background-color:transparent!important;box-shadow:none!important;
  filter:drop-shadow(0 18px 20px #17313c38)!important;
  transition:none!important;clip-path:none!important;-webkit-mask:none!important;mask:none!important
}
main>section>.cloud-gate .voxel-panel{display:none!important}
main>section>.cloud-gate .voxel-panel::before,
main>section>.cloud-gate .voxel-panel::after{display:none!important;content:none!important;box-shadow:none!important}

main>section>.cloud-gate .voxel-curtain.near .voxel-panel.left{
  display:block!important;top:auto!important;bottom:calc(56svh - 84vw)!important;left:-24vw!important;width:126vw!important;height:84vw!important;
  opacity:var(--cloud-near-opacity,0)!important;
  transform:translate3d(var(--cloud-near-x,0),var(--cloud-near-y,0),40px) scale(var(--cloud-near-scale,.98))!important
}
main>section>.cloud-gate .voxel-curtain.mid .voxel-panel.right{
  display:block!important;top:auto!important;bottom:calc(54svh - 75vw)!important;right:-25vw!important;left:auto!important;width:112vw!important;height:75vw!important;
  opacity:var(--cloud-mid-opacity,0)!important;
  transform:translate3d(var(--cloud-mid-x,0),var(--cloud-mid-y,0),-80px) scaleX(-1) scale(var(--cloud-mid-scale,.86))!important
}
main>section>.cloud-gate .voxel-curtain.far .voxel-panel{
  filter:drop-shadow(0 10px 13px #17313c1f)!important
}
main>section>.cloud-gate .voxel-curtain.far .voxel-panel.left{
  display:block!important;top:auto!important;bottom:calc(50svh - 64vw)!important;left:4vw!important;width:96vw!important;height:64vw!important;
  opacity:var(--cloud-far-opacity,0)!important;
  transform:translate3d(var(--cloud-far-x,0),var(--cloud-far-y,0),-190px) scale(var(--cloud-far-scale,.72))!important
}

/* Every chapter and every depth plane gets a different cloud silhouette. */
main>section[data-chapter="01"]>.cloud-gate .voxel-curtain.far .voxel-panel{background-image:url('/cloud-alpha-2.png?v=140')!important}
main>section[data-chapter="01"]>.cloud-gate .voxel-curtain.mid .voxel-panel{background-image:url('/cloud-alpha-3.png?v=140')!important}
main>section[data-chapter="01"]>.cloud-gate .voxel-curtain.near .voxel-panel{background-image:url('/cloud-alpha-1.png?v=140')!important}
main>section[data-chapter="02"]>.cloud-gate .voxel-curtain.far .voxel-panel{background-image:url('/cloud-alpha-3.png?v=140')!important}
main>section[data-chapter="02"]>.cloud-gate .voxel-curtain.mid .voxel-panel{background-image:url('/cloud-alpha-4.png?v=140')!important}
main>section[data-chapter="02"]>.cloud-gate .voxel-curtain.near .voxel-panel{background-image:url('/cloud-alpha-2.png?v=140')!important}
main>section[data-chapter="03"]>.cloud-gate .voxel-curtain.far .voxel-panel{background-image:url('/cloud-alpha-4.png?v=140')!important}
main>section[data-chapter="03"]>.cloud-gate .voxel-curtain.mid .voxel-panel{background-image:url('/cloud-alpha-1.png?v=140')!important}
main>section[data-chapter="03"]>.cloud-gate .voxel-curtain.near .voxel-panel{background-image:url('/cloud-alpha-3.png?v=140')!important}
main>section[data-chapter="04"]>.cloud-gate .voxel-curtain.far .voxel-panel{background-image:url('/cloud-alpha-1.png?v=140')!important}
main>section[data-chapter="04"]>.cloud-gate .voxel-curtain.mid .voxel-panel{background-image:url('/cloud-alpha-2.png?v=140')!important}
main>section[data-chapter="04"]>.cloud-gate .voxel-curtain.near .voxel-panel{background-image:url('/cloud-alpha-4.png?v=140')!important}
main>section[data-chapter="01"]>.cloud-gate .voxel-curtain.far .voxel-panel.right{background-image:url('/cloud-alpha-4.png?v=140')!important}
main>section[data-chapter="01"]>.cloud-gate .voxel-curtain.mid .voxel-panel.right{background-image:url('/cloud-alpha-1.png?v=140')!important}
main>section[data-chapter="01"]>.cloud-gate .voxel-curtain.near .voxel-panel.right{background-image:url('/cloud-alpha-2.png?v=140')!important}
main>section[data-chapter="02"]>.cloud-gate .voxel-curtain.far .voxel-panel.right{background-image:url('/cloud-alpha-1.png?v=140')!important}
main>section[data-chapter="02"]>.cloud-gate .voxel-curtain.mid .voxel-panel.right{background-image:url('/cloud-alpha-2.png?v=140')!important}
main>section[data-chapter="02"]>.cloud-gate .voxel-curtain.near .voxel-panel.right{background-image:url('/cloud-alpha-3.png?v=140')!important}
main>section[data-chapter="03"]>.cloud-gate .voxel-curtain.far .voxel-panel.right{background-image:url('/cloud-alpha-3.png?v=140')!important}
main>section[data-chapter="03"]>.cloud-gate .voxel-curtain.mid .voxel-panel.right{background-image:url('/cloud-alpha-4.png?v=140')!important}
main>section[data-chapter="03"]>.cloud-gate .voxel-curtain.near .voxel-panel.right{background-image:url('/cloud-alpha-1.png?v=140')!important}
main>section[data-chapter="04"]>.cloud-gate .voxel-curtain.far .voxel-panel.right{background-image:url('/cloud-alpha-2.png?v=140')!important}
main>section[data-chapter="04"]>.cloud-gate .voxel-curtain.mid .voxel-panel.right{background-image:url('/cloud-alpha-3.png?v=140')!important}
main>section[data-chapter="04"]>.cloud-gate .voxel-curtain.near .voxel-panel.right{background-image:url('/cloud-alpha-1.png?v=140')!important}
/* A chapter is one physical card; its internal columns never fly separately. */
main::before{content:none;display:none}
.release,.game-section,.artist{display:block!important}
.chapter-content{position:relative;width:100%;min-width:0}
.release>.chapter-content{display:grid;grid-template-columns:minmax(280px,44%) 1fr;gap:clamp(32px,7vw,100px);align-items:center}
.game-section>.chapter-content{display:grid;grid-template-columns:1.35fr .65fr;align-items:center;gap:clamp(25px,6vw,90px)}
.artist>.chapter-content{display:grid;grid-template-columns:1fr minmax(240px,38%);align-items:center;min-height:calc(90vh - clamp(140px,20vw,300px))}
main>section.reveal>.chapter-content{
  opacity:var(--section-opacity,0)!important;
  transform:perspective(1300px) translate3d(0,var(--section-y,126px),var(--section-z,-420px)) scale(var(--section-scale,.64))!important;
  transform-origin:50% 58%!important;filter:none!important;
  transition:none!important;
  will-change:transform,opacity
}
@keyframes content-arrival-punch{
  0%{scale:1;translate:0 0}
  34%{scale:1.072;translate:0 -5px}
  56%{scale:.982;translate:0 3px}
  76%{scale:1.018;translate:0 -1px}
  100%{scale:1;translate:0 0}
}
main>section.content-punch>.chapter-content{
  animation:content-arrival-punch .39s cubic-bezier(.12,.86,.16,1) both;
  transform-origin:50% 58%!important
}

/* Wide stepped chevron: a down arrow without the cross-like central shaft. */
.scroll{
  width:35px!important;height:35px!important;font-size:0!important;
  background:center/35px 35px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' viewBox='0 0 35 35' shape-rendering='crispEdges'%3E%3Cpath fill='%23090908' d='M0 5h10v10h5v5h5v-5h5V5h10v15h-5v5h-5v5h-5v5h-5v-5h-5v-5H5v-5H0z'/%3E%3Cpath fill='%23f3e4bd' d='M5 10h5v10h5v5h5v-5h5V10h5v10h-5v5h-5v5h-5v-5h-5v-5H5z'/%3E%3Cpath fill='%23fff8df' d='M5 10h3v9h5v3H8v-3H5z'/%3E%3C/svg%3E")!important;
  image-rendering:pixelated;filter:drop-shadow(0 4px 0 #0008) drop-shadow(0 0 7px #f2c37255)
}

@media(pointer:coarse){
  main>section>.cloud-gate .voxel-curtain.near .voxel-panel.left{left:-45vw!important;top:auto!important;bottom:calc(54svh - 116vw)!important;width:174vw!important;height:116vw!important;min-height:120px!important}
  main>section>.cloud-gate .voxel-curtain.mid .voxel-panel.right{right:-46vw!important;top:auto!important;bottom:calc(52svh - 103vw)!important;width:154vw!important;height:103vw!important;min-height:110px!important}
  main>section>.cloud-gate .voxel-curtain.far .voxel-panel.left{left:-14vw!important;top:auto!important;bottom:calc(49svh - 86vw)!important;width:128vw!important;height:86vw!important;min-height:100px!important}
  .release>.chapter-content,.game-section>.chapter-content,.artist>.chapter-content{grid-template-columns:1fr}
  .artist>.chapter-content{min-height:0}
}
@media(prefers-reduced-motion:reduce){main>section.reveal>.chapter-content{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;animation:none!important;scale:1!important;translate:0!important}}
@media(prefers-reduced-motion:reduce){main>section>.cloud-gate .voxel-panel{animation:none!important;translate:0!important;rotate:0deg!important}}

/* A delayed pixel-hand cue for the optional site-breaking game. */
.mine-finger{
  position:absolute;right:34px;bottom:calc(100% + 5px);z-index:2;
  display:block;width:96px;height:96px;pointer-events:none;
  opacity:0;transform:translateY(-2px) scale(.92);transform-origin:50% 100%;
  filter:drop-shadow(0 7px 0 #0009) drop-shadow(0 0 11px #ffc96a66);
  transition:opacity .22s ease,transform .22s ease
}
.mine-finger svg,.hero-game-finger svg{display:block;width:100%;height:100%;overflow:visible;image-rendering:pixelated}
.mine-finger .finger-body,.hero-game-finger .finger-body{fill:#e8a842;stroke:#21160c;stroke-width:1.25;stroke-linejoin:miter}
.mine-finger .finger-lines,.hero-game-finger .finger-lines{fill:none;stroke:#21160c;stroke-width:1.05;stroke-linecap:square;stroke-linejoin:miter}
.mine-finger .finger-light,.hero-game-finger .finger-light{fill:#ffd782}
.mine-finger-ready:not(.mining-seen) .mine-finger{
  opacity:1;animation:mine-finger-point 1.08s cubic-bezier(.3,.02,.2,1) infinite
}
@keyframes mine-finger-point{
  0%,30%,100%{transform:translateY(-9px) scale(.95)}
  54%{transform:translateY(9px) scale(1.045)}
  67%{transform:translateY(1px) scale(1)}
  78%{transform:translateY(6px) scale(1.022)}
}
.mining-seen .mine-finger{opacity:0!important;transform:translateY(15px) scale(.86)!important;animation:none!important}
@media(max-width:760px),(hover:none),(pointer:coarse){.mine-finger{display:none!important}}
@media(prefers-reduced-motion:reduce){.mine-finger{animation:none!important;transform:none!important}}

/* First cue: the same pixel hand points sideways at the game CTA. */
.hero-actions{position:relative!important;padding-left:88px}
.hero-game-finger{
  position:absolute;left:0;top:50%;z-index:2;width:78px;height:78px;
  pointer-events:none;transform-origin:100% 50%;
  filter:drop-shadow(0 6px 0 #0009) drop-shadow(0 0 10px #ffc96a66);
  animation:hero-game-finger-point 1.06s cubic-bezier(.3,.02,.2,1) infinite;
  transition:opacity .22s ease,transform .22s ease
}
@keyframes hero-game-finger-point{
  0%,30%,100%{transform:translate(-9px,-50%) scale(.95)}
  54%{transform:translate(9px,-50%) scale(1.045)}
  67%{transform:translate(1px,-50%) scale(1)}
  78%{transform:translate(6px,-50%) scale(1.022)}
}
.hero-game-seen .hero-game-finger{opacity:0;transform:translate(15px,-50%) scale(.86);animation:none}
@media(pointer:coarse){.hero-actions{padding-left:66px}.hero-game-finger{width:60px;height:60px}}
@media(prefers-reduced-motion:reduce){.hero-game-finger{animation:none!important;transform:translate(0,-50%)!important}}

/* v160: staged hero composition and one-way cloud transitions. */
.hero{isolation:isolate}
.hero-room{z-index:0;opacity:0}
.hero-cast{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none}
.hero-glow{z-index:2}
.hero>.logo,.hero>p,.hero>.hero-actions,.hero>.hero-subscribe,.hero>.scroll{z-index:3;opacity:0;animation:none!important}
.hero>.hero-subscribe{position:relative}
.hero-character{position:absolute;bottom:-4svh;display:block;opacity:0;pointer-events:none}
.hero-character img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;user-select:none}
.hero-character-vor{left:-5vw;width:min(39vw,610px);height:min(73svh,820px)}
.hero-character-monster{left:50%;width:min(37vw,570px);height:min(76svh,850px);translate:-50% 0}
.hero-character-pirate{right:-7vw;width:min(42vw,660px);height:min(71svh,790px)}
.hero-character-pirate img{transform:scaleX(-1)}
.hero-character-ghost{opacity:0;filter:brightness(0) invert(1) sepia(.35) drop-shadow(0 0 5px #fff4d8) drop-shadow(0 0 20px #e7a545);mix-blend-mode:screen}
.hero-character-fill{opacity:0;clip-path:inset(0 0 100% 0);filter:brightness(.46) saturate(.72) drop-shadow(0 22px 18px #000)}
.hero-sequence .hero-room{animation:hero-room-stage .9s cubic-bezier(.2,.78,.2,1) both}
.hero-sequence .hero>.logo{animation:hero-copy-stage .7s cubic-bezier(.16,.82,.22,1) .48s both!important}
.hero-sequence .hero>p{animation:hero-copy-stage .62s ease-out .72s both!important}
.hero-sequence .hero>.hero-actions{animation:hero-copy-stage .62s ease-out .94s both!important}
.hero-sequence .hero>.hero-subscribe{animation:hero-copy-stage .62s ease-out 1.08s both!important}
.hero-sequence .hero>.scroll{animation:hero-scroll-stage .55s ease-out 2.25s both,bob 1s ease-in-out 2.8s infinite alternate!important}
.hero-cast-ready .hero-character{animation:hero-character-stage .68s ease-out both}
.hero-cast-ready .hero-character-vor{animation-delay:0s}.hero-cast-ready .hero-character-monster{animation-delay:.34s}.hero-cast-ready .hero-character-pirate{animation-delay:.68s}
.hero-cast-ready .hero-character-ghost{animation:hero-character-ghost .58s ease-out both}
.hero-cast-ready .hero-character-vor .hero-character-ghost{animation-delay:0s}.hero-cast-ready .hero-character-monster .hero-character-ghost{animation-delay:.34s}.hero-cast-ready .hero-character-pirate .hero-character-ghost{animation-delay:.68s}
.hero-cast-ready .hero-character-fill{animation:hero-character-fill .78s cubic-bezier(.16,.8,.2,1) both}
.hero-cast-ready .hero-character-vor .hero-character-fill{animation-delay:.17s}.hero-cast-ready .hero-character-monster .hero-character-fill{animation-delay:.51s}.hero-cast-ready .hero-character-pirate .hero-character-fill{animation-delay:.85s}
@keyframes hero-room-stage{from{opacity:0;transform:translateY(calc(var(--scroll)*.13px)) scale(1.17);filter:brightness(.22) saturate(.35)}to{opacity:1;transform:translateY(calc(var(--scroll)*.13px)) scale(1.08);filter:brightness(.6) saturate(.7)}}
@keyframes hero-copy-stage{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes hero-scroll-stage{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hero-character-stage{from{opacity:0}to{opacity:1}}
@keyframes hero-character-ghost{0%{opacity:0;scale:1.045}28%,62%{opacity:.86;scale:1}100%{opacity:0;scale:.985}}
@keyframes hero-character-fill{0%{opacity:0;clip-path:inset(0 0 100% 0);filter:brightness(2.1) saturate(0) drop-shadow(0 0 15px #f6d897)}24%{opacity:.72}100%{opacity:.86;clip-path:inset(0);filter:brightness(.46) saturate(.72) drop-shadow(0 22px 18px #000)}}

/* About: copy first, then a directional fade of the character on the right. */
.artist:not(.artist-cast-in) .artist-copy{opacity:0!important}
.artist.artist-cast-in .artist-copy{animation:artist-copy-stage .64s cubic-bezier(.18,.8,.22,1) .05s both}
@keyframes artist-copy-stage{from{opacity:0;translate:-34px 16px;filter:blur(8px)}to{opacity:1;translate:0 0;filter:none}}

/* Clean MIT-licensed Bootstrap hand replaces the muddy pixel drawing. */
.mine-finger img,.hero-game-finger img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 2px 0 #21160c)}
.hero-game-finger img{transform:rotate(90deg)}.mine-finger img{transform:rotate(180deg)}

@media(pointer:coarse){.hero-character-vor{left:-17vw;width:62vw;height:56svh}.hero-character-monster{width:54vw;height:59svh}.hero-character-pirate{right:-20vw;width:65vw;height:55svh}}
@media(prefers-reduced-motion:reduce){
  .hero-room,.hero>.logo,.hero>p,.hero>.hero-actions,.hero>.hero-subscribe,.hero>.scroll,.hero-character,.hero-character-fill,.artist .artist-copy{opacity:1!important;animation:none!important;transform:none!important;translate:0!important;scale:1!important;filter:none!important;clip-path:none!important}
  .hero-character-ghost{display:none!important}
}

/* The game cast enters one by one after the promo chapter reaches its mark. */
.game-section:not(.game-cast-in) .game-vor,
.game-section:not(.game-cast-in) .game-monster,
.game-section:not(.game-cast-in) .game-pirate{opacity:0!important}
.game-scene::after{
  content:"";position:absolute;z-index:0;left:5%;right:5%;bottom:3%;height:22%;
  pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,#000e 0 28%,#0009 48%,transparent 74%);
  filter:blur(12px);transform:scale(.58,.38);transform-origin:50% 100%
}
.game-section.game-cast-in .game-scene::after{animation:game-cast-shadow .5s cubic-bezier(.16,.8,.2,1) .28s both}
.game-section.game-cast-in .game-vor{animation:game-cast-left .72s cubic-bezier(.12,.82,.16,1) .58s both}
.game-section.game-cast-in .game-monster{animation:game-cast-depth .76s cubic-bezier(.12,.82,.16,1) .94s both}
.game-section.game-cast-in .game-pirate{animation:game-cast-right .74s cubic-bezier(.12,.82,.16,1) 1.3s both}
@keyframes game-cast-shadow{
  0%{opacity:0;transform:scale(.58,.25)}
  100%{opacity:.78;transform:scale(1,.58)}
}
@keyframes game-cast-left{
  0%{opacity:0;translate:-150px 54px;scale:.76}
  62%{opacity:.94;translate:10px -5px;scale:1.035}
  82%{translate:-3px 2px;scale:.992}
  100%{opacity:.86;translate:0 0;scale:1}
}
@keyframes game-cast-depth{
  0%{opacity:0;translate:0 74px;scale:.48}
  60%{opacity:.92;translate:0 -7px;scale:1.055}
  82%{translate:0 2px;scale:.987}
  100%{opacity:.84;translate:0 0;scale:1}
}
@keyframes game-cast-right{
  0%{opacity:0;translate:150px 48px;scale:.76}
  62%{opacity:.94;translate:-10px -4px;scale:1.035}
  82%{translate:3px 2px;scale:.992}
  100%{opacity:.86;translate:0 0;scale:1}
}
@media(prefers-reduced-motion:reduce){
  .game-section .game-vor,.game-section .game-monster,.game-section .game-pirate{opacity:.82!important;animation:none!important;translate:0!important;scale:1!important}
  .game-scene::after{display:none!important}
}

/* About chapter: copy first, contact shadow second, D3MID takes the stage last. */
.artist:not(.artist-cast-in) .artist-figure::after,
.artist:not(.artist-cast-in) .artist-figure .avatar{opacity:0!important}
.artist .artist-figure::after{left:13%!important;right:13%!important;bottom:-.3%!important;height:6.2%!important}
.artist.artist-cast-in .artist-figure::after{animation:artist-stage-shadow .54s cubic-bezier(.16,.8,.2,1) .34s both}
.artist.artist-cast-in .artist-figure .avatar{animation:artist-stage-enter 1.02s cubic-bezier(.12,.82,.16,1) .68s both}
@keyframes artist-stage-shadow{
  0%{opacity:0;scale:.42 .3}
  100%{opacity:1;scale:1 1}
}
@keyframes artist-stage-enter{
  0%{opacity:0;translate:0 86px;scale:.68}
  62%{opacity:1;translate:0 -8px;scale:1.035}
  82%{translate:0 3px;scale:.992}
  100%{opacity:1;translate:0 0;scale:1}
}
.artist:not(.artist-cast-in) .subscribe-links>a{opacity:0!important}
.artist.artist-cast-in .subscribe-links>a{
  animation-name:social-icon-stage-in,subscribe-nudge-v90;
  animation-duration:.48s,6s;
  animation-timing-function:cubic-bezier(.14,.8,.18,1),ease-in-out;
  animation-iteration-count:1,infinite;
  animation-fill-mode:both,none
}
.artist.artist-cast-in .subscribe-links>a:nth-child(1){animation-delay:.16s,2.35s}
.artist.artist-cast-in .subscribe-links>a:nth-child(2){animation-delay:.44s,3.35s}
.artist.artist-cast-in .subscribe-links>a:nth-child(3){animation-delay:.72s,4.35s}
.artist.artist-cast-in .subscribe-links>a:nth-child(4){animation-delay:1s,5.35s}
.artist.artist-cast-in .subscribe-links>a:nth-child(5){animation-delay:1.28s,6.35s}
@keyframes social-icon-stage-in{
  0%{opacity:0;translate:-20px 13px;scale:.62;rotate:-8deg}
  66%{opacity:1;translate:3px -3px;scale:1.07;rotate:2deg}
  100%{opacity:1;translate:0 0;scale:1;rotate:0deg}
}
@media(prefers-reduced-motion:reduce){
  .artist .artist-figure::after,.artist .artist-figure .avatar,.artist .subscribe-links>a{opacity:1!important;animation:none!important;translate:0!important;scale:1!important;rotate:0deg!important}
}

/* Mobile composition: fit the full hero, preserve the room, simplify clouds. */
@media(pointer:coarse){
  html,body{max-width:100%!important;overflow-x:clip!important;overscroll-behavior-x:none!important}
  body{touch-action:pan-y pinch-zoom;overscroll-behavior-y:contain}
  .hero{
    min-height:100svh!important;padding:24px 5vw 56px!important;gap:10px!important;
    align-content:center!important;justify-items:center!important;text-align:center!important
  }
  .hero>.logo{width:min(80vw,420px)!important;max-height:23svh!important;object-fit:contain!important}
  .hero>p{font-size:9px!important;letter-spacing:.2em!important;text-align:center!important}
  .hero-actions{
    width:100%!important;max-width:330px!important;padding-left:0!important;margin-inline:auto!important;
    display:grid!important;grid-template-columns:1fr!important;justify-items:stretch!important;gap:8px!important
  }
  .hero-actions .button{width:100%!important;min-height:43px!important;padding:9px 12px!important;font-size:12px!important;text-align:center!important}
  .hero-actions .button.ghost{color:#fff!important}
  .hero-game-finger{display:none!important}
  .hero-subscribe{margin-top:6px!important;align-items:center!important}
  .hero-subscribe .subscribe-label{margin-bottom:8px!important;font-size:8px!important}
  .hero-subscribe .subscribe-links{justify-content:center!important;gap:7px!important;flex-wrap:nowrap!important}
  .hero-subscribe .subscribe-links>a,.hero-subscribe .subscribe-links>span{width:43px!important;height:43px!important}
  .hero-subscribe .subscribe-links svg{width:22px!important;height:22px!important}
  .hero-room{background-position:center!important}
  .hero-character{bottom:-8svh!important}
  .hero-character-vor{left:-12vw!important;width:48vw!important;height:44svh!important}
  .hero-character-monster{width:44vw!important;height:48svh!important}
  .hero-character-pirate{right:-15vw!important;width:50vw!important;height:44svh!important}
  .hero-cast-ready .hero-character{animation-name:hero-character-stage-mobile!important}
  @keyframes hero-character-stage-mobile{from{opacity:0}to{opacity:.74}}
  main>section>.cloud-gate .voxel-curtain.far{display:none!important}
  main>section>.cloud-gate .voxel-curtain.near .voxel-panel.left{bottom:calc(40svh - 116vw)!important}
  main>section>.cloud-gate .voxel-curtain.mid .voxel-panel.right{bottom:calc(36svh - 103vw)!important}
}

/* v162 — the game promo is a large, layered horror scene, not a character row. */
.game-section{
  left:50%!important;width:100vw!important;min-height:108svh!important;margin-left:-50vw!important;
  padding-block:clamp(90px,10vh,150px)!important;
  background:radial-gradient(ellipse at 35% 56%,#5c21175c 0,transparent 48%),linear-gradient(180deg,#070707,#020303 82%)!important
}
.game-section>.chapter-content{
  width:min(1500px,94vw)!important;margin-inline:auto!important;
  grid-template-columns:minmax(0,1.55fr) minmax(300px,.55fr)!important;gap:clamp(28px,5vw,86px)!important
}
.game-scene{min-height:min(76vw,850px)!important;isolation:isolate!important}
.game-room{inset:5% -7%!important;width:114%!important;height:90%!important;filter:brightness(.48) saturate(.67)!important}
.game-vor{z-index:4!important;left:-4%!important;bottom:4%!important;height:76%!important}
.game-monster{z-index:2!important;left:36%!important;bottom:20%!important;height:57%!important;filter:brightness(.38) saturate(.62) drop-shadow(0 18px 15px #000)!important}
.game-pirate{z-index:5!important;right:-7%!important;bottom:-3%!important;height:83%!important}
.game-scene::after{z-index:3!important;left:-2%!important;right:-2%!important;bottom:0!important;height:25%!important}
.game-copy h2{font-size:clamp(58px,7.2vw,116px)!important}
.game-copy .button.primary{min-height:58px!important;padding:15px 26px!important;font-size:17px!important;box-shadow:0 8px 0 #7d470d,0 18px 45px #000b!important}

@media(pointer:coarse){
  .game-section{min-height:104svh!important;padding-block:76px 88px!important}
  .game-section>.chapter-content{width:92vw!important;grid-template-columns:1fr!important;gap:22px!important}
  .game-copy{order:-1!important}
  .game-copy h2{font-size:clamp(48px,14vw,76px)!important}
  .game-copy>p{font-size:15px!important;line-height:1.42!important}
  .game-copy .button.primary{width:100%!important;min-height:54px!important;font-size:15px!important}
  .game-scene{min-height:min(103vw,520px)!important;margin-inline:-3vw!important}
  .game-room{inset:7% -11%!important;width:122%!important;height:88%!important}
  .game-vor{left:-12%!important;bottom:5%!important;height:70%!important}
  .game-monster{left:34%!important;bottom:23%!important;height:52%!important}
  .game-pirate{right:-15%!important;bottom:-2%!important;height:78%!important}
}

/* v163 — smooth arrivals: acceleration at the end, never a block shake. */
main>section.content-punch>.chapter-content{animation:none!important}
.hero>.logo{background:transparent!important;box-shadow:none!important}
.hero-glow{display:none!important;background:none!important;filter:none!important}
.hero>.logo{filter:drop-shadow(0 18px 25px #000)!important}
@keyframes game-cast-left{
  from{opacity:0;translate:-120px 44px;scale:.82;filter:grayscale(1) brightness(2.2) contrast(1.55) drop-shadow(0 0 14px #ffe0a2)}
  to{opacity:.9;translate:0 0;scale:1;filter:brightness(.54) saturate(.72) drop-shadow(0 20px 16px #000)}
}
@keyframes game-cast-depth{
  from{opacity:0;translate:0 68px;scale:.58;filter:grayscale(1) brightness(2.1) contrast(1.55) drop-shadow(0 0 13px #ffe0a2)}
  to{opacity:.78;translate:0 0;scale:1;filter:brightness(.38) saturate(.62) drop-shadow(0 18px 15px #000)}
}
@keyframes game-cast-right{
  from{opacity:0;translate:130px 48px;scale:.8;filter:grayscale(1) brightness(2.2) contrast(1.55) drop-shadow(0 0 14px #ffe0a2)}
  to{opacity:.92;translate:0 0;scale:1;filter:brightness(.54) saturate(.72) drop-shadow(0 20px 16px #000)}
}
@media(pointer:coarse){
  .game-copy .eyebrow{font-size:12px!important;letter-spacing:.21em!important}
  .game-copy h2{font-size:clamp(62px,17vw,82px)!important;line-height:.84!important;margin:.16em 0!important}
  .game-copy>p{font-size:18px!important;line-height:1.42!important;color:#d4d2cb!important}
  .game-copy>small{font-size:12px!important;line-height:1.35!important;color:#a9aca7!important}
  .game-copy .button.primary{min-height:60px!important;font-size:17px!important}
}

/* v164 — mobile clips arrive as three scroll-driven beats. Desktop is intact. */
@media(pointer:coarse){
  .clips .section-title{
    opacity:var(--clip-title,0)!important;
    transform:translateY(calc((1 - var(--clip-title,0))*34px)) scale(calc(.92 + var(--clip-title,0)*.08))!important;
    transform-origin:50% 100%!important;will-change:transform,opacity
  }
  .clips .cards{overflow:visible!important}
  .clips .card:nth-child(1){
    opacity:var(--clip-first,0)!important;
    transform:translateY(calc((1 - var(--clip-first,0))*72px)) scale(calc(.82 + var(--clip-first,0)*.18))!important;
    transform-origin:50% 100%!important;will-change:transform,opacity
  }
  .clips .card:nth-child(2){
    opacity:var(--clip-second,0)!important;
    transform:translateY(calc((1 - var(--clip-second,0))*86px)) scale(calc(.8 + var(--clip-second,0)*.2))!important;
    transform-origin:50% 100%!important;will-change:transform,opacity
  }
}

/* v170 — strict portrait composition for the opening and release cover. */
@media(orientation:portrait) and (pointer:coarse){
  .hero{
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    width:100%!important;min-height:100svh!important;padding:34px max(18px,env(safe-area-inset-right)) 58px max(18px,env(safe-area-inset-left))!important;
    gap:11px!important;text-align:center!important
  }
  .hero>.logo{display:block!important;width:min(84vw,420px)!important;height:auto!important;max-height:22svh!important;margin:0 auto!important}
  .hero>p{width:100%!important;margin:0 auto!important;text-align:center!important}
  .hero-actions{width:min(88vw,340px)!important;max-width:340px!important;margin:3px auto 0!important;padding:0!important}
  .hero-actions .button{width:100%!important;max-width:340px!important;margin:0!important}
  .hero-subscribe{width:100%!important;max-width:360px!important;margin:27px auto 0!important;align-items:center!important}
  .hero-subscribe .subscribe-links{width:100%!important;justify-content:center!important}
  .hero>.scroll{left:50%!important;right:auto!important;bottom:max(13px,env(safe-area-inset-bottom))!important;margin-left:-14px!important}
  .release .cover-wrap{width:min(78vw,310px)!important;max-width:310px!important;margin-inline:auto!important}
  .release-cover{width:100%!important;max-width:310px!important;margin-inline:auto!important}
  .release{padding-block:58px 68px!important}
  .release>.chapter-content{gap:22px!important}
  .release-copy{text-align:center!important}
  .release-copy .eyebrow{margin-bottom:7px!important}
  .release-copy h1{margin:0 0 12px!important;font-size:clamp(48px,14vw,64px)!important;line-height:.9!important}
  .release-copy .lead{margin:0 auto!important;max-width:340px!important;font-size:15px!important;line-height:1.42!important}
  .release-copy .links{justify-content:center!important;gap:7px!important;margin-top:16px!important}
  .release-copy .links a{min-height:42px!important;padding:9px 12px!important;font-size:11px!important}
}

/* v174 — stable first paint is mobile-only; desktop never waits for a layout pass. */
@media(pointer:coarse){html.site-booting main,html.site-booting footer{visibility:hidden!important}}
@media(orientation:portrait) and (pointer:coarse){
  .hero-subscribe .subscribe-links{
    display:flex!important;grid-template-columns:none!important;flex-wrap:nowrap!important;
    align-items:center!important;justify-content:center!important;width:100%!important;height:43px!important
  }
  .hero-subscribe .subscribe-links>a,.hero-subscribe .subscribe-links>span{flex:0 0 43px!important}
}

/* v165 — phone-only game sequence, continuously driven by scroll. */
@media(pointer:coarse){
  .game-section .game-copy{
    opacity:var(--game-copy-stage,0)!important;
    transform:translateY(calc((1 - var(--game-copy-stage,0))*46px)) scale(calc(.91 + var(--game-copy-stage,0)*.09))!important;
    transform-origin:50% 100%!important;will-change:transform,opacity
  }
  .game-section .game-scene{
    opacity:var(--game-scene-stage,0)!important;
    transform:translateY(calc((1 - var(--game-scene-stage,0))*92px)) scale(calc(.82 + var(--game-scene-stage,0)*.18))!important;
    transform-origin:50% 100%!important;will-change:transform,opacity
  }
  .game-section.content-punch .chapter-content,
  .game-section.content-punch .game-copy,
  .game-section.content-punch .game-scene{animation:none!important}
}

/* v167 — give the mobile subscribe row its own breathing room. */
@media(pointer:coarse){
  .hero-subscribe{margin-top:28px!important}
  .hero-subscribe .subscribe-label{margin-bottom:10px!important}
}

/* v174 — the pedestal removal was requested for mobile only. */
@media(pointer:coarse){.artist .artist-figure::after{display:none!important}}
@keyframes artist-stage-enter{
  from{opacity:0;translate:0 44px;scale:.94;filter:blur(9px) brightness(1.15)}
  to{opacity:1;translate:0 0;scale:1;filter:drop-shadow(0 18px 14px #000a)}
}

/* v175 — exact original desktop hero: room + warm logo glow, no monsters. */
@media(min-width:761px) and (hover:hover) and (pointer:fine){
  .hero-cast{display:none!important}
  .hero-glow{
    display:block!important;width:min(80vw,880px)!important;aspect-ratio:1!important;
    border-radius:50%!important;background:#e2861833!important;filter:blur(90px)!important
  }
  .hero>.logo{
    background:transparent!important;box-shadow:none!important;
    filter:drop-shadow(0 22px 35px #000) drop-shadow(0 0 38px #f90a)!important
  }
}

/* v169 — hard mobile width guards for the game and About copy. */
@media(pointer:coarse){
  .game-section>.chapter-content,.game-copy,.artist>.chapter-content,.artist-copy{
    width:100%!important;max-width:100%!important;min-width:0!important
  }
  .game-copy,.artist-copy{padding-inline:2px!important;overflow:hidden!important}
  .game-copy h2{
    width:100%!important;max-width:100%!important;font-size:clamp(52px,15vw,72px)!important;
    overflow-wrap:break-word!important;word-break:normal!important
  }
  .game-copy>p,.game-copy>small,.artist-copy>p{width:100%!important;max-width:100%!important;overflow-wrap:anywhere!important}
  .game-copy .button.primary{
    display:flex!important;width:100%!important;max-width:100%!important;margin-inline:0!important;
    padding-inline:12px!important;text-align:center!important
  }
  .artist-copy h2{width:100%!important;max-width:100%!important;font-size:clamp(48px,14vw,68px)!important;overflow-wrap:anywhere!important}
  .artist-copy .subscribe-links{
    display:flex!important;width:100%!important;max-width:100%!important;justify-content:center!important;
    align-items:center!important;flex-wrap:wrap!important;gap:12px!important
  }
}

/* v160 final choreography overrides: contour-to-colour cast and soft artist fade. */
@keyframes game-cast-left{0%{opacity:0;translate:-150px 54px;scale:.76;filter:grayscale(1) brightness(2.8) contrast(2) drop-shadow(0 0 17px #ffe0a2)}34%{opacity:.78;filter:grayscale(1) brightness(2.8) contrast(2) drop-shadow(0 0 17px #ffe0a2)}68%{opacity:.94;translate:10px -5px;scale:1.035;filter:brightness(.72) saturate(.45) drop-shadow(0 20px 16px #000)}82%{translate:-3px 2px;scale:.992}100%{opacity:.86;translate:0 0;scale:1;filter:brightness(.52) saturate(.7) drop-shadow(0 20px 16px #000)}}
@keyframes game-cast-depth{0%{opacity:0;translate:0 74px;scale:.48;filter:grayscale(1) brightness(2.8) contrast(2) drop-shadow(0 0 17px #ffe0a2)}34%{opacity:.76;filter:grayscale(1) brightness(2.8) contrast(2) drop-shadow(0 0 17px #ffe0a2)}68%{opacity:.92;translate:0 -7px;scale:1.055;filter:brightness(.7) saturate(.42) drop-shadow(0 20px 16px #000)}82%{translate:0 2px;scale:.987}100%{opacity:.84;translate:0 0;scale:1;filter:brightness(.52) saturate(.7) drop-shadow(0 20px 16px #000)}}
@keyframes game-cast-right{0%{opacity:0;translate:150px 48px;scale:.76;filter:grayscale(1) brightness(2.8) contrast(2) drop-shadow(0 0 17px #ffe0a2)}34%{opacity:.78;filter:grayscale(1) brightness(2.8) contrast(2) drop-shadow(0 0 17px #ffe0a2)}68%{opacity:.94;translate:-10px -4px;scale:1.035;filter:brightness(.72) saturate(.45) drop-shadow(0 20px 16px #000)}82%{translate:3px 2px;scale:.992}100%{opacity:.86;translate:0 0;scale:1;filter:brightness(.52) saturate(.7) drop-shadow(0 20px 16px #000)}}
@keyframes artist-stage-enter{0%{opacity:0;translate:74px 18px;scale:.96;filter:blur(13px) brightness(1.8)}42%{opacity:.64;filter:blur(3px) brightness(1.18)}100%{opacity:1;translate:0 0;scale:1;filter:none}}

/* v180 — complete portrait composition for phones and portrait iPads. */
@media(orientation:portrait) and (pointer:coarse){
  html,body{width:100%!important;max-width:100%!important;overflow-x:clip!important}
  main{width:100%!important;max-width:100%!important}
  main>section{
    width:100%!important;min-height:0!important;
    padding:clamp(44px,12vw,72px) max(16px,5vw)!important
  }
  .release,.clips,.game-section,.artist{contain-intrinsic-size:520px!important}

  .hero{
    min-height:100svh!important;padding:clamp(24px,7vw,44px) max(16px,5vw) max(50px,12vw)!important;
    gap:clamp(7px,2.4vw,12px)!important
  }
  .hero>.logo{width:min(72vw,330px)!important;max-height:20svh!important}
  .hero>p{font-size:clamp(8px,2.35vw,10px)!important;letter-spacing:.18em!important}
  .hero-actions{width:min(90vw,340px)!important;gap:7px!important}
  .hero-actions .button{min-height:40px!important;padding:8px 11px!important;font-size:clamp(10px,2.8vw,12px)!important}
  .hero-subscribe{margin-top:clamp(13px,4vw,22px)!important}
  .hero-subscribe .subscribe-label{margin-bottom:7px!important}
  .hero-subscribe .subscribe-links{height:39px!important;gap:6px!important}
  .hero-subscribe .subscribe-links>a,.hero-subscribe .subscribe-links>span{flex-basis:39px!important;width:39px!important;height:39px!important}
  .hero-subscribe .subscribe-links svg{width:20px!important;height:20px!important}

  .release>.chapter-content,.game-section>.chapter-content,.artist>.chapter-content{
    width:100%!important;max-width:100%!important;grid-template-columns:1fr!important;gap:clamp(14px,4vw,24px)!important
  }
  .release .cover-wrap{width:clamp(145px,52vw,230px)!important;max-width:230px!important;margin:0 auto!important}
  .release-cover{width:100%!important;max-width:230px!important;border-radius:18px!important;box-shadow:0 18px 48px #000!important}
  .release-copy{text-align:center!important}
  .release-copy h1{margin:5px 0 9px!important;font-size:clamp(38px,11.5vw,58px)!important;line-height:.88!important}
  .release-copy .lead{max-width:460px!important;font-size:clamp(12px,3.5vw,15px)!important;line-height:1.38!important}
  .release-copy .links{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:100%!important;max-width:520px!important;margin:13px auto 0!important;gap:5px!important
  }
  .release-copy .links a{
    min-width:0!important;min-height:38px!important;padding:6px 4px!important;
    font-size:clamp(7px,2.15vw,10px)!important;line-height:1.12!important;text-align:center!important
  }

  .clips .section-title{display:grid!important;gap:11px!important;text-align:center!important}
  .clips .section-title>div:first-child{text-align:center!important}
  .clips .section-title h2{margin:4px 0 0!important;font-size:clamp(36px,10.5vw,56px)!important;line-height:.9!important}
  .clip-platform-switch{display:grid!important;grid-template-columns:repeat(3,1fr)!important;width:100%!important;max-width:420px!important;margin:auto!important;gap:5px!important}
  .clip-platform-switch button{min-width:0!important;min-height:36px!important;padding:6px 3px!important;font-size:clamp(8px,2.4vw,10px)!important}
  .clips .cards{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;margin-top:16px!important;gap:8px!important
  }
  .clips .card{
    min-width:0!important;min-height:clamp(155px,48vw,230px)!important;
    padding:clamp(10px,3vw,16px)!important;background-position:center!important
  }
  .clips .card span,.clips .card small{font-size:clamp(6px,1.9vw,9px)!important;letter-spacing:.07em!important}
  .clips .card strong{margin:5px 0!important;font-size:clamp(16px,5vw,26px)!important;line-height:.94!important;overflow-wrap:anywhere!important}

  .game-section{left:auto!important;width:100%!important;min-height:0!important;margin-left:0!important;padding-block:clamp(48px,13vw,74px)!important}
  .game-copy{order:-1!important;padding:0!important;text-align:center!important}
  .game-copy .eyebrow{text-align:center!important;font-size:9px!important}
  .game-copy h2{margin:7px auto 9px!important;font-size:clamp(42px,12.5vw,64px)!important;line-height:.86!important}
  .game-copy>p{margin:0 auto!important;max-width:480px!important;font-size:clamp(12px,3.6vw,15px)!important;line-height:1.4!important}
  .game-copy .button.primary{min-height:46px!important;margin-top:14px!important;font-size:14px!important}
  .game-copy>small{margin-top:9px!important;font-size:clamp(9px,2.6vw,11px)!important}
  .game-scene{min-height:clamp(245px,74vw,430px)!important;margin:0 -2vw!important}
  .game-room{inset:7% -4%!important;width:108%!important;height:87%!important}
  .game-vor{left:-5%!important;height:68%!important}.game-monster{left:35%!important;height:50%!important}.game-pirate{right:-8%!important;height:74%!important}

  .artist{min-height:0!important;padding-block:clamp(48px,13vw,74px)!important}
  .artist>.chapter-content{min-height:0!important}
  .artist-copy{padding:0!important;text-align:center!important}
  .artist-copy .eyebrow{text-align:center!important}
  .artist-copy h2{margin:6px 0 10px!important;font-size:clamp(38px,11vw,58px)!important;line-height:.9!important}
  .artist-copy>p:not(.eyebrow):not(.subscribe-label){margin:0 auto!important;max-width:520px!important;font-size:clamp(12px,3.55vw,15px)!important;line-height:1.42!important}
  .artist-copy .subscribe-label{margin:17px 0 9px!important;font-size:9px!important}
  .artist-copy .subscribe-links{gap:7px!important;flex-wrap:nowrap!important}
  .artist-copy .subscribe-links>a,.artist-copy .subscribe-links>span{width:42px!important;height:42px!important;flex:0 0 42px!important}
  .artist-figure{width:clamp(180px,58vw,285px)!important;max-width:285px!important;margin:0 auto!important}
  .artist-figure .avatar{width:100%!important;max-height:330px!important;object-fit:contain!important}

  footer{min-height:0!important;padding:28px 16px!important;gap:13px!important}
  footer img{width:105px!important}
  footer nav{justify-content:center!important;gap:9px!important}
  .footer-icon{width:38px!important;height:38px!important}

  .music-modal{width:calc(100vw - 20px)!important;max-width:520px!important;max-height:calc(100svh - 20px)!important;padding:14px!important;overflow:auto!important}
  .music-modal-cover{width:clamp(100px,32vw,155px)!important;min-width:0!important}
  .music-modal-content h2{font-size:clamp(34px,10vw,50px)!important}
}

/* v184 — longer approach, twice the visual impact, no rubber rebound. */
@keyframes content-arrival-slam-v184{
  0%{scale:.86;filter:brightness(.7)}
  100%{scale:1;filter:brightness(1)}
}
main>section.content-punch>.chapter-content{
  animation:content-arrival-slam-v184 .32s cubic-bezier(.94,0,1,1) both!important;
  transform-origin:50% 58%!important
}
.game-section.content-punch .game-copy,
.game-section.content-punch .game-scene{animation:none!important}
main>section.reveal>.chapter-content,
.clips .section-title,
.clips .card:not(.mine-broken),
.game-section .game-copy,
.game-section .game-scene:not(.mine-broken){opacity:1!important}
main>section.reveal>.chapter-content{
  filter:brightness(calc(.52 + var(--section-opacity,0)*.48))!important
}

/* v185 — the chapter itself is solid.  Darkness, rather than transparency,
   carries the approach.  These selectors deliberately outrank the older
   staggered mobile rules for cards, enemies and the artist block. */
@media (pointer:coarse){
  html body main>section.reveal>.chapter-content,
  html body main>section.clips.reveal .section-title,
  html body main>section.clips.reveal .card:nth-child(1):not(.mine-broken),
  html body main>section.clips.reveal .card:nth-child(2):not(.mine-broken),
  html body main>section.game-section.reveal .game-copy,
  html body main>section.game-section.reveal .game-scene:not(.mine-broken),
  html body main>section.game-section.reveal .game-vor:not(.mine-broken),
  html body main>section.game-section.reveal .game-monster:not(.mine-broken),
  html body main>section.game-section.reveal .game-pirate:not(.mine-broken),
  html body main>section.artist.reveal .artist-copy,
  html body main>section.artist.reveal .artist-figure .avatar:not(.mine-broken),
  html body main>section.artist.reveal .subscribe-links>a:not(.mine-broken){
    opacity:1!important
  }
}

/* One quiet cloud plane travels behind the chapter.  The transition banks
   still pass in front, while this plane gives the revealed content depth. */
main>section.reveal{isolation:isolate}
main>section.reveal>.chapter-content{z-index:2}
main>section.reveal>.chapter-content::before{display:none!important}
main>section.reveal>.chapter-cloud-back{
  position:absolute;z-index:1;pointer-events:none;
  left:50%;top:50%;bottom:auto;width:min(132vw,1500px);aspect-ratio:1.62;
  transform:translate3d(-50%,calc(-50% + var(--back-cloud-y,0px) + var(--pointer-cloud-y,0px)),0) scale(var(--back-cloud-scale,1));
  transform-origin:50% 62%;will-change:transform;
  background:transparent url('/cloud-alpha-2.png?v=140') center/contain no-repeat;
  opacity:.34;filter:brightness(.72) saturate(.62) drop-shadow(0 20px 24px #112a3440)
}
main>section[data-chapter="02"]>.chapter-cloud-back{background-image:url('/cloud-alpha-3.png?v=140')}
main>section[data-chapter="03"]>.chapter-cloud-back{background-image:url('/cloud-alpha-4.png?v=140')}
main>section#about>.chapter-cloud-back{display:none!important}
.chapter-cloud-back{display:none!important}
@media (orientation:portrait) and (pointer:coarse){
  main>section.reveal>.chapter-cloud-back{top:50%;bottom:auto;width:172vw;opacity:.3}
}
.mine-gone{visibility:hidden!important;opacity:0!important;filter:none!important}
.mine-child-gone::before,.mine-child-gone::after{opacity:0!important;visibility:hidden!important}
.game-section .game-room:not(.mine-broken){opacity:1!important;transform:translate3d(0,var(--section-bg-y,0px),0) scale(1.04)!important;will-change:transform}
.hero-room{background:linear-gradient(#05050528,#050505bf),url('/game-room.png') center/cover no-repeat!important}
@media (orientation:landscape) and (pointer:coarse){
  .clips .card strong{font-size:clamp(24px,4.1vw,42px)!important;line-height:.94!important}
  .clips .card.minecraft strong{white-space:nowrap!important}
}
