/* IKI V6.5 — photographs turn at the reader's pace, without a timed gate.
   Unenhanced and still-mode pages retain their ordinary image + copy flow. */
.v65 .experience-stage { position: relative; }
.v65 .experience-frame { margin: 0; }
.v65 .experience-view { display: none; }

/* Camera motion lives inside the photograph; words remain fixed and readable. */
.v65.motion-ready .chapter-media.experience-pan-ready { isolation: isolate; }
.v65.motion-ready .chapter-media.experience-pan-ready .chapter-mobile-image {
  top: -24px; left: -8px; width: calc(100% + 16px); height: calc(100% + 48px);
  transform-origin: 52% 48%;
  transform: translate3d(0,var(--experience-camera-y,0px),0) scale(1.028);
  animation: none;
}
.v65.motion-ready .chapter-media.experience-pan-ready.is-experience-live .chapter-mobile-image { animation-play-state: running; }
@keyframes iki-experience-camera {
  from { transform: translate3d(-2px,var(--experience-camera-y,0px),0) scale(1.018); }
  to { transform: translate3d(2px,var(--experience-camera-y,0px),0) scale(1.038); }
}

@media (min-width: 1100px) and (min-height: 450px) {
  .v65.motion-ready .experience-stage.experience-reel-ready {
    display: grid; grid-template-columns: minmax(0,1.18fr) minmax(0,1fr);
    gap: clamp(58px,6vw,104px); align-items: start; margin-top: 70px;
  }
  .v65.motion-ready .experience-reel-ready .experience-visual {
    display: block; position: sticky; top: 126px; min-width: 0;
    height: clamp(280px,62svh,620px); overflow: hidden; isolation: isolate;
    perspective: 1400px;
    background: #0a1421; border: 1px solid rgba(167,189,209,.22);
    box-shadow: 0 30px 65px rgba(0,0,0,.18);
  }
  /* A dark edge reads as the spine of a physical folio, not a UI card border. */
  .v65.motion-ready .experience-reel-ready .experience-visual::before {
    content: ""; position: absolute; z-index: 5; inset: 0; pointer-events: none;
    box-shadow: inset 13px 0 22px -15px rgba(0,0,0,.95),inset -1px 0 rgba(201,222,237,.27);
  }
  .v65.motion-ready .experience-reel-ready .experience-visual::after {
    content: ""; position: absolute; z-index: 4; inset: auto 0 0; height: 38%; pointer-events: none;
    background: linear-gradient(transparent,rgba(2,8,15,.9));
  }
  .v65.motion-ready .experience-reel-ready .experience-frame {
    display: block; position: absolute; inset: 0; z-index: var(--leaf-order,0); overflow: hidden;
    opacity: var(--leaf-opacity,0); pointer-events: none; transform-origin: left center;
    transform: translate3d(var(--leaf-x,0px),0,var(--leaf-depth,0px)) rotateY(var(--leaf-turn,0deg)) scale(var(--leaf-scale,1));
    transition: none; backface-visibility: hidden;
    box-shadow: -2px 0 0 #d6d7c6a3,-5px 0 0 #848f8b55,-16px 0 30px rgba(0,0,0,var(--leaf-contact,.18));
  }
  .v65.motion-ready .experience-reel-ready .experience-frame:first-child { --leaf-opacity: 1; }
  /* The light belongs to the moving paper edge, not an unrelated timed wipe. */
  .v65.motion-ready .experience-reel-ready .experience-frame::before {
    content: ""; position: absolute; z-index: 3; inset: 0 auto 0 0; width: 40px;
    pointer-events: none; opacity: var(--leaf-edge,0);
    background: linear-gradient(90deg,#e7eee9c9 0 1px,#10202c00 2px,#02070ea8 4px,transparent 100%);
  }
  .v65.motion-ready .experience-reel-ready .experience-frame::after {
    content: ""; position: absolute; z-index: 3; inset: 0 auto 0 0; width: 45%;
    pointer-events: none; opacity: calc(var(--leaf-edge,0) * .48);
    background: linear-gradient(100deg,transparent,#dee6df52 46%,#eff1e17a 50%,transparent 57%);
    transform: translate3d(var(--leaf-glint-x,-100%),0,0);
  }
  .v65.motion-ready .experience-reel-ready .experience-frame > picture {
    display: block; position: absolute; inset: -5% -2%;
    transform: translate3d(0,var(--experience-camera-y,0px),0);
  }
  .v65.motion-ready .experience-reel-ready .experience-frame img {
    width: 100%; height: 100%; max-width: none; object-fit: cover;
    animation: none; transform: scale(1.02); transform-origin: 50% 54%;
  }
  .v65.motion-ready .experience-reel-ready .experience-frame[data-experience-frame="selection"] img { object-position: 51% center; }
  .v65.motion-ready .experience-reel-ready .experience-frame[data-experience-frame="context"] img { object-position: 50% center; }
  .v65.motion-ready .experience-reel-ready .experience-frame[data-experience-frame="table"] img { object-position: 68% center; }
  .v65.motion-ready .experience-reel-ready.is-reel-live .experience-frame.is-present img { animation-play-state: running; }
  .v65 .experience-wipe { display: none; }
  .v65.motion-ready .experience-reel-ready .experience-index {
    position: absolute; z-index: 6; left: 28px; bottom: 26px; width: min(230px,45%);
    display: grid; grid-template-columns: 28px minmax(0,1fr) 26px; gap: 12px; align-items: center;
    color: #d5e2eb; font: 400 12px/1 var(--serif); letter-spacing: .05em;
  }
  .v65.motion-ready .experience-reel-ready .experience-index i { position: relative; display: block; height: 1px; background: rgba(209,226,239,.25); }
  .v65.motion-ready .experience-reel-ready .experience-index i::before {
    content: ""; position: absolute; inset: 0; background: #c1d5e4;
    transform: scaleX(var(--experience-progress,.02)); transform-origin: left;
  }
  .v65.motion-ready .experience-reel-ready .experience-index i::after {
    content: ""; position: absolute; width: 5px; height: 5px; border: 1px solid #ccdeea;
    top: -2px; left: calc(var(--experience-progress,.02)*100%); background: #0b1b2c; transform: translateX(-50%) rotate(45deg);
  }
  .v65.motion-ready .experience-reel-ready .experience-index strong {
    grid-column: 1/-1; padding-top: 3px; font: 400 9px/1.5 var(--sans);
    text-transform: uppercase; letter-spacing: .16em; color: #b8cbd9;
  }
  .v65.motion-ready .experience-reel-ready .experience-view {
    position: absolute; z-index: 7; right: 24px; bottom: 25px;
    display: grid; place-items: center; width: 48px; height: 48px;
    border: 1px solid rgba(198,218,233,.5); background: rgba(5,15,24,.75);
    color: #e4eef5; font: 400 25px/1 var(--serif); cursor: zoom-in;
    transition: background .45s,border-color .45s;
  }
  .v65.motion-ready .experience-reel-ready .experience-view:hover { background: #1b344b; border-color: #e1edf6; }
  .v65.motion-ready .experience-reel-ready .experience-view:focus-visible { outline-offset: -6px; }
  .v65.motion-ready .experience-reel-ready .experience-chapters { display: block; position: relative; min-width: 0; padding-left: 1px; }
  .v65.motion-ready .experience-reel-ready .experience-chapters::before,
  .v65.motion-ready .experience-reel-ready .experience-chapters::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -29px; width: 1px; pointer-events: none;
    background: rgba(159,186,207,.13);
  }
  .v65.motion-ready .experience-reel-ready .experience-chapters::after {
    background: linear-gradient(#536f8b,#b2cbdc); transform: scaleY(var(--experience-progress,0)); transform-origin: top;
  }
  .v65.motion-ready .experience-reel-ready .experience-chapter,
  .v65.motion-ready .experience-reel-ready .experience-chapter:nth-child(2),
  .v65.motion-ready .experience-reel-ready .experience-chapter:nth-child(3) {
    display: flex; flex-direction: column; justify-content: center; align-items: stretch;
    min-height: clamp(410px,56svh,560px); margin: 0; padding: 42px 0; gap: 0;
  }
  .v65.motion-ready .experience-reel-ready .experience-chapter:first-child { padding-top: 0; }
  .v65.motion-ready .experience-reel-ready .experience-chapter:last-child { padding-bottom: 0; }
  .v65.motion-ready .experience-reel-ready .experience-chapter > .chapter-media { display: none; }
  .v65.motion-ready .experience-reel-ready .experience-chapter .chapter-copy { width: 100%; padding: 0; }
  .v65.motion-ready .experience-reel-ready .chapter-number { position: relative; border-top: 0; padding-top: 0; color: #9eafbe; transition: color .18s; }
  .v65.motion-ready .experience-reel-ready .chapter-number::after {
    content: ""; position: absolute; left: -33px; top: 4px; width: 7px; height: 7px;
    border: 1px solid #688199; background: #0a1421; transform: rotate(45deg);
    transition: background .18s,border-color .18s;
  }
  .v65.motion-ready .experience-reel-ready .is-active .chapter-number { color: #d1e1ec; }
  .v65.motion-ready .experience-reel-ready .is-active .chapter-number::after {
    background: #bad0e0; border-color: #d4e6f3;
  }
  .v65.motion-ready .experience-reel-ready .chapter-copy h3 { font-size: clamp(46px,4.25vw,70px); }
  .v65.motion-ready .experience-reel-ready .chapter-copy > p:not(.chapter-number) { max-width: 460px; }
}
@keyframes iki-experience-reel-camera {
  from { transform: translate3d(-.35%,0,0) scale(1.01); }
  to { transform: translate3d(.35%,-.35%,0) scale(1.03); }
}

/* No animation proceeds in a background tab, still mode or printed output. */
.v65.is-page-hidden .experience-stage *, .v65.is-page-hidden .experience-stage *::after,
.v65 .experience-stage:not(.is-reel-live) .experience-frame img,
.v65 .experience-stage:not(.is-reel-live) .experience-frame::after { animation-play-state: paused !important; }
.v65.is-motion-still .experience-stage *, .v65.motion-off .experience-stage * { animation: none !important; }
@media print {
  .v65 .experience-visual, .v65 .experience-view { display: none !important; }
  .v65 .experience-stage, .v65 .experience-chapters { display: block !important; }
  .v65 .experience-chapter { min-height: 0 !important; padding-block: 20px !important; }
  .v65 .experience-chapter > .chapter-media { display: block !important; }
}