/* ==========================================================================
   notcryptogod — Telegram landing
   Geometry is derived from design/reference pc.png (1920x1080):
   card 386x459 @ (767,139) · logo circle 110 · button 287x53 · green #b3f955
   Every value inside the card is expressed in reference pixels multiplied by
   --u, so the whole card scales as one unit on any screen.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face {
  font-family: 'Inter var';
  src: url('assets/fonts/inter-lat.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Inter var';
  src: url('assets/fonts/inter-cyr.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------- tokens ---------- */
:root {
  --green: #b3f955;
  --ink: #fff;

  /* card */
  --card-w: clamp(316px, 35.74vh, 430px);
  --card-top: calc(139 * var(--u));
  --u: calc(var(--card-w) / 386);

  /* intro timeline — the landing is there from the first frame */
  --t-card: 0s;        /* card materialises immediately              */
  --t-certs: 0.7s;     /* + the 0.4s build time = 1.1s on the page   */

  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: #000;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

img, video { display: block; max-width: 100%; }

/* ==========================================================================
   1. Scene
   ========================================================================== */
.scene {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

/* ==========================================================================
   2. Glass card
   ========================================================================== */
.card {
  position: absolute;
  z-index: 3;
  top: var(--card-top);
  left: 50%;
  width: var(--card-w);
  height: calc(459 * var(--u));
  border-radius: calc(47 * var(--u));
  overflow: hidden;

  /* premium dark glass — flat #0f0f0f over black, exactly like the reference */
  background:
    linear-gradient(157deg, rgba(255,255,255,.013) 0%, rgba(255,255,255,0) 46%),
    rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  backdrop-filter: blur(26px) saturate(140%);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.04) inset,
    0 0 0 1px rgba(255,255,255,.04),
    0 30px 80px -20px rgba(0,0,0,.9);

  transform: translate3d(-50%, 0, 0);
  animation: cardIn .78s var(--ease-out) var(--t-card) both;
  will-change: transform, opacity, filter;
}

@keyframes cardIn {
  from { opacity: 0; filter: blur(14px); transform: translate3d(-50%, calc(26 * var(--u)), 0) scale(.972); }
  to   { opacity: 1; filter: blur(0);    transform: translate3d(-50%, 0, 0) scale(1); }
}

.card__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: calc(20 * var(--u)) calc(37 * var(--u)) calc(22 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* --- channel logo ------------------------------------------------------- */
.card__logo {
  width: calc(110 * var(--u));
  height: calc(110 * var(--u));
  border-radius: 50%;
  background: #000;
  overflow: hidden;
  flex: none;
}

.card__logo-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- title -------------------------------------------------------------- */
.card__title {
  margin: calc(5 * var(--u)) 0 0;
  font-size: calc(30.5 * var(--u));
  line-height: calc(36 * var(--u));
  font-weight: 500;
  letter-spacing: calc(-0.32 * var(--u));
  color: #fff;
}

/* --- rules (Line 21 / Line 22 — full bleed, centre-lit) ----------------- */
.card__rule {
  width: 100%;
  height: 1px;
  margin: 0 calc(-37 * var(--u));
  flex: none;
  border: 0;
  width: calc(100% + 74 * var(--u));
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.245) 50%,
    rgba(255,255,255,0) 100%);
}

.card__rule:first-of-type { margin-top: calc(15.5 * var(--u)); }
.card__rule:last-of-type  { margin-top: calc(19 * var(--u)); }

/* --- copy --------------------------------------------------------------- */
.card__lead,
.card__text {
  width: calc(312 * var(--u));
  margin: 0;
  color: #fff;
  font-weight: 400;
  text-wrap: pretty;
}

.card__lead {
  margin-top: calc(19 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: calc(25 * var(--u));
  letter-spacing: calc(-0.1 * var(--u));
}

.card__text {
  margin-top: calc(17 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(19 * var(--u));
  letter-spacing: calc(-0.05 * var(--u));
  /* the reference fades the tail of the paragraph out */
  -webkit-mask-image: linear-gradient(180deg, #000 58%, rgba(0,0,0,.52) 100%);
          mask-image: linear-gradient(180deg, #000 58%, rgba(0,0,0,.52) 100%);
}

/* --- CTA ---------------------------------------------------------------- */
.cta {
  position: relative;
  margin-top: calc(34 * var(--u));
  width: calc(287 * var(--u));
  height: calc(53 * var(--u));
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));

  border-radius: 999px;
  background: var(--green);
  color: var(--green);           /* drives the knocked-out plane in the icon */
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;

  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 6px 18px -12px rgba(179,249,85,.45);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), filter .22s ease;
}

.cta__label {
  font-size: calc(29.2 * var(--u));
  line-height: 1;
  font-weight: 500;
  letter-spacing: calc(-0.4 * var(--u));
  color: #000;
  white-space: nowrap;
}

.cta__icon {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  flex: none;
}

.cta:hover   { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 10px 26px -12px rgba(179,249,85,.6); }
.cta:active  { transform: translateY(0) scale(.985); filter: brightness(.96); }
.cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* soft diagonal light sweep, top-left → bottom-right */
.cta__shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.cta__shine::before {
  content: '';
  position: absolute;
  top: -70%;
  left: 0;
  width: 34%;
  height: 240%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.62), rgba(255,255,255,0));
  filter: blur(5px);
  /* backwards: hold the 0% frame through the delay, otherwise the band
     parks on the button until the first cycle starts */
  animation: ctaShine 6.4s cubic-bezier(.45,.05,.35,1) calc(var(--t-card) + 1.6s) infinite backwards;
}

@keyframes ctaShine {
  0%, 68%  { transform: rotate(24deg) translate3d(-260%, 0, 0); }
  86%,100% { transform: rotate(24deg) translate3d(420%, 0, 0); }
}

/* --- travelling edge reflections --------------------------------------- */
.card__edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.5px;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.card__edge--left  { left: 0; }
.card__edge--right { right: 0; }

.card__edge i {
  position: absolute;
  left: 0;
  right: 0;
  height: 42%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.50) 42%,
    rgba(212,255,150,.42) 62%,
    rgba(255,255,255,0) 100%);
  opacity: 0;
}

/* deliberately out of sync: different length, delay and rest period */
.card__edge--left  i { animation: edgeUp   7.3s ease-in-out calc(var(--t-card) + 1.1s) infinite backwards; }
.card__edge--right i { animation: edgeDown 5.9s ease-in-out calc(var(--t-card) + 2.7s) infinite backwards; }

@keyframes edgeUp {
  0%       { transform: translate3d(0, 240%, 0); opacity: 0; }
  10%      { opacity: .95; }
  38%      { opacity: .8; }
  48%,100% { transform: translate3d(0, -140%, 0); opacity: 0; }
}
@keyframes edgeDown {
  0%       { transform: translate3d(0, -140%, 0); opacity: 0; }
  12%      { opacity: .85; }
  40%      { opacity: .7; }
  52%,100% { transform: translate3d(0, 240%, 0); opacity: 0; }
}

/* --- staggered content reveal ------------------------------------------ */
.reveal { animation: revealIn .62s var(--ease-out) both; }
.card__logo             { animation-delay: calc(var(--t-card) + .16s); }
.card__title            { animation-delay: calc(var(--t-card) + .26s); }
.card__rule:first-of-type { animation-delay: calc(var(--t-card) + .32s); }
.card__lead             { animation-delay: calc(var(--t-card) + .36s); }
.card__text             { animation-delay: calc(var(--t-card) + .44s); }
.card__rule:last-of-type  { animation-delay: calc(var(--t-card) + .50s); }
.cta                    { animation-delay: calc(var(--t-card) + .56s); }

@keyframes revealIn {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   3. Certificates — the bottom composition
   They live inside their own zone that always starts a clear distance below
   the card, so the two layers can never touch or read as one object.
   ========================================================================== */
.certs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* never above 60% (the pile stays inside the bottom 40%) and never
     closer to the card than --cert-gap, whatever the screen does */
  top: max(60%, calc(var(--card-top) + 459 * var(--u) + var(--cert-gap)));
  z-index: 1;
  pointer-events: none;
}

.cert {
  position: absolute;
  left: calc(var(--kx) * var(--cert-w));
  top: var(--y);
  width: calc(var(--cert-w) * var(--s, 1));
  height: auto;
  aspect-ratio: 1.25;
  opacity: var(--o, 1);
  animation: certIn 1.05s var(--ease-out) calc(var(--t-certs) + var(--d, 0s)) both;
  will-change: transform, opacity;
}

/* the stack carries the resting angle plus the small drift each new
   certificate gets when it replaces the previous one */
.cert__stack {
  position: absolute;
  inset: 0;
  transform:
    rotate(calc(var(--r, 0deg) + var(--dr, 0deg)))
    translate3d(var(--dx, 0%), var(--dy, 0%), 0);
  transition: transform 1.6s cubic-bezier(.33, .02, .2, 1);
}

.cert picture {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.15s ease-in-out;
}
.cert picture.is-in { opacity: 1; }

.cert img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* tossed onto the pile, not placed — one definition for every screen */
@keyframes certIn {
  from { opacity: 0; transform: translate3d(0, 16%, 0) scale(.9); }
  to   { opacity: var(--o, 1); transform: translate3d(0, 0, 0) scale(1); }
}

/* --- desktop: the reference composition ------------------------------------
   One full-width row sitting right under the card plus a staggered second row
   that runs off the bottom edge. Size is driven by viewport WIDTH (as in the
   reference) and capped against height so it never overgrows a short window;
   --y is a share of the zone, so the rows keep their proportions everywhere. */
:root {
  --cert-gap: 6.2%;
  --cert-w: clamp(208px, 19.01vw, 891px);
}

/* --kx is the left edge in certificate-widths, --y a share of the zone height.
   Both scale with the viewport, so this arrangement holds its proportions on
   every screen. Values below come from tools/editor.html. */
.cert:nth-child(1)  { --kx: 3.6186;   --y: 37.91%;   --r: -1.6deg;   --s: 1;     --o: 0.97; --d: .10s; }
.cert:nth-child(2)  { --kx: 0.5722;   --y: 38.22%;   --r:  1.9deg;   --s: 0.98;  --o: 1;    --d: .34s; }
.cert:nth-child(3)  { --kx: 1.5232;   --y: 42.75%;   --r: -5.1deg;   --s: 1.02;  --o: 0.95; --d: 0s; }
.cert:nth-child(4)  { --kx: 2.5448;   --y: 44.85%;   --r:  2.2deg;   --s: 0.99;  --o: 0.98; --d: .52s; }
.cert:nth-child(5)  { --kx: 3.5271;   --y: 38.12%;   --r: -3deg;     --s: 1.01;  --o: 1;    --d: .22s; }
.cert:nth-child(6)  { --kx: 4.5419;   --y: 37.83%;   --r:  5.5deg;   --s: 0.97;  --o: 0.96; --d: .42s; }
.cert:nth-child(7)  { --kx: 3.5196;   --y: 11.32%;   --r:  5.1deg;   --s: 1.03;  --o: 0.94; --d: .78s; }
.cert:nth-child(8)  { --kx: -0.366;   --y: 37.24%;   --r: -3.7deg;   --s: 0.99;  --o: 0.97; --d: .64s; }
.cert:nth-child(9)  { --kx: -0.3471;  --y: 5.26%;    --r:  3deg;     --s: 1.02;  --o: 0.93; --d: .90s; }
.cert:nth-child(10) { --kx: 1.627;    --y: 6.25%;    --r:  3.9deg;   --s: 0.98;  --o: 0.9;  --d: 1.06s; }
.cert:nth-child(11) { --kx: 2.5734;   --y: 3.87%;    --r: -5.3deg;   --s: 1.01;  --o: 0.9;  --d: 1.24s; }
.cert:nth-child(12) { --kx: 0.6495;   --y: -6.49%;   --r: -3deg;     --s: 1;     --o: 0.88; --d: 1.42s; }
.cert:nth-child(13) { --kx: 4.5304;   --y: 4.7%;     --r: -1.9deg;   --s: 0.98;  --o: 0.96; --d: .90s; }
.cert:nth-child(14) { --kx: 5.4648;   --y: 43.24%;   --r: -2.7deg;   --s: 1;     --o: 0.95; --d: 1.18s; }
.cert:nth-child(15) { --kx: 5.4657;   --y: 6.68%;    --r:  5deg;     --s: 0.99;  --o: 0.92; --d: 1.34s; }

/* Short desktop windows (1366x768, 1280x800): the card claims a bigger share
   of the height, so the pile buys its band back with a slightly tighter —
   still unmistakable — gap. */
@media (min-width: 821px) and (max-height: 820px) {
  :root { --cert-gap: 5%; }
}

/* ==========================================================================
   4. Mobile — same idea, rebuilt for a vertical screen
   ========================================================================== */
@media (max-width: 820px) {
  :root {
    --card-w: min(88vw, 372px);
    --card-top: max(env(safe-area-inset-top, 0px) + 12px, 7.6vh);
    --cert-gap: 3.2%;
    --cert-w: clamp(150px, 52.00vw, 380px);
  }

  @keyframes certIn {
    from { opacity: 0; transform: translate3d(0, 16%, 0) scale(.9); }
    to   { opacity: var(--o, 1); transform: translate3d(0, 0, 0) scale(1); }
  }

  .cert:nth-child(1)  { --kx: -0.37;    --y: 81.17%;   --r: -2.2deg;   --s: 1;     --o: 0.97; --d: .10s; }
  .cert:nth-child(2)  { --kx: 0.4271;   --y: 86.8%;    --r:  4.9deg;   --s: 0.98;  --o: 1;    --d: 0s; }
  .cert:nth-child(3)  { --kx: 1.26;     --y: 80.17%;   --r: -1.8deg;   --s: 1.02;  --o: 0.96; --d: .30s; }
  .cert:nth-child(4)  { --kx: -0.3732;  --y: 43.33%;   --r:  7deg;     --s: 0.99;  --o: 0.95; --d: .74s; }
  .cert:nth-child(5)  { --kx: 0.3761;   --y: 47.19%;   --r: -4.7deg;   --s: 0.92;  --o: 0.93; --d: .58s; }
  .cert:nth-child(6)  { --kx: 1.2131;   --y: 42.06%;   --r:  5.7deg;   --s: 0.98;  --o: 0.98; --d: 1.02s; }
  .cert:nth-child(7)  { --kx: 1.1063;   --y: 2.24%;    --r: -5.8deg;   --s: 1.02;  --o: 0.9;  --d: 1.30s; }
  .cert:nth-child(8)  { --kx: -0.3158;  --y: 10.55%;   --r: -5.1deg;   --s: 0.92;  --o: 0.88; --d: 1.48s; }
  .cert:nth-child(9)  { --kx: 0.4426;   --y: 4.22%;    --r:  6.2deg;   --s: 1;     --o: 0.86; --d: 1.66s; }
  .cert:nth-child(10),
  .cert:nth-child(11),
  .cert:nth-child(12),
  .cert:nth-child(13),
  .cert:nth-child(14),
  .cert:nth-child(15) { display: none; }
}

/* Very short screens (landscape phones). There is no room left for a pile
   that keeps its distance from the card, and the card must never be crowded,
   so the bottom layer steps aside entirely. */
@media (max-height: 640px) and (orientation: landscape) {
  :root {
    --card-w: min(74vh, 340px);
    --card-top: max(env(safe-area-inset-top, 0px) + 8px, 3.5vh);
  }
  .certs { display: none; }
}

/* ==========================================================================
   5. Accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* The setting asks for less MOTION, not for a dead page — and on Windows and
     Android it is switched on far more often than people realise, which would
     otherwise strip the landing of every animation. Soft opacity work stays
     (crossfades, the light sweeps); only travel and scaling are dropped. */
  :root { --t-card: 0s; --t-certs: .3s; }

  .card   { animation: fadeOnly .45s ease both; transform: translate3d(-50%, 0, 0); }
  .reveal { animation: fadeOnly .45s ease both; }
  .cert   { animation: fadeOnly .6s ease calc(var(--t-certs) + var(--d, 0s)) both; }

  /* no positional drift when a certificate is replaced */
  .cert__stack { transition: none; }

  @keyframes fadeOnly { from { opacity: 0; } to { opacity: var(--o, 1); } }

  .cta { transition: none; }
}

/* pointer-coarse devices get no hover lift */
@media (hover: none) {
  .cta:hover { transform: none; }
}