/* ============================================================
   WARANGAL WARRIORS — TG20 franchise
   Design system: "Regal & Cinematic"
   Onyx black base · crimson · armor gold · parchment
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --onyx:        #0c0809;  /* near-black base */
  --onyx-2:      #150d0e;
  --onyx-3:      #1f1314;
  --crimson:     #c8102e;  /* warriors crimson */
  --crimson-dp:  #8d0c20;  /* deep blood red */
  --crimson-br:  #e6213a;
  --gold:        #d8a93f;  /* armor gold */
  --gold-br:     #f0cd73;
  --parchment:   #f4ece0;  /* warm light */
  --parchment-2: #e7d9c1;
  --ink:         #1a1110;  /* text on parchment */
  --muted:       #6b5a52;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--onyx);
  color: var(--parchment);
  overflow-x: hidden;
}

.font-display { font-family: 'Anton', sans-serif; letter-spacing: .01em; }
.font-cond    { font-family: 'Barlow Condensed', sans-serif; }

.headline {
  font-family: 'Anton', sans-serif;
  line-height: .92; letter-spacing: .005em; text-transform: uppercase;
}

/* ---- Gradient text (gold sheen + crimson) ---- */
.grad-gold {
  background: linear-gradient(100deg, var(--gold-br) 0%, var(--gold) 45%, #b9842a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-blood {
  background: linear-gradient(100deg, var(--crimson-br) 0%, var(--gold) 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 700; letter-spacing: .02em;
  padding: .95rem 1.6rem; border-radius: 6px;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
  will-change: transform;
}
.btn-gold {
  background: linear-gradient(180deg, var(--gold-br), var(--gold));
  color: var(--onyx);
  box-shadow: 0 10px 30px -10px rgba(216,169,63,.6);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(216,169,63,.8); }
.btn-crimson { background: var(--crimson); color: #fff; box-shadow: 0 10px 30px -10px rgba(200,16,46,.6); }
.btn-crimson:hover { transform: translateY(-2px); background: var(--crimson-br); }
.btn-ghost {
  background: rgba(255,255,255,.05); color: #fff;
  border: 1px solid rgba(240,205,115,.35); backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(240,205,115,.12); border-color: rgba(240,205,115,.6); transform: translateY(-2px); }
.btn-dark { background: var(--onyx); color: var(--parchment); border: 1px solid var(--onyx-3); }
.btn-dark:hover { transform: translateY(-2px); border-color: var(--gold); }

/* shine sweep */
.btn-gold::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s ease;
}
.btn-gold:hover::after { transform: translateX(120%); }

/* ---- Eyebrow ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; letter-spacing: .22em; text-transform: uppercase; font-size: .8rem;
}

/* ---- Scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; } .reveal-d4 { transition-delay: .32s; }
.reveal-d5 { transition-delay: .40s; } .reveal-d6 { transition-delay: .48s; }

/* ---- Marquee ---- */
.marquee { display: flex; width: max-content; animation: marquee 36s linear infinite; }
.marquee:hover { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- Crest slow rotate (heritage seal) ---- */
.seal-spin { animation: spin 60s linear infinite; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- ember float ---- */
.float-a { animation: floatA 13s ease-in-out infinite; }
.float-b { animation: floatB 17s ease-in-out infinite; }
@keyframes floatA { 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(14px,-20px); } }
@keyframes floatB { 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(-18px,16px); } }

/* ---- live pulse ---- */
.live-dot { position: relative; }
.live-dot::after {
  content:''; position:absolute; inset:-5px; border-radius:999px;
  border:2px solid currentColor; animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping { 0%{ transform:scale(.7); opacity:.9; } 80%,100%{ transform:scale(1.9); opacity:0; } }

/* ---- player / content card ---- */
.tilt-card { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; }
.tilt-card:hover { transform: translateY(-6px); border-color: rgba(216,169,63,.6); }
.tilt-card .card-sheen { position:absolute; inset:0; opacity:0; transition:opacity .35s ease;
  background: radial-gradient(120% 120% at 50% 0%, rgba(200,16,46,.4) 0%, transparent 60%); }
.tilt-card:hover .card-sheen { opacity:1; }

/* ---- underline link ---- */
.ul-link { position: relative; }
.ul-link::after { content:''; position:absolute; left:0; bottom:-3px; height:2px; width:100%;
  background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .3s ease; }
.ul-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---- gold filigree divider ---- */
.divider-gold { display:flex; align-items:center; justify-content:center; gap:1rem; }
.divider-gold::before, .divider-gold::after {
  content:''; height:1px; width:min(120px,18vw);
  background: linear-gradient(90deg, transparent, var(--gold)); }
.divider-gold::after { background: linear-gradient(90deg, var(--gold), transparent); }

/* ============================================================
   Kakatiya Kala Thoranam — heritage motif (reusable)
   ============================================================ */
.thoranam-ico {
  display: inline-block; width: 56px; height: 36px; flex: none;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 190' fill='none' stroke='%23d8a93f' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M46 66 Q150 16 254 66'/%3E%3Cpath d='M70 66 Q150 30 230 66'/%3E%3Ccircle cx='150' cy='40' r='7'/%3E%3Cpath d='M44 66 H256'/%3E%3Cpath d='M56 80 H244'/%3E%3Cpath d='M70 80 V170 M86 80 V170 M70 170 H86'/%3E%3Cpath d='M214 80 V170 M230 80 V170 M214 170 H230'/%3E%3C/svg%3E");
}

/* faint large watermark for section backgrounds */
.thoranam-wm {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: no-repeat center / min(620px, 72%) auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 190' fill='none' stroke='%23d8a93f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M46 66 Q150 16 254 66'/%3E%3Cpath d='M70 66 Q150 30 230 66'/%3E%3Ccircle cx='150' cy='40' r='7'/%3E%3Cpath d='M44 66 H256'/%3E%3Cpath d='M56 80 H244'/%3E%3Cpath d='M70 80 V170 M86 80 V170 M70 170 H86'/%3E%3Cpath d='M214 80 V170 M230 80 V170 M214 170 H230'/%3E%3C/svg%3E");
  opacity: .05;
}
.thoranam-wm.on-light { opacity: .055; filter: saturate(.6) brightness(.7); }
.thoranam-wm.tr { background-position: right -60px top -40px; background-size: 420px auto; opacity: .06; }

/* divider with thoranam icon at centre */
.divider-thoranam { display: flex; align-items: center; justify-content: center; gap: 1.1rem; }
.divider-thoranam::before, .divider-thoranam::after {
  content: ''; height: 1px; width: min(90px, 14vw);
  background: linear-gradient(90deg, transparent, var(--gold));
}
.divider-thoranam::after { background: linear-gradient(90deg, var(--gold), transparent); }

/* self-drawing line animation (triggers when an ancestor .reveal becomes .in) */
.thoranam-draw path, .thoranam-draw circle {
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  transition: stroke-dashoffset 2.2s cubic-bezier(.6,0,.2,1) .15s;
}
.reveal.in .thoranam-draw path, .reveal.in .thoranam-draw circle,
.thoranam-draw.in path, .thoranam-draw.in circle { stroke-dashoffset: 0; }
/* auto: draws itself on load (for hero motifs) */
.thoranam-draw.auto path, .thoranam-draw.auto circle {
  animation: drawThoranam 2.6s cubic-bezier(.6,0,.2,1) .35s both;
}
@keyframes drawThoranam { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .thoranam-draw path, .thoranam-draw circle { stroke-dashoffset: 0 !important; transition: none !important; }
}

/* ---- texture grain ---- */
.grain::before {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.05; z-index:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- nav ---- */
#nav { transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease; }
#nav.nav-scrolled {
  background: rgba(12,8,9,.8); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 30px -16px rgba(0,0,0,.8); border-color: rgba(216,169,63,.18);
}

/* ---- mobile menu drawer (slides in from the right) ---- */
#mobileMenu { visibility: hidden; transition: visibility .4s ease; }
#mobileMenu .menu-scrim { background: rgba(0,0,0,.55); opacity: 0; transition: opacity .35s ease; }
#mobileMenu .menu-panel {
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
#mobileMenu.open { visibility: visible; }
#mobileMenu.open .menu-scrim { opacity: 1; }
#mobileMenu.open .menu-panel { transform: translateX(0); }

/* ---- crest fallback ---- */
.crest-fallback { display:none; }

.stat-num { font-variant-numeric: tabular-nums; }

/* ---- parchment section text colors ---- */
.on-parchment { color: var(--ink); }
.on-parchment-muted { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}