/* fx.css – Ekoserv motion layer.
   Everything here is decoration. The site works and reads the same without it.
   Motion is switched off for visitors who ask for reduced motion. */

:root{
  --fx-ease-out: cubic-bezier(.19,1,.22,1);
  --fx-ease-inout: cubic-bezier(.77,0,.175,1);
}

/* ---------- Page curtain (between pages) ---------- */
html::after{
  content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;
  background:var(--inv-bg,#0F3D31) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='11' fill='none' stroke='%23EDF4EF' stroke-opacity='.18' stroke-width='3'/%3E%3Cpath d='M15 4A11 11 0 1 1 5.5 20.5' fill='none' stroke='%23EDF4EF' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='5.5' cy='20.5' r='2.6' fill='%23F2B33D'/%3E%3C/svg%3E") center/64px no-repeat;
  transform:translate3d(0,100%,0);
}
html.fx-enter::after{transform:none;animation:fx-safe .01s 2.6s forwards}
html.fx-leave::after{transform:translate3d(0,-100%,0);transition:transform .75s var(--fx-ease-inout)}
html.fx-exit::after{transform:none;pointer-events:auto;transition:transform .5s var(--fx-ease-inout)}
@keyframes fx-safe{to{transform:translate3d(0,-100%,0)}}

/* ---------- Scroll progress ---------- */
.fx-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none}
.fx-progress i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
[dir="rtl"] .fx-progress i{transform-origin:100% 50%}

/* ---------- Film grain ---------- */
.fx-grain{position:fixed;inset:-50%;z-index:39;pointer-events:none;opacity:.05;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .fx-grain{opacity:.08;filter:invert(1)}}
:root[data-theme="dark"] .fx-grain{opacity:.08;filter:invert(1)}

/* ---------- Custom cursor (mouse only) ---------- */
.fx-cursor{position:fixed;left:0;top:0;z-index:2147482000;pointer-events:none}
.fx-cursor-dot,.fx-cursor-ring{position:fixed;left:0;top:0;border-radius:50%;will-change:transform}
.fx-cursor-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:#fff;mix-blend-mode:difference}
.fx-cursor-ring{width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center}
.fx-cursor-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid #fff;mix-blend-mode:difference;transition:transform .35s var(--fx-ease-out),background-color .25s ease,border-color .25s ease}
.fx-cursor-label{position:relative;font:700 13px/1 var(--font);letter-spacing:.02em;color:var(--on-accent);opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .35s var(--fx-ease-out);white-space:nowrap}
.fx-cursor.is-link .fx-cursor-ring::before{transform:scale(1.55)}
.fx-cursor.is-link .fx-cursor-dot{opacity:0}
.fx-cursor.is-cta .fx-cursor-ring::before{transform:scale(2.1);background:var(--accent);border-color:var(--accent);mix-blend-mode:normal}
.fx-cursor.is-cta .fx-cursor-label{opacity:1;transform:none}
.fx-cursor.is-cta .fx-cursor-dot{opacity:0}
.fx-cursor.is-down .fx-cursor-ring::before{transform:scale(.8)}
.fx-cursor.is-hidden{opacity:0}
html.fx-cursor-on,html.fx-cursor-on body,html.fx-cursor-on a,html.fx-cursor-on button,html.fx-cursor-on label,html.fx-cursor-on summary{cursor:none}
html.fx-cursor-on input,html.fx-cursor-on select,html.fx-cursor-on textarea{cursor:text}
html.fx-cursor-on dialog[open],html.fx-cursor-on dialog[open] *{cursor:auto}
html.fx-cursor-on dialog[open] button,html.fx-cursor-on dialog[open] label,html.fx-cursor-on dialog[open] a{cursor:pointer}
html:has(dialog[open]) .fx-cursor{opacity:0}

/* ---------- Split text ---------- */
.fx-split{font-kerning:normal}
.fx-line-mask,.fx-hw-mask{padding:.14em .08em .22em;margin:-.14em -.08em -.22em}
.fx-word{will-change:transform}
.fx-scrub .fx-w{opacity:.14;transition:none}

/* ---------- Marquee band ---------- */
.fx-marquee{position:relative;z-index:1;overflow:hidden;padding:clamp(18px,2.4vw,34px) 0;background:var(--bg);border-block:1px solid var(--line);user-select:none}
.section-alt + .fx-marquee,.fx-marquee.alt{background:var(--bg-alt)}
.fx-marquee-track{display:flex;width:max-content;will-change:transform}
.fx-marquee-group{display:flex;align-items:center;flex:none}
.fx-marquee-group span{font-size:clamp(52px,8.6vw,148px);font-weight:700;letter-spacing:-.045em;line-height:1;padding:0 .18em;color:transparent;-webkit-text-stroke:1.5px var(--heading)}
.fx-marquee-group span:nth-child(4n+1){color:var(--heading);-webkit-text-stroke:0}
.fx-marquee-group b{flex:none;width:clamp(26px,3.4vw,56px);height:clamp(26px,3.4vw,56px);margin:0 .5em;border-radius:50%;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.6 8.4L23 6.6 16.5 12 23 17.4l-8.4-1.8L12 24l-2.6-8.4L1 17.4 7.5 12 1 6.6l8.4 1.8z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.6 8.4L23 6.6 16.5 12 23 17.4l-8.4-1.8L12 24l-2.6-8.4L1 17.4 7.5 12 1 6.6l8.4 1.8z'/%3E%3C/svg%3E") center/contain no-repeat}
.fx-marquee.inv{background:var(--inv-bg);border-color:var(--inv-line)}
.fx-marquee.inv span{-webkit-text-stroke-color:var(--inv-text)}
.fx-marquee.inv span:nth-child(4n+1){color:var(--inv-text)}

/* ---------- Footer wordmark ---------- */
.fx-wordmark{overflow:hidden;line-height:1;padding:.04em 0 .16em;margin-top:clamp(28px,4vw,56px);text-align:center;user-select:none;pointer-events:none}
.fx-wordmark span{display:inline-block;font-size:calc((100vw - 64px) / 6.9);font-weight:700;letter-spacing:-.03em;color:var(--heading);white-space:nowrap}
.fx-wordmark .fx-ch{display:inline-block;font-style:normal;will-change:transform}

/* ---------- Links and buttons ---------- */
@media (hover:hover) and (pointer:fine){
  .text-link{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .45s var(--fx-ease-out),text-decoration-color .2s ease}
  .text-link:hover{background-size:100% 1.5px;text-decoration-color:transparent}
  .btn{transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease}
  .btn:active{transform:scale(.97)}
}

/* ---------- Horizontal industry film (start page) ---------- */
.hx{position:relative;z-index:1;background:var(--inv-bg);color:var(--inv-text);overflow:hidden}
.hx-pin{padding:clamp(72px,9vw,120px) 0 clamp(56px,7vw,96px)}
.hx-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px}
.hx-kicker{font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.hx h2{color:var(--inv-text);margin-top:12px;max-width:14ch;font-size:clamp(36px,5.4vw,76px);letter-spacing:-.045em}
.hx-hint{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--inv-muted)}
.hx-hint i{display:block;width:46px;height:1.5px;background:var(--inv-muted);position:relative;overflow:hidden}
.hx-track{display:flex;gap:clamp(16px,2vw,28px);margin-top:clamp(32px,4vw,56px);padding-inline:max(24px,calc((100vw - 1200px)/2 + 24px));will-change:transform}
@media (min-width:640px) and (pointer:fine){.hx-track::after{content:"";flex:none;width:12vw}}
.hx-card{position:relative;flex:none;width:min(78vw,520px);aspect-ratio:4/5;border-radius:28px;overflow:hidden;text-decoration:none;color:#fff;background:#0a2a21;isolation:isolate}
.hx-card img{position:absolute;inset:0;width:118%;max-width:none;height:100%;object-fit:cover;left:-9%;z-index:-2}
.hx-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,33,26,0) 35%,rgba(7,33,26,.88) 100%)}
.hx-no{position:absolute;top:22px;left:24px;font-size:15px;font-weight:700;letter-spacing:.06em;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hx-card strong{position:absolute;left:24px;right:24px;bottom:64px;font-size:clamp(28px,2.6vw,40px);line-height:1.02;letter-spacing:-.035em}
.hx-card em{position:absolute;left:24px;right:24px;bottom:24px;font-style:normal;font-size:16px;color:rgba(255,255,255,.82);line-height:1.35}
.hx-card.hx-cta{display:flex;flex-direction:column;justify-content:space-between;padding:28px;background:var(--accent);color:var(--on-accent)}
.hx-card.hx-cta::after{display:none}
.hx-card.hx-cta strong{position:static;font-size:clamp(34px,3.4vw,52px)}
.hx-card.hx-cta em{position:static;color:var(--on-accent);font-weight:600;font-size:18px}
.hx-arrow{width:72px;height:72px;border-radius:50%;background:var(--on-accent);color:var(--accent);display:grid;place-items:center;transition:transform .5s var(--fx-ease-out)}
@media (hover:hover) and (pointer:fine){.hx-card.hx-cta:hover .hx-arrow{transform:rotate(-45deg) scale(1.08)}}
@media (min-width:640px) and (pointer:fine){
  .hx-pin{height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--hdr,77px) + 2vh) 0 5vh}
  .hx-track{margin-top:clamp(24px,4vh,48px)}
  .hx-card{height:min(58vh,620px);width:auto}
}
@media (max-width:639px), (pointer:coarse){
  .hx-track{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px}
  .hx-track::-webkit-scrollbar{display:none}
  .hx-card{scroll-snap-align:center;width:min(80vw,420px)}
  .hx-hint{display:none}
}

/* ---------- Reduced motion: nothing moves ---------- */
@media (prefers-reduced-motion:reduce){
  html::after{display:none}
  .fx-marquee-track{transform:none!important}
  .fx-cursor,.fx-grain,.fx-progress{display:none}
  .text-link,.btn{transition:none}
}

/* ---------- Lenis smooth scroll (from lenis.css) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}