/* Landing hero — approved fixed-composition art board (art series v4).
   Loaded by landing.html after public.css.

   One 1672x941 coordinate system holds the four cards, the connector, the
   identity and the slogan. It is capped at 1672 CSS px and centred, so the
   composition is identical to the approved canvas at that width and scales
   down uniformly below it. Around and behind it a decoration layer carries the
   approved atmosphere pair to both viewport edges; above 1672 px the picture is
   cropped with cover instead of being stretched.

   The conversion group (lead, CTA, note) is the only hero CTA node: absolutely
   placed in the board's free centre from 1270 px up, and in normal document flow
   under the board on narrower screens, where a 58 canvas px CTA would fall below
   the 44 px target. Nothing is reparented, hidden or duplicated, so keyboard
   focus survives a resize across the 1270 px boundary.

   Everything is namespaced under .hero-stage and the board keeps its own palette,
   so site-wide tokens and utility classes cannot restyle the approved scene. */

/* 1. Stage, atmosphere and palette ------------------------------- */
/* The public landing owns its full-width rhythm: the app shell's main padding
   and 1560 px cap would inset the full-bleed hero. Everything below the hero
   stays centred because its content sits in .public-shell. */
.public-page main{max-width:none;margin:0;padding:0}

.hero-stage{
  position:relative;isolation:isolate;overflow:hidden;
  container-type:inline-size;
  background:var(--canvas);
  --hero-body:#3f4547;
  --hero-art-ink:#1f1e24;
  --hero-art-muted:#6f7378;
  --hero-card-bg:#ffffff;
  --hero-card-ink:#16191b;
  --hero-card-muted:#8d9296;
  --hero-card-bar:#e7e4dd;
  --hero-card-media:#ece9e2;
}

html[data-theme="dark"] .hero-stage{
  --hero-body:#d6d3da;
  --hero-art-ink:#f5f5f0;
  --hero-art-muted:#b9b5c0;
  --hero-card-bg:#26252c;
  --hero-card-ink:#f2f0f5;
  --hero-card-muted:#a9a5b2;
  --hero-card-bar:#3a3844;
  --hero-card-media:#201f26;
}

.hero-stage-atmosphere{position:absolute;inset:0;z-index:0;pointer-events:none}

/* Board height or the whole stage, whichever is smaller: the picture keeps the
   board's own scale at narrow widths and fills the stage, cropping with cover,
   once the viewport is wider than the board. */
.hero-stage-image{
  position:absolute;left:0;right:0;top:0;
  height:min(100%,calc(100cqi * 941 / 1672));
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}

html[data-theme="light"] .hero-stage-image{
  background-image:url("../img/landing/hero/atmosphere-background-light.png?v=hero-1")}
html[data-theme="dark"] .hero-stage-image{
  background-image:url("../img/landing/hero/atmosphere-background-dark.png?v=hero-1")}

/* Dissolves the scene's last band into the page canvas so the next section
   starts on flat colour. It sits under the board, so cards, connector and copy
   are never washed out. */
.hero-stage-fade{
  position:absolute;left:0;right:0;bottom:0;
  height:clamp(48px,9vw,150px);
  background:linear-gradient(180deg,rgba(245,245,240,0),var(--canvas))}
html[data-theme="dark"] .hero-stage-fade{
  background:linear-gradient(180deg,rgba(31,30,36,0),var(--canvas))}

/* 2. The board --------------------------------------------------- */
.hero-shell{
  position:relative;z-index:2;
  width:100%;max-width:1672px;margin:0 auto;
  container-type:inline-size;
}

.hero-board{position:relative;--u:calc(100cqi / 1672)}
.hero-frame{position:relative}
/* Reserves the board's exact 1672x941 height, so the conversion group below it
   can stay in normal flow on narrow screens without being reparented. */
.hero-frame::before{content:"";display:block;aspect-ratio:1672 / 941}

.hero-art{position:absolute;left:0;right:0;top:0;aspect-ratio:1672 / 941}
.hero-curve{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* The four cards are one illustration for assistive tech. The conversion group
   stays outside this wrapper, so its CTA is ordinary focusable HTML. */
.hero-scene{position:absolute;inset:0;pointer-events:none}
.hero-stage .hero-card{pointer-events:auto}

/* 3. Centre identity and slogan ---------------------------------- */
.hero-center{
  position:absolute;left:calc(852 * var(--u));top:calc(364 * var(--u));
  transform:translateX(-50%);
  display:grid;justify-items:center;text-align:center;
}

.hero-stage .hero-brand{display:flex;align-items:center;justify-content:center}
.hero-stage .hero-brand .brand-lockup{gap:calc(24 * var(--u));align-items:center}
.hero-stage .hero-brand .brand-mark{width:calc(116 * var(--u));height:calc(116 * var(--u))}
.hero-stage .hero-brand .brand-words{display:grid;justify-items:start;gap:0;text-align:left;min-width:0}
.hero-stage .hero-brand .brand-name{
  font-family:Georgia,"Times New Roman",serif;font-weight:700;
  font-size:calc(80 * var(--u));line-height:1;letter-spacing:0;
  color:var(--hero-art-ink);
}
.hero-stage .hero-brand .brand-descriptor{
  margin-top:calc(10 * var(--u));
  font-size:calc(25 * var(--u));line-height:1.2;letter-spacing:0;
  color:var(--hero-art-muted);
}

.hero-stage .hero-slogan{
  margin:calc(30 * var(--u)) 0 0;
  font-family:Inter,"Segoe UI",Arial,sans-serif;font-weight:700;
  font-size:calc(34 * var(--u));line-height:1.2;letter-spacing:0;
  white-space:nowrap;
  color:var(--hero-art-ink);
}

/* 4. One conversion node ---------------------------------------- */
/* 364u centre top + 120u brand + 30u slogan gap + 40.8u slogan line + 14u lead
   gap = exactly where the approved composition puts the lead. The CTA and the
   note keep their approved 18u and 16u gaps. */
.hero-conversion{
  /* 852u is the approved centre of the board (1672/2 would be 836u). */
  position:absolute;left:calc(852 * var(--u));top:calc(568.8 * var(--u));transform:translateX(-50%);
  z-index:3;
  display:grid;justify-items:center;
  width:max-content;max-width:92%;
  text-align:center;
}

.hero-stage .hero-lead{
  margin:0;
  font-size:calc(21 * var(--u));line-height:1.35;white-space:nowrap;
  color:var(--hero-art-muted);
}

.hero-stage .hero-cta{
  display:inline-flex;align-items:center;gap:calc(12 * var(--u));
  margin-top:calc(18 * var(--u));
  /* 44 px is a real floor, not only the 1270 px switch: that switch measures the
     viewport, and a classic scrollbar or browser zoom can leave the board itself
     narrower, which would otherwise shrink the CTA below 44 px. */
  min-height:max(44px,calc(58 * var(--u)));
  padding:0 calc(30 * var(--u));
  border-radius:calc(12 * var(--u));
  background:var(--brand);color:#fff;
  font-size:calc(18 * var(--u));font-weight:700;line-height:1.2;
  box-shadow:0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(31,30,36,.18);
}

.hero-stage .hero-cta:hover{background:var(--accent-strong);color:#fff}

.hero-stage .hero-note{
  margin:calc(16 * var(--u)) 0 0;
  font-size:calc(14 * var(--u));line-height:1.35;
  color:var(--hero-art-muted);
}

/* 5. Cards ------------------------------------------------------- */
.hero-stage .hero-card{position:absolute}

.hero-card-idle{width:100%;height:100%;animation:hero-card-idle 10s ease-in-out infinite}
.hero-card-lift{width:100%;height:100%;transition:transform .26s cubic-bezier(.22,.61,.36,1)}

.hero-card-face{
  position:relative;display:flex;flex-direction:column;
  gap:calc(13 * var(--u));
  width:100%;height:100%;
  padding:calc(26 * var(--u));
  border-radius:calc(28 * var(--u));
  background:var(--hero-card-bg);
  box-shadow:0 calc(16 * var(--u)) calc(34 * var(--u)) rgba(31,30,36,.13);
  overflow:hidden;
  color:var(--hero-card-ink);
}
html[data-theme="dark"] .hero-stage .hero-card-face{
  box-shadow:0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.5);
}

.hero-card-top{display:flex;align-items:center;gap:calc(12 * var(--u))}

.hero-card-icon{
  display:block;flex:0 0 auto;
  width:calc(34 * var(--u));height:calc(34 * var(--u));
  color:var(--hero-card-ink);
}
.hero-card-icon svg{display:block;width:100%;height:100%}
.hero-icon-draft{color:#2b2f33}
html[data-theme="dark"] .hero-stage .hero-icon-draft{color:#e9e6f0}

.hero-card-name{font-size:calc(27 * var(--u));font-weight:650;line-height:1.2;color:var(--hero-card-ink)}
.hero-card-more{
  margin-left:auto;
  font-size:calc(24 * var(--u));line-height:1;letter-spacing:.12em;
  color:var(--hero-card-muted);
}
.hero-card-title{font-size:calc(26 * var(--u));font-weight:650;line-height:1.25;color:var(--hero-card-ink)}
.hero-card-caption{font-size:calc(18 * var(--u));line-height:1.35;color:var(--hero-card-muted)}

.hero-card-bar{display:block;height:calc(14 * var(--u));border-radius:calc(7 * var(--u));background:var(--hero-card-bar)}
.hero-bar-72{width:72%}
.hero-bar-64{width:64%}
.hero-bar-58{width:58%}
.hero-bar-46{width:46%}

.hero-card-media{
  flex:1 1 auto;min-height:0;margin:0;
  border-radius:calc(16 * var(--u));
  background:var(--hero-card-media);
  overflow:hidden;
}
.hero-card-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

.hero-card-row{display:flex;align-items:center;gap:calc(12 * var(--u))}

.hero-card-corner{
  position:absolute;
  right:calc(26 * var(--u));bottom:calc(26 * var(--u));
  width:calc(30 * var(--u));height:calc(30 * var(--u));
  color:var(--hero-card-muted);
}
.hero-card-corner svg{display:block;width:100%;height:100%}

.hero-card-glyph{
  display:block;flex:0 0 auto;
  width:calc(28 * var(--u));height:calc(28 * var(--u));
  color:var(--hero-card-muted);
}
.hero-card-glyph svg{display:block;width:100%;height:100%}
.hero-stage .hero-card-glyph.is-accent{color:var(--brand)}
.hero-card-glyph-end{margin-left:auto}
.hero-card-row-actions{gap:calc(18 * var(--u))}

/* Fixed placement on the 1672x941 canvas, unchanged from the approved board. */
.hero-card-draft{
  left:calc(70 * var(--u));top:calc(470 * var(--u));
  width:calc(400 * var(--u));height:calc(385 * var(--u));
  transform:rotate(-5deg);
}
.hero-card-telegram{
  left:calc(1108 * var(--u));top:calc(70 * var(--u));
  width:calc(460 * var(--u));height:calc(300 * var(--u));
  transform:rotate(5deg);
}
.hero-card-vk{
  left:calc(90 * var(--u));top:calc(48 * var(--u));
  width:calc(440 * var(--u));height:calc(370 * var(--u));
  transform:rotate(-6deg);
}
.hero-card-instagram{
  left:calc(1240 * var(--u));top:calc(420 * var(--u));
  width:calc(360 * var(--u));height:calc(470 * var(--u));
  transform:rotate(7deg);
}

/* 6. Motion ------------------------------------------------------ */
@keyframes hero-card-idle{
  0%,100%{transform:rotate(-2.2deg)}
  50%{transform:rotate(2.2deg)}
}

.hero-card-vk .hero-card-idle{animation-duration:9.4s;animation-delay:-1.2s}
.hero-card-telegram .hero-card-idle{animation-duration:8.8s;animation-delay:-4.5s}
.hero-card-draft .hero-card-idle{animation-duration:9.8s;animation-delay:-7.4s}
.hero-card-instagram .hero-card-idle{animation-duration:10s;animation-delay:-3.1s}

@media (hover:hover) and (pointer:fine){
  .hero-stage .hero-card:hover .hero-card-lift{transform:translateY(calc(-11 * var(--u)))}
}

/* Paused by the control, by the hidden document, or while the board is offscreen. */
.hero-stage.is-motion-off .hero-card-idle,
.hero-stage.is-motion-paused .hero-card-idle{animation-play-state:paused}
.hero-stage.is-motion-off .hero-card-lift{transition:none}
.hero-stage.is-motion-off .hero-card:hover .hero-card-lift{transform:none}

@media (prefers-reduced-motion:reduce){
  .hero-stage .hero-card-idle{animation:none}
  .hero-stage .hero-card-lift{transition:none}
  .hero-stage .hero-card:hover .hero-card-lift{transform:none}
  .hero-stage *{transition:none !important}
}

/* 7. Motion control ---------------------------------------------- */
/* A quiet secondary control, deliberately not a CTA. */
.hero-controls{
  position:relative;z-index:3;
  display:flex;justify-content:center;
  padding:10px 18px 18px;
}

.hero-stage .hero-motion{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:44px;min-height:44px;
  padding:0 15px;
  border:1px solid var(--line);border-radius:10px;
  background:transparent;color:var(--muted);
  font-size:13px;font-weight:600;
}
.hero-stage .hero-motion:hover{border-color:var(--brand);color:var(--ink)}

.hero-motion-icon{display:block;width:17px;height:17px}
.hero-motion-icon svg{display:block;width:100%;height:100%}
.hero-motion-play{display:none}
.hero-stage .hero-motion[aria-pressed="false"] .hero-motion-pause{display:none}
.hero-stage .hero-motion[aria-pressed="false"] .hero-motion-play{display:block}

/* 8. The same CTA in normal flow -------------------------------- */
/* 58 canvas px only reaches the 44 px target once the board is at least 1270 px
   wide; below that the single node drops under the board at a readable size and
   the board keeps the identity and the one-line slogan. */
@media (max-width:1269.98px){
  .hero-stage .hero-conversion{
    position:static;transform:none;width:auto;max-width:none;
    margin:0 auto;padding:28px 18px 6px;gap:18px;
  }
  .hero-stage .hero-lead{
    margin:0;max-width:34em;
    font-size:clamp(15px,2.4vw,19px);line-height:1.45;white-space:normal;
    color:var(--hero-body);
  }
  .hero-stage .hero-cta{
    gap:12px;margin:0;
    min-height:58px;padding:14px 26px;border-radius:12px;
    font-size:17px;box-shadow:var(--shadow);
  }
  .hero-stage .hero-note{margin:0;font-size:13px;color:var(--muted)}
}

@media (max-width:640px){
  .hero-stage .hero-conversion{padding:22px 18px 4px;gap:16px}
  .hero-stage .hero-cta{width:100%;justify-content:center;padding:14px 18px}
  /* Icon-only control: the label stays in the accessible name. */
  .hero-stage .hero-motion-text{
    position:absolute;width:1px;height:1px;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
}