/* =========================================================
   ALTERA V2 — BLOCK 02 MOTION V1
   Only Block 02. Approved Block 01 motion remains untouched.
   No geometry changes, no background movement.
   ========================================================= */

:root{
  --b2-ease:cubic-bezier(.22,.61,.36,1);
}

/* Keep the source artwork absolutely fixed.
   This avoids the baked-text / live-text collision seen before. */
.immersion-bg{
  transform:none !important;
  translate:none !important;
  background-position:68% center !important;
}

/* One soft "portal ignition" behind the central world.
   It changes light only, never layout or image position. */
.immersion::after{
  content:"";
  position:absolute;
  z-index:-2;
  left:57%;
  top:42%;
  width:42vw;
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.60);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle,
      rgba(100,241,255,.17) 0%,
      rgba(46,187,255,.11) 24%,
      rgba(39,95,255,.045) 50%,
      transparent 70%);
  filter:blur(8px);
}
html.b2-ready .immersion.b2-play::after{
  animation:b2PortalIgnite 1500ms var(--b2-ease) 1 both;
}
@keyframes b2PortalIgnite{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.60)}
  42%{opacity:1}
  78%{opacity:.72;transform:translate(-50%,-50%) scale(1.06)}
  100%{opacity:.26;transform:translate(-50%,-50%) scale(1)}
}

/* The frame draws itself once around the whole block. */
.immersion-frame{
  overflow:hidden;
}
.immersion-frame::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(90deg,transparent 0 10%,rgba(88,235,255,.80) 22%,transparent 35%) top/180% 1px no-repeat,
    linear-gradient(180deg,transparent 0 10%,rgba(88,235,255,.70) 22%,transparent 35%) right/1px 180% no-repeat,
    linear-gradient(270deg,transparent 0 10%,rgba(88,235,255,.62) 22%,transparent 35%) bottom/180% 1px no-repeat,
    linear-gradient(0deg,transparent 0 10%,rgba(88,235,255,.52) 22%,transparent 35%) left/1px 180% no-repeat;
}
html.b2-ready .immersion.b2-play .immersion-frame::before{
  animation:b2FrameTrace 1600ms linear 260ms 1 both;
}
@keyframes b2FrameTrace{
  0%{
    opacity:0;
    background-position:-80% top,right -80%,180% bottom,left 180%;
  }
  12%{opacity:1}
  88%{opacity:.85}
  100%{
    opacity:0;
    background-position:180% top,right 180%,-80% bottom,left -80%;
  }
}

/* Editorial text reveal: mask only. No sliding block. */
html.b2-ready .immersion-copy .section-kicker,
html.b2-ready .immersion-copy h2,
html.b2-ready .immersion-copy .immersion-lead{
  opacity:0;
  clip-path:inset(0 100% 0 0);
}
html.b2-ready .immersion.b2-play .immersion-copy .section-kicker,
html.b2-ready .immersion.b2-play .immersion-copy h2,
html.b2-ready .immersion.b2-play .immersion-copy .immersion-lead{
  opacity:1;
  clip-path:inset(0 0 0 0);
  transition:
    clip-path 820ms var(--b2-ease),
    opacity 220ms ease;
}
html.b2-ready .immersion.b2-play .immersion-copy .section-kicker{transition-delay:90ms}
html.b2-ready .immersion.b2-play .immersion-copy h2{transition-delay:190ms}
html.b2-ready .immersion.b2-play .immersion-copy .immersion-lead{transition-delay:360ms}

/* Three cards arrive one by one, but only by a small distance.
   Nothing can collide with the heading. */
html.b2-ready .immersion .point{
  opacity:0;
  transform:translateY(14px);
}
html.b2-ready .immersion.b2-play .point{
  opacity:1;
  transform:none;
  transition:
    opacity 620ms var(--b2-ease),
    transform 620ms var(--b2-ease),
    border-color 180ms ease,
    box-shadow 180ms ease;
}
html.b2-ready .immersion.b2-play .point-a{transition-delay:440ms}
html.b2-ready .immersion.b2-play .point-b{transition-delay:540ms}
html.b2-ready .immersion.b2-play .point-c{transition-delay:640ms}

/* Each card gets one restrained cyan "charge" after docking. */
html.b2-ready .immersion.b2-play .point-a{
  animation:b2CardCharge 760ms var(--b2-ease) 900ms 1 both;
}
html.b2-ready .immersion.b2-play .point-b{
  animation:b2CardCharge 760ms var(--b2-ease) 1000ms 1 both;
}
html.b2-ready .immersion.b2-play .point-c{
  animation:b2CardCharge 760ms var(--b2-ease) 1100ms 1 both;
}
@keyframes b2CardCharge{
  0%,100%{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 18px 48px rgba(0,0,0,.24),
      0 0 26px rgba(23,211,255,.05);
  }
  50%{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 18px 48px rgba(0,0,0,.24),
      0 0 30px rgba(38,222,255,.20);
  }
}

/* One pulse around the icons after cards dock. */
html.b2-ready .immersion .point-icon{
  position:relative;
}
html.b2-ready .immersion .point-icon::before{
  content:"";
  position:absolute;
  inset:-6px;
  border:1px solid rgba(83,236,255,.60);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
}
html.b2-ready .immersion.b2-play .point-a .point-icon::before{
  animation:b2IconPulse 820ms var(--b2-ease) 1040ms 1 both;
}
html.b2-ready .immersion.b2-play .point-b .point-icon::before{
  animation:b2IconPulse 820ms var(--b2-ease) 1140ms 1 both;
}
html.b2-ready .immersion.b2-play .point-c .point-icon::before{
  animation:b2IconPulse 820ms var(--b2-ease) 1240ms 1 both;
}
@keyframes b2IconPulse{
  0%{opacity:0;transform:scale(.82)}
  35%{opacity:.82}
  100%{opacity:0;transform:scale(1.55)}
}

/* Hover: only local refinement.
   No card translation, no layout motion. */
.immersion .point:hover{
  transform:none !important;
  border-color:rgba(82,235,255,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 18px 48px rgba(0,0,0,.24),
    0 0 30px rgba(38,222,255,.14);
}
.immersion .point:hover::before{
  filter:saturate(1.07) contrast(1.06) brightness(.98);
  transition:filter 240ms ease;
}
.immersion .point:hover .point-icon{
  border-color:rgba(94,241,255,.94);
  box-shadow:0 0 24px rgba(41,220,255,.22);
  transition:border-color 180ms ease,box-shadow 180ms ease;
}

/* Index comes last as a quiet chapter confirmation. */
html.b2-ready .immersion-index{
  opacity:0;
  transition:opacity 600ms var(--b2-ease);
}
html.b2-ready .immersion.b2-play .immersion-index{
  opacity:1;
  transition-delay:1180ms;
}

/* Reduced motion = exact static approved design. */
@media(prefers-reduced-motion:reduce){
  .immersion::after,
  .immersion-frame::before,
  .point-icon::before{
    display:none !important;
  }
  html.b2-ready .immersion-copy .section-kicker,
  html.b2-ready .immersion-copy h2,
  html.b2-ready .immersion-copy .immersion-lead,
  html.b2-ready .immersion .point,
  html.b2-ready .immersion-index{
    opacity:1 !important;
    clip-path:none !important;
    transform:none !important;
    animation:none !important;
    transition:none !important;
  }
}


/* =========================================================
   BLOCK 02 V2 — VISIBLE MECHANIC + CLEAN CARD ART
   - remove baked text bleed in card images
   - less "text animation", more visual motion
   - portal rings + scene sweep + image reveal + card scan
   ========================================================= */

/* 1) Do not animate the live text as the main event. Keep it readable. */
html.b2-ready .immersion-copy .section-kicker,
html.b2-ready .immersion-copy h2,
html.b2-ready .immersion-copy .immersion-lead{
  opacity:1 !important;
  clip-path:none !important;
  transition:none !important;
}

/* 2) Clean the baked text from the feature artwork.
   The image only lives on the right half; the left half is a solid live-text panel. */
.point{
  padding-right:47% !important;
  background:#061a2b !important;
}
.point::before{
  inset:0 0 0 48% !important;
  background-position:72% center !important;
  background-size:cover !important;
  transform-origin:right center;
  transition:transform 360ms var(--b2-ease),filter 360ms ease;
}
.point::after{
  background:
    linear-gradient(90deg,
      #061a2b 0%,
      #061a2b 46%,
      rgba(6,26,43,.98) 52%,
      rgba(6,26,43,.74) 61%,
      rgba(3,18,31,.24) 78%,
      rgba(3,18,31,.06) 100%),
    linear-gradient(180deg,rgba(0,0,0,.01),rgba(1,10,18,.14)) !important;
}

/* On hover only the image breathes. The card itself stays fixed. */
.immersion .point:hover::before{
  transform:scale(1.045);
  filter:saturate(1.08) contrast(1.07) brightness(.96);
}

/* 3) Cards are already in place. Reveal the IMAGE windows instead of sliding the whole cards. */
html.b2-ready .immersion .point{
  opacity:1 !important;
  transform:none !important;
}
html.b2-ready .immersion .point::before{
  clip-path:inset(0 100% 0 0);
}
html.b2-ready .immersion.b2-play .point-a::before{
  animation:b2ImageReveal 880ms var(--b2-ease) 420ms 1 both;
}
html.b2-ready .immersion.b2-play .point-b::before{
  animation:b2ImageReveal 880ms var(--b2-ease) 600ms 1 both;
}
html.b2-ready .immersion.b2-play .point-c::before{
  animation:b2ImageReveal 880ms var(--b2-ease) 780ms 1 both;
}
@keyframes b2ImageReveal{
  from{clip-path:inset(0 100% 0 0);filter:saturate(.60) brightness(.55) blur(3px)}
  55%{filter:saturate(1.12) brightness(1.06) blur(0)}
  to{clip-path:inset(0 0 0 0);filter:saturate(1.02) contrast(1.05) brightness(.90)}
}

/* 4) One cyan sweep across the WHOLE scene. This is intentionally visible. */
.immersion-frame::after{
  content:"";
  position:absolute;
  z-index:8;
  top:-12%;
  bottom:-12%;
  left:-22%;
  width:9%;
  pointer-events:none;
  opacity:0;
  transform:skewX(-14deg);
  background:
    linear-gradient(90deg,
      transparent,
      rgba(83,235,255,.08) 24%,
      rgba(128,247,255,.42) 50%,
      rgba(83,235,255,.08) 76%,
      transparent);
  filter:blur(5px);
}
html.b2-ready .immersion.b2-play .immersion-frame::after{
  animation:b2SceneSweep 1400ms var(--b2-ease) 260ms 1 both;
}
@keyframes b2SceneSweep{
  0%{left:-22%;opacity:0}
  14%{opacity:1}
  86%{opacity:.90}
  100%{left:116%;opacity:0}
}

/* 5) Portal: two expanding rings instead of one vague glow. */
.immersion .b2-ring{
  position:absolute;
  z-index:2;
  left:62%;
  top:37%;
  width:120px;
  height:120px;
  margin:-60px 0 0 -60px;
  border:1px solid rgba(82,235,255,.58);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  box-shadow:
    0 0 24px rgba(52,222,255,.14),
    inset 0 0 22px rgba(52,222,255,.08);
}
html.b2-ready .immersion.b2-play .b2-ring-a{
  animation:b2PortalRing 1450ms var(--b2-ease) 120ms 1 both;
}
html.b2-ready .immersion.b2-play .b2-ring-b{
  animation:b2PortalRing 1450ms var(--b2-ease) 420ms 1 both;
}
@keyframes b2PortalRing{
  0%{opacity:0;transform:scale(.55)}
  24%{opacity:.78}
  100%{opacity:0;transform:scale(7.2)}
}

/* 6) A bright scan travels through each card after its image reveal. */
.point .b2-card-scan{
  position:absolute;
  z-index:4;
  top:0;
  bottom:0;
  left:45%;
  width:12%;
  pointer-events:none;
  opacity:0;
  transform:skewX(-11deg);
  background:
    linear-gradient(90deg,transparent,rgba(123,245,255,.34),rgba(255,255,255,.34),rgba(123,245,255,.12),transparent);
  filter:blur(1px);
}
html.b2-ready .immersion.b2-play .point-a .b2-card-scan{
  animation:b2CardScanVisible 760ms var(--b2-ease) 980ms 1 both;
}
html.b2-ready .immersion.b2-play .point-b .b2-card-scan{
  animation:b2CardScanVisible 760ms var(--b2-ease) 1160ms 1 both;
}
html.b2-ready .immersion.b2-play .point-c .b2-card-scan{
  animation:b2CardScanVisible 760ms var(--b2-ease) 1340ms 1 both;
}
@keyframes b2CardScanVisible{
  0%{left:42%;opacity:0}
  16%{opacity:.85}
  100%{left:108%;opacity:0}
}

/* 7) Slow ambient pulse around the three icons after the intro.
   Unlike the old version this continues, but remains subtle. */
html.b2-ready .immersion .point-icon::before,
html.b2-ready .immersion .point-icon::after{
  content:"";
  position:absolute;
  inset:-7px;
  border:1px solid rgba(78,235,255,.42);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
}
html.b2-ready .immersion.b2-play .point-icon::before{
  animation:b2AmbientPulse 4.6s var(--b2-ease) 1.7s infinite;
}
html.b2-ready .immersion.b2-play .point-icon::after{
  animation:b2AmbientPulse 4.6s var(--b2-ease) 4s infinite;
}
@keyframes b2AmbientPulse{
  0%{opacity:0;transform:scale(.86)}
  15%{opacity:.42}
  70%{opacity:.10}
  100%{opacity:0;transform:scale(1.58)}
}

/* Disable the older one-shot icon pulse so it doesn't stack. */
html.b2-ready .immersion.b2-play .point-a .point-icon::before,
html.b2-ready .immersion.b2-play .point-b .point-icon::before,
html.b2-ready .immersion.b2-play .point-c .point-icon::before{
  animation-name:b2AmbientPulse !important;
}

/* Reduced motion restores the exact static composition. */
@media(prefers-reduced-motion:reduce){
  .immersion .b2-ring,
  .immersion-frame::after,
  .point .b2-card-scan,
  .point-icon::before,
  .point-icon::after{
    display:none !important;
  }
  html.b2-ready .immersion .point::before{
    clip-path:none !important;
    animation:none !important;
    filter:saturate(1.02) contrast(1.05) brightness(.90) !important;
  }
}