/* AEPi morphing wordmark — reference implementation
   Depends on DS tokens: --ground --blue --gold --bone --plate --display --ease --slow --med
   Falls back to literals if the token layer is absent.

   Source: the Claude Design handoff at handoff/hero-morph/aepi-morph.css.
   One local fix, marked below: the layers needed position:relative or the crest
   badge sized itself to the whole viewport instead of hugging the letters. */

/* container-type + the 30cqi bound are the second local fix: at full size the
   three glyphs overran any box narrower than the viewport, so the mark now also
   answers to the width of whatever it is dropped into. */
.aepi-morph{position:relative;display:grid;place-items:center;isolation:isolate;line-height:.82;user-select:none;container-type:inline-size;--m-size:min(var(--t-5xl,clamp(5rem,19vw,12.5rem)),30cqi);--m-blue:var(--blue,#2448B4);--m-gold:var(--gold,#F0B414);--m-bone:var(--bone,#E8E4DA);--m-ease:var(--ease,cubic-bezier(.22,1,.36,1));--m-dur:900ms;--m-stagger:70ms}
/* position:relative is the local fix — the crest badge anchors to its own layer. */
.aepi-morph__layer{position:relative;grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:.04em;font-size:var(--m-size);font-weight:700;opacity:0;pointer-events:none}
.aepi-morph__layer[data-state="active"]{opacity:1;pointer-events:auto}
.aepi-morph__l{display:inline-block;transform-origin:50% 60%;will-change:transform,opacity,filter,clip-path}

/* ── Themes ─────────────────────────────────────────────────────────── */

/* 1. Varsity — gold face, navy outline. The jersey lockup. */
.aepi-morph__layer[data-theme="varsity"]{font-family:var(--plate,"Cormorant SC",Georgia,serif);color:var(--m-gold);letter-spacing:.01em}
.aepi-morph__layer[data-theme="varsity"] .aepi-morph__l{-webkit-text-stroke:.055em var(--m-blue);paint-order:stroke fill;text-shadow:.035em .035em 0 var(--m-blue)}

/* 2. Stars & Stripes — flag fill clipped to the glyphs, cream keyline. */
.aepi-morph__layer[data-theme="stripes"]{font-family:var(--plate,"Cormorant SC",Georgia,serif);letter-spacing:.01em}
.aepi-morph__layer[data-theme="stripes"] .aepi-morph__l{color:transparent;background-image:repeating-linear-gradient(180deg,#C8102E 0 9%,var(--m-bone) 9% 18%);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:.045em var(--m-bone);paint-order:stroke fill}
/* the leading A carries the canton instead of the stripes */
.aepi-morph__layer[data-theme="stripes"] .aepi-morph__l:first-child{background-image:radial-gradient(var(--m-bone) 22%,transparent 23%),linear-gradient(var(--m-blue),var(--m-blue));background-size:.16em .16em,100% 100%;background-position:0 0,0 0}

/* 3. Crest — oval badge, gold ring. */
.aepi-morph__layer[data-theme="crest"]{font-family:var(--display,"Big Shoulders Display","Arial Narrow",sans-serif);font-weight:800;color:var(--m-gold);letter-spacing:.02em;padding:.22em .5em}
.aepi-morph__layer[data-theme="crest"]::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--m-blue);border:.06em solid var(--m-gold);box-shadow:inset 0 0 0 .035em var(--m-blue);z-index:-1}

/* 4. Etched — hairline outline only, opened tracking. */
.aepi-morph__layer[data-theme="etched"]{font-family:var(--display,"Big Shoulders Display","Arial Narrow",sans-serif);font-weight:400;letter-spacing:.14em}
.aepi-morph__layer[data-theme="etched"] .aepi-morph__l{color:transparent;-webkit-text-stroke:.018em var(--m-gold)}

/* ── Transitions ────────────────────────────────────────────────────── */
/* Each pair is driven by data-state on the layer; per-letter delay comes
   from --i set in JS. Outgoing runs first half, incoming second half. */

.aepi-morph__layer[data-state="in"] .aepi-morph__l,
.aepi-morph__layer[data-state="out"] .aepi-morph__l{transition:transform var(--m-dur) var(--m-ease),opacity var(--m-dur) var(--m-ease),filter var(--m-dur) var(--m-ease),clip-path var(--m-dur) var(--m-ease),letter-spacing var(--m-dur) var(--m-ease);transition-delay:calc(var(--i) * var(--m-stagger))}
.aepi-morph__layer[data-state="in"]{opacity:1}
.aepi-morph__layer[data-state="out"]{opacity:1}

/* shutter: clip-path sweep, letter by letter */
.aepi-morph[data-transition="shutter"] .aepi-morph__layer[data-state="out"] .aepi-morph__l{clip-path:inset(0 0 100% 0)}
.aepi-morph[data-transition="shutter"] .aepi-morph__layer[data-state="in"] .aepi-morph__l{clip-path:inset(0 0 0 0)}
.aepi-morph[data-transition="shutter"] .aepi-morph__layer[data-state="in"] .aepi-morph__l.is-start{clip-path:inset(100% 0 0 0)}

/* dissolve: blur + scale bloom */
.aepi-morph[data-transition="dissolve"] .aepi-morph__layer[data-state="out"] .aepi-morph__l{opacity:0;filter:blur(.09em);transform:scale(1.12)}
.aepi-morph[data-transition="dissolve"] .aepi-morph__layer[data-state="in"] .aepi-morph__l{opacity:1;filter:blur(0);transform:scale(1)}
.aepi-morph[data-transition="dissolve"] .aepi-morph__layer[data-state="in"] .aepi-morph__l.is-start{opacity:0;filter:blur(.09em);transform:scale(.88)}

/* flip: 3D card turn on the x-axis */
.aepi-morph[data-transition="flip"]{perspective:1400px}
.aepi-morph[data-transition="flip"] .aepi-morph__layer[data-state="out"] .aepi-morph__l{opacity:0;transform:rotateX(-92deg)}
.aepi-morph[data-transition="flip"] .aepi-morph__layer[data-state="in"] .aepi-morph__l{opacity:1;transform:rotateX(0)}
.aepi-morph[data-transition="flip"] .aepi-morph__layer[data-state="in"] .aepi-morph__l.is-start{opacity:0;transform:rotateX(92deg)}

/* tracking: letters fly apart, next set collapses in */
.aepi-morph[data-transition="tracking"] .aepi-morph__layer[data-state="out"] .aepi-morph__l{opacity:0;transform:translateX(calc((var(--i) - 1) * 1.1em))}
.aepi-morph[data-transition="tracking"] .aepi-morph__layer[data-state="in"] .aepi-morph__l{opacity:1;transform:translateX(0)}
.aepi-morph[data-transition="tracking"] .aepi-morph__layer[data-state="in"] .aepi-morph__l.is-start{opacity:0;transform:translateX(calc((var(--i) - 1) * -1.1em))}

@media (prefers-reduced-motion:reduce){
  .aepi-morph__layer[data-state="in"] .aepi-morph__l,
  .aepi-morph__layer[data-state="out"] .aepi-morph__l{transition-duration:1ms;transition-delay:0ms}
}