/* About refresh (owner feedback 2026-09-19): livelier fog, key figures as one slim glass strip
   instead of three heavy boxes, tablet composition repaired, frameless figures on the biography.
   Loaded last, so equal specificity resolves in favour of this file. Phone keeps its own row. */

/* ---------- 1) Fog: a continuous pass instead of a slow back-and-forth sway ---------- */
@media (min-width:1200px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  /* Each layer travels through and is invisible at its loop point, so the fog never visibly turns round. */
  #about .about-living-haze::before,
  #about .about-living-haze::after {
    animation: about-fog-pass 12s linear infinite; animation-play-state: paused; opacity: 0; will-change: transform, opacity;
  }
  #about .about-living-haze::after { animation-name: about-fog-pass-far; animation-delay: -6s; }
  #about.about-motion-running .about-living-haze::before,
  #about.about-motion-running .about-living-haze::after { animation-play-state: running; }
  @keyframes about-fog-pass {
    0% { transform: translate3d(-13%, 8%, 0) scale(1.06) rotate(-1.5deg); opacity: 0; }
    22% { opacity: .5; }
    62% { opacity: .46; }
    100% { transform: translate3d(12%, -10%, 0) scale(1.22) rotate(2deg); opacity: 0; }
  }
  @keyframes about-fog-pass-far {
    0% { transform: translate3d(10%, 9%, 0) scale(1.18) rotate(1.5deg); opacity: 0; }
    25% { opacity: .34; }
    60% { opacity: .3; }
    100% { transform: translate3d(-14%, -7%, 0) scale(1.04) rotate(-2deg); opacity: 0; }
  }
}

/* ---------- 2) Key figures: one slim strip (tablet and desktop) ---------- */
@media (min-width:601px) and (min-height:501px) {
  #about .kpi-grid { gap: 0; align-items: stretch; }
  #about .kpi-grid > .kpi {
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: clamp(8px, .8vw, 16px);
    height: clamp(58px, 9dvh, 92px); min-height: 0; max-height: none; padding: 0 clamp(8px, .9vw, 18px);
    text-align: left; border-radius: 0; border-left-width: 0; transform: none;
    box-shadow: inset 0 1px 1px #ffffff7a, inset 0 -2px 2px #ff009047, 0 0 14px #ff009017;
  }
  #about .kpi-grid > .kpi:first-of-type { border-left-width: 1px; border-radius: 14px 0 0 14px; }
  #about .kpi-grid > .kpi:last-of-type { border-radius: 0 14px 14px 0; }
  #about .kpi-grid > .kpi:not(:first-of-type) { border-left: 1px solid #ff009042; }
  /* One light edge across all three segments instead of three separate highlights. */
  #about .kpi-grid > .kpi::after { background-size: 300% 100%; background-position: 50% 0; }
  #about .kpi-grid > .kpi:first-of-type::after { background-position: 0 0; }
  #about .kpi-grid > .kpi:last-of-type::after { background-position: 100% 0; }
  #about .kpi-grid > .kpi strong { font-size: clamp(30px, min(3vw, 5.4dvh), 60px); line-height: 1; }
  #about .kpi-grid > .kpi span { margin: 0; font-size: clamp(11px, min(.92vw, 1.7dvh), 17px); line-height: 1.12; letter-spacing: .06em; }
  #about .kpi-grid > .kpi span::before { display: none; }
}
@media (min-width:1200px) and (min-height:501px) {
  /* The slimmer strip frees height; the copy block settles lower so the column stays balanced. */
  #about .about-copy { top: 3.5dvh; }
  #about .kpi-grid { margin-top: 3.6dvh; }
  #about .button-row { margin-top: 3.2dvh; }
}

/* ---------- 3) Touch layouts: the 200+ figure is removed on tablet and phone (owner 2026-09-19) ---------- */
@media (max-width:1199px), (any-pointer:coarse) and (max-width:1366px) {
  #about .kpi-grid > .kpi:nth-of-type(2) { display: none; }
}

/* ---------- 3b) Tablet: reel above the strip, left under the copy; strip spans the row ---------- */
@media (min-width:601px) and (max-width:1199px) and (min-height:501px),
       (min-width:601px) and (max-width:1366px) and (min-height:501px) and (any-pointer:coarse) {
  #about .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: clamp(12px, 1.8dvh, 20px); padding-top: 0; }
  #about .showreel {
    grid-column: 1 / -1; grid-row: 1; justify-self: start; position: relative; left: auto; top: auto;
    width: clamp(124px, min(17vw, 19dvh), 178px); height: auto; grid-template-rows: auto auto;
  }
  #about .showreel__screen { height: auto; width: auto; justify-self: stretch; }
  #about .kpi-grid > .kpi { height: clamp(58px, 7.4dvh, 84px); }
  #about .kpi-grid > .kpi strong { font-size: clamp(30px, min(5vw, 4.6dvh), 52px); }
  #about .kpi-grid > .kpi span { font-size: clamp(11px, min(1.7vw, 1.6dvh), 16px); }
}

/* ---------- 4) Biography: figures without frames; Press Facts keeps its frame ---------- */
#about-full .kpi-grid--four .kpi {
  border: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; border-radius: 0;
}
#about-full .kpi-grid--four .kpi::before, #about-full .kpi-grid--four .kpi::after { display: none; }
@media (min-width:601px) {
  #about-full .kpi-grid--four { gap: 0; }
  #about-full .kpi-grid--four .kpi { height: auto; min-height: 0; padding: 6px 18px 10px; }
  #about-full .kpi-grid--four .kpi + .kpi { border-left: 1px solid #ff009040; }
}
@media (max-width:600px) {
  #about-full .kpi-grid--four { gap: 0; }
  #about-full .kpi-grid--four .kpi { min-height: 0; height: auto; padding: 14px 8px; }
  #about-full .kpi-grid--four .kpi:nth-child(even) { border-left: 1px solid #ff009040; }
  #about-full .kpi-grid--four .kpi:nth-child(n+3) { border-top: 1px solid #ff009040; }
}

/* ---------- 5) EPK beacon (owner 2026-09-19): every 6 s the "Full bio + EPK" button flares magenta for 1 s with fine
   spark bursts around its frame, then rests 5 s. Only while About is the chapter; all views. ---------- */
/* Fix 2026-09-19: the button family clips itself (overflow:hidden for its hover sheen), which cut the sparks and the outer
   flare glow off at the frame. The host stops clipping; the sheen moves into a clipped child of the beacon layer. */
.epk-beacon-host { position: relative; isolation: isolate; overflow: visible; }
.epk-beacon-host::before { content: none; }
.epk-beacon u { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.epk-beacon u::before { content: ""; position: absolute; inset: -100% -40%; background: linear-gradient(110deg, transparent 36%, rgba(255,224,242,.25) 49%, rgba(255,255,255,.05) 52%, transparent 65%);
  transform: translateX(-75%); transition: transform .75s var(--ease); }
.epk-beacon-host:is(:hover, :focus-visible) .epk-beacon u::before { transform: translateX(75%); }
.epk-beacon { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.epk-beacon b { position: absolute; inset: -1px; border-radius: inherit; opacity: 0; background: linear-gradient(180deg, #ff2ba3e6, #c4006fe6);
  box-shadow: 0 0 0 1px #ffd3ec, 0 0 26px 4px #ff0090cc, 0 0 70px 10px #ff009059, inset 0 1px 2px #ffffffb3; }
.epk-beacon i { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; opacity: 0;
  background: #fff; box-shadow: 0 0 5px 1px #ff5cb8, 0 0 11px 3px #ff009099; }
.epk-beacon i.is-streak { width: 9px; height: 1.6px; margin: -.8px -4.5px; border-radius: 2px; rotate: var(--a); }
#about.is-active .epk-beacon b { animation: epk-flare 6s ease-out infinite; }
#about.is-active .epk-beacon i { animation: epk-spark 6s cubic-bezier(.15,.7,.3,1) var(--d) infinite; }
#about.is-active .epk-beacon-host { animation: epk-ink 6s ease-out infinite; }
@keyframes epk-flare { 0% { opacity: 0; } 2.5% { opacity: 1; } 11% { opacity: .92; } 16.6% { opacity: 0; } 100% { opacity: 0; } }
@keyframes epk-ink { 0%, 16.6%, 100% { color: var(--pink, #ff0090); } 2.5%, 11% { color: #fff; } }
@keyframes epk-spark {
  0% { opacity: 0; translate: 0 0; scale: .4; }
  2% { opacity: 1; scale: 1; }
  9% { opacity: .9; }
  15% { opacity: 0; translate: var(--dx) var(--dy); scale: .5; }
  100% { opacity: 0; translate: var(--dx) var(--dy); scale: .5; }
}
@media (prefers-reduced-motion: reduce) {
  #about.is-active .epk-beacon b, #about.is-active .epk-beacon i, #about.is-active .epk-beacon-host { animation: none; }
}