:root { --team-logo-font: 'Anton', 'Black Han Sans', 'Pretendard', -apple-system, sans-serif; }

/* ── 입장: 화면 전체가 팀 깃발로 ───────────────────────── */
.locker-veil {
  --team-entry-font: 'Anton', 'Black Han Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  overflow: hidden;
  background: #f2f4f6;
  color: #0b1220;
  isolation: isolate;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.locker-veil[data-entry-font="system"] { --team-entry-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.locker-veil[data-entry-fonts-pending] .locker-veil__name,
.locker-veil[data-entry-fonts-pending] .locker-crest__mono { visibility: hidden; }
html.dark .locker-veil { background: #05070d; color: #fff; }
.locker-veil__surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #f2f4f6;
  pointer-events: none;
}
html.dark .locker-veil__surface { background: #05070d; }
/* One surface unfolds from the chosen cover; the crest travels independently
   so its overhang is not clipped at the starting card edge. */
.locker-veil.locker-veil--expanding,
html.dark .locker-veil.locker-veil--expanding { background: transparent; animation: none; }
.locker-veil--expanding .locker-crest--veil { animation: none; }
.locker-veil--expanding[data-origin-ready] .locker-veil__surface {
  animation: lockerSurfaceExpand var(--entry-expand-duration) cubic-bezier(.16, 1, .3, 1) both;
}
.locker-veil--expanding[data-origin-ready] > .locker-crest-wrap {
  animation: lockerCrestTravel var(--entry-expand-duration) cubic-bezier(.16, 1, .3, 1) both;
}
.locker-veil--expanding .locker-veil__name,
.locker-veil--expanding .locker-veil__bar {
  animation: lockerEntryReveal 200ms 90ms ease-out both;
}
@keyframes lockerSurfaceExpand {
  from { clip-path: inset(var(--entry-cover-top) var(--entry-cover-right) var(--entry-cover-bottom) var(--entry-cover-left) round 26px); }
  to { clip-path: inset(0 round 0); }
}
@keyframes lockerCrestTravel {
  from { transform: translate(var(--entry-crest-x), var(--entry-crest-y)) scale(var(--entry-crest-scale)); }
  to { transform: translate(0, 0) scale(1); }
}
@keyframes lockerEntryReveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.locker-veil__cloth,
.locker-veil__folds,
.locker-veil__scrim { position: absolute; pointer-events: none; }
.locker-veil__scrim {
  inset: 0;
  background: radial-gradient(70% 50% at 50% 48%, rgba(242, 244, 246, 0.3) 0%, rgba(242, 244, 246, 0.9) 100%);
}
html.dark .locker-veil__scrim { background: radial-gradient(70% 50% at 50% 48%, rgba(5, 7, 13, 0.2) 0%, rgba(5, 7, 13, 0.85) 100%); }
.locker-crest--veil {
  position: relative;
  width: 128px;
  height: 128px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 14px rgba(11, 18, 32, 0.06), 0 24px 50px -20px rgba(11, 18, 32, 0.5);
  box-sizing: border-box;
}
html.dark .locker-crest--veil { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.95), 0 0 0 14px rgba(255, 255, 255, 0.12), 0 30px 60px -16px rgba(0, 0, 0, 0.9); }
.locker-crest--veil .locker-crest__mono { font-size: 44px; }
.locker-veil__kicker {
  position: relative;
  margin: 6px 0 0;
  color: #047857;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.24em;
  animation: lockerFadeUp 0.6s 0.25s both;
}
html.dark .locker-veil__kicker { color: #6ee7b7; }
.locker-veil__name {
  position: relative;
  margin: 0;
  padding: 0 28px;
  font-family: var(--team-entry-font);
  font-weight: 400;
  letter-spacing: .01em;
  font-size: 40px;
  line-height: 1.04;
  text-align: center;
  text-transform: uppercase;
  word-break: keep-all;
  max-width: 100%;
  box-sizing: border-box;
}
.locker-veil__bar {
  position: relative;
  width: 120px;
  height: 3px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(11, 18, 32, 0.12);
}
html.dark .locker-veil__bar { background: rgba(255, 255, 255, 0.18); }
.locker-veil__bar i {
  position: absolute;
  inset: 0;
  background: #059669;
  transform-origin: left;
}
html.dark .locker-veil__bar i { background: #34d399; }


/* Available before the app bundle, so document navigation cannot expose a gap. */
.locker-veil .locker-crest { display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; border-radius: 50%; background: white; }
.locker-veil .locker-crest img { width: 84%; height: 84%; object-fit: contain; }
.locker-veil .locker-crest__mono { color: #0b1220; font-family: var(--team-entry-font); font-weight: 400; line-height: 1; letter-spacing: .02em; }
.locker-veil__cloth { inset: -12% -22%; background-position: center; background-size: cover; opacity: .32; }
html.dark .locker-veil__cloth { opacity: 1; filter: saturate(.85) brightness(.6); }
.locker-veil__folds { top: -20%; bottom: -20%; left: -260px; width: calc(100% + 360px); transform: skewX(-14deg); background: repeating-linear-gradient(90deg, transparent 0px, rgba(255,255,255,.55) 40px, transparent 80px, rgba(11,18,32,.05) 125px, transparent 170px); }
html.dark .locker-veil__folds { background: repeating-linear-gradient(90deg, transparent 0px, rgba(255,255,255,.1) 40px, transparent 80px, rgba(0,0,0,.24) 125px, transparent 170px); }
.locker-veil__bar i { transform: scaleX(.72); }
#gf-team-entry[data-resuming], #gf-team-entry[data-resuming] .locker-crest, #gf-team-entry[data-resuming] .locker-veil__kicker, #gf-team-entry[data-resuming] .locker-veil__name { animation: none; }
html[data-gf-team-entry] #gf-splash { display: none !important; }
.team-entry-placeholder { box-sizing: border-box; min-height: 100dvh; padding: max(76px, env(safe-area-inset-top)) 20px 80px; background: #f2f4f6; }
.team-entry-placeholder__block { max-width: 560px; height: 180px; margin: 0 auto 16px; border-radius: 22px; background: var(--app-raised, #e5e9ee); }
.team-entry-placeholder__block:first-child { height: 52px; }
@media (prefers-reduced-motion: reduce) { .locker-veil, .locker-veil * { animation: none !important; } }

.locker-veil .locker-crest-wrap { position: relative; display: inline-flex; flex: none; }
.locker-veil .team-trophy-stars { position: absolute; inset: 0; pointer-events: none; color: #b7790b; }
html.dark .locker-veil .team-trophy-stars { color: #fbbf24; }
.locker-veil .team-trophy-stars__arc { position: absolute; top: -22%; left: -15%; width: 130%; height: 122%; overflow: visible; }
.locker-veil .team-trophy-stars__extra { fill: currentColor; font: 850 15px sans-serif; }
html.dark .team-entry-placeholder { background: var(--app-canvas, #05070d); }
html.dark .team-entry-placeholder__block { background: var(--app-raised, #111827); }

/* Shared, self-contained resting frame: app CSS/fonts must not restart it. */
.locker-veil__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 43%, rgba(16,185,129,.18), transparent 62%);
}
.locker-veil > .locker-crest-wrap::before,
.locker-veil > .locker-crest-wrap::after {
  content: '';
  position: absolute;
  inset: -24px;
  border: 1px solid rgba(5,150,105,.2);
  border-radius: 50%;
  pointer-events: none;
}
.locker-veil > .locker-crest-wrap::after { inset: -42px; border-color: rgba(5,150,105,.08); }
html.dark .locker-veil > .locker-crest-wrap::before { border-color: rgba(110,231,183,.3); }
html.dark .locker-veil > .locker-crest-wrap::after { border-color: rgba(110,231,183,.12); }
.locker-veil--expanding[data-origin-ready] > .locker-crest-wrap::before {
  animation: lockerOrbitArrive 300ms 20ms cubic-bezier(.16,1,.3,1) both;
}
.locker-veil--expanding[data-origin-ready] > .locker-crest-wrap::after {
  animation: lockerOrbitArrive 270ms 60ms cubic-bezier(.16,1,.3,1) both;
}
.locker-veil__sweep {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(52,211,153,.15) 46%, rgba(255,255,255,.5) 50%, rgba(52,211,153,.12) 54%, transparent 62%);
}
.locker-veil--expanding[data-origin-ready] .locker-veil__sweep {
  animation: lockerLightSweep var(--entry-expand-duration) cubic-bezier(.2,.7,.2,1) both;
}
@keyframes lockerOrbitArrive {
  from { opacity: 0; transform: scale(.55) rotate(-24deg); }
  65% { opacity: 1; }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes lockerLightSweep {
  0% { opacity: 0; transform: translateX(-45%); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateX(45%); }
}
/* Reveal the already-rendered page; do not cut directly from an opaque veil. */
#gf-team-entry[data-leaving] { animation: teamEntryExit 120ms ease-out both; pointer-events: none; }
@keyframes teamEntryExit { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .locker-veil::before, .locker-veil::after, .locker-veil *::before, .locker-veil *::after { animation: none !important; }
  .locker-veil__sweep { display: none; }
}

/* ── Pin dive ─────────────────────────────────────────────────────────────
   The card's cover opens to the whole screen, the dot map dives into the club's
   pin (a canvas, components/TeamLockerDive) and the crest lands where the pin was.
   The page changes on the still frame after that. The next document paints the
   same frame from team-entry.js before React, so everything below the "first
   page only" block is plain markup that both documents build.
   Crest centre: 50% across, 42% down (lib/teamEntryDive DIVE_CENTER_Y). */
.locker-veil--dive .locker-dive__rig,
.locker-veil--dive .locker-dive__portal,
.locker-veil--dive .locker-dive__push,
.locker-veil--dive .locker-dive__cloth { position: absolute; inset: 0; }
.locker-veil--dive .locker-dive__portal,
.locker-veil--dive .locker-dive__push { transform-origin: 50% 42%; }
/* The resting frame is the end of the first page's camera push. */
.locker-veil--dive .locker-dive__push { transform: scale(1.07); }
.locker-veil--dive .locker-veil__cloth { opacity: .32; }
html.dark .locker-veil--dive .locker-veil__cloth { opacity: 1; }
.locker-veil--dive .locker-veil__folds { animation: lockerDiveFolds 6s linear infinite; }
.locker-veil__grain { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(11,18,32,.05) .7px, transparent 1.1px); background-size: 4px 4px; }
html.dark .locker-veil__grain { background-image: radial-gradient(rgba(255,255,255,.06) .7px, transparent 1.1px); }
.locker-veil--dive .locker-veil__scrim { background: radial-gradient(80% 55% at 50% 42%, rgba(242,244,246,.05) 0%, rgba(242,244,246,.72) 100%); }
html.dark .locker-veil--dive .locker-veil__scrim { background: radial-gradient(80% 55% at 50% 42%, rgba(5,7,13,0) 0%, rgba(5,7,13,.78) 100%); }

.locker-veil--dive .locker-dive__crest { position: absolute; left: 50%; top: 42%; width: 128px; height: 128px; margin: -64px 0 0 -64px; z-index: 2; }
/* Prepare the small moving layers before their delayed impact. Shaking the
   full-screen rig at 800ms promoted the flag, grain and crest together at the
   busiest frame; the crest bounce and rings provide the impact on their own. */
.locker-veil--dive .locker-dive__crest,
.locker-veil--dive .locker-dive__wave,
.locker-veil--dive .locker-dive__orbit { will-change: transform, opacity; }
.locker-veil--dive[data-dive-live] .locker-dive__flash { will-change: opacity; }
/* The white disc is its own layer so it can fade on landing and leave the bare logo. */
.locker-veil--dive .locker-crest--veil,
html.dark .locker-veil--dive .locker-crest--veil { width: 128px; height: 128px; background: transparent; box-shadow: none; overflow: visible; }
.locker-veil--dive .locker-crest--veil::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #fff, 0 0 0 14px rgba(11,18,32,.06), 0 24px 50px -20px rgba(11,18,32,.5); }
html.dark .locker-veil--dive .locker-crest--veil::before { box-shadow: 0 0 0 4px rgba(255,255,255,.95), 0 0 0 14px rgba(255,255,255,.12), 0 30px 60px -16px rgba(0,0,0,.9); }
.locker-veil--dive .locker-crest--veil > * { position: relative; z-index: 1; }
.locker-veil--dive .locker-crest--veil img { clip-path: circle(59.5% at 50% 50%); }
.locker-veil--dive .team-trophy-stars { z-index: 2; }

.locker-veil--dive .locker-dive__orbit { position: absolute; left: 50%; top: 42%; width: 172px; height: 172px; margin: -86px 0 0 -86px; border-radius: 50%; border: 1.5px dashed rgba(5,150,105,.45); pointer-events: none; animation: lockerDiveOrbitTurn 16s linear infinite; }
.locker-veil--dive .locker-dive__orbit--outer { width: 216px; height: 216px; margin: -108px 0 0 -108px; border: 1px solid rgba(5,150,105,.2); animation: none; }
html.dark .locker-veil--dive .locker-dive__orbit { border-color: rgba(110,231,183,.5); }
html.dark .locker-veil--dive .locker-dive__orbit--outer { border-color: rgba(110,231,183,.22); }

.locker-veil--dive .locker-dive__copy { position: absolute; left: 0; right: 0; top: calc(42% + 90px); z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.locker-veil--dive .locker-veil__kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0; letter-spacing: .12em; animation: none; }
.locker-veil--dive .locker-veil__kicker { max-width: calc(100% - 52px); }
.locker-veil--dive .locker-veil__kicker svg { width: 14px; height: 14px; flex: none; }
.locker-veil__place { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.locker-veil__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.locker-veil--dive .locker-veil__name { margin-top: 10px; padding: 0 26px; font-size: 42px; line-height: 1.02; animation: none; }
.locker-veil--dive .locker-veil__name--long { font-size: 34px; }
.locker-veil--dive .locker-veil__name--longer { font-size: 28px; }
.locker-veil__word { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .06em; }
.locker-veil__ch { display: inline-block; will-change: transform; }
.locker-veil--dive .locker-veil__bar { margin-top: 16px; }
.locker-veil--dive .locker-veil__bar i { transform: scaleX(.1); }

.locker-veil--dive .locker-dive__wave,
.locker-veil--dive .locker-dive__rim { position: absolute; left: 50%; top: 42%; border-radius: 50%; opacity: 0; pointer-events: none; }
.locker-veil--dive .locker-dive__wave { width: 150px; height: 150px; margin: -75px 0 0 -75px; border: 2px solid rgba(5,150,105,.75); box-shadow: 0 0 22px rgba(52,211,153,.35), inset 0 0 16px rgba(52,211,153,.25); }
.locker-veil--dive .locker-dive__wave--echo { border-width: 1px; }
html.dark .locker-veil--dive .locker-dive__wave { border-color: rgba(110,231,183,.9); }
.locker-veil--dive .locker-dive__rim { width: 72px; height: 72px; margin: -36px 0 0 -36px; border: 1.5px solid rgba(110,231,183,.9); box-shadow: 0 0 10px 2px rgba(52,211,153,.4), inset 0 0 8px rgba(52,211,153,.35); }

/* First page only: the cover opening, the dots, the hit. */
.locker-veil--dive .locker-dive__dim { position: absolute; inset: 0; background: #f2f4f6; opacity: 0; }
html.dark .locker-veil--dive .locker-dive__dim { background: #05070d; }
.locker-veil--dive .locker-dive__chrome { position: absolute; overflow: hidden; border-radius: 26px; pointer-events: none; }
.locker-veil--dive .locker-dive__chrome .country-dot-map { visibility: hidden; }
.locker-veil--dive .locker-dive__dots { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.locker-veil--dive .locker-dive__flash { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(circle at 50% 42%, #fff, rgba(255,255,255,.7) 26%, rgba(255,255,255,0) 64%); }
html.dark .locker-veil--dive .locker-dive__flash { background: radial-gradient(circle at 50% 42%, rgba(236,253,245,.9), rgba(110,231,183,.38) 24%, rgba(16,185,129,0) 62%); }
.locker-veil--dive .locker-dive__clock { position: absolute; width: 0; height: 0; }
.locker-veil--dive[data-origin-ready] .locker-veil__surface { animation: lockerDiveOpen 520ms cubic-bezier(.65,0,.35,1) both; }
.locker-veil--dive[data-origin-ready] .locker-dive__cloth { animation: lockerDiveCamera 520ms cubic-bezier(.65,0,.35,1) both; }
.locker-veil--dive[data-origin-ready] .locker-dive__push { animation: lockerDivePush 600ms 440ms cubic-bezier(.22,1,.36,1) both; }
.locker-veil--dive[data-origin-ready] .locker-dive__dim { animation: lockerDiveDim 420ms cubic-bezier(.22,1,.36,1) both; }
.locker-veil--dive[data-origin-ready] .locker-dive__chrome { animation: lockerDiveChrome 520ms cubic-bezier(.65,0,.35,1) both, lockerDiveChromeOut 200ms 40ms ease-in both; }
.locker-veil--dive[data-origin-ready] .locker-dive__flash { animation: lockerDiveFlash 240ms 790ms ease-out both; }
.locker-veil--dive[data-origin-ready] .locker-dive__clock { animation: lockerDiveClock 1600ms linear both; }

/* Started on the first page and still running when the page changes: the next
   document replays them with its own delays (start minus time since the tap), so
   they carry on where they were instead of restarting. */
.locker-veil--dive[data-dive-live] .locker-dive__crest { animation: lockerDiveCrest 260ms 780ms cubic-bezier(.22,1,.36,1) both; }
.locker-veil--dive[data-dive-live] .locker-dive__wave { animation: lockerDiveWave 520ms 790ms cubic-bezier(.22,1,.36,1) both; }
.locker-veil--dive[data-dive-live] .locker-dive__wave--echo { animation: lockerDiveEcho 640ms 880ms cubic-bezier(.22,1,.36,1) both; }
.locker-veil--dive[data-dive-live] .locker-veil__kicker { animation: lockerDiveRise 360ms 880ms cubic-bezier(.16,1,.3,1) both; }
.locker-veil--dive[data-dive-live] .locker-veil__ch { animation: lockerDiveLetter 420ms cubic-bezier(.16,1,.3,1) both; }
.locker-veil--dive[data-dive-live] .locker-veil__bar { animation: lockerDiveBarIn 240ms 1000ms ease-out both; }
.locker-veil--dive[data-dive-live] .locker-veil__bar i { animation: lockerDiveBarFill 2400ms 1000ms cubic-bezier(.2,.6,.3,1) both, lockerDiveBarCreep 11600ms 3400ms linear forwards; }
.locker-veil--dive[data-dive-live] .locker-dive__orbit { animation: lockerDiveOrbitIn 520ms 910ms cubic-bezier(.16,1,.3,1) both, lockerDiveOrbitTurn 16s linear infinite; }
.locker-veil--dive[data-dive-live] .locker-dive__orbit--outer { animation: lockerDiveOrbitIn 560ms 970ms cubic-bezier(.16,1,.3,1) both; }

/* Landing (team-entry.js finish): a portal opens where the crest sits and the
   crest flies onto the header's crest, which stays hidden until it arrives. */
html[data-gf-team-landing] .team-header-crest { visibility: hidden; }
/* The page shows through the portal: the veil itself is see-through and lets it take touches at once. */
.locker-veil--dive[data-landing],
html.dark .locker-veil--dive[data-landing] { background: transparent; pointer-events: none; }
/* The fine grain would grow into polka dots as the portal scales up. */
.locker-veil--dive[data-landing] .locker-veil__grain { animation: lockerDiveGrainOut 120ms ease-out both; }
.locker-veil--dive[data-landing] .locker-dive__portal { -webkit-mask-image: radial-gradient(circle at 50% 42%, transparent 0, transparent 34px, #000 38px); mask-image: radial-gradient(circle at 50% 42%, transparent 0, transparent 34px, #000 38px); animation: lockerDivePortal 560ms 60ms cubic-bezier(.5,0,.3,1) both; }
.locker-veil--dive[data-landing] .locker-dive__rim { animation: lockerDiveRim 560ms 60ms cubic-bezier(.5,0,.3,1) both; }
.locker-veil--dive[data-landing] .locker-dive__copy { animation: lockerDiveCopyOut 220ms 60ms ease-in both; }
.locker-veil--dive[data-landing] .locker-dive__orbit { animation: lockerDiveOrbitOut 420ms 40ms cubic-bezier(.22,1,.36,1) both; }
.locker-veil--dive[data-landing] .locker-dive__crest { animation: lockerDiveLand 600ms 90ms cubic-bezier(.2,0,0,1) both; }
/* With a background-free logo the disc fades away in flight; otherwise the disc
   lands too and hands over to the header logo underneath. */
.locker-veil--dive.has-clear-logo[data-landing] .locker-crest--veil::before { animation: lockerDivePlateOut 330ms 150ms ease-out both; }
.locker-veil--dive:not(.has-clear-logo)[data-landing] .locker-dive__crest { animation: lockerDiveLand 600ms 90ms cubic-bezier(.2,0,0,1) both, lockerDiveHandOver 120ms 690ms ease-out both; }
/* No header crest to land on (no logo, or the page is not the team home): rise and fade. */
.locker-veil--dive[data-landing][data-land-away] .locker-dive__crest { animation: lockerDiveAway 520ms 60ms cubic-bezier(.4,0,.2,1) both; }
/* A team without a logo: the crest settles on the team name in the header and melts into it. */
.locker-veil--dive[data-landing][data-land-title] .locker-dive__crest { animation: lockerDiveLand 600ms 90ms cubic-bezier(.2,0,0,1) both, lockerDiveHandOver 240ms 420ms ease-out both; }

@keyframes lockerDiveOpen { from { clip-path: inset(var(--entry-cover-top) var(--entry-cover-right) var(--entry-cover-bottom) var(--entry-cover-left) round 26px); } to { clip-path: inset(0 round 0); } }
@keyframes lockerDiveCamera { from { transform: var(--dive-cloth-from); } to { transform: none; } }
@keyframes lockerDivePush { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes lockerDiveDim { from { opacity: 0; } to { opacity: .55; } }
@keyframes lockerDiveChrome { from { transform: none; } to { transform: var(--dive-chrome-to); } }
@keyframes lockerDiveChromeOut { to { opacity: 0; } }
@keyframes lockerDiveFlash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lockerDiveClock { from { opacity: 0; } to { opacity: 0; } }
@keyframes lockerDiveCrest { 0% { transform: scale(.18); opacity: 0; } 15% { transform: scale(.55); opacity: 1; } 50% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
@keyframes lockerDiveWave { from { transform: scale(.62); opacity: .95; } to { transform: scale(3.2); opacity: 0; } }
@keyframes lockerDiveEcho { from { transform: scale(.62); opacity: .95; } to { transform: scale(4.2); opacity: 0; } }
@keyframes lockerDiveRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lockerDiveLetter { from { transform: translateY(108%); } to { transform: none; } }
@keyframes lockerDiveBarIn { from { opacity: 0; } to { opacity: 1; } }
/* The bar keeps moving while the team home loads: quickly to 85%, then a slow creep. */
@keyframes lockerDiveBarFill { from { transform: scaleX(.1); } to { transform: scaleX(.85); } }
@keyframes lockerDiveBarCreep { from { transform: scaleX(.85); } to { transform: scaleX(.96); } }
@keyframes lockerDiveOrbitIn { from { opacity: 0; transform: scale(.7) rotate(-40deg); } to { opacity: 1; transform: none; } }
@keyframes lockerDiveOrbitTurn { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes lockerDiveFolds { from { transform: skewX(-14deg) translateX(0); } to { transform: skewX(-14deg) translateX(170px); } }
@keyframes lockerDivePortal { from { transform: scale(1); } to { transform: scale(16); } }
@keyframes lockerDiveGrainOut { to { opacity: 0; } }
@keyframes lockerDiveRim { 0% { transform: scale(1); opacity: 0; } 10% { opacity: 1; } 60% { opacity: .8; } 100% { transform: scale(16); opacity: 0; } }
@keyframes lockerDiveCopyOut { to { opacity: 0; transform: translateY(14px); } }
@keyframes lockerDiveOrbitOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(2.4); } }
@keyframes lockerDiveLand { from { transform: none; } to { transform: translate(var(--land-x, 0px), var(--land-y, 0px)) scale(var(--land-scale, 1)); } }
@keyframes lockerDivePlateOut { to { opacity: 0; transform: scale(.86); } }
@keyframes lockerDiveHandOver { to { opacity: 0; } }
@keyframes lockerDiveAway { to { opacity: 0; transform: translateY(-36vh) scale(.3); } }

/* Uploaded league images fill the same circle in both documents of entry. */
.locker-veil[data-entry-kind="league"] .locker-crest img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; clip-path: circle(50%); }