/* ==========================================================
   ЛЁД — оформление сайта
   ========================================================== */

:root{
  --deep:   #03121f;
  --night:  #072a44;
  --mid:    #0e4a6d;
  --glow:   #7fdfff;
  --cyan:   #a8ecff;
  --white:  #eaf9ff;
  --muted:  #8fb6cd;
  --frost:  rgba(255,255,255,.07);
  --edge:   rgba(255,255,255,.18);
  --accent: #8fe6ff;

  --head: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --body: "Manrope", "Segoe UI", system-ui, sans-serif;
}

*{ box-sizing:border-box }

html,body{ height:100% }

body{
  margin:0;
  min-height:100%;
  padding:0;
  font-family:var(--body);
  color:var(--white);
  background:
    radial-gradient(120% 80% at 50% -10%, #12587f 0%, transparent 55%),
    radial-gradient(90% 60% at 85% 100%, #0b3f63 0%, transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--deep) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}

/* ---------- фон: сияние, снег, виньетка ---------- */
#snow{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:1 }

.aurora{
  position:fixed; inset:-20%; z-index:0; pointer-events:none; opacity:.55;
  background:
    radial-gradient(40% 25% at 20% 25%, rgba(127,223,255,.20), transparent 70%),
    radial-gradient(35% 22% at 78% 18%, rgba(160,190,255,.16), transparent 70%),
    radial-gradient(45% 30% at 55% 85%, rgba(90,220,230,.13), transparent 70%);
  filter:blur(20px);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform:translate3d(-2%,-1%,0) scale(1) }
  to  { transform:translate3d(3%,2%,0) scale(1.08) }
}

.vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(2,10,18,.72) 100%);
}

.flash{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:0;
  background:radial-gradient(60% 50% at 50% 50%, rgba(220,248,255,.55), transparent 70%);
}
.flash.on{ animation:flashOut .5s ease-out }
@keyframes flashOut{ 0%{opacity:0} 25%{opacity:1} 100%{opacity:0} }

/* ---------- каркас ---------- */
#app{ position:relative; z-index:5 }

.view{
  min-height:100dvh;
  padding:calc(env(safe-area-inset-top,0px) + 28px) 20px calc(env(safe-area-inset-bottom,0px) + 90px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.view[hidden]{ display:none !important }
.view.is-active{ animation:viewIn .55s cubic-bezier(.2,.7,.25,1) both }
@keyframes viewIn{
  from{ opacity:0; transform:scale(.965) translateY(14px); filter:blur(10px) }
  to  { opacity:1; transform:none; filter:none }
}

/* ====================== ГЛАВНАЯ ====================== */
.hero{ text-align:center; margin-bottom:clamp(28px,5vh,56px) }

.hero-kicker{
  margin:0 0 14px; font-size:clamp(11px,1.4vw,13px); letter-spacing:.34em;
  text-transform:uppercase; color:var(--muted);
}
.hero-title{
  margin:0; font-family:var(--head); font-weight:300;
  font-size:clamp(52px,12vw,140px); line-height:.95; letter-spacing:-.02em;
  background:linear-gradient(180deg, #ffffff 0%, var(--cyan) 45%, #4fa8cf 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 34px rgba(127,223,255,.35));
}
.hero-sub{
  margin:18px 0 0; color:var(--muted); font-size:clamp(13px,1.6vw,16px);
  letter-spacing:.16em; text-transform:lowercase;
}

/* ---------- три конька ---------- */
.skates{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap:clamp(8px,3vw,40px); width:100%; max-width:1000px;
}

.skate-card{
  flex:0 1 260px; min-width:170px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  background:none; border:0; padding:10px 6px; cursor:pointer; color:inherit;
  font:inherit; -webkit-tap-highlight-color:transparent;
  animation:rise .9s cubic-bezier(.2,.75,.3,1) both; animation-delay:var(--delay,0s);
}
@keyframes rise{ from{opacity:0; transform:translateY(40px) rotate(-4deg)} to{opacity:1; transform:none} }

.skate-wrap{
  position:relative; display:block; width:100%; aspect-ratio:1/1;
  transition:transform .45s cubic-bezier(.2,.8,.25,1), filter .45s ease;
  animation:float 6s ease-in-out infinite; animation-delay:var(--delay,0s);
}
@keyframes float{ 0%,100%{translate:0 0} 50%{translate:0 -10px} }

.skate{ width:100%; height:100%; display:block; overflow:visible }

/* части конька */
.sk-shadow{ fill:rgba(0,0,0,.4); filter:blur(6px) }
.sk-boot{
  fill:rgba(210,240,255,.16);
  stroke:rgba(255,255,255,.55); stroke-width:2.2; stroke-linejoin:round;
}
.sk-shine{ fill:rgba(255,255,255,.14) }
.sk-cuff{ fill:var(--accent); opacity:.34 }
.sk-lace path{ stroke:rgba(255,255,255,.62); stroke-width:2.4; stroke-linecap:round; fill:none }
.sk-mount{ fill:rgba(190,225,245,.42) }
.sk-blade{ fill:#dff3ff; filter:drop-shadow(0 0 10px rgba(127,223,255,.75)) }

.skate-card:hover .skate-wrap,
.skate-card:focus-visible .skate-wrap{
  transform:translateY(-14px) rotate(-5deg) scale(1.05);
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));
}
.skate-card:hover .sk-cuff{ opacity:.6 }
.skate-card:hover .sk-boot{ fill:rgba(210,240,255,.26) }
.skate-card:active .skate-wrap{ transform:translateY(-6px) scale(.99) }
.skate-card:focus-visible{ outline:2px solid var(--accent); outline-offset:8px; border-radius:18px }

/* надпись НА коньке */
.skate-label{
  position:absolute; left:19%; top:19%; width:42%; height:28%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--head); font-weight:500;
  font-size:clamp(11px,1.45vw,16px); letter-spacing:.06em;
  color:#06283c; white-space:nowrap;
  background:linear-gradient(180deg,#ffffff,#cfeeff);
  border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,.25), inset 0 -2px 0 rgba(0,0,0,.08);
  transform:rotate(-1.5deg);
}

/* блик, пробегающий по коньку */
.glint{
  position:absolute; inset:0; overflow:hidden; border-radius:16px; pointer-events:none;
  -webkit-mask-image:radial-gradient(70% 60% at 45% 45%, #000 60%, transparent 100%);
          mask-image:radial-gradient(70% 60% at 45% 45%, #000 60%, transparent 100%);
}
.glint::after{
  content:""; position:absolute; top:-40%; left:-60%; width:40%; height:180%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform:rotate(18deg); opacity:0;
}
.skate-card:hover .glint::after{ animation:sweep .85s ease-out }
@keyframes sweep{ 0%{left:-60%; opacity:.9} 100%{left:120%; opacity:0} }

.skate-caption{
  color:var(--muted); font-size:clamp(11px,1.3vw,14px);
  letter-spacing:.1em; text-align:center;
  transition:color .3s ease;
}
.skate-card:hover .skate-caption{ color:var(--cyan) }

/* ====================== ВНУТРЕННИЕ СТРАНИЦЫ ====================== */
.view:not(#view-home){ justify-content:flex-start }

.page{ width:100%; max-width:1120px; margin:0 auto }

.back{
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:26px; padding:10px 18px; cursor:pointer;
  font:inherit; font-size:13px; letter-spacing:.12em; color:var(--cyan);
  background:var(--frost); border:1px solid var(--edge); border-radius:999px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:background .25s ease, transform .25s ease;
}
.back:hover{ background:rgba(255,255,255,.14); transform:translateX(-4px) }

.page-title{
  margin:0; font-family:var(--head); font-weight:300;
  font-size:clamp(32px,6vw,64px); letter-spacing:-.01em;
  background:linear-gradient(180deg,#fff,var(--cyan) 70%,#4fa8cf);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.page-sub{ margin:8px 0 22px; color:var(--muted); letter-spacing:.14em; font-size:13px }

.drop-hint{
  margin-bottom:22px; padding:14px 18px; border-radius:16px;
  border:1px dashed rgba(255,255,255,.22); background:rgba(255,255,255,.04);
  color:var(--muted); font-size:13px; letter-spacing:.04em;
}
.drop-hint.over{ border-color:var(--glow); background:rgba(127,223,255,.12); color:var(--white) }
.pick{
  font:inherit; font-size:13px; color:var(--cyan); background:none; border:0;
  border-bottom:1px solid rgba(168,236,255,.5); padding:0 0 1px; cursor:pointer;
}
.pick:hover{ color:#fff; border-color:#fff }

/* ---------- сетка галереи ---------- */
/* фото выкладываются колонками, чтобы кадры сохраняли свои пропорции */
.grid{ column-count:3; column-gap:14px }
@media (max-width:900px){ .grid{ column-count:2 } }
@media (max-width:540px){ .grid{ column-count:1 } }
.grid.is-empty{ column-count:1 }

.grid-video{
  column-count:1; display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(clamp(260px,40vw,460px), 1fr));
}

.tile{
  position:relative; margin:0 0 14px; padding:0; cursor:pointer;
  break-inside:avoid; -webkit-column-break-inside:avoid;
  overflow:hidden; border-radius:18px;
  border:1px solid var(--edge); background:rgba(255,255,255,.05);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:transform .4s cubic-bezier(.2,.8,.25,1), box-shadow .4s ease, border-color .4s ease;
  animation:tileIn .6s ease both;
}
@keyframes tileIn{ from{opacity:0; transform:translateY(18px) scale(.97)} to{opacity:1; transform:none} }
.tile img{ width:100%; height:auto; display:block; transition:transform .6s ease }

.tile .cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:26px 14px 12px;
  font-size:12px; letter-spacing:.1em; color:var(--white);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
.tile:hover .cap{ opacity:1; transform:none }
.tile:hover{ transform:translateY(-6px); border-color:rgba(168,236,255,.6); box-shadow:0 18px 40px rgba(0,0,0,.5) }
.tile:hover img{ transform:scale(1.07) }
.tile::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(3,18,31,.65) 100%);
}
.tile .badge{
  position:absolute; left:10px; top:10px; z-index:2;
  padding:4px 10px; border-radius:999px; font-size:10px; letter-spacing:.1em;
  background:rgba(3,18,31,.6); border:1px solid var(--edge); color:var(--cyan);
  backdrop-filter:blur(8px);
}

.tile-video{ cursor:default; display:flex; flex-direction:column }
.tile-video:hover{ transform:none }              /* не дёргаем карточку под курсором у плеера */
.tile-video video{
  width:100%; aspect-ratio:16/9; height:auto; display:block;
  object-fit:contain; background:#020d16;
}
.tile-video::after{ display:none }
.tile-video .vtitle{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; font-size:13px; letter-spacing:.08em; color:var(--white);
  background:rgba(255,255,255,.05); border-bottom:1px solid var(--edge);
}
.tile-video .dur{ color:var(--cyan); font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap }
.tile-video .verr{ padding:18px; color:#ffc2c2; font-size:13px; line-height:1.65 }

/* заглушка пустой галереи */
.empty{
  grid-column:1/-1; padding:52px 24px; text-align:center;
  border:1px dashed rgba(255,255,255,.18); border-radius:22px;
  background:rgba(255,255,255,.03); color:var(--muted); line-height:1.7;
}
.empty b{ color:var(--white); font-weight:600 }
.empty code{
  font-family:ui-monospace,Consolas,monospace; font-size:12px; color:var(--cyan);
  background:rgba(127,223,255,.1); padding:2px 7px; border-radius:6px;
}

/* ---------- заслуги ---------- */
.section-h{
  margin:46px 0 16px; font-family:var(--head); font-weight:300;
  font-size:clamp(18px,2.6vw,26px); color:var(--white); letter-spacing:.01em;
  display:flex; align-items:center; gap:16px;
}
.section-h::after{
  content:""; flex:1 1 auto; height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.22), transparent);
}

.awards{ list-style:none; margin:0; padding:0; display:grid; gap:14px }
.award{
  position:relative; display:flex; align-items:center; gap:clamp(12px,2.5vw,26px);
  padding:clamp(16px,2.5vw,24px); border-radius:20px;
  background:linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border:1px solid var(--edge);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 12px 34px rgba(0,0,0,.3);
  animation:tileIn .6s ease both;
  transition:transform .35s ease, border-color .35s ease;
}
.award:hover{ transform:translateX(6px); border-color:rgba(255,225,168,.45) }
.award .year{
  flex:0 0 auto; min-width:64px; font-family:var(--head); font-weight:300;
  font-size:clamp(18px,3vw,28px); color:var(--cyan);
}
.award .body{ flex:1 1 auto; min-width:0 }
.award .t{ display:block; font-size:clamp(15px,2vw,19px); margin-bottom:4px }
.award .n{ display:block; color:var(--muted); font-size:13px }
.award .place{
  flex:0 0 auto; padding:7px 14px; border-radius:999px; white-space:nowrap;
  font-size:12px; letter-spacing:.08em;
  background:linear-gradient(135deg, rgba(255,225,168,.22), rgba(255,225,168,.06));
  border:1px solid rgba(255,225,168,.4); color:#ffe1a8;
}

/* ====================== СЕКРЕТНЫЙ КОНЁК ====================== */
.secret-skate{
  position:fixed; z-index:40;
  left:calc(16px + env(safe-area-inset-left,0px));
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  width:62px; height:62px; padding:0; cursor:pointer;
  background:none; border:0; opacity:.3;
  filter:grayscale(.35);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.25,1), filter .45s ease;
  animation:secretPulse 7s ease-in-out infinite;
  --accent:#c9a9ff;
}
.secret-skate svg{ width:100%; height:100%; overflow:visible; transform:rotate(-12deg) }
.secret-skate:hover, .secret-skate:focus-visible{
  opacity:1; filter:none; transform:scale(1.22) rotate(6deg); outline:none;
}
.secret-skate:hover svg{ filter:drop-shadow(0 0 16px rgba(201,169,255,.8)) }
@keyframes secretPulse{ 0%,88%,100%{opacity:.3} 94%{opacity:.62} }

.secret-skate.found{ animation:none; opacity:.85; filter:none }

.view-secret{ background:radial-gradient(90% 60% at 20% 10%, rgba(150,110,255,.16), transparent 65%) }
.view-secret .page-title{ background:linear-gradient(180deg,#fff,#d9c4ff 70%,#8f6fd6); -webkit-background-clip:text; background-clip:text }

/* ====================== ПРОСМОТР ФОТО ====================== */
.lightbox{
  position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  padding:56px 20px; background:rgba(2,10,18,.9);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  animation:viewIn .35s ease both;
}
.lightbox[hidden]{ display:none !important }
.lb-figure{ margin:0; max-width:100%; max-height:100%; text-align:center }
.lb-figure img{
  max-width:100%; max-height:calc(100dvh - 130px); border-radius:16px; display:block;
  border:1px solid var(--edge); box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.lb-figure figcaption{ margin-top:14px; color:var(--muted); font-size:13px; letter-spacing:.08em }

.lb-close, .lb-nav{
  position:absolute; z-index:2; cursor:pointer; color:var(--white);
  background:var(--frost); border:1px solid var(--edge); border-radius:999px;
  backdrop-filter:blur(10px); font:inherit; line-height:1;
  transition:background .25s ease, transform .25s ease;
}
.lb-close{ top:calc(18px + env(safe-area-inset-top,0px)); right:18px; width:44px; height:44px; font-size:16px }
.lb-nav{ top:50%; translate:0 -50%; width:52px; height:52px; font-size:30px; padding-bottom:5px }
.lb-prev{ left:14px } .lb-next{ right:14px }
.lb-close:hover, .lb-nav:hover{ background:rgba(255,255,255,.2); }

/* ====================== АДАПТИВ ====================== */
@media (max-width:760px){
  .skates{ gap:6px }
  .skate-card{ flex:0 1 46%; min-width:140px }
  .skate-label{ font-size:11px; left:18%; width:44% }
  .secret-skate{ width:52px; height:52px }
  .award{ flex-wrap:wrap }
  .award .place{ order:3 }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
}