/* ============================================================
   ХК КГАСУ — Главная (новый дизайн «ИММЕРСИВ»)
   Дизайн-система: design-concepts/DESIGN-SYSTEM.md
   ============================================================ */
:root{
  --black:#09090B; --panel:#101013; --panel-2:#15151A;
  --gold:#C9A24B; --gold-bright:#EAC978; --bordeaux:#8E1B2B; --red:#D81E33;
  --white:#F5F3EE; --dim:#84858D;
  --disp:'Russo One',sans-serif;
  --cond:'Saira Condensed',sans-serif;
  --body:'Manrope',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--black);scroll-behavior:smooth}
body{font-family:var(--body);color:var(--white);background:var(--black);overflow-x:hidden}
::selection{background:var(--gold);color:var(--black)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1300px;margin:0 auto;padding:0 44px}

@keyframes kenburns{0%{transform:scale(1.02) translate(0,0)}100%{transform:scale(1.10) translate(-2%,-2%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:translateY(0)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.reveal{opacity:0;transform:translateY(46px);transition:opacity .9s cubic-bezier(.16,.7,.3,1),transform .9s cubic-bezier(.16,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* BIRTHDAY BANNER */
.birthday-banner{position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);z-index:300;
  max-width:calc(100% - 32px);opacity:0;transition:transform .5s cubic-bezier(.16,.8,.3,1),opacity .4s}
.birthday-banner.show{transform:translate(-50%,0);opacity:1}
.birthday-banner .bd-in{display:flex;align-items:center;gap:16px;padding:16px 20px;
  background:linear-gradient(120deg,var(--gold),var(--gold-bright));color:var(--black);
  border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.birthday-banner .bd-star{font-size:1.7rem;line-height:1}
.birthday-banner .bd-txt{display:flex;flex-direction:column;line-height:1.15}
.birthday-banner .bd-label{font-family:var(--cond);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.82rem;color:var(--bordeaux)}
.birthday-banner .bd-names{font-family:var(--disp);font-size:1.15rem;text-transform:uppercase}
.birthday-banner .bd-close{margin-left:6px;background:none;border:0;cursor:pointer;color:var(--black);font-size:1.6rem;line-height:1;opacity:.6;transition:opacity .2s}
.birthday-banner .bd-close:hover{opacity:1}

/* LOADING SCREEN */
.loading-screen{position:fixed;inset:0;z-index:9999;background:var(--black);display:flex;align-items:center;justify-content:center;transition:opacity .6s ease}
.loading-screen.loading-hidden{opacity:0}
.loading-content{display:flex;flex-direction:column;align-items:center;gap:22px}
.loading-emblem{width:150px;height:150px;object-fit:contain;filter:drop-shadow(0 0 34px rgba(201,162,75,.45));animation:floaty 3s ease-in-out infinite}
.loading-title{font-family:var(--disp);font-size:1.7rem;letter-spacing:.14em;color:var(--white);text-transform:uppercase}
.loading-bar{width:170px;height:3px;background:rgba(255,255,255,.12);border-radius:3px;overflow:hidden}
.loading-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--bordeaux),var(--gold));animation:loadfill .8s ease-out forwards}
@keyframes loadfill{to{width:100%}}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;
  padding:18px 44px;background:linear-gradient(180deg,rgba(9,9,11,.85),transparent);transition:background .3s}
.nav.scrolled{background:rgba(9,9,11,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav .brand{display:flex;align-items:center;gap:18px;font-family:var(--disp);font-size:1.4rem;letter-spacing:.02em}
.nav .brand img{width:92px;height:92px;object-fit:contain}
.nav .links{display:flex;gap:32px;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.nav .links a{opacity:.72;transition:opacity .2s;position:relative}
.nav .links a::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--gold);transition:width .25s}
.nav .links a:hover{opacity:1}.nav .links a:hover::after{width:100%}
.nav .join{font-family:var(--cond);font-weight:800;font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase;color:var(--black);
  background:var(--gold);padding:11px 24px;transition:transform .2s,box-shadow .2s}
.nav .join:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,162,75,.35)}
.nav .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav .burger span{width:26px;height:2px;background:var(--white);transition:.3s}

/* HERO */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;display:flex;align-items:flex-end}
.hero .bg{position:absolute;inset:0;z-index:0;background:url('../images/about-2.jpg') center 50%/cover no-repeat;
  animation:kenburns 18s ease-out both;will-change:transform}
.hero .veil{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(9,9,11,.92) 0%,rgba(9,9,11,.35) 52%,rgba(9,9,11,.55) 100%),
  linear-gradient(0deg,rgba(9,9,11,.95) 2%,transparent 42%)}
.hero .glow{position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 74% 34%,rgba(201,162,75,.14),transparent 52%)}
.hero .watermark{position:absolute;right:2%;top:50%;transform:translateY(-50%);z-index:1;
  width:min(50vw,620px);opacity:.10;filter:grayscale(1) brightness(2);pointer-events:none}
.side-label{position:absolute;right:26px;top:50%;transform:translateY(-50%) rotate(180deg);z-index:4;
  writing-mode:vertical-rl;font-family:var(--cond);font-weight:700;letter-spacing:.42em;font-size:.85rem;color:var(--gold);opacity:.8;text-transform:uppercase}
.hero-content{position:relative;z-index:3;width:100%;padding-bottom:92px}
.hero .livechip{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(216,30,51,.5);
  background:rgba(216,30,51,.12);padding:7px 16px;border-radius:40px;font-family:var(--cond);font-weight:700;font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:24px;animation:fadeUp .8s ease .15s both}
.hero .livechip .d{width:8px;height:8px;border-radius:50%;background:var(--red);animation:pulse 1.4s infinite}
.hero h1{font-family:var(--disp);line-height:.98;letter-spacing:.005em;font-size:clamp(3.2rem,11vw,9.5rem);
  text-transform:uppercase;animation:fadeUp 1s ease .3s both;text-shadow:0 12px 70px rgba(0,0,0,.55)}
.hero h1 .out{-webkit-text-stroke:2px var(--gold);color:transparent;display:block}
.hero .lede{max-width:470px;margin-top:26px;color:#D2D1CC;font-size:1.12rem;line-height:1.55;animation:fadeUp 1s ease .45s both}
.scroll-cue{position:absolute;bottom:26px;left:44px;z-index:4;font-family:var(--cond);font-weight:600;font-size:.75rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--dim);animation:floaty 2.4s ease-in-out infinite}

/* COUNTDOWN / NEXT MATCH */
.count{background:linear-gradient(180deg,var(--panel),var(--black));border-top:1px solid rgba(201,162,75,.18);border-bottom:1px solid rgba(255,255,255,.05)}
.count-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:40px;padding:32px 0}
.count .match{display:flex;align-items:center;gap:20px}
.count .match img{width:62px;height:62px;object-fit:contain;background:#fff;border-radius:50%;padding:5px}
.count .match .nm{font-family:var(--disp);font-size:1.5rem;line-height:1}
.count .match .vs{font-family:var(--cond);font-weight:800;font-size:1rem;color:var(--gold);margin:0 6px}
.count .match .opp{color:var(--dim)}
.count .timer{display:flex;gap:22px;justify-content:center}
.count .timer .u{text-align:center;min-width:66px}
.count .timer .u b{font-family:var(--cond);font-weight:900;font-size:3rem;line-height:1;color:var(--gold);display:block}
.count .timer .u span{font-family:var(--cond);font-weight:600;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.count .cta{font-family:var(--cond);font-weight:800;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;color:var(--black);
  background:var(--gold);padding:14px 30px;white-space:nowrap;transition:transform .2s}
.count .cta:hover{transform:translateY(-2px)}
/* season-over состояние */
.count.season-over .count-inner{grid-template-columns:1fr auto;text-align:left}
.count .summary .k{font-family:var(--cond);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-size:.8rem}
.count .summary .big{font-family:var(--disp);font-size:1.7rem;text-transform:uppercase;margin-top:6px}

/* TICKER */
.ticker{background:var(--gold);color:var(--black);overflow:hidden;white-space:nowrap}
.ticker .track{display:inline-flex;animation:marquee 30s linear infinite;font-family:var(--cond);font-weight:700;font-size:1.4rem;letter-spacing:.04em;text-transform:uppercase}
.ticker .track span{padding:11px 0;display:inline-flex;align-items:center}
.ticker .track span>i{padding:0 28px;font-style:normal}
.ticker .track b{color:var(--bordeaux)}
.ticker .track .sep{color:rgba(0,0,0,.35)}

/* STATS */
.stats{padding:120px 0 100px;background:var(--black)}
.stats .head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:58px;flex-wrap:wrap;gap:20px}
.stats .head h2{font-family:var(--disp);font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.05;text-transform:uppercase}
.stats .head h2 em{font-style:normal;color:var(--gold)}
.stats .head p{color:var(--dim);max-width:320px;font-size:.96rem}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(255,255,255,.06)}
.stat{background:var(--black);padding:40px 32px;position:relative;overflow:hidden;transition:background .3s}
.stat:hover{background:var(--panel-2)}
.stat .num{font-family:var(--cond);font-weight:900;font-size:clamp(3.4rem,6.5vw,5.8rem);line-height:.86;color:var(--gold)}
.stat .lbl{margin-top:10px;font-family:var(--cond);font-weight:600;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.stat .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--bordeaux);transition:width .5s}
.stat:hover .bar{width:100%}

/* NEWS */
.news{padding:110px 0;background:var(--panel)}
.news .head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:50px;flex-wrap:wrap;gap:16px}
.news .head .k{font-family:var(--cond);font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-size:1rem}
.news .head h2{font-family:var(--disp);font-size:clamp(2.4rem,5vw,4rem);line-height:1;text-transform:uppercase;margin-top:6px}
.news .head .all{font-family:var(--cond);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);border-bottom:2px solid transparent;transition:border-color .25s;padding-bottom:2px}
.news .head .all:hover{border-color:var(--gold)}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ncard{background:var(--black);border:1px solid rgba(255,255,255,.06);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,border-color .3s}
.ncard:hover{transform:translateY(-6px);border-color:rgba(201,162,75,.4)}
.ncard .ph{aspect-ratio:16/10;overflow:hidden;background:var(--panel-2)}
.ncard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.ncard .ph img.portrait{object-fit:contain}
.ncard:hover .ph img{transform:scale(1.06)}
.ncard .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.ncard .date{font-family:var(--cond);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-size:.78rem}
.ncard h3{font-family:var(--disp);font-size:1.08rem;line-height:1.25;text-transform:uppercase;font-weight:400}
.ncard p{color:var(--dim);font-size:.92rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* FEATURE */
.feature{display:grid;grid-template-columns:1.1fr .9fr;min-height:80vh;background:var(--black)}
.feature .media{position:relative;overflow:hidden}
.feature .media img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease}
.feature:hover .media img{transform:scale(1.07)}
.feature .media::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(9,9,11,.7))}
.feature .body{padding:88px 76px;display:flex;flex-direction:column;justify-content:center}
.feature .tag{font-family:var(--cond);font-weight:800;letter-spacing:.18em;color:var(--red);font-size:1.05rem;text-transform:uppercase;margin-bottom:18px}
.feature h3{font-family:var(--disp);font-size:clamp(2.2rem,3.8vw,3.6rem);line-height:1.05;margin-bottom:24px;text-transform:uppercase}
.feature p{color:#BEBDB8;line-height:1.65;max-width:430px;margin-bottom:34px}
.feature .cta{align-self:flex-start;font-family:var(--cond);font-weight:800;font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--black);background:var(--gold);padding:15px 38px;transition:transform .2s}
.feature .cta:hover{transform:translateY(-2px)}

/* ROSTER */
.roster{padding:110px 0;background:var(--black)}
.roster .head{text-align:center;margin-bottom:56px}
.roster .head .k{font-family:var(--cond);font-weight:700;letter-spacing:.26em;color:var(--gold);font-size:1rem;text-transform:uppercase}
.roster .head h2{font-family:var(--disp);font-size:clamp(2.6rem,6vw,5rem);line-height:1.02;text-transform:uppercase;margin-top:6px}
.wall{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.pcard{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--panel);cursor:pointer}
.pcard img{width:100%;height:100%;object-fit:cover;transition:transform .6s;filter:saturate(1.02)}
.pcard .grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(9,9,11,.92));transition:background .4s}
.pcard .no{position:absolute;top:12px;left:14px;font-family:var(--cond);font-weight:900;font-size:2rem;color:var(--gold);line-height:1;opacity:.95;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.pcard .info{position:absolute;left:14px;right:14px;bottom:14px;transform:translateY(16px);opacity:0;transition:transform .4s,opacity .4s}
.pcard .info .name{font-family:var(--disp);font-size:1.05rem;line-height:1.1;text-transform:uppercase}
.pcard .info .pos{font-family:var(--cond);font-weight:600;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:4px}
.pcard::after{content:'';position:absolute;inset:0;border:2px solid transparent;transition:border-color .35s}
.pcard:hover img{transform:scale(1.06)}
.pcard:hover .grad{background:linear-gradient(180deg,rgba(142,27,43,.15) 0%,transparent 40%,rgba(9,9,11,.94))}
.pcard:hover::after{border-color:var(--gold)}
.pcard:hover .info{transform:none;opacity:1}
.roster .all{display:block;text-align:center;margin-top:48px}
.roster .all a{font-family:var(--cond);font-weight:800;font-size:1.1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(201,162,75,.5);padding:15px 44px;transition:all .25s;display:inline-block}
.roster .all a:hover{background:var(--gold);color:var(--black)}

/* CTA BAND */
.band{padding:110px 0;text-align:center;background:linear-gradient(120deg,var(--bordeaux),#5A0E18);position:relative;overflow:hidden}
.band::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,rgba(201,162,75,.25),transparent 60%)}
.band .in{position:relative;z-index:1}
.band h2{font-family:var(--disp);font-size:clamp(2.6rem,7vw,5.5rem);line-height:1.02;margin-bottom:30px;text-transform:uppercase}
.band a{font-family:var(--cond);font-weight:800;font-size:1.3rem;letter-spacing:.06em;text-transform:uppercase;color:var(--bordeaux);background:var(--white);
  padding:17px 56px;display:inline-block;transition:transform .2s}
.band a:hover{transform:translateY(-3px)}

/* FOOTER */
.footer{padding:44px;text-align:center;color:var(--dim);font-size:.85rem;background:var(--black);border-top:1px solid rgba(255,255,255,.05)}
.footer a{color:var(--gold)}

@media(max-width:1000px){
  .nav{padding:12px 18px;background:rgba(9,9,11,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.07)}
  .nav .brand{font-size:1.05rem;gap:10px}
  .nav .brand img{width:46px;height:46px}
  .count .count-inner{padding:28px 22px 72px}
  .count.season-over .summary .big{font-size:1.4rem}
  .nav .links{display:none}
  .nav .join{display:none}
  .nav .burger{display:flex;margin-left:auto}
  .nav.open .links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:22px;
    background:rgba(9,9,11,.98);padding:28px 24px;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav.open .links a{font-size:1.05rem}
  .hero h1{font-size:clamp(2.8rem,13vw,4.2rem)}
  .hero .lede{font-size:1rem}
  .wrap{padding:0 22px}
  .count-inner{grid-template-columns:1fr;gap:26px;text-align:center}.count .match{justify-content:center}
  .count.season-over .count-inner{grid-template-columns:1fr;text-align:center}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .news-grid{grid-template-columns:1fr}
  .feature{grid-template-columns:1fr}.feature .media{min-height:320px}.feature .body{padding:56px 34px}
  .wall{grid-template-columns:repeat(3,1fr)}
  .side-label{display:none}
  .hero-content{padding-bottom:70px}
  .scroll-cue{left:24px}
}
@media(max-width:560px){
  .wall{grid-template-columns:repeat(2,1fr)}
  .stats,.news,.roster,.band{padding-top:70px;padding-bottom:70px}
}