/*
 * Owner: Official connector/card reaction to `is-light-hit`.
 * Base card layout belongs to the axis/card files; global pausing belongs to
 * crossroad-scene-state.css. Do not cancel this state from downstream CSS.
 *
 * Official cards react to the travelling light instead of moving forever.
 * The line takes the hit first; the card then behaves like cloth fixed at its
 * left edge. This deliberately exaggerated pass is for motion-direction QA.
 */
.latest-official,
.official-event,
.future-official-card{
  transform-origin:0 24px;
}

/*
 * Keep the connector present for the WebGL hit detector. At rest it reads as
 * the original 1px rule; while hit it becomes a visibly bending ribbon.
 */
.latest-official::before,
.official-event::before,
.future-official-card::before{
  height:9px;
  top:19px;
  background:rgba(130,205,252,.38);
  clip-path:polygon(0 44%,100% 44%,100% 56%,0 56%);
  transform-origin:0 50%;
}

.latest-official.is-light-hit::before,
.official-event.is-light-hit::before,
.future-official-card.is-light-hit::before{
  animation:officialTetherWhip 1.68s cubic-bezier(.22,.72,.2,1) both;
}

.latest-official.is-light-hit,
.official-event.is-light-hit,
.future-official-card.is-light-hit{
  z-index:12;
  will-change:transform,clip-path;
  animation:
    officialBannerImpact 1.9s cubic-bezier(.2,.72,.18,1) both,
    officialBannerClothWave 1.9s cubic-bezier(.2,.72,.18,1) both;
}

/* A short travelling highlight makes the direction of the impulse legible. */
.latest-official .official-card-copy::after,
.official-event::marker{
  pointer-events:none;
}

.latest-official.is-light-hit .official-card-copy::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(
    106deg,
    transparent 20%,
    rgba(130,205,252,.04) 38%,
    rgba(222,246,255,.18) 48%,
    transparent 63%
  );
  background-size:230% 100%;
  animation:officialImpactSheen 1.15s ease-out both;
}

@keyframes officialTetherWhip{
  0%{
    transform:translateY(0) rotate(0deg);
    clip-path:polygon(0 44%,100% 44%,100% 56%,0 56%);
  }
  13%{
    transform:rotate(-1.15deg);
    clip-path:polygon(0 44%,24% 34%,49% 55%,74% 38%,100% 48%,100% 60%,74% 50%,49% 67%,24% 46%,0 56%);
  }
  31%{
    transform:rotate(.78deg);
    clip-path:polygon(0 44%,24% 55%,49% 34%,74% 57%,100% 42%,100% 54%,74% 69%,49% 46%,24% 67%,0 56%);
  }
  52%{
    transform:rotate(-.38deg);
    clip-path:polygon(0 44%,25% 39%,50% 51%,75% 41%,100% 47%,100% 59%,75% 53%,50% 63%,25% 51%,0 56%);
  }
  75%{
    transform:rotate(.14deg);
    clip-path:polygon(0 44%,25% 47%,50% 42%,75% 48%,100% 44%,100% 56%,75% 60%,50% 54%,25% 59%,0 56%);
  }
  100%{
    transform:translateY(0) rotate(0deg);
    clip-path:polygon(0 44%,100% 44%,100% 56%,0 56%);
  }
}

/*
 * No scale is used here. The visible change comes from lateral momentum,
 * alternating shear/rotation and the independently changing cloth outline.
 */
@keyframes officialBannerImpact{
  0%{transform:translate3d(0,0,0) skewY(0deg) rotateZ(0deg)}
  10%{transform:translate3d(18px,-6px,0) skewY(-3.8deg) rotateZ(-1.7deg)}
  24%{transform:translate3d(-8px,4px,0) skewY(2.7deg) rotateZ(1.25deg)}
  40%{transform:translate3d(7px,-2px,0) skewY(-1.75deg) rotateZ(-.72deg)}
  58%{transform:translate3d(-3px,1px,0) skewY(.95deg) rotateZ(.38deg)}
  76%{transform:translate3d(1.5px,-.5px,0) skewY(-.38deg) rotateZ(-.14deg)}
  100%{transform:translate3d(0,0,0) skewY(0deg) rotateZ(0deg)}
}

@keyframes officialBannerClothWave{
  0%,100%{clip-path:polygon(0 0,25% 0,50% 0,75% 0,100% 0,100% 100%,75% 100%,50% 100%,25% 100%,0 100%)}
  10%{clip-path:polygon(0 0,25% 3.6%,50% 0,75% 4.8%,100% .8%,100% 94.4%,75% 100%,50% 95.2%,25% 99.1%,0 100%)}
  24%{clip-path:polygon(0 0,25% .2%,50% 4.6%,75% 0,100% 4.1%,100% 99.6%,75% 94.8%,50% 100%,25% 95.3%,0 100%)}
  40%{clip-path:polygon(0 0,25% 2.7%,50% .3%,75% 3.1%,100% .4%,100% 96.1%,75% 99.6%,50% 96.2%,25% 99.7%,0 100%)}
  58%{clip-path:polygon(0 0,25% .4%,50% 2.2%,75% .2%,100% 1.9%,100% 99.5%,75% 97.2%,50% 99.8%,25% 97.6%,0 100%)}
  76%{clip-path:polygon(0 0,25% 1.1%,50% .2%,75% 1.3%,100% .1%,100% 98.5%,75% 99.8%,50% 98.4%,25% 99.7%,0 100%)}
}

@keyframes officialImpactSheen{
  0%{background-position:150% 0;opacity:0}
  18%{opacity:1}
  72%{opacity:.38}
  100%{background-position:-65% 0;opacity:0}
}

@media(max-width:760px){
  .latest-official::before,
  .official-event::before,
  .future-official-card::before{
    top:17px;
  }
  .latest-official.is-light-hit,
  .official-event.is-light-hit,
  .future-official-card.is-light-hit{
    will-change:auto;
    animation:none;
  }
  .latest-official.is-light-hit::before,
  .official-event.is-light-hit::before,
  .future-official-card.is-light-hit::before{
    animation:officialTetherMobile 1.35s cubic-bezier(.22,.72,.2,1) both;
  }
  .latest-official .official-card-copy,
  .official-event .official-card-copy,
  .future-official-card .official-card-copy{
    position:relative;
    overflow:hidden;
  }
  .latest-official .official-card-copy::after,
  .official-event .official-card-copy::after,
  .future-official-card .official-card-copy::after{
    content:"";
    position:absolute;
    z-index:0;
    inset:0;
    pointer-events:none;
    opacity:0;
    transform:translate3d(-115%,0,0);
    background:linear-gradient(104deg,transparent 28%,rgba(218,246,255,.2) 49%,transparent 68%);
  }
  .latest-official.is-light-hit .official-card-copy::after,
  .official-event.is-light-hit .official-card-copy::after,
  .future-official-card.is-light-hit .official-card-copy::after{
    animation:officialImpactSheenMobile .82s ease-out both;
  }
  @keyframes officialTetherMobile{
    0%,100%{transform:translate3d(0,0,0) scaleX(1) skewY(0deg)}
    14%{transform:translate3d(0,-2px,0) scaleX(1.025) skewY(-2.2deg)}
    32%{transform:translate3d(0,1.5px,0) scaleX(.99) skewY(1.45deg)}
    54%{transform:translate3d(0,-.8px,0) scaleX(1.012) skewY(-.72deg)}
    76%{transform:translate3d(0,.3px,0) scaleX(.997) skewY(.24deg)}
  }
  @keyframes officialImpactSheenMobile{
    0%{opacity:0;transform:translate3d(-115%,0,0)}
    24%{opacity:.72}
    100%{opacity:0;transform:translate3d(115%,0,0)}
  }
}

@media(prefers-reduced-motion:reduce){
  .latest-official.is-light-hit,
  .official-event.is-light-hit,
  .future-official-card.is-light-hit,
  .latest-official.is-light-hit::before,
  .official-event.is-light-hit::before,
  .future-official-card.is-light-hit::before,
  .latest-official.is-light-hit .official-card-copy::after{
    animation:none;
  }
}

/*
 * 3D koi-streamer test. Desktop creates ten clipped views only for the
 * duration of an impact. Mobile keeps the single-card cloth pass above.
 * The desktop strips form a wave that moves toward and away from the viewer.
 */
.latest-official.has-banner-mesh.is-light-hit,
.official-event.has-banner-mesh.is-light-hit,
.future-official-card.has-banner-mesh.is-light-hit{
  overflow:visible;
  animation:none;
  clip-path:none;
  transform:none;
}

.latest-official.has-banner-mesh > .official-source-frame,
.latest-official.has-banner-mesh > .official-card-copy,
.official-event.has-banner-mesh > .official-source-frame,
.official-event.has-banner-mesh > .official-card-copy{
  transition:opacity .36s ease;
}

.future-official-card.has-banner-mesh > :not(.official-banner-mesh):not(.official-date){
  transition:opacity .36s ease;
}

.latest-official.has-banner-mesh.is-banner-mesh-active:not(.is-banner-mesh-settling) > .official-source-frame,
.latest-official.has-banner-mesh.is-banner-mesh-active:not(.is-banner-mesh-settling) > .official-card-copy,
.official-event.has-banner-mesh.is-banner-mesh-active:not(.is-banner-mesh-settling) > .official-source-frame,
.official-event.has-banner-mesh.is-banner-mesh-active:not(.is-banner-mesh-settling) > .official-card-copy,
.future-official-card.has-banner-mesh.is-banner-mesh-active:not(.is-banner-mesh-settling) > :not(.official-banner-mesh):not(.official-date){
  opacity:0;
}

/*
 * Scheduled dates sit outside the card face on the official spine. They are
 * timeline coordinates, not cloth, so keep the original date fixed and above
 * the temporary banner mesh while the travelling light passes.
 */
.future-official-card.has-banner-mesh > .official-date{
  z-index:5;
  opacity:1;
}

.official-banner-mesh{
  position:absolute;
  z-index:4;
  inset:0;
  overflow:visible;
  pointer-events:none;
  perspective:560px;
  perspective-origin:0 50%;
  transform-style:preserve-3d;
  opacity:0;
  transition:opacity .14s ease-out;
}

.is-banner-mesh-active > .official-banner-mesh{
  opacity:1;
}

.is-banner-mesh-settling > .official-banner-mesh{
  opacity:0;
  transition-duration:.36s;
  transition-timing-function:ease-in-out;
}

.official-banner-strip{
  position:absolute;
  inset:0;
  overflow:visible;
  clip-path:inset(0 calc(100% - var(--strip-end)) 0 var(--strip-start));
  transform-origin:var(--strip-origin) 50%;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform;
  animation:officialKoiStrip 1.64s cubic-bezier(.22,.68,.18,1) var(--strip-delay) both;
}

.official-banner-strip::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(210,241,255,.16),
      transparent 28%,
      rgba(1,7,12,.2) 82%,
      rgba(1,7,12,.42)
    );
  opacity:0;
  animation:officialKoiFoldShade 1.64s ease-in-out var(--strip-delay) both;
}

.official-banner-face,
.official-banner-face *{
  animation:none !important;
  transition:none !important;
}

.official-banner-face{
  position:absolute !important;
  inset:0 !important;
  box-sizing:border-box !important;
  width:var(--mesh-width) !important;
  min-width:var(--mesh-width) !important;
  max-width:none !important;
  height:var(--mesh-height) !important;
  min-height:var(--mesh-height) !important;
  margin:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  pointer-events:none !important;
}

.official-banner-face::before,
.official-banner-face::after,
.official-banner-face .official-date,
.official-banner-face .latest-head{
  display:none !important;
}

@keyframes officialKoiStrip{
  0%{
    transform:translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  15%{
    transform:
      translate3d(var(--wave-x-a),var(--wave-y-a),var(--wave-z-a))
      rotateX(var(--wave-rx-a))
      rotateY(var(--wave-ry-a))
      rotateZ(var(--wave-rz-a));
  }
  33%{
    transform:
      translate3d(var(--wave-x-b),var(--wave-y-b),var(--wave-z-b))
      rotateX(var(--wave-rx-b))
      rotateY(var(--wave-ry-b))
      rotateZ(var(--wave-rz-b));
  }
  52%{
    transform:
      translate3d(var(--wave-x-c),var(--wave-y-c),var(--wave-z-c))
      rotateX(var(--wave-rx-c))
      rotateY(var(--wave-ry-c))
      rotateZ(var(--wave-rz-c));
  }
  72%{
    transform:
      translate3d(var(--wave-x-d),var(--wave-y-d),var(--wave-z-d))
      rotateX(var(--wave-rx-d))
      rotateY(var(--wave-ry-d))
      rotateZ(var(--wave-rz-d));
  }
  100%{
    transform:translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
}

@keyframes officialKoiFoldShade{
  0%,100%{opacity:0}
  15%{opacity:calc(.2 + var(--light-sign) * .14)}
  33%{opacity:calc(.18 - var(--light-sign) * .08)}
  58%{opacity:.1}
}

@media(max-width:760px){
  .official-banner-mesh{perspective:430px}
}

@media(prefers-reduced-motion:reduce){
  .official-banner-mesh{display:none}
}