/*
 * Landing ("предбанник") — a foyer in front of the nested joomlaNestle app.
 * Visual language borrowed from chronos.com: near-black atmospheric background,
 * a slowly drifting cool-steel aura (.aura), red (#dc2828) accent + glow,
 * white→grey gradient
 * headings, glass cards, DM Mono eyebrow labels. Manrope carries the Cyrillic
 * (Host Grotesk — chronos's face — ships Latin only), DM Mono the Latin labels.
 * Fonts are self-hosted (offline-safe, like the rest of the project).
 */

/* ---------- self-hosted fonts ---------- */
/* Manrope ships as a variable font (wght 200-800) — one file per subset. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/Manrope-var-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/Manrope-var-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:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/Manrope-var-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:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/DMMono-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;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/DMMono-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;}

/* ---------- design tokens (chronos) ---------- */
:root{
  --bg:#080a0c; --depth:#05070a;
  --surface:#0f1115; --muted:#13161b; --border:#23272f;
  --glass-border:#23272f99;
  --fg:#f2f2f2; --fg-muted:#9fa3ad; --fg-dim:#8f95a1;
  --accent:#dc2828; --accent-lt:#df3a3a; --accent-dk:#c52020;
  --glow-red:0 0 30px -5px #dc28284d; --glow-red-sm:0 0 15px -3px #dc282840;
  --radius:16px; --radius-sm:8px;
  --font:'Manrope','Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --mono:'DM Mono','SFMono-Regular',ui-monospace,'Cascadia Code',Consolas,monospace;
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* Flex column: .stage centers via auto margins, .foot stays in flow at the
   bottom. When content is taller than the viewport the page simply scrolls —
   nothing is ever clipped (no overflow:hidden, no fixed footer overlap). */
body{
  min-height:100dvh;
  display:flex;flex-direction:column;
  overflow-x:hidden;
  color:var(--fg);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-color:var(--bg);
  background-image:linear-gradient(160deg, var(--depth) 0%, #101722 48%, #283447 100%);
  background-attachment:fixed;
}

/* ---------- animated aura (chronos's living gradient) ---------- */
/* The hero glows are real elements so they can move: three huge blurred blobs
   (cool steel, steel blue, ember red) slowly wander and breathe behind the
   content. Transform-only animation — GPU-composited, no repaints. Under
   prefers-reduced-motion they freeze into the original static corner glows. */
.aura{
  position:fixed;inset:-20%;z-index:0;pointer-events:none;
  filter:blur(clamp(70px,9vw,120px));
}
.aura i{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.aura i:nth-child(1){ /* cool steel — top left */
  width:58vw;height:58vw;left:0;top:-6%;opacity:.32;
  background:radial-gradient(circle,#586270 0%,transparent 62%);
  animation:drift-a 36s ease-in-out infinite alternate;
}
.aura i:nth-child(2){ /* steel blue — top right */
  width:64vw;height:64vw;right:-6%;top:-10%;opacity:.46;
  background:radial-gradient(circle,#38424f 0%,transparent 60%);
  animation:drift-b 44s ease-in-out infinite alternate;
}
.aura i:nth-child(3){ /* ember red — below the fold */
  width:72vw;height:56vw;left:16%;bottom:-24%;opacity:.11;
  background:radial-gradient(circle,#dc2828 0%,transparent 60%);
  animation:drift-c 52s ease-in-out infinite alternate;
}

@keyframes drift-a{
  from{transform:translate3d(-5%,-4%,0) scale(1)}
  to{transform:translate3d(9%,7%,0) scale(1.18)}
}
@keyframes drift-b{
  from{transform:translate3d(5%,-3%,0) scale(1.08)}
  to{transform:translate3d(-8%,6%,0) scale(.9)}
}
@keyframes drift-c{
  from{transform:translate3d(-4%,3%,0) scale(1)}
  to{transform:translate3d(6%,-6%,0) scale(1.24)}
}

/* ---------- topo canvas (chronos's animated contour map) ---------- */
/* WebGL iso-lines drawn by assets/js/landing-topo.js. Sits above the aura,
   below the grain and content. Without WebGL it just stays empty and the
   aura carries the background alone. */
.topo{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  display:block;width:100%;height:100%;
}

/* faint film grain for that matte, expensive-dark feel */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.04;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- stage ---------- */
.stage{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  gap:clamp(2rem,4.5vh,3.5rem);
  width:100%;max-width:1140px;
  margin-inline:auto;
  margin-block:auto; /* vertical centering that degrades to normal flow */
  padding-block:clamp(1.25rem,4vh,4rem);
  padding-inline:clamp(1.25rem,5vw,3rem);
}

/* ---------- intro ---------- */
.intro{display:flex;flex-direction:column;gap:1.15rem;max-width:50rem}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-weight:500;font-size:.78rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--fg-muted);
}
.eyebrow .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent-lt);box-shadow:0 0 10px 1px var(--accent);
}

.title{
  font-weight:800;
  font-size:clamp(2.4rem,6.2vw,4.5rem);
  line-height:1.02;letter-spacing:-.03em;
  color:var(--fg); /* solid fallback — gradient clip only where supported */
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .title{
    background:linear-gradient(135deg,#ffffff 0%,#9fa3ad 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}

.lede{
  color:var(--fg-muted);
  font-size:clamp(1rem,1.55vw,1.16rem);
  line-height:1.55;max-width:46ch;font-weight:400;
}

/* ---------- grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,1.8vw,1.5rem);
}

.card{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(1.4rem,2vw,1.85rem);
  min-height:clamp(15rem,32vh,17.5rem);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
/* Glass surfaces (chronos: #13161bcc + blur 12px) — the aura bleeds through.
   Opaque var(--surface) above stays as the fallback. */
@supports ((backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px))){
  .card{
    background:#13161bcc;
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-color:var(--glass-border);
  }
}
.card__top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.1rem;
}
.idx{
  font-family:var(--mono);font-weight:500;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim);
}
.status{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--mono);font-weight:500;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted);
  padding:.28rem .55rem;border:1px solid var(--border);border-radius:999px;
  background:#ffffff05;
}
.status--live{color:#e6e6e6;border-color:#2f7d5233}
.status .pulse{
  width:6px;height:6px;border-radius:50%;background:#3ddc84;
  box-shadow:0 0 8px 1px #3ddc8480;animation:pulse 2s var(--ease) infinite;
}
.card__title{
  font-weight:700;font-size:1.5rem;letter-spacing:-.02em;
  color:var(--fg);margin-bottom:.55rem;
}
.card__desc{
  color:var(--fg-muted);font-size:.94rem;line-height:1.55;font-weight:400;
}
.tags{
  list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;
  margin-top:1.1rem;
}
.tags li{
  font-family:var(--mono);font-weight:500;font-size:.7rem;
  letter-spacing:.06em;color:var(--fg-muted);
  padding:.24rem .55rem;border:1px solid var(--border);border-radius:8px;
  background:#ffffff04;
}

/* button pushed to the card floor */
.btn{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font);font-weight:600;font-size:.95rem;
  color:#fff;text-decoration:none;
  padding:.72rem 1.15rem;border-radius:var(--radius-sm);border:0;
  background:linear-gradient(135deg,var(--accent-lt) 0%,var(--accent-dk) 100%);
  box-shadow:var(--glow-red-sm);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s var(--ease);
}
.btn .btn__arrow{transition:transform .2s var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--glow-red);filter:brightness(1.06)}
.btn:hover .btn__arrow{transform:translateX(3px)}
.btn:focus-visible{outline:2px solid var(--accent-lt);outline-offset:3px}

/* ---------- featured card ---------- */
.card--featured{
  background:
    linear-gradient(156deg,#dc28280d 0%,#dc282820 100%),
    var(--surface);
  border-color:#dc282840;
  box-shadow:var(--glow-red);
}
@supports ((backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px))){
  .card--featured{
    background:linear-gradient(156deg,#dc28280d 0%,#dc282820 100%),#13161bcc;
  }
}
.card--featured .idx{color:#e65252}
.grid .card--featured:hover{transform:translateY(-5px);box-shadow:0 0 42px -6px #dc282866;border-color:#dc282866}

/* interactive hover for any real card */
.card:not(.card--soon):hover{border-color:#3a3f4a}

/* ---------- placeholder cards ---------- */
/* Muted through color, not opacity — the text keeps its AA contrast. */
.card--soon{background:linear-gradient(180deg,#ffffff05 0%,transparent 40%),var(--muted);border-color:#1b1f26}
.card--soon .card__title{color:var(--fg-muted)}
.btn--ghost{
  margin-top:auto;align-self:flex-start;
  font-family:var(--font);font-weight:600;font-size:.9rem;color:var(--fg-dim);
  padding:.62rem 1rem;border:1px dashed #3a3f4a;border-radius:var(--radius-sm);
  background:transparent;box-shadow:none;cursor:not-allowed;
}
.tags--ghost li{color:var(--fg-dim);border-style:dashed}

/* ---------- footer (in flow — never overlaps content) ---------- */
.foot{
  position:relative;z-index:1;
  display:flex;justify-content:space-between;
  padding:clamp(.9rem,2vw,1.4rem) clamp(1.4rem,5vw,3rem);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  color:var(--fg-muted);
}

/* ---------- motion ---------- */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.intro .eyebrow{animation:rise .7s var(--ease) both}
.intro .title{animation:rise .7s var(--ease) .08s both}
.intro .lede{animation:rise .7s var(--ease) .16s both}
.card{animation:rise .7s var(--ease) both}
.grid .card:nth-child(1){animation-delay:.24s}
.grid .card:nth-child(2){animation-delay:.32s}
.grid .card:nth-child(3){animation-delay:.40s}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- responsive ---------- */
/* Scroll/clipping is handled globally (body flex + auto margins), so the
   breakpoints only reshape the grid. Tablet -> wide featured + 2 below;
   phone -> stack. */
@media (max-width:860px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card--featured{grid-column:1 / -1;min-height:auto}
  .aura{filter:blur(60px)} /* cheaper on mobile GPUs */
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .card--featured{grid-column:auto}
  .foot{justify-content:center;gap:1rem}
}