@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/anton-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/anton-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --img-corner:url(/assets/img/corner.jpg);
  --img-cabinet:url(/assets/img/cabinet.jpg);
  --img-pl:url(/assets/img/pl.jpg);
  --img-training:url(/assets/img/training.jpg);
  --img-ucl:url(/assets/img/ucl.jpg);
  --img-logo:url(/assets/img/logo.png);
  --nazar-w:clamp(46px,4.2vw,64px);
  --bg:#000;
  --ink:#f4f2ee;
  --ink-dim:rgba(244,242,238,.58);
  --tape:#e2c22e;
  --tape-ink:#15130c;
  --pad:clamp(20px,3vw,44px);
  --num:clamp(6rem,min(26vw,44vh),30rem);
  --lbl:clamp(1.5rem,min(4vw,6.6vh),4.5rem);
  --tape-h:clamp(42px,4.4vw,66px);
  --px:0px;
  --py:0px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{
  background:var(--bg);-webkit-text-size-adjust:100%;
}
body{
  margin:0;min-height:100vh;min-height:100svh;
  background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ---------- memory montage ---------- */
.montage{
  position:fixed;left:50%;top:50%;z-index:0;
  width:max(100vw,177.78vh);height:max(100vh,56.25vw);
  transform:translate(-50%,-50%) scale(1.04);
  background:#000;pointer-events:none;overflow:hidden;
}
.ph{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h,auto);
  aspect-ratio:var(--ar);z-index:var(--z,1);opacity:var(--o,1);
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(closest-side,#000 var(--ms,18%),rgba(0,0,0,.55) 55%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 var(--ms,18%),rgba(0,0,0,.55) 55%,transparent 100%);
  transform:translate(calc(var(--px) * var(--d,1)),calc(var(--py) * var(--d,1)));
  transition:transform 1s cubic-bezier(.2,.7,.2,1);
  animation:reveal 1.6s ease both;animation-delay:calc(var(--i,0) * 120ms);
  will-change:transform,opacity;
}
.ph>i{
  display:block;width:100%;height:100%;
  background:var(--img) var(--op,50% 50%)/cover no-repeat;
  animation:drift var(--t,30s) ease-in-out infinite alternate;animation-delay:var(--td,0s);
  will-change:transform;
}
@keyframes reveal{from{opacity:0}to{opacity:var(--o,1)}}
@keyframes drift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.09) translate(var(--dx,1.5%),var(--dy,-1%))}}

.corner{--img:var(--img-corner);--ar:900/1106}
.cabinet{--img:var(--img-cabinet);--ar:900/635}
.pl{--img:var(--img-pl);--ar:900/601}
.training{--img:var(--img-training);--ar:900/570}
.ucl{--img:var(--img-ucl);--ar:900/968}
.logo{--img:var(--img-logo);--ar:560/936;-webkit-mask-image:none;mask-image:none}
.logo>i{background-size:contain;animation:none}

/* landscape canvas 1600x900 */
.p1{--x:-16%;--y:-24%;--w:58%;--o:.95;--z:2;--d:1.1;--i:0;--t:34s;--dx:-1.5%;--dy:1%}
.p2{--x:18%;--y:-24%;--w:66%;--o:.7;--z:3;--d:.7;--i:1;--t:40s;--td:-12s}
.p3{--x:56%;--y:-28%;--w:50%;--o:.95;--z:4;--d:1.3;--i:2;--t:36s;--td:-5s;--dx:1%;--dy:1.5%}
.p4{--x:42%;--y:32%;--w:72%;--o:.9;--z:2;--d:.6;--i:3;--t:44s;--td:-20s}
.p5{--x:-22%;--y:34%;--w:70%;--o:.9;--z:3;--d:.8;--i:4;--t:38s;--td:-9s;--dx:-1%;--dy:-1.5%}
.p6{--x:40.5%;--y:41%;--w:11%;--o:.72;--z:6;--d:1.6;--i:5}

@media (orientation:portrait){
  .montage{width:max(100vw,56.25vh);height:max(100vh,177.78vw)}
  /* portrait canvas 900x1600 */
  .p1{--x:-30%;--y:-12%;--w:105%}
  .p2{--x:14%;--y:-2%;--w:110%;--o:.65}
  .p3{--x:18%;--y:28%;--w:92%}
  .p4{--x:-38%;--y:50%;--w:112%}
  .p5{--x:4%;--y:66%;--w:112%}
  .p6{--x:70%;--y:42%;--w:22%}
}

.veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 56% 50% at 50% 54%,rgba(0,0,0,.74) 0%,rgba(0,0,0,.4) 55%,rgba(0,0,0,0) 100%),
    linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.18) 32%,rgba(0,0,0,.18) 60%,rgba(0,0,0,.88) 100%);
}

/* ---------- crime scene tape ---------- */
.tape{
  position:fixed;z-index:2;left:50%;
  top:var(--tape-top,calc(50vh - var(--num) * .46 - var(--tape-h) * 1.15 - 14px));
  width:140vw;height:var(--tape-h);
  transform:translate(-50%,-50%) rotate(-5.5deg);
  display:flex;align-items:center;gap:0;overflow:hidden;white-space:nowrap;
  color:var(--tape-ink);
  background:
    linear-gradient(100deg,rgba(255,255,255,.17) 0 5%,transparent 5% 47%,rgba(0,0,0,.09) 47% 56%,transparent 56%) 0 0/340px 100% repeat-x,
    linear-gradient(80deg,transparent 0 62%,rgba(255,255,255,.1) 62% 66%,transparent 66%) 90px 0/530px 100% repeat-x,
    linear-gradient(180deg,rgba(255,255,255,.1),transparent 30%,transparent 70%,rgba(0,0,0,.14)),
    var(--tape);
  border-block:2px solid rgba(0,0,0,.28);
  box-shadow:0 22px 48px -10px rgba(0,0,0,.75);
  pointer-events:none;
  animation:unroll 1.1s cubic-bezier(.2,.7,.2,1) both .25s;
}
.tape span{
  font-family:Anton,Impact,"Arial Narrow Bold",sans-serif;
  font-size:calc(var(--tape-h) * .58);line-height:1;letter-spacing:.07em;
  padding:0 1.1em;flex:none;
}
.tape span::after{content:"";display:inline-block;width:.34em;height:.34em;margin-left:2.2em;vertical-align:.16em;background:currentColor;transform:rotate(45deg)}
@keyframes unroll{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

.grain{
  position:fixed;inset:0;z-index:3;pointer-events:none;
  opacity:.2;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:260px 260px;
}

/* ---------- evil eye bead ---------- */
.nazar{
  position:fixed;top:0;right:calc(var(--pad) + env(safe-area-inset-right, 0px));z-index:5;
  width:var(--nazar-w);display:flex;flex-direction:column;align-items:center;
  transform-origin:50% 0;animation:sway 5.4s ease-in-out -1.6s infinite alternate;
  pointer-events:none;
}
.nazar i{display:block;width:1px;height:clamp(22px,2.6vh,30px);background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.6))}
.nazar img{display:block;width:100%;height:auto;margin-top:-3px;filter:drop-shadow(0 14px 16px rgba(0,0,0,.7))}
@keyframes sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}

/* ---------- stone menu ---------- */
.menu{position:fixed;z-index:6;top:calc(var(--pad) - 6px);left:calc(var(--pad) - 6px)}
.menu[hidden]{display:none}
.menu-btn{
  display:block;width:64px;height:44px;padding:4px 6px;margin:0;border:0;border-radius:10px;
  background:transparent;cursor:pointer;
  transition:background .2s ease,transform .25s cubic-bezier(.2,.7,.2,1);
}
.menu-btn img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.menu-btn:hover,.menu-btn:focus-visible{background:rgba(255,255,255,.07);outline:none}
.menu-btn:focus-visible{box-shadow:0 0 0 2px var(--tape)}
.menu.open .menu-btn{transform:rotate(-8deg)}
.menu-list{
  position:absolute;left:6px;top:calc(100% + 6px);min-width:230px;margin:0;padding:6px;list-style:none;
  background:rgba(12,12,12,.84);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.1);border-radius:12px;
  box-shadow:0 24px 50px -16px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
}
.menu.open .menu-list{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease}
.menu-list button{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px 10px 12px;border:0;border-radius:8px;
  background:transparent;color:var(--ink-dim);font:500 15px/1.2 Inter,system-ui,sans-serif;text-align:left;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.menu-list button::before{content:"";width:6px;height:6px;border-radius:50%;background:transparent;flex:none;transition:background .15s ease}
.menu-list button:hover,.menu-list button:focus-visible{background:rgba(255,255,255,.07);color:var(--ink);outline:none}
.menu-list button[aria-current="true"]{color:var(--ink)}
.menu-list button[aria-current="true"]::before{background:var(--tape)}
.comp{margin:clamp(14px,2.4vh,24px) 0 0;color:var(--ink-dim);font-size:clamp(1rem,.9rem + .4vw,1.25rem);line-height:1;letter-spacing:.01em;transition:opacity .25s ease}
.comp.swap{opacity:0}

/* ---------- page ---------- */
.page{
  position:relative;z-index:4;min-height:100vh;min-height:100svh;
  display:grid;grid-template-rows:1fr auto;
  padding:calc(var(--pad) + env(safe-area-inset-top, 0px)) var(--pad) calc(var(--pad) + env(safe-area-inset-bottom, 0px));
}

.answer{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(clamp(24px,5vh,56px) + 3vh) 0 clamp(24px,5vh,56px)}
.stats{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:clamp(2rem,7.5vw,9rem)}

.stat{display:flex;flex-direction:column;align-items:center;min-width:0}
.num{
  font-family:Anton,Impact,"Arial Narrow Bold",sans-serif;
  font-size:var(--num);line-height:.86;letter-spacing:-.025em;text-align:center;
  text-shadow:0 2px 2px rgba(0,0,0,.35),0 24px 60px rgba(0,0,0,.6);
  font-variant-numeric:tabular-nums;
}
.lbl{font-family:Anton,Impact,"Arial Narrow Bold",sans-serif;font-size:var(--lbl);line-height:1;letter-spacing:.16em;padding-left:.16em;margin-top:.45em}
.bottom{opacity:0;animation:fade .9s ease .35s both}
.bottom{display:flex;flex-direction:column;gap:3px;color:var(--ink-dim);font-size:clamp(.8rem,.75rem + .2vw,.9rem);line-height:1.4}
.bottom p{margin:0}
.bottom .club{color:var(--ink);font-weight:500;font-size:1.1em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes fade{to{opacity:1}}

@media (max-width:640px) and (orientation:portrait){
  :root{--num:clamp(5rem,31vw,8.5rem);--lbl:clamp(1.1rem,6vw,1.6rem);--tape-h:clamp(36px,10vw,44px);--tape-top:14%}
  :root{--nazar-w:44px}
  .menu{top:30px}
  .menu-btn{width:56px;height:40px}
  .nazar i{height:30px}
  .answer{padding:2vh 0 6vh}
  .stats{gap:clamp(1rem,6vw,1.6rem)}
  .lbl{letter-spacing:.12em;padding-left:.12em}
  .lbl{margin-top:.3em}
  .tape{transform:translate(-50%,-50%) rotate(-7deg)}
}

@media (prefers-reduced-motion:reduce){
  .ph,.bottom,.tape,.nazar{animation:none;opacity:1}
  .ph{opacity:var(--o,1)}
  .ph>i{animation:none}
  .ph{transition:none}
}