/* ==========================================================================
   hn2 home motion layer (draft) — scroll orchestration for below-the-fold
   Loaded only on the preview page until approved. Philosophy: Emil Kowalski —
   entrances prevent jarring appearance; stagger 70ms; strong ease-out;
   reduced motion = gentler (opacity only), not zero.
   ========================================================================== */

:root{
  --hn2m-ease: cubic-bezier(0.23, 1, 0.32, 1);      /* strong ease-out */
  --hn2m-dur: 0.65s;
}

/* Hidden baseline — applies ONLY once JS has added html.hn2m (no-JS = no hiding) */
html.hn2m .hn2h-sh,
html.hn2m .hn2h-about__media,
html.hn2m .hn2h-about__txt,
html.hn2m .hn2h-cats__grid > *,
html.hn2m .hn2h-stats__grid > *,
html.hn2m .hn2h-rec__grid > *,
html.hn2m .hn2h-faq__side,
html.hn2m .hn2h-faq__list > *{
  opacity:0;
}

@keyframes hn2mRise{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}
@keyframes hn2mClip{
  from{clip-path:inset(0 0 88% 0);}
  to{clip-path:inset(0 0 0 0);}
}
@keyframes hn2mSettle{
  from{transform:scale(1.06)}
  to{transform:none}
}
@keyframes hn2mFade{
  from{opacity:0}
  to{opacity:1}
}

/* Entrance: rise + fade, per-element stagger via --hn2m-d (set by JS) */
html.hn2m .hn2m-in{
  animation:hn2mRise var(--hn2m-dur) var(--hn2m-ease) var(--hn2m-d,0ms) both;
}

/* About image: curtain clip reveal + slow zoom settle on the photo itself */
html.hn2m .hn2h-about__media.hn2m-in{
  animation:hn2mRise var(--hn2m-dur) var(--hn2m-ease) var(--hn2m-d,0ms) both,
            hn2mClip 0.9s var(--hn2m-ease) var(--hn2m-d,0ms) both;
}
html.hn2m .hn2h-about__media.hn2m-in img{
  animation:hn2mSettle 1.3s var(--hn2m-ease) var(--hn2m-d,0ms) both;
}

/* After the entrance finishes, drop the animation so the existing hover
   transforms (card lift, image zoom) work untouched */
html.hn2m .hn2m-done,
html.hn2m .hn2m-done img{
  animation:none!important;
  opacity:1;
  clip-path:none;
}

/* --------------------------------------------------------------------------
   Press feedback — the interface confirms it heard the click (100–160ms)
   -------------------------------------------------------------------------- */
html.hn2m .hn2h .hn2h-btn:active{
  transform:scale(0.97)!important;
  transition-duration:120ms;
}
html.hn2m .hn2h .hn2h-cat:active,
html.hn2m .hn2h .hn2h-rc:active{
  transform:translateY(-2px) scale(0.985);
  transition-duration:120ms;
}

/* --------------------------------------------------------------------------
   Logo marquee: soft edge masks — logos dissolve at the edges instead of
   getting cut by a hard line
   -------------------------------------------------------------------------- */
html.hn2m .hn2h .hn2h-mq{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}

/* --------------------------------------------------------------------------
   FAQ: smooth open — modern browsers animate the content height natively;
   others open instantly (progressive enhancement, no JS)
   -------------------------------------------------------------------------- */
html.hn2m .hn2h .hn2h-q::details-content{
  transition:height 0.32s var(--hn2m-ease), content-visibility 0.32s allow-discrete;
  height:0;
  overflow:clip;
}
html.hn2m .hn2h .hn2h-q[open]::details-content{
  height:auto;
}
@supports (interpolate-size: allow-keywords){
  html.hn2m{interpolate-size:allow-keywords;}
}

/* --------------------------------------------------------------------------
   Category-card arrow: was absolutely positioned over the description text
   (RTL start = right). Move to the free inline-end corner as a compact
   red chip so it never hides words.
   -------------------------------------------------------------------------- */
/* reserve a real strip at the card bottom so text can never reach the chip */
.hn2h .hn2h-cats__grid .hn2h-cat .hn2h-cat__b{
  padding-bottom:56px;
}
.hn2h .hn2h-cats__grid .hn2h-cat .hn2h-cat__go{
  inset-inline-start:auto;
  inset-inline-end:var(--space-4);
  bottom:14px;
  display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;
  background:var(--color-red-500);color:#fff;
  font-size:15px;line-height:1;
  box-shadow:0 2px 8px rgba(215,31,54,.35);
  transform:translateX(-6px);
}

/* --------------------------------------------------------------------------
   Hero seal: rotating circular text around the anchor (approved 22.09.2026)
   -------------------------------------------------------------------------- */
.hn2h .hn2h-seal--spin{display:flex;align-items:center;justify-content:center;}
.hn2h .hn2h-seal--spin .hn2h-seal__ring{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);
  transform-origin:50% 50%;animation:hn2SealSpin 28s linear infinite;}
.hn2h .hn2h-seal--spin .hn2h-seal__ring text{fill:#fff;font-size:12.5px;font-weight:600;letter-spacing:.04em;font-family:inherit;}
.hn2h .hn2h-seal--spin > svg:not(.hn2h-seal__ring){width:30px;height:30px;}
@keyframes hn2SealSpin{to{transform:rotate(-360deg)}}
@media (prefers-reduced-motion: reduce){
  .hn2h .hn2h-seal--spin .hn2h-seal__ring{animation:none;}
}

/* --------------------------------------------------------------------------
   Smooth scrolling (Lenis) — recommended base styles; anchor fallback for
   environments where Lenis is not running (touch, reduced motion)
   -------------------------------------------------------------------------- */
html.lenis, html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
@media (prefers-reduced-motion: no-preference){
  html.hn2m:not(.lenis){scroll-behavior:smooth;}
}

/* --------------------------------------------------------------------------
   Reduced motion: keep the fade (comprehension), drop all movement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html.hn2m .hn2m-in,
  html.hn2m .hn2h-about__media.hn2m-in{
    animation:hn2mFade 0.3s ease var(--hn2m-d,0ms) both;
  }
  html.hn2m .hn2h-about__media.hn2m-in img{animation:none;}
  html.hn2m .hn2h .hn2h-q::details-content{transition:none;}
  html.hn2m .hn2h .hn2h-btn:active,
  html.hn2m .hn2h .hn2h-cat:active,
  html.hn2m .hn2h .hn2h-rc:active{transform:none!important;}
}