/* ============================================================
   ЗАКРЫТЫЙ КЛУБ — Private-access Telegram Mini App
   Dark · graphite · dusty-rose · couture-serif · 2026
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root{
  /* ---- graphite surfaces (warm near-black) ---- */
  --ink-0:#0a080c;
  --ink-1:#100d12;
  --ink-2:#16121a;
  --ink-3:#1d1822;

  --glass:rgba(255,255,255,0.045);
  --glass-2:rgba(255,255,255,0.072);
  --line:rgba(255,255,255,0.085);
  --line-2:rgba(255,255,255,0.15);

  /* ---- warm whites ---- */
  --t-hi:#f3eef0;
  --t-mid:rgba(243,238,240,0.60);
  --t-lo:rgba(243,238,240,0.38);
  --t-dim:rgba(243,238,240,0.22);

  /* ---- accent (set by JS tweak; default dusty rose) ---- */
  --accent:#c2818d;
  --accent-deep:#7e4753;
  --glow:rgba(194,129,141,0.40);

  --ease:cubic-bezier(0.22,1,0.36,1);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
*::selection{background:var(--glow);}

.club{
  font-family:'Hanken Grotesk',-apple-system,system-ui,sans-serif;
  color:var(--t-hi);
  background:var(--ink-0);
  height:100%;
  position:relative;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.01em;
}
.serif{font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; letter-spacing:0;}
.club h1,.club h2,.club h3{margin:0; font-weight:500;}

/* small-caps label */
.eyebrow{
  font-size:10.5px; font-weight:600; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--t-lo);
}

.no-sb{scrollbar-width:none; -ms-overflow-style:none;}
.no-sb::-webkit-scrollbar{display:none; width:0; height:0;}

/* ambient field — one continuous space, faint warm light */
.club-bg{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
.club-bg::before{
  content:''; position:absolute; width:480px; height:480px; left:50%; top:-60px;
  transform:translateX(-50%);
  background:radial-gradient(circle, var(--glow), transparent 64%);
  opacity:0.5; filter:blur(8px);
}
.club-bg::after{
  content:''; position:absolute; width:420px; height:420px; right:-160px; bottom:40px;
  background:radial-gradient(circle, rgba(255,255,255,0.05), transparent 62%);
  filter:blur(8px);
}

.press{transition:transform .18s var(--ease), opacity .2s var(--ease); cursor:pointer; user-select:none;}
.press:active{transform:scale(0.97); opacity:0.86;}

.hair{height:1px; background:var(--line); border:none;}

/* glass surfaces */
.glass{
  background:var(--glass);
  border:1px solid var(--line);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
}

/* striped locked-media placeholder */
.veil{position:relative; overflow:hidden; background:linear-gradient(150deg,var(--ink-3),var(--ink-1));}
.veil::before{
  content:''; position:absolute; inset:0; opacity:0.5;
  background:repeating-linear-gradient(120deg,rgba(255,255,255,0.035) 0 1px,transparent 1px 9px);
}

/* image-slot — hide its built-in empty UI; we paint our own placeholder behind it */
image-slot{display:block;}
image-slot::part(frame){background:transparent !important;}
image-slot::part(empty){opacity:0 !important; pointer-events:none;}
image-slot::part(ring){display:none !important;}

/* ============================================================
   Motion — restrained
   ============================================================ */
@keyframes fadeUp{from{opacity:0; transform:translateY(16px);}to{opacity:1; transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes breathe{0%,100%{opacity:0.5;}50%{opacity:1;}}
@keyframes drift{0%,100%{transform:translate(0,0);}50%{transform:translate(-6px,-10px);}}
@keyframes sheetUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
@keyframes shimmer{0%{background-position:-180% 0;}100%{background-position:180% 0;}}
@keyframes haloPulse{0%,100%{transform:scale(1); opacity:0.55;}50%{transform:scale(1.18); opacity:0.9;}}

.fade-in{animation:fadeIn .5s var(--ease) both;}
.section-enter{animation:sectionEnter .55s var(--ease) both;}
@keyframes sectionEnter{from{opacity:0; transform:translateY(20px) scale(0.99);}to{opacity:1; transform:none;}}
@keyframes confettiFall{to{transform:translateY(960px) rotate(var(--cr,540deg)); opacity:0;}}
@keyframes vibeWave{from{background-position-x:0;}to{background-position-x:-44px;}}
@keyframes ripple{0%{transform:scale(0.55);opacity:0.5;}100%{transform:scale(2.6);opacity:0;}}
@keyframes ecgScroll{from{background-position-x:0;}to{background-position-x:-64px;}}
@keyframes nudge{
  0%,84%,100%{transform:translateX(0) rotate(0);}
  86%{transform:translateX(-2px) rotate(-7deg);}
  88%{transform:translateX(2px) rotate(7deg);}
  90%{transform:translateX(-2px) rotate(-5deg);}
  92%{transform:translateX(2px) rotate(5deg);}
  94%{transform:translateX(-1px) rotate(-2deg);}
  96%{transform:translateX(0) rotate(0);}
}
.stagger>*{animation:fadeUp .6s var(--ease) both;}
.stagger>*:nth-child(1){animation-delay:.04s;}
.stagger>*:nth-child(2){animation-delay:.10s;}
.stagger>*:nth-child(3){animation-delay:.16s;}
.stagger>*:nth-child(4){animation-delay:.22s;}
.stagger>*:nth-child(5){animation-delay:.28s;}
.stagger>*:nth-child(6){animation-delay:.34s;}

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