/* ======================================================================
   Ganghan Taekwondo Academy — shared site styles (all pages)
   ====================================================================== */
:root { --ease: cubic-bezier(0.16, 1, 0.3, 1); }
html { scroll-behavior: smooth; }
body { font-family: 'Manrope', system-ui, sans-serif; color: #0E1726; }
h1,h2,h3,h4 { font-family:'Sora', system-ui, sans-serif; text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- Hero (home) ---------- */
.hero-bg { position:absolute; inset:0; overflow:hidden;
  background: radial-gradient(120% 120% at 80% 10%, #16306B 0%, #0A1430 45%, #08112A 100%); }
.glow { position:absolute; border-radius:9999px; filter: blur(70px); opacity:.55; will-change: transform; }
.glow--red { width:48vw; height:48vw; background:#E11D2A; top:-14vw; right:-8vw; opacity:.30; animation: drift1 22s var(--ease) infinite alternate; }
.glow--blue { width:46vw; height:46vw; background:#1E40A0; bottom:-18vw; left:-10vw; opacity:.45; animation: drift2 26s var(--ease) infinite alternate; }
@keyframes drift1 { from{ transform: translate3d(0,0,0) scale(1);} to{ transform: translate3d(-6vw,5vw,0) scale(1.12);} }
@keyframes drift2 { from{ transform: translate3d(0,0,0) scale(1);} to{ transform: translate3d(7vw,-4vw,0) scale(1.1);} }
.grid-tex { position:absolute; inset:0; opacity:.10;
  background-image: linear-gradient(#ffffff22 1px, transparent 1px), linear-gradient(90deg,#ffffff22 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(120% 90% at 70% 20%, #000 30%, transparent 80%); }
.lines { position:absolute; inset:0; overflow:hidden; opacity:.22; }
.lines span { position:absolute; height:1px; width:60%; left:-60%; background: linear-gradient(90deg, transparent, #E11D2A, transparent); animation: sweep 7s linear infinite; }
.lines span:nth-child(1){ top:24%; } .lines span:nth-child(2){ top:52%; animation-delay:2.2s; background:linear-gradient(90deg,transparent,#7FA0FF,transparent);} .lines span:nth-child(3){ top:74%; animation-delay:4s; }
@keyframes sweep { 0%{ transform:translateX(0);} 100%{ transform:translateX(180%);} }
.hero-poster, .hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-poster { z-index:1; }
.hero-video { z-index:2; animation: kenburns 26s ease-in-out infinite alternate; will-change: transform; }
@keyframes kenburns { from{ transform:scale(1.06);} to{ transform:scale(1.2) translateY(-2%);} }
.hero-overlay { position:absolute; inset:0; z-index:3;
  background: linear-gradient(180deg, rgba(8,17,42,.74) 0%, rgba(8,17,42,.55) 38%, rgba(8,17,42,.82) 100%),
              radial-gradient(120% 120% at 82% 8%, rgba(225,29,42,.18) 0%, rgba(8,17,42,0) 45%); }
.rings { position:absolute; inset:0; display:grid; place-items:center; }
.ring { position:absolute; border:1px solid #ffffff2b; border-radius:9999px; }
.ring.r1{ width:18rem; height:18rem; animation: pulse 5s var(--ease) infinite; }
.ring.r2{ width:26rem; height:26rem; animation: pulse 5s var(--ease) infinite .8s; }
.ring.r3{ width:34rem; height:34rem; animation: pulse 5s var(--ease) infinite 1.6s; }
@keyframes pulse { 0%{ transform:scale(.85); opacity:0;} 30%{opacity:.7;} 100%{ transform:scale(1.15); opacity:0;} }
.fighter { animation: floaty 6s ease-in-out infinite; transform-origin:center; }
@keyframes floaty { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }

/* ---------- Page header band (inner pages) ---------- */
.page-head { position:relative; overflow:hidden;
  background: radial-gradient(120% 140% at 85% 0%, #16306B 0%, #0A1430 50%, #08112A 100%); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity:0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s;} .reveal[data-d="2"]{ transition-delay:.16s;} .reveal[data-d="3"]{ transition-delay:.24s;}

.underline-grow { background-image: linear-gradient(#E11D2A,#E11D2A); background-size:0% 2px; background-position:0 100%; background-repeat:no-repeat; transition: background-size .4s var(--ease); }
.group:hover .underline-grow, a:hover .underline-grow { background-size:100% 2px; }

details > summary { list-style:none; cursor:pointer; }
details > summary::-webkit-details-marker { display:none; }
details[open] .faq-plus { transform: rotate(45deg); }
.faq-plus { transition: transform .3s var(--ease); }

.marquee { display:flex; gap:3rem; width:max-content; animation: scrollx 26s linear infinite; }
@keyframes scrollx { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- Animated cards (Why-choose + Services): spotlight + tilt + sweep + icons ---------- */
.why-grid { perspective: 1100px; }
.why-card { position:relative; transform-style:preserve-3d;
  transition: transform .4s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), opacity .7s var(--ease); will-change: transform; }
.why-card:hover { border-color: rgba(225,29,42,.5); box-shadow: 0 26px 50px -24px rgba(0,0,0,.55); }
.why-card .spot { position:absolute; inset:0; border-radius:inherit; opacity:0; pointer-events:none; transition: opacity .4s var(--ease);
  background: radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(225,29,42,.22), transparent 62%); }
.why-card:hover .spot { opacity:1; }
.why-card .sweep { position:absolute; left:0; right:0; bottom:0; height:3px; transform:scaleX(0); transform-origin:left;
  transition: transform .45s var(--ease); background:linear-gradient(90deg,#E11D2A,#ff6b73); border-bottom-left-radius:1rem; border-bottom-right-radius:1rem; }
.why-card:hover .sweep { transform:scaleX(1); }
.why-icon { transition: background-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); }
.why-card:hover .why-icon { background:#E11D2A; color:#fff; transform: translateY(-3px) scale(1.08); }
.why-card svg { transition: transform .35s var(--ease); }
.why-card:hover .ic-bob { animation: why-bob .7s var(--ease); }
.why-card:hover .ic-wob { animation: why-wob .7s var(--ease); }
.why-card:hover .ic-nudge { animation: why-nudge .7s var(--ease); }
.why-card:hover .ic-pulse { animation: why-pulse .7s var(--ease); }
.why-card:hover .ic-drop { animation: why-drop .6s var(--ease); }
.why-card .check { stroke-dasharray: 14; stroke-dashoffset: 0; }
.why-card:hover .check { animation: why-draw .5s var(--ease); }
@keyframes why-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes why-wob { 0%,100%{transform:rotate(0)} 35%{transform:rotate(-10deg)} 70%{transform:rotate(6deg)} }
@keyframes why-nudge { 0%,100%{transform:translateX(0)} 50%{transform:translateX(3px)} }
@keyframes why-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.14)} }
@keyframes why-drop { 0%{transform:translateY(-4px)} 60%{transform:translateY(2px)} 100%{transform:translateY(0)} }
@keyframes why-draw { from{stroke-dashoffset:14} to{stroke-dashoffset:0} }

/* ---------- Intro: tilt stat panel, belt strip, highlight, area chips, pull-quote ---------- */
.intro-card { position:relative; transform-style:preserve-3d; transition: transform .45s var(--ease), box-shadow .45s var(--ease), opacity .7s var(--ease); will-change:transform; }
.intro-card .silho { position:absolute; right:-.5rem; bottom:-.5rem; width:13rem; opacity:.07; pointer-events:none; transition: transform .4s var(--ease); }
.intro-num { font-variant-numeric: tabular-nums; }
.belt-track { display:flex; gap:6px; }
.belt-seg { height:10px; flex:1; border-radius:9999px; transform:scaleX(0); transform-origin:left; transition: transform .6s var(--ease); }
.intro-card.in .belt-seg { transform:scaleX(1); }
.intro-card.in .belt-seg:nth-child(1){transition-delay:.10s} .intro-card.in .belt-seg:nth-child(2){transition-delay:.18s} .intro-card.in .belt-seg:nth-child(3){transition-delay:.26s} .intro-card.in .belt-seg:nth-child(4){transition-delay:.34s} .intro-card.in .belt-seg:nth-child(5){transition-delay:.42s} .intro-card.in .belt-seg:nth-child(6){transition-delay:.50s}
.hl { background-image: linear-gradient(rgba(225,29,42,.16), rgba(225,29,42,.16)); background-repeat:no-repeat; background-position:0 90%; background-size:0% 40%; transition: background-size .7s var(--ease); border-radius:3px; padding:0 .08em; }
.reveal.in .hl { background-size:100% 40%; }
.reveal.in .hl.d2 { transition-delay:.18s; } .reveal.in .hl.d3 { transition-delay:.36s; }
.area-chip { transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.area-chip:hover { background:#0A1430; color:#fff; border-color:#0A1430; transform: translateY(-2px); }
.area-chip:hover .area-dot { background:#E11D2A; }
.pq-mark { font-family:'Sora',sans-serif; font-weight:800; line-height:.8; color:#E11D2A; opacity:.16; font-size:clamp(6rem,12vw,11rem); }
.pq-quote { font-family:'Sora',sans-serif; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity:1 !important; transform:none !important; }
  .hero-video { display:none; }
  .belt-seg { transform:scaleX(1) !important; } .reveal.in .hl { background-size:100% 40% !important; }
  html { scroll-behavior:auto; }
}