/* Extracted verbatim from culling-games-v21 (1): poster, paper, particles. */
.poster-city{
  --mx:0;
  --my:0;
  position:absolute;
  inset:0;
  overflow:hidden;
  filter:none;
  perspective:1100px;
  background:#140b12;
}
.poster-city .city-camera{
  position:absolute;
  inset:-6%;
  transform-style:preserve-3d;
  transform:
    translate3d(calc(var(--mx) * -18px),calc(var(--my) * -13px),0)
    rotateY(calc(var(--mx) * 1.25deg))
    rotateX(calc(var(--my) * -0.8deg))
    scale(1.095);
  will-change:transform;
}
.poster-city .city-image{
  object-fit:cover;
  object-position:center 48%;
  filter:saturate(.88) brightness(.74) contrast(1.08);
  transform:translateZ(-12px) scale(1.015);
}
.poster-city .city-depth{
  position:absolute;
  inset:-8%;
  pointer-events:none;
  will-change:transform;
}
.poster-city .city-depth-back{
  background:
    radial-gradient(circle at 64% 38%,rgba(255,134,112,.18),transparent 26%),
    linear-gradient(110deg,rgba(255,79,62,.08),transparent 32%,rgba(77,25,58,.12) 74%,transparent);
  mix-blend-mode:screen;
  filter:blur(16px);
  transform:translate3d(calc(var(--mx) * -7px),calc(var(--my) * -5px),-30px) scale(1.06);
  opacity:.65;
}
.poster-city .city-depth-front{
  background:
    linear-gradient(116deg,transparent 0 58%,rgba(255,113,92,.08) 64%,transparent 72%),
    radial-gradient(ellipse at 25% 88%,rgba(13,5,13,.48),transparent 48%);
  transform:translate3d(calc(var(--mx) * 24px),calc(var(--my) * 17px),35px) scale(1.03);
  filter:blur(3px);
  opacity:.72;
}
.poster-city .city-vignette{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(5,6,14,.72) 0%,rgba(7,7,16,.42) 38%,rgba(8,5,12,.18) 68%,rgba(5,5,12,.46) 100%),
    linear-gradient(180deg,rgba(5,7,15,.52) 0%,transparent 30%,rgba(5,5,12,.27) 72%,rgba(4,5,12,.65) 100%),
    radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.28) 100%);
  pointer-events:none;
}
.poster-city .city-light{
  position:absolute;
  width:56vw;
  height:24vw;
  right:-10vw;
  top:9vh;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,112,88,.13),transparent 67%);
  filter:blur(28px);
  mix-blend-mode:screen;
  transform:translate(calc(var(--mx) * -12px),calc(var(--my) * -8px));
  pointer-events:none;
}

/* Keep the actual content clearly above the moving background. */
.hero.hero-play .hero-grid{z-index:3;background:linear-gradient(90deg,transparent 33.25%,rgba(255,255,255,.045) 33.33%,transparent 33.42%,transparent 66.58%,rgba(255,255,255,.045) 66.66%,transparent 66.75%)}
.hero.hero-play .hero-copy,.hero.hero-play .hero-call,.hero.hero-play .micro,.hero.hero-play .scroll-cue{z-index:10}
.hero.hero-play .hero-logo-wrap{filter:drop-shadow(0 4px 16px rgba(0,0,0,.68)) drop-shadow(0 0 24px rgba(255,226,83,.10))}
.hero.hero-play .hero-tagline,.hero.hero-play .hero-sub{text-shadow:0 2px 18px rgba(0,0,0,.8)}

@media (prefers-reduced-motion:reduce){
  .poster-city .city-camera,.poster-city .city-depth,.poster-city .city-light{transform:none!important}
}
@media(max-width:700px){
  .poster-city .city-camera{inset:-2%;transform:scale(1.06)}
  .poster-city .city-image{object-position:58% center;filter:saturate(.82) brightness(.69) contrast(1.08)}
  .poster-city .city-vignette{background:linear-gradient(180deg,rgba(5,7,15,.55),rgba(5,5,12,.32) 50%,rgba(4,5,12,.72)),linear-gradient(90deg,rgba(5,6,14,.56),transparent 75%)}
}


.poster-city{background:#c8c8c2;perspective:1250px}
.poster-city .city-camera{
  inset:-7%;
  transform:
    translate3d(calc(var(--mx) * -20px),calc(var(--my) * -14px),0)
    rotateY(calc(var(--mx) * 1.15deg))
    rotateX(calc(var(--my) * -0.7deg))
    scale(1.105);
}
.poster-city .city-image{
  object-fit:cover;
  object-position:center 45%;
  filter:grayscale(1) brightness(.58) contrast(1.24);
  transform:translateZ(-14px) scale(1.018);
}
.poster-city .city-depth-back{
  background:
    radial-gradient(circle at 50% 14%,rgba(255,255,255,.16),transparent 27%),
    linear-gradient(105deg,rgba(241,223,69,.07),transparent 27%,rgba(255,255,255,.04) 57%,transparent 76%);
  mix-blend-mode:screen;
  filter:blur(13px);
  opacity:.7;
}
.poster-city .city-depth-front{
  background:
    linear-gradient(114deg,transparent 0 57%,rgba(241,223,69,.045) 61%,transparent 69%),
    radial-gradient(ellipse at 24% 91%,rgba(0,0,0,.58),transparent 48%);
  filter:blur(2px);
  opacity:.82;
}
.poster-city .city-vignette{
  background:
    linear-gradient(90deg,rgba(5,5,5,.73) 0%,rgba(6,6,6,.44) 33%,rgba(6,6,6,.18) 66%,rgba(5,5,5,.42) 100%),
    linear-gradient(180deg,rgba(5,5,5,.55) 0%,transparent 28%,rgba(5,5,5,.20) 68%,rgba(5,5,5,.72) 100%),
    radial-gradient(ellipse at center,transparent 32%,rgba(0,0,0,.31) 100%);
}
.poster-city .city-light{
  width:48vw;height:20vw;right:-8vw;top:11vh;
  background:radial-gradient(ellipse,rgba(241,223,69,.09),transparent 69%);
  filter:blur(30px);
}


/* === V9 · notes de chapitre / papier vivant === */
.manga-head{min-height:340px!important;justify-content:center!important;padding:82px 0 44px!important;overflow:visible!important}
.manga-head>.eyebrow{position:absolute;left:0;top:34px;font-size:10px!important;color:#aaa79c!important}
.manga-head>p{font-size:13px!important;line-height:1.65!important;color:#c7c4b8!important;max-width:380px;width:auto!important;bottom:42px!important}
.manga-head-stamp{opacity:.44;transform:rotate(5deg) scale(.82);right:2%!important}
.page-note-wrap{--px:0;--py:0;--near:0;position:relative;width:min(650px,72vw);height:205px;margin:18px 0 16px;perspective:900px;z-index:4}
.page-note-shadow{position:absolute;inset:21px 7px -8px 18px;background:#000;filter:blur(17px);opacity:.54;transform:rotate(-2deg)}
.page-note{position:absolute;inset:0;padding:38px 48px 31px;background:#f1ead7;color:#0c0b09;border:1px solid #bdb5a2;clip-path:polygon(1% 5%,97.5% 0,100% 91%,94% 100%,3% 96%,0 69%);box-shadow:inset 0 0 42px rgba(60,46,24,.13);transform-origin:50% 12%;transform:rotate(calc(-2.2deg + var(--px)*2.6deg)) rotateX(calc(var(--py)*-5deg)) rotateY(calc(var(--px)*5deg)) translate3d(calc(var(--px)*9px),calc(var(--py)*7px),0);transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .25s;animation:paperWind 5.8s ease-in-out infinite;will-change:transform}
.page-note:before{content:'';position:absolute;inset:0;opacity:.18;pointer-events:none;background-image:radial-gradient(#111 .55px,transparent .65px),repeating-linear-gradient(7deg,transparent 0 18px,rgba(0,0,0,.08) 19px,transparent 20px);background-size:5px 5px,100% 100%;mix-blend-mode:multiply}
.page-note:after{content:'';position:absolute;right:-10px;bottom:22px;width:190px;height:26px;border-bottom:4px solid #16130f;border-radius:48%;transform:rotate(-4deg);opacity:.7}
.page-note-wrap:hover .page-note{animation-play-state:paused;filter:brightness(1.025);transform:rotate(calc(-2deg + var(--px)*4.6deg)) rotateX(calc(var(--py)*-8deg)) rotateY(calc(var(--px)*8deg)) translate3d(calc(var(--px)*18px),calc(var(--py)*13px),14px)}
.page-note-index{position:absolute;top:18px;left:49px;font-size:9px;font-weight:800;letter-spacing:.18em;color:#555047}
.page-note strong{display:block;font-family:'Archivo Black';font-size:clamp(54px,7vw,106px);line-height:.82;letter-spacing:-.065em;position:relative;z-index:2;white-space:nowrap}
.page-note-kana{display:block;margin-top:16px;font-family:serif;font-size:16px;font-weight:800;letter-spacing:.16em;color:#4a463e}
.note-scratch{position:absolute;right:42px;top:18px;font-size:12px;font-style:normal;letter-spacing:-2px;transform:rotate(8deg);color:#8c1919}
.note-tape{position:absolute;z-index:3;width:92px;height:27px;background:rgba(219,205,162,.72);border:1px solid rgba(70,58,31,.16);box-shadow:0 2px 3px rgba(0,0,0,.14);opacity:.9}
.note-tape-a{left:37px;top:-12px;transform:rotate(-7deg)}.note-tape-b{right:46px;bottom:-8px;transform:rotate(5deg)}
@keyframes paperWind{0%,100%{translate:0 0;rotate:0deg}28%{translate:2px -3px;rotate:.35deg}54%{translate:-2px 1px;rotate:-.28deg}77%{translate:3px -1px;rotate:.18deg}}


.manga-particles{
  position:fixed;inset:0;z-index:55;pointer-events:none;opacity:.58;
  mix-blend-mode:screen;
}
.site-header{z-index:70}.cursor,.cursor-trail{z-index:120}
.hero.hero-play .hero-copy,.hero.hero-play .hero-call,.hero.hero-play .micro,.hero.hero-play .scroll-cue{position:relative;z-index:60}

/* Traits de vitesse : très subtils au repos, plus visibles au mouvement de souris. */
.manga-speed-lines{
  position:absolute;inset:-12%;z-index:5;pointer-events:none;opacity:.16;
  background:
    repeating-conic-gradient(from 211deg at 73% 42%,transparent 0deg 1.6deg,rgba(255,255,255,.11) 1.7deg 1.82deg,transparent 1.92deg 4.5deg);
  mask-image:radial-gradient(circle at 72% 44%,#000 0 12%,rgba(0,0,0,.82) 24%,transparent 62%);
  transform:translate3d(calc(var(--mx) * -7px),calc(var(--my) * -5px),0) scale(1.03);
  animation:lineBreathe 5.8s ease-in-out infinite;
}
@keyframes lineBreathe{0%,100%{opacity:.10;filter:blur(.15px)}48%{opacity:.20;filter:blur(0)}}

/* Petits éclats de "papier / énergie" qui flottent entre l'image et l'UI. */
.manga-shards{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.manga-shards i{
  --n:calc(var(--i) * 1px);
  position:absolute;
  left:calc(5% + (var(--i) * 6.7%));
  top:calc(10% + var(--i) * 4.6%);
  width:calc(4px + var(--i) * .15px);
  height:calc(12px + var(--i) * .85px);
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(241,223,69,.25));
  clip-path:polygon(50% 0,100% 72%,55% 100%,0 60%);
  opacity:.12;
  transform:rotate(calc(-28deg + var(--i) * 13deg));
  animation:shardFloat calc(6.5s + var(--i) * .31s) ease-in-out infinite;
  animation-delay:calc(var(--i) * -.47s);
}
@keyframes shardFloat{
  0%,100%{translate:0 0;rotate:0deg;opacity:.06}
  35%{translate:8px -18px;rotate:8deg;opacity:.20}
  65%{translate:-5px -35px;rotate:-5deg;opacity:.10}
}

/* Petit balayage blanc/jaune façon case manga qui attrape la lumière. */
.manga-flash{
  position:absolute;z-index:7;pointer-events:none;width:72vw;height:5px;left:-32vw;top:31%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),rgba(241,223,69,.30),rgba(255,255,255,.11),transparent);
  filter:blur(1px);transform:rotate(-10deg) translateX(-20vw);opacity:0;
  animation:mangaSweep 9s cubic-bezier(.2,.7,.2,1) infinite;
}
@keyframes mangaSweep{
  0%,72%{opacity:0;transform:rotate(-10deg) translateX(-25vw)}
  75%{opacity:.8}
  83%{opacity:.18;transform:rotate(-10deg) translateX(135vw)}
  84%,100%{opacity:0;transform:rotate(-10deg) translateX(135vw)}
}

/* Le fond paraît davantage en profondeur : le contraste respire légèrement. */
.poster-city .city-camera{will-change:transform}
.poster-city .city-image{animation:cityPulse 8s ease-in-out infinite;will-change:filter}
@keyframes cityPulse{
  0%,100%{filter:grayscale(1) brightness(.58) contrast(1.24)}
  50%{filter:grayscale(1) brightness(.615) contrast(1.28)}
}
.poster-city .city-light{animation:lightDrift 6.8s ease-in-out infinite alternate}
@keyframes lightDrift{from{opacity:.38;transform:translate(-2%,2%) scale(.96)}to{opacity:.78;transform:translate(5%,-3%) scale(1.08)}}