/* JPAccess landing - "Our story" item corridor.
 *
 * Two rails of real appearance-shop pieces ride from behind the screen toward
 * the viewer. Perspective does the work that looks like two animations: as a
 * card's z grows it gets bigger AND its screen x sweeps outward, because the
 * projection scales position and size by the same factor.
 *
 * The keyframes below are PRECOMPUTED from the component's path maths rather
 * than generated in React at runtime. The geometry is constant, so there is
 * nothing to recompute per mount, and it keeps the minified bundle free of a
 * useId/useMemo/<style> dance.
 *
 * Everything animates transform only, which the compositor owns. Nothing here
 * re-rasterises per frame (unlike the stroke-dash background that was pulled
 * on 2026-08-20 for costing 367ms/frame).
 *
 * Every length is cqw, a percentage of the container's width, so the corridor
 * keeps its proportions at any size.
 */

.ish-wrap{
  position:relative;
  overflow:hidden;
  container-type:inline-size;
  height:clamp(280px,32vw,430px);
  margin-top:2.5rem;
  /* the band colour, so cards dissolve into it rather than hitting a hard edge */
  --ish-band:hsl(var(--warm-soft));
}
@media(max-width:640px){ .ish-wrap{ height:clamp(190px,50vw,260px); margin-top:2rem; } }

.ish-persp{
  position:absolute; inset:0;
  pointer-events:none;
  perspective:30cqw;
  perspective-origin:50% 55%;
}
.ish-3d{ position:absolute; inset:0; transform-style:preserve-3d; }

.ish-c{
  position:absolute;
  left:50%; top:55%;
  width:18cqw; height:25cqw;
  margin-left:-9.0cqw; margin-top:-12.5cqw;
  border-radius:0.4cqw;
  overflow:hidden;
  backface-visibility:hidden;
  animation-duration:18.0s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  will-change:transform;
}
/* The pieces are cut out of their studio backdrop and saved as WebP with an
   alpha channel, so each one floats in the corridor instead of riding on a
   white slab. That also means the card itself needs no fill and no clipping. */
.ish-c img{ width:100%; height:100%; object-fit:contain; display:block; }

.ish-r{ animation-name:ish-rail-r; }
.ish-l{ animation-name:ish-rail-l; }
.ish-d0{animation-delay:-0.000s}.ish-d1{animation-delay:-1.500s}.ish-d2{animation-delay:-3.000s}.ish-d3{animation-delay:-4.500s}.ish-d4{animation-delay:-6.000s}.ish-d5{animation-delay:-7.500s}.ish-d6{animation-delay:-9.000s}.ish-d7{animation-delay:-10.500s}.ish-d8{animation-delay:-12.000s}.ish-d9{animation-delay:-13.500s}.ish-d10{animation-delay:-15.000s}.ish-d11{animation-delay:-16.500s}

/* Feather the frame edges so the corridor sits in the band instead of being
   a box pasted onto it. */
.ish-wrap::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to right, var(--ish-band) 0, transparent 12%, transparent 88%, var(--ish-band) 100%),
    linear-gradient(to bottom, var(--ish-band) 0, transparent 14%, transparent 86%, var(--ish-band) 100%);
}

/* Pausing rather than disabling keeps the corridor whole: every card is already
   dropped mid-flight by its negative delay, so it freezes as a finished still
   instead of collapsing onto the axis. */
@media(prefers-reduced-motion:reduce){ .ish-c{ animation-play-state:paused; } }

/* Bottom row. lg:grid-cols-2 is not in the prebuilt Tailwind, so the two-column
   split lives here. */
.ish-bottom{ display:grid; gap:2.5rem; }
@media(min-width:1024px){ .ish-bottom{ grid-template-columns:1.15fr 1fr; gap:3rem; } }

@keyframes ish-rail-r{0.00%{transform:translate3d(-11.00cqw,0,-258.46cqw) rotateY(-6.00deg)}4.17%{transform:translate3d(-3.79cqw,0,-225.92cqw) rotateY(-6.92deg)}8.33%{transform:translate3d(2.73cqw,0,-197.04cqw) rotateY(-7.83deg)}12.50%{transform:translate3d(8.60cqw,0,-171.43cqw) rotateY(-8.75deg)}16.67%{transform:translate3d(13.87cqw,0,-148.70cqw) rotateY(-9.67deg)}20.83%{transform:translate3d(18.56cqw,0,-128.54cqw) rotateY(-10.58deg)}25.00%{transform:translate3d(22.72cqw,0,-110.65cqw) rotateY(-11.50deg)}29.17%{transform:translate3d(26.37cqw,0,-94.78cqw) rotateY(-12.42deg)}33.33%{transform:translate3d(29.57cqw,0,-80.70cqw) rotateY(-13.33deg)}37.50%{transform:translate3d(32.34cqw,0,-68.21cqw) rotateY(-14.25deg)}41.67%{transform:translate3d(34.71cqw,0,-57.13cqw) rotateY(-15.17deg)}45.83%{transform:translate3d(36.73cqw,0,-47.30cqw) rotateY(-16.08deg)}50.00%{transform:translate3d(38.42cqw,0,-38.58cqw) rotateY(-17.00deg)}54.17%{transform:translate3d(39.81cqw,0,-30.84cqw) rotateY(-17.92deg)}58.33%{transform:translate3d(40.94cqw,0,-23.98cqw) rotateY(-18.83deg)}62.50%{transform:translate3d(41.84cqw,0,-17.89cqw) rotateY(-19.75deg)}66.67%{transform:translate3d(42.53cqw,0,-12.48cqw) rotateY(-20.67deg)}70.83%{transform:translate3d(43.06cqw,0,-7.69cqw) rotateY(-21.58deg)}75.00%{transform:translate3d(43.43cqw,0,-3.44cqw) rotateY(-22.50deg)}79.17%{transform:translate3d(43.69cqw,0,0.33cqw) rotateY(-23.42deg)}83.33%{transform:translate3d(43.85cqw,0,3.68cqw) rotateY(-24.33deg)}87.50%{transform:translate3d(43.94cqw,0,6.65cqw) rotateY(-25.25deg)}91.67%{transform:translate3d(43.98cqw,0,9.28cqw) rotateY(-26.17deg)}95.83%{transform:translate3d(44.00cqw,0,11.62cqw) rotateY(-27.08deg)}100.00%{transform:translate3d(44.00cqw,0,13.70cqw) rotateY(-28.00deg)}}
@keyframes ish-rail-l{0.00%{transform:translate3d(11.00cqw,0,-258.46cqw) rotateY(6.00deg)}4.17%{transform:translate3d(3.79cqw,0,-225.92cqw) rotateY(6.92deg)}8.33%{transform:translate3d(-2.73cqw,0,-197.04cqw) rotateY(7.83deg)}12.50%{transform:translate3d(-8.60cqw,0,-171.43cqw) rotateY(8.75deg)}16.67%{transform:translate3d(-13.87cqw,0,-148.70cqw) rotateY(9.67deg)}20.83%{transform:translate3d(-18.56cqw,0,-128.54cqw) rotateY(10.58deg)}25.00%{transform:translate3d(-22.72cqw,0,-110.65cqw) rotateY(11.50deg)}29.17%{transform:translate3d(-26.37cqw,0,-94.78cqw) rotateY(12.42deg)}33.33%{transform:translate3d(-29.57cqw,0,-80.70cqw) rotateY(13.33deg)}37.50%{transform:translate3d(-32.34cqw,0,-68.21cqw) rotateY(14.25deg)}41.67%{transform:translate3d(-34.71cqw,0,-57.13cqw) rotateY(15.17deg)}45.83%{transform:translate3d(-36.73cqw,0,-47.30cqw) rotateY(16.08deg)}50.00%{transform:translate3d(-38.42cqw,0,-38.58cqw) rotateY(17.00deg)}54.17%{transform:translate3d(-39.81cqw,0,-30.84cqw) rotateY(17.92deg)}58.33%{transform:translate3d(-40.94cqw,0,-23.98cqw) rotateY(18.83deg)}62.50%{transform:translate3d(-41.84cqw,0,-17.89cqw) rotateY(19.75deg)}66.67%{transform:translate3d(-42.53cqw,0,-12.48cqw) rotateY(20.67deg)}70.83%{transform:translate3d(-43.06cqw,0,-7.69cqw) rotateY(21.58deg)}75.00%{transform:translate3d(-43.43cqw,0,-3.44cqw) rotateY(22.50deg)}79.17%{transform:translate3d(-43.69cqw,0,0.33cqw) rotateY(23.42deg)}83.33%{transform:translate3d(-43.85cqw,0,3.68cqw) rotateY(24.33deg)}87.50%{transform:translate3d(-43.94cqw,0,6.65cqw) rotateY(25.25deg)}91.67%{transform:translate3d(-43.98cqw,0,9.28cqw) rotateY(26.17deg)}95.83%{transform:translate3d(-44.00cqw,0,11.62cqw) rotateY(27.08deg)}100.00%{transform:translate3d(-44.00cqw,0,13.70cqw) rotateY(28.00deg)}}