/* v4 напрям A «Скарбниця» · лендинг гостя (design/PAGE-SPEC.md, сторінка /) — @layer page; кольори лише токени.
   Один момент: кадр проявляється з темряви (вуаль 900 мс, раз) + h1 піднімається; далі петля з «Пауза». RM — нерухомий кадр r08. */
@layer page{
  body.vx.ld main{max-width:none;padding:0}
  @media (max-width:760px), (orientation:landscape) and (max-height:480px) and (max-width:1024px){body.vx.ld main{padding:0 0 var(--vx-dock-h)}}

  /* ---- шапка над кадром ---- */
  .ld-top{position:absolute;inset:0 0 auto 0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:20px clamp(16px,4vw,56px)}
  .ld-logo{display:inline-flex;align-items:center;min-height:44px}
  .ld-logo img{display:block;width:150px;height:auto}
  .ld-top nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--vx-ink-1);font:500 16px/1 var(--vx-f-text);
    border-bottom:1px solid transparent;transition:border-color var(--vx-d-2) var(--vx-e-out)}
  @media (hover:hover){.ld-top nav a:hover{border-color:var(--vx-acc)}}

  /* ---- перший екран: кадр на всю ширину, текст притиснутий донизу ліворуч ---- */
  .ld-hero{position:relative;min-height:min(86svh,820px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:var(--vx-bg-0)}
  .ld-media{position:absolute;inset:0;z-index:-2}
  .ld-media img,.ld-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%;display:block}
  .ld-vid{opacity:0;transition:opacity 600ms var(--vx-e-out)}
  .ld-vid.on{opacity:1}
  /* скрим: 14 кроків ліворуч + низ + віньєтка — текст сидить на темряві кадру, не на золоті */
  .ld-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
    linear-gradient(90deg,color-mix(in srgb,var(--vx-bg-0) 95%,transparent) 0%,color-mix(in srgb,var(--vx-bg-0) 88%,transparent) 18%,color-mix(in srgb,var(--vx-bg-0) 74%,transparent) 32%,
      color-mix(in srgb,var(--vx-bg-0) 50%,transparent) 46%,color-mix(in srgb,var(--vx-bg-0) 20%,transparent) 58%,transparent 72%),
    linear-gradient(0deg,var(--vx-bg-0) 0%,color-mix(in srgb,var(--vx-bg-0) 80%,transparent) 12%,color-mix(in srgb,var(--vx-bg-0) 33%,transparent) 26%,transparent 40%),
    radial-gradient(120% 100% at 60% 40%,transparent 45%,color-mix(in srgb,var(--vx-bg-0) 30%,transparent) 80%,color-mix(in srgb,var(--vx-bg-0) 60%,transparent) 100%)}
  /* статичне зерно проти бандингу в чорному (overlay .12) — лише в кадрі */
  .ld-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.12;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  /* момент: сховище проявляється з темряви (раз, 900 мс); без JS теж відпрацьовує і закінчується на 0 */
  .ld-veil{position:absolute;inset:0;z-index:-1;background:var(--vx-bg-0);opacity:0;pointer-events:none;animation:ld-develop var(--vx-d-cine) cubic-bezier(.2,0,0,1) both}
  @keyframes ld-develop{from{opacity:.62}to{opacity:0}}
  .ld-copy{position:relative;width:min(680px,100%);padding:0 clamp(16px,4vw,56px) clamp(40px,7vh,88px)}
  .ld-kick{margin:0 0 14px;color:var(--vx-ink-2);font:500 15px/1.4 var(--vx-f-text);letter-spacing:.02em}
  .ld-kick b{color:var(--vx-gold);font-weight:600}
  .ld-hero h1{margin:0;color:var(--vx-ink-1);font:600 clamp(48px,5.6vw,88px)/1.02 var(--vx-f-serif);letter-spacing:-.01em;text-wrap:balance;
    font-variant-numeric:lining-nums;animation:ld-rise 600ms var(--vx-e-out) 200ms both}
  @keyframes ld-rise{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
  .ld-lede{margin:20px 0 28px;max-width:34em;color:var(--vx-ink-2);font:400 18px/1.6 var(--vx-f-text)}
  .ld-cta.vx-btn{border-radius:var(--vx-r-pill);padding:0 26px;font-weight:600}
  .ld-fine{margin:18px 0 0;max-width:34em;color:var(--vx-ink-3);font:400 15px/1.5 var(--vx-f-text)}
  .ld-pause{position:absolute;right:clamp(16px,4vw,56px);bottom:clamp(40px,7vh,88px);z-index:3;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
    border-radius:var(--vx-r-pill);border:1px solid var(--vx-ln-3);background:color-mix(in srgb,var(--vx-bg-0) 70%,transparent);color:var(--vx-ink-1);
    font:500 14px/1 var(--vx-f-text);cursor:pointer;transition:border-color var(--vx-d-2) var(--vx-e-out)}
  @media (hover:hover){.ld-pause:hover{border-color:var(--vx-acc)}}

  /* ---- «Что внутри»: чотири справжні речі по верхній лінії ---- */
  .ld-how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:40px clamp(16px,4vw,56px) 72px;border-top:1px solid var(--vx-ln-1)}
  .ld-how h2{grid-column:1/-1;margin:0 0 4px;color:var(--vx-ink-1);font:600 clamp(30px,3vw,40px)/1.06 var(--vx-f-serif)}
  .ld-how article{padding:20px 0 0;border-top:1px solid var(--vx-ln-2);min-width:0}
  .ld-how h3{margin:0 0 6px;color:var(--vx-ink-1);font:600 18px/1.3 var(--vx-f-text)}
  .ld-how p{margin:0;color:var(--vx-ink-2);font:400 16px/1.55 var(--vx-f-text)}
  .ld-foot{padding:24px clamp(16px,4vw,56px) 32px;border-top:1px solid var(--vx-ln-1);color:var(--vx-ink-3);font:400 14px/1.5 var(--vx-f-text)}

  /* ---- 390: кадр зверху, текст під ним на темряві ---- */
  @media (max-width:760px){
    .ld-top{padding:12px 16px}
    .ld-logo img{width:118px}
    .ld-hero{min-height:auto;display:block}
    .ld-media{position:relative;inset:auto;height:56svh;min-height:360px}
    .ld-media img,.ld-vid{object-position:64% 50%}
    .ld-hero::before{background:linear-gradient(0deg,var(--vx-bg-0) 0%,var(--vx-bg-0) 46%,color-mix(in srgb,var(--vx-bg-0) 90%,transparent) 56%,color-mix(in srgb,var(--vx-bg-0) 45%,transparent) 66%,transparent 76%),
      linear-gradient(180deg,color-mix(in srgb,var(--vx-bg-0) 70%,transparent) 0%,transparent 18%)}
    .ld-copy{margin-top:-120px;padding:0 16px 40px}
    .ld-hero h1{font-size:clamp(44px,12.4vw,60px)}
    .ld-lede{font-size:17px;margin:16px 0 24px}
    .ld-cta.vx-btn{width:100%}
    .ld-pause{top:68px;bottom:auto;right:16px}
    .ld-how{grid-template-columns:1fr 1fr;padding:32px 16px 48px;gap:16px}
  }
  @media (prefers-reduced-motion:reduce){
    .ld-veil,.ld-hero h1{animation:none}
    .ld-vid{display:none}
  }
}