/* ==========================================================================
   About page (page-about.php). Uses tokens + components from looc-ui.css.
   Motion lives under html.looc-motion (added by js/about.js when the visitor
   hasn't asked for reduced motion), so everything is visible without JS.
   ========================================================================== */

/* ---------- Hero ---------- */
.looc-about-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(88vh, 860px);
  display: flex;
  align-items: center;
  padding: 96px 0 72px;
  text-align: center;
  background:
    radial-gradient(900px 500px at 50% 110%, rgba(252, 159, 19, 0.16), transparent 70%),
    radial-gradient(1200px 700px at 50% -10%, rgba(28, 47, 117, 0.95), transparent 70%),
    var(--looc-navy-950);
}
.looc-about-hero__photo { position: absolute; inset: 0; z-index: -3; }
.looc-about-hero__photo img { width: 100%; height: 100% !important; object-fit: cover; opacity: 0.28; filter: saturate(0.8); }
.looc-about-hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 10, 34, 0.5), var(--looc-navy-950)); }

/* Stage spotlights: soft beams that sweep slowly from the top */
.looc-about-hero__lights { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.looc-about-hero__lights span {
  position: absolute;
  top: -20%;
  left: 50%;
  width: 46vw;
  max-width: 620px;
  height: 140%;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255, 236, 200, 0.22), rgba(252, 159, 19, 0.06) 55%, transparent 80%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  filter: blur(6px);
  mix-blend-mode: screen;
  opacity: 0.8;
}
.looc-about-hero__lights span:nth-child(1) { transform: translateX(-120%) rotate(-24deg); }
.looc-about-hero__lights span:nth-child(2) { transform: translateX(-50%) rotate(0deg); opacity: 0.55; }
.looc-about-hero__lights span:nth-child(3) { transform: translateX(20%) rotate(24deg); }

/* Floating gold dust */
.looc-about-hero__dust {
  position: absolute;
  inset: -50% 0 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(252, 159, 19, 0.7), transparent 60%),
    radial-gradient(1px 1px at 70% 60%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(2px 2px at 40% 80%, rgba(247, 194, 106, 0.6), transparent 60%),
    radial-gradient(1px 1px at 85% 20%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 10% 70%, rgba(247, 194, 106, 0.5), transparent 60%);
  background-size: 340px 340px;
  opacity: 0.7;
}

.looc-about-hero__inner { position: relative; max-width: 1040px; }
.looc-about-hero__eyebrow { margin-bottom: 22px; }
.looc-about-hero__title {
  font-size: clamp(36px, 6.4vw, 76px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.005em;
  text-wrap: balance;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
.looc-shimmer {
  font-style: normal;
  background: linear-gradient(100deg, var(--looc-gold) 0%, #ffe3ad 25%, var(--looc-gold) 50%, #ffe3ad 75%, var(--looc-gold) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--looc-gold);
  text-shadow: none;
}
.looc-about-hero__lead {
  max-width: 760px;
  margin: 28px auto 0;
  color: var(--looc-body);
  font-size: clamp(17px, 1.6vw, 20px) !important;
  line-height: 1.65;
}

.looc-about-stats { list-style: none; display: flex; justify-content: center; gap: 16px 56px; flex-wrap: wrap; margin: 44px 0 0; padding: 0; }
.looc-about-stats li { display: grid; justify-items: center; }
.looc-about-stats strong {
  font-family: var(--looc-font-display);
  font-size: clamp(44px, 6vw, 64px);
  font-weight: 700;
  line-height: 1;
  color: var(--looc-ink);
  font-variant-numeric: tabular-nums;
}
.looc-about-stats span { margin-top: 8px; color: var(--looc-gold-soft); font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }

.looc-about-hero__cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 48px;
  color: var(--looc-muted) !important;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none !important;
}
.looc-about-hero__cue:hover { color: var(--looc-gold) !important; }

/* ---------- Mission ---------- */
.looc-about-mission { position: relative; scroll-margin-top: var(--looc-nav-h); }
@property --looc-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.looc-about-mission__frame {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 72px) clamp(24px, 6vw, 80px);
  border-radius: 28px;
  text-align: center;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(252, 159, 19, 0.12), transparent 70%),
    linear-gradient(180deg, var(--looc-navy-700), var(--looc-navy-900));
  box-shadow: var(--looc-shadow-art);
}
/* Gold border that slowly travels around the frame */
.looc-about-mission__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--looc-angle), rgba(252, 159, 19, 0.15), var(--looc-gold) 12%, rgba(252, 159, 19, 0.15) 30%, rgba(255, 255, 255, 0.12) 60%, rgba(252, 159, 19, 0.15));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.looc-about-mission__eyebrow {
  font-family: var(--looc-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.24em;
  color: var(--looc-gold) !important;
  margin: 0 0 22px !important;
}
.looc-about-mission__text {
  margin: 0;
  font-family: var(--looc-font-display);
  font-size: clamp(24px, 3.4vw, 40px) !important;
  font-weight: 700;
  line-height: 1.35;
  color: var(--looc-ink);
  text-wrap: balance;
}

.looc-about-pillars { list-style: none; margin: 40px auto 0; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.looc-about-pillar {
  position: relative;
  padding: 28px 26px;
  border: 1px solid var(--looc-line);
  border-radius: var(--looc-radius-lg);
  background: var(--looc-surface);
  transition: transform 0.25s, border-color 0.25s, background-color 0.25s;
}
.looc-about-pillar:hover { transform: translateY(-4px); border-color: rgba(252, 159, 19, 0.6); background: rgba(255, 255, 255, 0.06); }
.looc-about-pillar__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffd58a, var(--looc-gold) 60%, #c97300);
  color: var(--looc-navy-950);
  font-size: 20px;
  box-shadow: 0 0 0 6px rgba(252, 159, 19, 0.12), 0 10px 30px rgba(252, 159, 19, 0.25);
}
.looc-about-pillar__title { font-size: 21px !important; line-height: 1.25 !important; margin: 0 0 8px !important; }
.looc-about-pillar p { margin: 0; color: var(--looc-muted); font-size: 15.5px; }
.looc-about-mission__ctas { justify-content: center; margin-top: 36px; }

/* ---------- Extra editor text ---------- */
.looc-about-more { max-width: 820px; margin: 0 auto; }

/* ---------- Board ---------- */
.looc-about-board { scroll-margin-top: var(--looc-nav-h); }

/* ---------- In Memoriam ---------- */
.looc-about-memoriam { scroll-margin-top: var(--looc-nav-h); background: linear-gradient(180deg, transparent, rgba(6, 10, 34, 0.7) 30%, transparent); }
.looc-about-memoriam__head { display: grid; justify-items: center; gap: 14px; margin-bottom: 36px; text-align: center; }
.looc-about-memoriam__flame {
  width: 14px;
  height: 22px;
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #fff6dc, var(--looc-gold) 55%, rgba(252, 159, 19, 0) 72%);
  box-shadow: 0 0 24px 8px rgba(252, 159, 19, 0.35);
}
.looc-tribute { max-width: 760px; margin: 0 auto; text-align: center; scroll-margin-top: var(--looc-nav-h); }
.looc-tribute + .looc-tribute { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--looc-line); }
.looc-tribute__portrait {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 22px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--looc-navy-700);
  box-shadow: 0 0 0 4px var(--looc-navy-900), 0 0 0 6px rgba(252, 159, 19, 0.7), 0 0 60px rgba(252, 159, 19, 0.25);
}
.looc-tribute__portrait img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; object-position: 50% 20%; filter: grayscale(0.35); }
.looc-tribute__name { font-size: clamp(28px, 3.6vw, 40px) !important; }
.looc-tribute__role { margin-top: 6px; color: var(--looc-gold-soft); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.looc-tribute__bio { margin-top: 26px; text-align: left; }
.looc-tribute__bio .looc-tribute__quote {
  margin: 32px 0;
  padding: 26px 10px;
  border-top: 1px solid var(--looc-line);
  border-bottom: 1px solid var(--looc-line);
  font-family: var(--looc-font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.45;
  color: var(--looc-cream);
  text-align: center;
}

/* ---------- Motion (only when allowed) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .looc-about-hero__lights span:nth-child(1) { animation: looc-sweep-l 14s ease-in-out infinite alternate; }
  .looc-about-hero__lights span:nth-child(2) { animation: looc-glow 7s ease-in-out infinite alternate; }
  .looc-about-hero__lights span:nth-child(3) { animation: looc-sweep-r 16s ease-in-out infinite alternate; }
  .looc-about-hero__dust { animation: looc-dust 40s linear infinite; }
  .looc-shimmer { animation: looc-shimmer 6s linear infinite; }
  .looc-about-hero__cue i { animation: looc-bob 2s ease-in-out infinite; }
  .looc-about-mission__frame::before { animation: looc-spin 8s linear infinite; }
  .looc-about-memoriam__flame { animation: looc-flicker 3s ease-in-out infinite; }
}
@keyframes looc-sweep-l { from { transform: translateX(-120%) rotate(-28deg); } to { transform: translateX(-110%) rotate(-12deg); } }
@keyframes looc-sweep-r { from { transform: translateX(20%) rotate(28deg); } to { transform: translateX(10%) rotate(12deg); } }
@keyframes looc-glow { from { opacity: 0.35; } to { opacity: 0.7; } }
@keyframes looc-dust { from { transform: translateY(0); } to { transform: translateY(-340px); } }
@keyframes looc-shimmer { from { background-position: 0% 0; } to { background-position: -200% 0; } }
@keyframes looc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes looc-spin { to { --looc-angle: 360deg; } }
@keyframes looc-flicker { 0%, 100% { transform: scale(1); opacity: 1; } 40% { transform: scale(0.94, 1.06); opacity: 0.85; } 70% { transform: scale(1.04, 0.97); } }

/* Hero entrance (pure CSS, so there's no flash before the script runs) */
@media (prefers-reduced-motion: no-preference) {
  .looc-about-hero__inner > * { animation: looc-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .looc-about-hero__inner > :nth-child(2) { animation-delay: 0.1s; }
  .looc-about-hero__inner > :nth-child(3) { animation-delay: 0.25s; }
  .looc-about-hero__inner > :nth-child(4) { animation-delay: 0.4s; }
  .looc-about-hero__inner > :nth-child(5) { animation-delay: 0.55s; }
}
@keyframes looc-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Scroll effects, set up by js/about.js */

.looc-motion [data-looc-rise] > * { opacity: 0; transform: translateY(28px); transition: opacity 0.7s, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.25s, background-color 0.25s; transition-delay: calc(var(--i, 0) * 120ms); }
.looc-motion [data-looc-rise].is-in > * { opacity: 1; transform: none; }
.looc-motion [data-looc-rise].is-in > *:hover { transform: translateY(-4px); transition-delay: 0s; }

@media (max-width: 760px) {
  .looc-about-hero { min-height: 0; padding: 72px 0 56px; }
  .looc-about-hero__lights span { width: 80vw; }
  .looc-about-stats { gap: 16px 40px; margin-top: 32px; }
  .looc-tribute__portrait { width: 160px; height: 160px; }
}