@font-face{
  font-family:'Fredoka';src:url('/fonts/fredoka.woff2') format('woff2');
  font-weight:300 700;font-display:swap;
}
@font-face{
  font-family:'Patrick Hand';src:url('/fonts/patrickhand.woff2') format('woff2');
  font-weight:400;font-display:swap;
}

@property --tint{syntax:'<color>';inherits:true;initial-value:#c2662f}
@property --deep{syntax:'<color>';inherits:true;initial-value:#2b1a11}

*{box-sizing:border-box}
html,body{height:100%}
body{
  --tint:#c2662f;--deep:#2b1a11;
  margin:0;
  font-family:'Fredoka',ui-rounded,'Segoe UI',system-ui,sans-serif;
  color:#f6f1e7;
  background:var(--deep);
  overflow:hidden;
  transition:--tint 900ms ease,--deep 900ms ease;
  -webkit-tap-highlight-color:transparent;
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(130% 95% at 50% -10%, color-mix(in oklab, var(--tint) 42%, var(--deep)) 0%, var(--deep) 62%),
    var(--deep);
}

/* ---------- фоновая лента кадров ---------- */
.drift{position:fixed;inset:-14vh -12vw;z-index:1;pointer-events:none;
  display:flex;flex-direction:column;justify-content:space-between;
  transform:rotate(-7deg);opacity:.16;filter:blur(1.5px) saturate(.7)}
.drift-row{display:flex;gap:26px;width:max-content;will-change:transform}
.drift-row[data-row=a]{animation:slideL 78s linear infinite}
.drift-row[data-row=b]{animation:slideR 96s linear infinite}
.drift-row img{height:23vh;min-height:150px;border-radius:6px;
  border:5px solid #f7f3ea;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.drift-row img:nth-child(odd){transform:rotate(2.2deg)}
.drift-row img:nth-child(even){transform:rotate(-2.6deg)}
@keyframes slideL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes slideR{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}

.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 45%, transparent 30%, color-mix(in oklab, var(--deep) 85%, #000) 100%)}

/* ---------- шапка ---------- */
.bar{position:fixed;z-index:20;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(14px,3vw,34px);gap:16px}
.brand img{display:block;width:clamp(86px,9.5vw,128px);height:auto;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.45))}
.brand{transition:transform .25s ease}
.brand:hover{transform:rotate(-2deg) scale(1.03)}

.tube{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:#e02f2f;color:#fff;font-size:15px;font-weight:600;letter-spacing:.2px;
  padding:10px 18px;border-radius:999px;
  box-shadow:0 8px 22px rgba(0,0,0,.42);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.tube:hover{background:#f03a3a;transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.5)}
.tube svg{width:24px;height:17px;fill:#fff}
.tube svg .tri{fill:#e02f2f}
.tube:hover svg .tri{fill:#f03a3a}

/* ---------- сцена ---------- */
.stage{position:relative;z-index:10;height:100dvh;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(6px,2vw,30px);padding:clamp(84px,12vh,120px) clamp(10px,3vw,42px) clamp(122px,17vh,168px)}

.year-ghost{position:absolute;z-index:-1;left:50%;top:46%;transform:translate(-50%,-50%);
  font-size:clamp(78px,17vw,250px);font-weight:700;letter-spacing:-.03em;white-space:nowrap;
  color:#fff;opacity:.09;mix-blend-mode:overlay;user-select:none;
  transition:opacity .45s ease}

.deck{position:relative;display:grid;place-items:center;height:100%;perspective:1400px}

.card{position:absolute;margin:0;padding:14px 14px 0;background:#fbf8f1;border-radius:4px;
  box-shadow:0 26px 60px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.6) inset;
  transform-style:preserve-3d;will-change:transform,opacity;cursor:pointer}
.card .shot{overflow:hidden;background:#e8e2d6;border-radius:2px;line-height:0;
  height:clamp(215px,44vh,430px);width:auto;max-width:min(74vw,820px)}
.card img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.card figcaption{display:flex;align-items:baseline;justify-content:center;gap:10px;
  padding:12px 6px 16px;color:#2a2621;font-family:'Patrick Hand',cursive;font-size:clamp(17px,2.1vw,25px);
  text-align:center}
.card .cap-year{font-family:'Fredoka',sans-serif;font-weight:600;font-size:.82em;
  color:#fff;background:#2a2621;border-radius:999px;padding:3px 11px;white-space:nowrap}

.card.is-live{animation:cardIn .52s cubic-bezier(.19,.9,.25,1) both}
.card.is-out{animation:cardOut .42s cubic-bezier(.5,0,.75,0) forwards;pointer-events:none}
@keyframes cardIn{
  from{opacity:0;transform:translate3d(var(--from,90px),34px,0) rotate(var(--spin,7deg)) scale(.9)}
  to{opacity:1;transform:translate3d(0,0,0) rotate(var(--rest,-1.4deg)) scale(1)}
}
@keyframes cardOut{
  from{opacity:1;transform:translate3d(0,0,0) rotate(var(--rest,-1.4deg)) scale(1)}
  to{opacity:0;transform:translate3d(calc(var(--from,90px) * -1.1),-40px,0) rotate(calc(var(--spin,7deg) * -1.3)) scale(.94)}
}

/* стрелки */
.nav{z-index:12;display:grid;place-items:center;width:52px;height:52px;flex:none;
  border:0;border-radius:50%;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.1);backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(0,0,0,.3);transition:background .2s ease,transform .2s ease}
.nav:hover{background:rgba(255,255,255,.2);transform:scale(1.08)}
.nav:disabled{opacity:.25;cursor:default;transform:none}
.nav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

.hint{position:fixed;z-index:15;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;margin:0;white-space:nowrap;
  font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.5);
  transition:opacity .5s ease}
.hint svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.hint.gone{opacity:0}

/* ---------- шкала времени ---------- */
.timeline{position:fixed;z-index:20;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:clamp(8px,1.6vw,18px);
  padding:14px clamp(12px,3vw,32px) calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, color-mix(in oklab, var(--deep) 92%, #000) 32%, transparent)}

.shuffle{flex:none;display:grid;place-items:center;width:44px;height:44px;
  border:1.5px solid rgba(255,255,255,.28);border-radius:50%;background:transparent;
  color:#fff;cursor:pointer;transition:transform .3s ease,border-color .2s ease,background .2s ease}
.shuffle:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55);transform:rotate(-40deg)}
.shuffle svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

.track{flex:1;display:flex;align-items:flex-end;gap:clamp(2px,1.1vw,14px);
  overflow-x:auto;scrollbar-width:none;padding:6px 2px 2px;scroll-behavior:smooth}
.track::-webkit-scrollbar{display:none}

.tick{position:relative;flex:1 0 auto;min-width:0;display:flex;flex-direction:column;
  align-items:center;gap:7px;padding:2px 4px;border:0;background:transparent;cursor:pointer;
  color:rgba(255,255,255,.45);font-family:inherit;font-size:12px;font-weight:500;letter-spacing:.02em;
  transition:color .25s ease}
.tick .dot{width:9px;height:9px;border-radius:50%;background:currentColor;
  transition:transform .3s cubic-bezier(.2,1.4,.4,1),background .25s ease,box-shadow .25s ease}
.tick .thumb{position:absolute;bottom:calc(100% + 10px);width:104px;height:60px;object-fit:cover;
  border-radius:4px;border:3px solid #f7f3ea;box-shadow:0 10px 24px rgba(0,0,0,.5);
  opacity:0;transform:translateY(8px) scale(.9) rotate(-3deg);pointer-events:none;
  transition:opacity .22s ease,transform .28s cubic-bezier(.2,1.3,.4,1)}
.tick:hover{color:rgba(255,255,255,.9)}
.tick:hover .thumb{opacity:1;transform:translateY(0) scale(1) rotate(-3deg)}
.tick[aria-selected=true]{color:#fff;font-weight:600}
.tick[aria-selected=true] .dot{transform:scale(1.75);background:#fff;
  box-shadow:0 0 0 5px color-mix(in oklab, var(--tint) 55%, transparent)}

/* ---------- мобильные ---------- */
@media (max-width:820px){
  .stage{grid-template-columns:1fr;padding:76px 12px 116px}
  .nav{display:none}
  .card{padding:10px 10px 0}
  .card .shot{width:min(92vw,560px);height:auto;max-height:54vh;max-width:none}
  .card .shot img{height:auto;max-height:54vh}
  .year-ghost{top:40%;opacity:.11}
  .tick .thumb{display:none}
  .tick{font-size:11px;gap:6px}
  .drift-row img{height:19vh;min-height:112px}
}
@media (max-width:520px){
  .brand img{width:78px}
  .tube span{display:none}
  .tube{padding:10px 13px}
  .hint{font-size:11.5px}
}

@media (prefers-reduced-motion:reduce){
  .drift-row{animation:none}
  .card.is-live,.card.is-out{animation-duration:.01ms}
  body{transition:none}
  .track{scroll-behavior:auto}
}