/* Champions trophy: top of the awards page and last section of the home page.
   Behaviour: js/trophy.js; data: lib/trophy.js. */

/* The section is taller than the screen; the stage is pinned (by
   js/trophy.js — position:sticky is inert on this site) while the extra
   height scrolls past, and that scroll is what raises the trophy. */
.trophy-scroll{position:relative;height:240vh;height:240svh;}
.trophy-stage{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;flex-direction:column;overflow:hidden;
  height:100vh;height:var(--trophy-h,100svh);
  background:radial-gradient(ellipse 55% 48% at 50% 46%,rgba(200,168,75,0.11),transparent 72%),#060f1a;}
.trophy-scroll.is-pinned .trophy-stage{position:fixed;top:0;}
.trophy-scroll.is-past .trophy-stage{top:auto;bottom:0;}
.trophy-eyebrow{margin:0;padding:1rem 1rem 0;text-align:center;font-size:0.72rem;letter-spacing:0.28em;text-transform:uppercase;color:#c8a84b;}
.trophy-view{position:relative;flex:1;min-height:0;}
.trophy-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;opacity:0;transition:opacity 0.6s ease;}
.trophy-scroll.is-ready .trophy-canvas{opacity:1;}
.trophy-stage.is-upright .trophy-canvas{cursor:grab;}
.trophy-stage.is-upright .trophy-canvas.is-over-card{cursor:zoom-in;}
.trophy-canvas.is-dragging{cursor:grabbing!important;}
.trophy-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#8a8580;font-size:0.78rem;letter-spacing:0.18em;text-transform:uppercase;}
.trophy-scroll.is-ready .trophy-loading{display:none;}

/* One row, two occupants: the scroll cue while the trophy rises, then the
   turn controls once it is upright. */
.trophy-controls{flex:none;position:relative;height:76px;padding-bottom:env(safe-area-inset-bottom,0px);}
.trophy-cue{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.4rem;
  color:#c8c0b0;font-size:0.7rem;letter-spacing:0.24em;text-transform:uppercase;opacity:calc((1 - var(--raise,0) * 5) * var(--cue-room,1));pointer-events:none;
  transform:translateY(calc(-1 * var(--trophy-pre,0px)));}   /* visible above the fold before the stage pins; --cue-room keeps it off the ball */
.trophy-cue::after{content:'';width:1px;height:22px;background:linear-gradient(#c8a84b,transparent);animation:trophy-cue 1.6s ease-in-out infinite;}
@keyframes trophy-cue{0%,100%{transform:translateY(-4px);opacity:0.4;}50%{transform:translateY(4px);opacity:1;}}
.trophy-turn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:0.9rem;
  opacity:0;pointer-events:none;transition:opacity 0.4s ease;}
.trophy-stage.is-upright .trophy-turn{opacity:1;pointer-events:auto;}
.trophy-arrow{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid rgba(200,168,75,0.45);background:rgba(14,37,53,0.85);color:#c8a84b;padding:0;}
.trophy-arrow:hover{background:rgba(200,168,75,0.16);}
.trophy-arrow svg{width:18px;height:18px;}
.trophy-turn-mid{display:flex;flex-direction:column;align-items:center;gap:0.2rem;min-width:7.5rem;}
.trophy-face-label{font-size:0.66rem;letter-spacing:0.2em;text-transform:uppercase;color:#c8c0b0;}
.trophy-dots{display:flex;}
.trophy-dot{width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.trophy-dot::before{content:'';width:7px;height:7px;border-radius:50%;background:rgba(200,168,75,0.3);transition:transform 0.2s,background 0.2s;}
.trophy-dot.is-active::before{background:#c8a84b;transform:scale(1.3);}

/* Reduced motion: no scroll choreography, the trophy simply stands there. */
.trophy-scroll.is-static{height:auto;}
.trophy-scroll.is-static .trophy-stage{position:relative;top:0;height:min(86vh,780px);}
.trophy-scroll.is-static .trophy-cue{display:none;}
/* No WebGL: the cards as a plain grid. */
.trophy-scroll.is-fallback .trophy-stage{height:auto;}
.trophy-scroll.is-fallback .trophy-controls{display:none;}
.trophy-fallback{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;max-width:780px;margin:0 auto;padding:1.5rem 1.2rem 2rem;}
.trophy-empty{text-align:center;color:#c8c0b0;font-style:italic;padding:2rem 1rem;}
@media (max-width:560px){.trophy-fallback{grid-template-columns:1fr;}}

/* The card, enlarged: same lines and proportions as the plate in 3D
   (lib/trophy.js layoutCard sets --fs and --lh as fractions of its height). */
.trophy-card{position:relative;width:100%;aspect-ratio:3.15;container-type:size;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#1a1309;border-radius:2px;
  background:
    repeating-linear-gradient(0deg,rgba(255,246,214,0.1) 0 1px,transparent 1px 3px,rgba(96,64,12,0.07) 3px 4px,transparent 4px 6px),
    linear-gradient(170deg,#d4a458 0%,#e8c68c 42%,#cf9c52 72%,#b8873f 100%);
  box-shadow:inset 0 0 0 1px rgba(90,60,14,0.6),inset 0 1px 0 rgba(255,244,210,0.5),0 0 0 6px #0f0f0f,0 0 0 7px #2b2b2b,0 18px 40px rgba(0,0,0,0.55);}
/* letter-spacing is CARD_TRACKING; the matching padding keeps centred lines centred. */
.trophy-card span{display:block;white-space:nowrap;font-family:"Jost","Futura","Century Gothic","Avenir Next",sans-serif;font-weight:500;
  font-size:calc(var(--fs) * 100cqh);line-height:calc(var(--lh) * 100cqh);letter-spacing:0.035em;padding-left:0.035em;
  text-shadow:0 1px 0 rgba(255,240,200,0.35);}

.trophy-loupe{position:fixed;left:0;top:0;z-index:1000;width:min(460px,70vw);pointer-events:none;opacity:0;transition:opacity 0.15s ease;}
.trophy-loupe.is-open{opacity:1;}
.trophy-loupe.is-open .trophy-card{animation:trophy-pop 0.18s ease-out;}
@keyframes trophy-pop{from{transform:scale(0.9);}to{transform:scale(1);}}

.trophy-modal{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;
  padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));
  background:rgba(3,8,14,0.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity 0.2s ease;}
.trophy-modal[hidden]{display:none;}
.trophy-modal.is-open{opacity:1;}
.trophy-modal-body{margin:0;width:min(92vw,920px);display:flex;flex-direction:column;align-items:center;gap:1.3rem;transform:scale(0.96);transition:transform 0.2s ease;}
.trophy-modal.is-open .trophy-modal-body{transform:scale(1);}
.trophy-modal-card{width:100%;padding:7px;}
.trophy-modal-caption{font-family:'Cinzel',serif;color:#c8a84b;letter-spacing:0.14em;text-transform:uppercase;font-size:0.8rem;text-align:center;}
.trophy-modal-close{position:absolute;top:max(0.75rem,env(safe-area-inset-top));right:max(0.75rem,env(safe-area-inset-right));width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(200,168,75,0.5);background:rgba(14,37,53,0.9);color:#f5f0e8;font-size:1.6rem;line-height:1;cursor:pointer;}
/* On a phone held upright the card reads straight across, the right way up —
   no turning the phone — and as wide as the screen allows, since a plate is
   three times wider than tall and every pixel of width is type size. */
@media (max-width:600px){
  .trophy-modal{padding-left:max(0.5rem,env(safe-area-inset-left));padding-right:max(0.5rem,env(safe-area-inset-right));}
  .trophy-modal-body{width:100%;}
}
html.trophy-modal-open{overflow:hidden;}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}