/* ==========================================================================
   Arcanum — motion layer
   One easing curve, one timing family. Everything here is progressive:
   hidden "before" states only apply when JS has added html.js, and the whole
   layer is switched off under prefers-reduced-motion.
   ========================================================================== */
:root{
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --t-fast:.18s;
  --t-med:.6s;
  --t-slow:1s;
  --intro-offset:0s;
}
html.intro{--intro-offset:1.05s}

/* --------------------------------------------------------------------------
   Intro: arch rises from its base, star settles in, curtain lifts
   -------------------------------------------------------------------------- */
.intro-screen{display:none}
html.intro .intro-screen{
  display:flex;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;
  background:#f3f2ed;pointer-events:none;
  animation:intro-lift .85s var(--ease-in-out) .95s forwards;
}
.intro-mark{position:relative;width:64px;aspect-ratio:240/315}
.intro-mark img{position:absolute;inset:0;width:100%;height:100%}
html.intro .intro-arch{clip-path:inset(100% 0 0 0);animation:intro-draw .75s var(--ease) .1s forwards}
html.intro .intro-star{opacity:0;transform:translateY(14%) scale(.55);transform-origin:50% 75%;animation:intro-star .6s var(--ease) .5s forwards}
@keyframes intro-draw{to{clip-path:inset(0 0 0 0)}}
@keyframes intro-star{to{opacity:1;transform:none}}
@keyframes intro-lift{
  0%{transform:translateY(0)}
  100%{transform:translateY(-100%);visibility:hidden}
}

/* --------------------------------------------------------------------------
   Hero entrance (every load)
   -------------------------------------------------------------------------- */
.line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.line>span{display:block}
html.js .hero h1 .line>span{transform:translateY(108%);animation:rise 1s var(--ease) forwards;animation-delay:calc(var(--intro-offset) + .15s + var(--i,0) * .09s)}
html.js .hero-copy p,html.js .hero-copy>a{opacity:0;transform:translateY(12px);animation:fade-up .9s var(--ease) forwards;animation-delay:calc(var(--intro-offset) + .45s)}
html.js .hero-copy>a{animation-delay:calc(var(--intro-offset) + .6s)}
html.js .hero-photo{clip-path:inset(0 0 100% 0);animation:wipe-down 1.25s var(--ease) forwards;animation-delay:calc(var(--intro-offset) + .05s)}
html.js .hero-photo img{scale:1.22;animation:settle 1.8s var(--ease) forwards;animation-delay:calc(var(--intro-offset) + .05s);will-change:transform}
@keyframes rise{to{transform:none}}
@keyframes fade-up{to{opacity:1;transform:none}}
@keyframes wipe-down{to{clip-path:inset(0 0 0 0)}}
@keyframes settle{to{scale:1.1}}

/* --------------------------------------------------------------------------
   Header: frosted once scrolled, hides on scroll down, returns on scroll up
   -------------------------------------------------------------------------- */
:root{--hh:92px}
@media(max-width:900px){:root{--hh:76px}}
html{scroll-padding-top:var(--hh)}
.header{position:fixed!important;top:0;left:0;right:0;transform:translate3d(0,0,0);will-change:transform;backface-visibility:hidden;
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  transition:transform .55s cubic-bezier(.22,1,.36,1),background-color .35s ease}
.header.is-scrolled{background:rgba(243,242,237,.86)}
.header.is-hidden{transform:translate3d(0,-101%,0)}
body>.header~main{margin-top:var(--hh)}

/* --------------------------------------------------------------------------
   Scroll reveals
   -------------------------------------------------------------------------- */
html.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
html.js [data-reveal].in{opacity:1;transform:none}
html.js [data-reveal="mask"]{display:block;opacity:1;transform:none;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
html.js [data-reveal="mask"]>span{display:block;transform:translateY(105%);transition:transform 1.05s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
html.js [data-reveal="mask"].in>span{transform:none}

/* Hairlines draw left to right */
html.js [data-line]{position:relative;border-top-color:transparent!important}
html.js [data-line]::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:#c8c7c2;transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
html.js [data-line].in::before{transform:scaleX(1)}
html.js .catalog-head[data-line]{border-bottom-color:transparent!important}
html.js .catalog-head[data-line]::before{top:auto;bottom:-1px}
html.js .step[data-line]:last-child,html.js .faq-item[data-line]:last-child{border-bottom-color:transparent!important}
html.js .step[data-line]:last-child::after,html.js .faq-item[data-line]:last-child::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#c8c7c2;transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease) .25s}
html.js .step[data-line]:last-child.in::after,html.js .faq-item[data-line]:last-child.in::after{transform:scaleX(1)}

/* --------------------------------------------------------------------------
   Press feedback
   -------------------------------------------------------------------------- */
.product-summary,.inquiry-link,.contact-actions a,.tg-bar a,.mobile-nav a{transition:transform var(--t-fast) var(--ease),background-color var(--t-fast) ease,opacity var(--t-fast) ease}
.product-summary:active{transform:scale(.985)}
.inquiry-link:active,.contact-actions a:active,.tg-bar a:active{transform:scale(.97)}
.hero-copy>a,.about>a,.header nav a,.contact-top{transition:opacity var(--t-fast) ease}
.hero-copy>a:active,.about>a:active,.contact-top:active{opacity:.55}
.hero-copy>a b{display:inline-block;transition:transform .5s var(--ease)}
.hero-copy>a:hover b{transform:translateX(6px)}

/* --------------------------------------------------------------------------
   Product rows + drawer
   -------------------------------------------------------------------------- */
.product-summary .meta>div span{transition:transform .55s var(--ease),background .2s ease,color .2s ease,border-color .2s ease!important}
.product-summary .meta>div span i{display:block;font-style:normal;line-height:1;transition:transform .55s var(--ease)}
.product.is-selected .product-summary .meta>div span i{transform:rotate(45deg)}

.row-drawer .dossier-image img{transform:scale(1.06);opacity:0;transition:transform 1.1s var(--ease) .1s,opacity .7s ease .1s}
.row-drawer.is-open .dossier-image img{transform:none;opacity:1}
.row-drawer .dossier-info>*{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.row-drawer.is-open .dossier-info>*{opacity:1;transform:none}
.row-drawer.is-open .dossier-info>:nth-child(1){transition-delay:.18s}
.row-drawer.is-open .dossier-info>:nth-child(2){transition-delay:.24s}
.row-drawer.is-open .dossier-info>:nth-child(3){transition-delay:.31s}
.row-drawer.is-open .dossier-info>:nth-child(4){transition-delay:.38s}
.row-drawer.is-open .dossier-info>:nth-child(5){transition-delay:.45s}
.row-drawer.is-open .dossier-info>:nth-child(6){transition-delay:.52s}

/* --------------------------------------------------------------------------
   FAQ: smooth open, + turns to ×
   -------------------------------------------------------------------------- */
.faq-item summary{list-style:none}
.faq-item summary::after{display:inline-block;transition:transform .5s var(--ease)}
.faq-item[open] summary::after,.faq-item.is-closing summary::after{content:"+"}
.faq-item[open]:not(.is-closing) summary::after{transform:rotate(45deg)}
.faq-answer{overflow:hidden}

/* --------------------------------------------------------------------------
   Mobile menu: full-screen, large type, cascading links
   -------------------------------------------------------------------------- */
@media(max-width:900px){
  .mobile-nav{
    top:76px;bottom:0;max-height:none!important;height:auto;justify-content:flex-start;
    background:rgba(243,242,237,.9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    box-shadow:none;border-bottom:0;padding:12px 0 calc(24px + env(safe-area-inset-bottom,0px));
    opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s linear .45s;
  }
  .mobile-nav.is-open{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}
  .mobile-nav a{
    font:600 30px/1.1 "Helvetica Neue",Arial,sans-serif;letter-spacing:-.035em;padding:22px 6vw;
    border-top:1px solid #d8d7d2;opacity:0;transform:translateY(18px);
    transition:opacity .5s var(--ease),transform .7s var(--ease);
  }
  .mobile-nav a:first-child{border-top:1px solid #d8d7d2}
  .mobile-nav.is-open a{opacity:1;transform:none}
  .mobile-nav.is-open a:nth-child(1){transition-delay:.06s}
  .mobile-nav.is-open a:nth-child(2){transition-delay:.12s}
  .mobile-nav.is-open a:nth-child(3){transition-delay:.18s}
  .mobile-nav.is-open a:nth-child(4){transition-delay:.24s}
  .mobile-nav .mobile-nav-contact{
    margin:auto 6vw 0;padding:20px 18px;font:12px monospace;letter-spacing:.08em;
    display:flex;justify-content:space-between;border:0!important
  }
  .mobile-nav-note{
    margin:16px 6vw 0;font:10px/1.6 monospace;color:#777;letter-spacing:.04em;
    opacity:0;transition:opacity .6s ease
  }
  .mobile-nav.is-open .mobile-nav-note{opacity:1;transition-delay:.36s}
  .mobile-nav a:active{opacity:.55}
  .mobile-nav .mobile-nav-contact:active{opacity:1;transform:scale(.98)}
}
.mobile-nav-note{display:none}
@media(max-width:900px){.mobile-nav-note{display:block}}

/* --------------------------------------------------------------------------
   Floating Telegram bar (mobile)
   -------------------------------------------------------------------------- */
.tg-bar{display:none}
@media(max-width:900px){
  .tg-bar{
    display:block;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:8;
    transform:translateY(calc(100% + 24px));transition:transform .7s var(--ease);
  }
  .tg-bar.is-visible{transform:none}
  .tg-bar a{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    min-height:54px;padding:0 18px;background:#111;color:#f3f2ed;
    font:11px monospace;letter-spacing:.06em;box-shadow:0 10px 30px rgba(17,17,17,.18)
  }
  .tg-bar small{font:10px monospace;color:#9a9a96;letter-spacing:.04em}
  .tg-bar b{font-weight:400;font-size:15px}
}

/* --------------------------------------------------------------------------
   Reduced motion: everything static and immediate
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html.intro .intro-screen{display:none}
  html.js .hero h1 .line>span,html.js .hero-copy p,html.js .hero-copy>a,html.js .hero-photo,html.js .hero-photo img{animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important;scale:1!important}
  html.js [data-reveal],html.js [data-reveal="mask"]>span{opacity:1!important;transform:none!important;transition:none!important}
  html.js [data-line]::before,html.js [data-line]::after{transform:none!important;transition:none!important}
  .header,.tg-bar,.mobile-nav,.mobile-nav a,.row-drawer .dossier-image img,.row-drawer .dossier-info>*,.faq-item summary::after{transition:none!important}
  .row-drawer .dossier-image img,.row-drawer .dossier-info>*{opacity:1;transform:none}
  .mobile-nav a{opacity:1;transform:none}
}

/* --------------------------------------------------------------------------
   Research-use gate (first visit). Doubles as the intro when shown.
   -------------------------------------------------------------------------- */
.gate{display:none;position:fixed;inset:0;z-index:110;background:#f3f2ed;align-items:center;justify-content:center;padding:24px;overflow:auto}
html.needs-ack .gate,.gate.is-leaving{display:flex}
html.needs-ack .intro-screen{display:none!important}
html.needs-ack body{overflow:hidden}
html.needs-ack .hero,html.needs-ack .hero *{animation-play-state:paused!important}
html.ack-passed{--intro-offset:.45s}
.gate.is-leaving{animation:intro-lift .85s var(--ease-in-out) forwards;pointer-events:none}
.gate-inner{width:min(420px,100%);display:flex;flex-direction:column;align-items:flex-start}
.gate-mark{width:44px;margin-bottom:34px}
.gate .intro-arch{clip-path:inset(100% 0 0 0);animation:intro-draw .75s var(--ease) .1s forwards}
.gate .intro-star{opacity:0;transform:translateY(14%) scale(.55);transform-origin:50% 75%;animation:intro-star .6s var(--ease) .5s forwards}
.gate-inner>:not(.gate-mark){opacity:0;transform:translateY(12px);animation:fade-up .9s var(--ease) forwards}
.gate-kicker{font:11px monospace;letter-spacing:.08em;color:#5f5f5b;margin:0 0 14px;animation-delay:.55s!important}
.gate h2{font:600 34px/1.05 "Helvetica Neue",Arial,sans-serif;letter-spacing:-.04em;margin:0 0 18px;animation-delay:.62s!important}
.gate p#gate-text{font:12.5px/1.75 monospace;color:#3a3a37;margin:0 0 32px;animation-delay:.7s!important}
.gate-actions{width:100%;display:flex;flex-direction:column;gap:6px;animation-delay:.8s!important}
.gate-enter{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:54px;padding:0 18px;border:0;background:#111;color:#f3f2ed;font:11px monospace;letter-spacing:.08em;cursor:pointer;transition:transform var(--t-fast) var(--ease),background .2s ease}
.gate-enter:hover{background:#292a28}
.gate-enter:active{transform:scale(.98)}
.gate-enter span:last-child{font-size:15px}
.gate-leave{align-self:flex-start;padding:12px 0;font:11px monospace;letter-spacing:.08em;color:#5f5f5b;border-bottom:1px solid transparent}
.gate-leave:hover{color:#111}
@media(prefers-reduced-motion:reduce){
  .gate .intro-arch,.gate .intro-star,.gate-inner>*{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important}
  .gate.is-leaving{display:none}
}
.gate-enter:focus{outline:none}.gate-enter:focus-visible{outline:1px solid #111;outline-offset:3px}