/*!
 * UKCLP mascot hero: layered cinematic scene, the centred rabbit mascot, benefit labels with gold
 * connectors, floating 3D decorations and particles. Loaded after front.css, so these rules take
 * precedence. Every animation is removed for reduced-motion visitors. Below 1200px the labels stack
 * under the mascot in two columns and the decorations are hidden.
 */

/* ---------- Stage: a centred, full-height mascot area ---------- */

.ukclp-hero-visual--cinematic {
  position: relative;
  display: block;
  container-type: size;
  width: min(100%, 1280px);
  margin: 0 auto;
  height: clamp(520px, calc(100vh - 150px), 900px);
  isolation: isolate;
  overflow: visible;
}

/* ---------- Background layers (feathered into the page) ---------- */

.ukclp-hero-visual--cinematic .ukclp-scene {
  position: absolute;
  inset: -4%;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  translate: calc(var(--ukclp-px, 0) * -10px) calc(var(--ukclp-py, 0) * -8px);
  transition: translate 0.8s var(--ukclp-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.ukclp-scene__halo {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 92%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, rgba(201, 162, 39, 0.30), rgba(201, 162, 39, 0.08) 50%, rgba(201, 162, 39, 0) 76%);
}

.ukclp-scene__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
}

.ukclp-scene__bokeh {
  position: absolute;
  inset: 0;
}

.ukclp-bokeh {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 226, 150, 0.40), rgba(246, 226, 150, 0) 70%);
  filter: blur(3px);
}
.ukclp-bokeh--1 { left: 12%; top: 16%; width: 150px; height: 150px; }
.ukclp-bokeh--2 { left: 80%; top: 12%; width: 110px; height: 110px; opacity: 0.6; }
.ukclp-bokeh--3 { left: 84%; top: 70%; width: 190px; height: 190px; opacity: 0.45; }
.ukclp-bokeh--4 { left: 6%; top: 68%; width: 96px; height: 96px; opacity: 0.5; }

.ukclp-scene__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, rgba(3, 9, 20, 0) 58%, rgba(3, 9, 20, 0.70) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .ukclp-bokeh { animation: ukclp-drift 18s ease-in-out infinite alternate; }
  .ukclp-bokeh--2 { animation-duration: 22s; animation-delay: -6s; }
  .ukclp-bokeh--3 { animation-duration: 26s; animation-delay: -11s; }
}

@keyframes ukclp-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(14px, -18px, 0) scale(1.06); }
}

/* ---------- Floating 3D decorations and particles (desktop only) ---------- */

.ukclp-deco-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ukclp-deco-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.ukclp-deco {
  position: absolute;
  left: var(--d-x);
  top: var(--d-y);
  width: var(--d-s);
  height: var(--d-s);
  translate: calc(var(--ukclp-px, 0) * var(--d-depth, 1) * 14px) calc(var(--ukclp-py, 0) * var(--d-depth, 1) * 10px);
  filter:
    drop-shadow(0 14px 16px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 10px rgba(201, 162, 39, calc(var(--ukclp-rgb, 0.45) * 0.45)));
}

.ukclp-deco__body {
  width: 100%;
  height: 100%;
  transform: rotate(var(--d-r, 0deg));
}

.ukclp-deco svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ukclp-deco--card { height: calc(var(--d-s) * 1.4); }

.ukclp-deco--ring {
  left: calc(50% - var(--d-s) / 2);
  top: calc(50% - var(--d-s) / 2);
  opacity: 0.5;
  filter: none;
}

.ukclp-deco--dice .ukclp-deco__body { perspective: 560px; }

.ukclp-dice {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateY(-24deg);
}

.ukclp-dice__face {
  position: absolute;
  inset: 0;
  border-radius: 16%;
  background: linear-gradient(145deg, #FFFFFF 0%, #E4E8EF 100%);
  box-shadow: inset 0 0 0 1px rgba(11, 31, 58, 0.14);
  backface-visibility: hidden;
}
.ukclp-dice__face svg { width: 100%; height: 100%; }
.ukclp-dice__face--front  { transform: translateZ(calc(var(--d-s) / 2)); }
.ukclp-dice__face--back   { transform: rotateY(180deg) translateZ(calc(var(--d-s) / 2)); }
.ukclp-dice__face--right  { transform: rotateY(90deg) translateZ(calc(var(--d-s) / 2)); }
.ukclp-dice__face--left   { transform: rotateY(-90deg) translateZ(calc(var(--d-s) / 2)); }
.ukclp-dice__face--top    { transform: rotateX(90deg) translateZ(calc(var(--d-s) / 2)); }
.ukclp-dice__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--d-s) / 2)); }

.ukclp-particle {
  position: absolute;
  left: var(--p-x);
  top: var(--p-y);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #F6E296 0%, rgba(246, 226, 150, 0) 70%);
  opacity: 0.6;
}

@media (prefers-reduced-motion: no-preference) {
  .ukclp-deco {
    animation:
      ukclp-deco-in 1.2s ease-out var(--d-delay, 0s) both,
      ukclp-float 12s ease-in-out var(--d-delay, 0s) infinite;
  }
  .ukclp-deco--ring {
    animation: ukclp-deco-in 1.6s ease-out 0.2s both;
  }
  .ukclp-deco--ring .ukclp-deco__body {
    animation: ukclp-spin calc(220s / max(var(--ukclp-deco-motion, 0.6), 0.05)) linear infinite;
  }
  .ukclp-dice {
    animation: ukclp-dice-turn calc(40s / max(var(--ukclp-deco-motion, 0.6), 0.05)) linear infinite;
  }
  .ukclp-particle {
    animation: ukclp-twinkle 5s ease-in-out var(--p-d, 0s) infinite;
  }
}

@keyframes ukclp-deco-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes ukclp-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% {
    transform: translate3d(
      calc(var(--ukclp-deco-motion, 0.6) * 6px),
      calc(var(--ukclp-deco-motion, 0.6) * -14px),
      0
    );
  }
}

@keyframes ukclp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@keyframes ukclp-dice-turn {
  from { transform: rotateX(-18deg) rotateY(0deg); }
  to { transform: rotateX(-18deg) rotateY(360deg); }
}

@keyframes ukclp-twinkle {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 0.9; transform: translateY(-6px); }
}

/* ---------- The mascot: the whole PNG, proportional, centred, with a restrained rim ---------- */

.ukclp-hero-visual--cinematic > .ukclp-character {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0;
  margin: 0;
  aspect-ratio: auto;
  /* Height is the scale share of the stage, limited by the maximum width and the stage width.
     Width always follows the height, so the box keeps the PNG's own proportions and nothing is cropped. */
  height: min(
    calc(var(--ukclp-char-scale, 0.86) * 100cqh),
    calc(var(--ukclp-char-width, 720px) / var(--ukclp-char-ratio, 0.9525)),
    calc(100cqw / var(--ukclp-char-ratio, 0.9525))
  );
  width: min(
    calc(var(--ukclp-char-scale, 0.86) * 100cqh * var(--ukclp-char-ratio, 0.9525)),
    var(--ukclp-char-width, 720px),
    100cqw
  );
  transform: translateX(calc(-50% + var(--ukclp-char-x, 0px)));
}

.ukclp-hero-visual--cinematic .ukclp-character[data-mode="image"] .ukclp-character__static {
  object-fit: contain;
  object-position: 50% 100%;
  filter:
    drop-shadow(-10px 0 14px rgba(94, 214, 255, calc(var(--ukclp-rgb, 0.45) * 0.30)))
    drop-shadow(12px 0 16px rgba(201, 162, 39, calc(var(--ukclp-rgb, 0.45) * 0.50)))
    drop-shadow(0 26px 34px rgba(0, 0, 0, 0.45));
}

@media (prefers-reduced-motion: no-preference) {
  .ukclp-hero-visual--cinematic > .ukclp-character .ukclp-character__stage {
    animation: ukclp-rise 1.1s var(--ukclp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) 0.15s both;
  }
  /* Gentle whole-figure breathing. This is not a facial or head movement. */
  .ukclp-hero-visual--breathe > .ukclp-character .ukclp-character__static {
    animation: ukclp-breathe 7s ease-in-out infinite;
    transform-origin: 50% 100%;
  }
}

@keyframes ukclp-rise {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes ukclp-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}

/* ---------- Benefit labels in four rows on each side of the mascot ---------- */

.ukclp-hero-visual--cinematic > .ukclp-callout--hero {
  position: absolute;
  z-index: 4;
  box-sizing: border-box;
  width: clamp(168px, 14vw, 226px);
  max-width: none;
}
.ukclp-hero-visual--cinematic > .ukclp-callout--hero.ukclp-callout--left { left: 0; right: auto; }
.ukclp-hero-visual--cinematic > .ukclp-callout--hero.ukclp-callout--right { right: 0; left: auto; }
.ukclp-hero-visual--cinematic > .ukclp-callout--slot-row-1 { top: 10%; }
.ukclp-hero-visual--cinematic > .ukclp-callout--slot-row-2 { top: 31%; }
.ukclp-hero-visual--cinematic > .ukclp-callout--slot-row-3 { top: 52%; }
.ukclp-hero-visual--cinematic > .ukclp-callout--slot-row-4 { top: 73%; }

/* ---------- Below 1200px: the mascot on top, labels in two columns beneath it ---------- */

@media (max-width: 1199px) {
  .ukclp-hero-visual--cinematic {
    height: auto;
    container-type: normal;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    box-sizing: border-box;
    padding: 0.5rem clamp(1rem, 4vw, 2rem) 0;
  }
  .ukclp-hero-visual--cinematic .ukclp-scene {
    inset: 0;
  }
  .ukclp-deco-layer {
    display: none;
  }
  .ukclp-hero-visual--cinematic > .ukclp-character {
    grid-column: 1 / -1;
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    height: auto;
    width: min(100%, 520px);
    aspect-ratio: var(--ukclp-char-ratio, 0.9525);
    justify-self: center;
    margin: 0 auto;
  }
  .ukclp-hero-visual--cinematic > .ukclp-callout--hero {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    grid-column: 1 / -1;
    width: min(100%, 440px);
    justify-self: center;
    margin: 0 auto;
  }
}

@media (max-width: 599px) {
  .ukclp-hero-visual--cinematic {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Reduced motion: everything static, nothing hidden ---------- */

@media (prefers-reduced-motion: reduce) {
  .ukclp-bokeh,
  .ukclp-deco,
  .ukclp-deco__body,
  .ukclp-dice,
  .ukclp-particle,
  .ukclp-hero-visual--cinematic .ukclp-character__stage,
  .ukclp-hero-visual--cinematic .ukclp-character__static {
    animation: none !important;
  }
  .ukclp-deco,
  .ukclp-hero-visual--cinematic .ukclp-scene {
    translate: none !important;
  }
}