/* ════════════════════════════════════════════════
   OLYCITY · Agent Page (immersive)
   ════════════════════════════════════════════════ */

.agent-page{
  display:none; position:relative; z-index:3;
  animation:agentIn .5s cubic-bezier(.22,1,.36,1);
}
.agent-page.active{ display:block; }
@keyframes agentIn{
  from{ opacity:0; transform:scale(.98) translateY(20px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}

.agent-hero{
  position:relative; min-height:620px; overflow:hidden;
  background:var(--bg-deep);
  border-bottom:1px solid var(--border);
}

/* YouTube video background */
.agent-hero-video-wrap{
  position:absolute; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
}
.agent-hero-video{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:200vw;
  height:112.5vw; /* 16:9 ratio */
  min-width:177.78vh;
  min-height:100vh;
  filter:brightness(.5) saturate(1.3);
  pointer-events:none;
}
/* Overlay to hide YouTube thumbnail+play button on load */
.agent-hero-video-cover{
  position:absolute; inset:0; z-index:1;
  background:var(--bg-deep);
  transition:opacity 1.5s ease 1s;
  pointer-events:none;
}
.agent-hero-video-cover.loaded{ opacity:0; }

/* Transparent overlay to block YouTube hover controls */
.agent-hero-video-block{
  position:absolute; inset:0; z-index:2;
  background:transparent;
  pointer-events:all;
  cursor:default;
}

/* When video is present, fade the bg art */
.agent-hero-bg.has-video{
  opacity:.12;
  animation:none;
  filter:blur(6px) saturate(.8);
}
.agent-hero-bg{
  position:absolute; inset:-8%;
  background-size:cover; background-position:center;
  filter:saturate(1.5) brightness(.5) contrast(1.1);
  opacity:.85;
  animation:agentBgDrift 25s ease-in-out infinite alternate;
}
@keyframes agentBgDrift{
  0%   { transform:scale(1.04) translate(0px,    0px)   rotate(0deg); }
  25%  { transform:scale(1.07) translate(-10px,  -6px)  rotate(.3deg); }
  50%  { transform:scale(1.05) translate(8px,    -4px)  rotate(-.2deg); }
  75%  { transform:scale(1.08) translate(-5px,   8px)   rotate(.15deg); }
  100% { transform:scale(1.06) translate(6px,    -8px)  rotate(-.25deg); }
}

/* Film grain overlay */
.agent-hero-grain{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat:repeat;
  animation:grainShift 0.15s steps(1) infinite;
}
@keyframes grainShift{
  0%  { background-position: 0 0; }
  10% { background-position: -5% -10%; }
  20% { background-position: -15% 5%; }
  30% { background-position: 7% -25%; }
  40% { background-position: -5% 25%; }
  50% { background-position: -15% 10%; }
  60% { background-position: 15% 0; }
  70% { background-position: 0 15%; }
  80% { background-position: 3% 35%; }
  90% { background-position: -10% 10%; }
  100%{ background-position: 0 0; }
}

/* Scanlines */
.agent-hero-scan{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.06) 2px,
    rgba(0,0,0,.06) 4px
  );
  animation:scanlineShift 8s linear infinite;
}
@keyframes scanlineShift{
  from{ background-position:0 0; }
  to{ background-position:0 100px; }
}

.agent-hero-gradient{
  position:absolute; inset:0; z-index:3;
  background:
    linear-gradient(to top, var(--bg) 0%, transparent 45%),
    linear-gradient(to right, rgba(10,12,16,.45) 0%, transparent 45%);
}
:root[data-theme="light"] .agent-hero-gradient{
  background:
    linear-gradient(to top, var(--bg) 0%, transparent 45%),
    linear-gradient(to right, rgba(244,241,234,.45) 0%, transparent 45%);
}
:root[data-theme="light"] .agent-hero-gradient{ filter:brightness(1.1); }
.agent-hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,70,86,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,70,86,.05) 1px, transparent 1px);
  background-size:50px 50px;
  mask-image:radial-gradient(ellipse at 30% 50%, #000, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at 30% 50%, #000, transparent 80%);
}

.agent-hero-content{
  position:relative; display:grid;
  grid-template-columns:1.2fr 1fr;
  max-width:1600px; margin:0 auto; padding:50px 32px;
  align-items:center; gap:40px; min-height:520px;
  z-index:10; /* above video, grain, scanlines, gradient */
}

.agent-info{ position:relative; z-index:2; }
.agent-back-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(10,12,16,.7); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border2);
  padding:8px 16px; color:var(--text); cursor:pointer;
  font-family:'Tomorrow',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
  margin-bottom:28px; transition:all .2s;
  position:relative; z-index:20;
}
.agent-back-btn:hover{ color:var(--text); border-color:var(--red); background:var(--red-low); }

.agent-page-eyebrow{
  font-family:'Tomorrow',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:5px; text-transform:uppercase; color:var(--red);
  margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.agent-page-eyebrow::before{
  content:''; width:30px; height:1px; background:var(--red);
}
.agent-page-name{
  font-family:'Tomorrow',sans-serif;
  font-size:clamp(60px, 8vw, 110px); font-weight:700;
  line-height:.9; letter-spacing:-1px;
  color:var(--text); text-transform:uppercase;
  margin-bottom:8px;
}
.agent-page-role-row{
  display:flex; align-items:center; gap:12px; margin-bottom:24px; flex-wrap:wrap;
}
.agent-role-badge{
  font-family:'Tomorrow',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:2.5px; text-transform:uppercase;
  padding:6px 16px; border:1px solid;
}
.agent-role-badge.D{ color:var(--D); border-color:var(--D); background:rgba(255,107,122,.08); }
.agent-role-badge.I{ color:var(--I); border-color:var(--I); background:rgba(240,168,50,.08); }
.agent-role-badge.S{ color:var(--S); border-color:var(--S); background:rgba(63,207,207,.08); }
.agent-role-badge.C{ color:var(--C); border-color:var(--C); background:rgba(168,127,255,.08); }
.agent-origin{
  font-family:'Tomorrow',sans-serif; font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:var(--muted);
}
.agent-bio{
  font-size:15px; line-height:1.65; color:var(--text);
  max-width:560px; margin-bottom:28px;
}

.agent-quick-stats{ display:flex; gap:14px; flex-wrap:wrap; }
.aqs{
  display:flex; flex-direction:column; gap:3px;
  padding:10px 16px; background:var(--surf); border:1px solid var(--border);
  border-left:2px solid var(--red);
}
.aqs-val{
  font-family:'Tomorrow',sans-serif; font-size:18px; font-weight:700; color:var(--text);
}
.aqs-lbl{
  font-family:'Tomorrow',sans-serif; font-size:9px; font-weight:500;
  letter-spacing:2px; text-transform:uppercase; color:var(--muted);
}

.agent-portrait-wrap{
  position:relative; display:flex; justify-content:center; align-items:flex-end;
  height:100%; min-height:400px;
}
.agent-portrait-full{
  max-height:580px; width:auto; max-width:100%;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));
  transition:transform .4s cubic-bezier(.22,1,.36,1);
  position:relative; z-index:2;
}
.agent-portrait-glow{
  position:absolute; bottom:-40px; left:50%; transform:translateX(-50%);
  width:80%; height:80%;
  background:radial-gradient(ellipse at center, var(--red-low), transparent 65%);
  filter:blur(40px); z-index:1;
}

/* ABILITIES */
.agent-body{
  max-width:1600px; margin:0 auto; padding:50px 32px; position:relative; z-index:2;
}
.abilities-section{ margin-bottom:48px; }
.ab-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.ability-card{
  background:var(--surf); border:1px solid var(--border);
  padding:20px; position:relative; overflow:hidden;
  transition:transform .25s, border-color .25s, box-shadow .25s;
  cursor:default;
}
.ability-card::before{
  content:''; position:absolute; top:0; left:0; width:100%; height:2px;
  background:linear-gradient(90deg, var(--red), transparent);
}
.ability-card:hover{
  transform:translateY(-4px); border-color:var(--red-mid);
  box-shadow:0 20px 40px -20px rgba(255,70,86,.25);
}
.ability-card.ultimate{
  background:linear-gradient(135deg, var(--gold-low), transparent);
  border-color:rgba(245,200,66,.3);
}
.ability-card.ultimate::before{ background:linear-gradient(90deg, var(--gold), transparent); }
.ability-card.ultimate:hover{
  border-color:var(--gold);
  box-shadow:0 20px 40px -20px rgba(245,200,66,.3);
}

.ab-header{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.ab-icon-wrap{
  width:48px; height:48px; background:var(--red-low);
  border:1px solid var(--red-mid);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; padding:8px;
}
.ability-card.ultimate .ab-icon-wrap{
  background:var(--gold-low);
  border-color:rgba(245,200,66,.4);
}
.ab-icon-wrap img{ width:100%; height:100%; object-fit:contain; filter:brightness(0) invert(1); }
:root[data-theme="light"] .ab-icon-wrap img{ filter:brightness(0); }
.ab-info{ flex:1; min-width:0; }
.ab-slot{
  font-family:'Tomorrow',sans-serif; font-size:9px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; color:var(--red); margin-bottom:3px;
}
.ability-card.ultimate .ab-slot{ color:var(--gold); }
.ab-name{
  font-family:'Tomorrow',sans-serif; font-size:16px; font-weight:600;
  letter-spacing:.5px; color:var(--text); text-transform:uppercase; line-height:1.1;
}
.ab-cost{
  font-family:'Tomorrow',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:1px; color:var(--muted);
  display:flex; align-items:center; gap:5px; margin-top:6px;
}
.ab-cost::before{ content:'◈'; color:var(--red); font-size:10px; }
.ability-card.ultimate .ab-cost::before{ color:var(--gold); }
.ab-desc{ font-size:13px; line-height:1.55; color:var(--text); }

/* USAGE — comps where this agent appears */
.usage-section{ margin-bottom:48px; }
.usage-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; }
.usage-card{
  background:var(--surf); border:1px solid var(--border);
  padding:16px 18px; cursor:pointer;
  transition:transform .2s, border-color .2s, box-shadow .2s;
  position:relative; overflow:hidden;
}
.usage-card:hover{
  transform:translateY(-3px); border-color:var(--red-mid);
  box-shadow:var(--shadow-card);
}
.usage-map-thumb{
  position:absolute; top:0; right:0; width:100%; height:100%;
  opacity:.12; background-size:cover; background-position:center; pointer-events:none;
}
.usage-card-inner{ position:relative; z-index:1; }
.usage-map{
  font-family:'Tomorrow',sans-serif; font-size:18px; font-weight:600;
  letter-spacing:1px; color:var(--text); text-transform:uppercase; margin-bottom:4px;
}
.usage-comp-label{
  font-family:'Tomorrow',sans-serif; font-size:10px; font-weight:600;
  letter-spacing:1.5px; color:var(--muted); text-transform:uppercase; margin-bottom:12px;
}
.usage-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.usage-tier{
  font-family:'Tomorrow',sans-serif; font-size:9px; font-weight:700;
  letter-spacing:1.5px; padding:2px 8px;
}
.usage-tier.S{ background:var(--gold-low); color:var(--gold); border:1px solid rgba(245,200,66,.3); }
.usage-tier.A{ background:rgba(63,207,207,.1); color:var(--S); border:1px solid rgba(63,207,207,.3); }
.usage-wr{
  font-family:'Tomorrow',sans-serif; font-size:11px; color:var(--text);
  font-weight:600; letter-spacing:.5px;
}
.usage-go{ margin-left:auto; color:var(--muted); font-size:14px; }
.usage-card:hover .usage-go{ color:var(--red); transform:translateX(3px); transition:transform .2s, color .2s; }

/* PLAYED BY OLYCITY */
.played-by{
  background:var(--surf); border:1px solid var(--border);
  border-left:2px solid var(--red); padding:18px 22px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.played-by-lbl{
  font-family:'Tomorrow',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; color:var(--red);
}
.played-by-pills{ display:flex; gap:6px; flex-wrap:wrap; }
.played-pill{
  font-family:'Tomorrow',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase;
  padding:5px 12px; background:var(--surf2); border:1px solid var(--border2); color:var(--text);
}
.played-pill .pill-role{ color:var(--muted); font-weight:500; margin-left:6px; }
.played-none{ font-size:13px; color:var(--muted); font-style:italic; }

.section-title-with-tag{
  display:flex; align-items:baseline; gap:14px; margin-bottom:22px; flex-wrap:wrap;
}
.sec-tag{
  font-family:'Tomorrow',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase; color:var(--red);
}
.sec-title{
  font-family:'Tomorrow',sans-serif; font-size:24px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; color:var(--text);
}
.sec-line{ flex:1; height:1px; background:linear-gradient(90deg, var(--border2), transparent); min-width:60px; }