/* V3 timing-only polish: calm 3.90s sequence; v2 geometry and shader unchanged. */
/* V2 glint: visibly reflective but confined to original alpha mask. */
/* Garra da Loba — approved combined logo entrance: optical focus + ONE
   pearl glint. The original 5062x698 PNG stays in its exact approved place.
   No video, scaling, typography replacement, rainbow or repeat animation.
   Style foundation: existing Garra black/pearl + restrained YSL editorial
   hero; glint borrows only the already-approved pearl light vocabulary. */

/* Blur/opacity apply to the original transparent logo IMG, not the wrapper,
   so original position/scale and other scroll math are never overwritten. */
.intro-story .intro-stage.gdl-optical-pearl .intro-logo-wrap > .intro-logo {
  animation:gdl-optical-logo-resolve 2.60s cubic-bezier(.19,.74,.2,1) both;
}
@keyframes gdl-optical-logo-resolve {
  0% { opacity:.74; filter:blur(3px); }
  55% { opacity:.91; filter:blur(1.2px); }
  100% { opacity:1; filter:blur(0); }
}

/* A single narrow pearl highlight traverses INSIDE the real PNG alpha.
   No halo under/around the logo, no moving/duplicated lettering. */
.intro-story .intro-stage.gdl-optical-pearl .intro-logo-wrap::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  pointer-events:none;
  user-select:none;
  -webkit-mask-image:url("../../assets/garra-pearl-logo.png");
  mask-image:url("../../assets/garra-pearl-logo.png");
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  /* Normal compositing is essential: the prior screen blend made the
     glint practically invisible over the original light-pearl strokes. */
  mix-blend-mode:normal;
  background-image:linear-gradient(
    96deg,
    transparent 40%,
    rgba(225,205,235,.14) 44%,
    rgba(231,243,255,.66) 47%,
    rgba(255,255,255,1) 50%,
    rgba(231,246,255,.69) 53%,
    rgba(241,222,205,.16) 57%,
    transparent 60%
  );
  background-size:230% 100%;
  background-repeat:no-repeat;
  opacity:0;
  animation:gdl-optical-pearl-once 2.15s cubic-bezier(.35,.05,.65,.95) .55s both;
}
@keyframes gdl-optical-pearl-once {
  0%   { background-position:100% 50%; opacity:0; }
  24%  { opacity:.85; }
  64%  { opacity:.85; }
  100% { background-position:0% 50%; opacity:0; }
}

/* While the one-time entry runs, do not let pointer glow layer on top.
   Once finished, the existing approved live mouse tracking takes over. */
.intro-story .intro-stage.gdl-optical-pearl .intro-logo-wrap .gdl-pearl-specular,
.intro-story .intro-stage.gdl-optical-pearl .intro-logo-wrap .gdl-pearl-aura {
  animation:gdl-optical-pointer-hold 2.70s linear backwards;
}
@keyframes gdl-optical-pointer-hold {
  from {opacity:0;}
  to   {opacity:0;}
}

/* Use the already-established cue keyframes, but sequence them after
   the now slower logo resolve and single pearl glint. */
.intro-story .intro-stage.gdl-optical-pearl .scroll-cue {
  animation:gdl-intro-cue-arrive 1.05s cubic-bezier(.22,.8,.26,1) 2.85s both;
}

@media (prefers-reduced-motion:reduce) {
  .intro-story .intro-stage.gdl-optical-pearl .intro-logo-wrap > .intro-logo {
    animation:none!important;
    filter:none!important;
    opacity:1!important;
  }
  .intro-story .intro-stage.gdl-optical-pearl .intro-logo-wrap::after {
    display:none!important;
    animation:none!important;
  }
  .intro-story .intro-stage.gdl-optical-pearl .scroll-cue {
    animation:none!important;
    opacity:var(--cue-opacity,1)!important;
    translate:none!important;
  }
}