/* Opening animation: the LUG FA crest, about 3 seconds, once per visit.
   The logo is one image, so each part is a separate layer of the same picture,
   clipped to its own region and animated on its own. */
#intro { display: none; }
html.intro #intro {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: #fff; cursor: pointer;
  animation: intro-out 0.45s cubic-bezier(0.7, 0, 0.2, 1) 2.55s forwards;
}
html.intro body { overflow: hidden; }
#intro .stage {
  position: relative; width: min(68vw, 440px); aspect-ratio: 1330 / 798;
  --logo: url("/assets/brand/lugfa-logo.min.png");
}
#intro .layer { position: absolute; inset: 0; background: var(--logo) center / 100% 100% no-repeat; }

/* the lion: left half of the logo */
#intro .lion {
  /* circle() radius is a % of the box diagonal / sqrt 2. In this 1330x798 logo the lion's
     badge has radius ~396px about (29.8%, 50%) and the words start ~411px from that centre,
     so 36.8% (~404px) shows the whole badge and none of the text. */
  clip-path: circle(36.8% at 29.8% 50%);
  transform-origin: 29.8% 50%;
  animation: lion-in 0.95s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
@keyframes lion-in {
  0%   { transform: scale(0.35) rotate(-14deg); opacity: 0; filter: blur(10px); clip-path: circle(0% at 29.8% 50%); }
  60%  { opacity: 1; filter: blur(0); }
  100% { transform: none; opacity: 1; clip-path: circle(36.8% at 29.8% 50%); }
}
/* the mane catches a pulse when the words land */
#intro .lion { animation: lion-in 0.95s cubic-bezier(0.2, 1.3, 0.4, 1) both, lion-pulse 0.5s ease-out 2.05s; }
@keyframes lion-pulse { 50% { transform: scale(1.035); } }

/* the words: horizontal bands on the right, wiped in left to right */
#intro .word { clip-path: inset(var(--t) 100% var(--b) 59.8%); animation: wipe 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--d) forwards; }
@keyframes wipe { to { clip-path: inset(var(--t) 0 var(--b) 59.8%); } }
/* bands measured from lugfa-logo.min.png (1330x798); text starts at 60.7% across */
#intro .w1 { --t: 0%;    --b: 73.2%; --d: 0.5s; }   /* Lancaster  */
#intro .w2 { --t: 26.8%; --b: 57.6%; --d: 0.75s; }  /* University */
#intro .w3 { --t: 42.4%; --b: 43.8%; --d: 1s; }     /* Ghana      */
#intro .w4 { --t: 56.2%; --b: 37.7%; --d: 1.5s; }  /* the rule   */
#intro .w4 { animation-duration: 0.6s; }
#intro .w5 { --t: 62.3%; --b: 0%;   --d: 1.8s; }   /* FOOTBALL ASSOCIATION */
#intro .w5 { clip-path: inset(var(--t) 0 var(--b) 59.8%); opacity: 0; transform: translateY(12px); animation: rise-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) var(--d) forwards; }
@keyframes rise-in { to { opacity: 1; transform: none; } }

/* a glint across the whole logo */
#intro .glint {
  position: absolute; inset: -10% -20%; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.95) 50%, transparent 60%);
  transform: translateX(-70%); animation: glint 0.6s ease-in-out 2.05s forwards;
  -webkit-mask: var(--logo) center / 100% 100% no-repeat; mask: var(--logo) center / 100% 100% no-repeat;
}
@keyframes glint { to { transform: translateX(70%); } }

#intro .skip { position: absolute; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; translate: -50% 0; font: 600 13px/1 var(--font-body, system-ui); color: #8a8f8b; letter-spacing: 0.04em; opacity: 0; animation: fade-in 0.4s ease 1s forwards; }
@keyframes fade-in { to { opacity: 1; } }

@keyframes intro-out { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
#intro { clip-path: inset(0 0 0 0); }
html.intro-skip #intro { animation: intro-out 0.35s cubic-bezier(0.7, 0, 0.2, 1) forwards !important; }