/* =========================================================
   Icon Global — motion & 3D layer (fx.css)
   Logo-driven: intro, page curtain, 3D mark, tilt, reveals
   ========================================================= */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.7,0,.2,1)}

/* ---------- vector brand in the header ---------- */
.brand.vb{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none}
.brand.vb .bm{display:block;height:36px;width:auto;flex:none;}
.brand.vb .bw{display:block;height:15px;width:auto;margin-top:2px}
.brand.vb:hover .bm{animation:bmnudge .7s var(--ease-out)}
@keyframes bmnudge{0%{scale:1}40%{scale:1.12}100%{scale:1}}
@media (max-width:600px){.brand.vb .bm{height:28px}.brand.vb .bw{height:12px}}

/* ---------- intro (first visit per session) ---------- */
#intro{position:fixed;inset:0;z-index:10000;display:none;place-items:center;background:#292d53;color:#fff}
html.intro #intro{display:grid}
#intro .in-wrap{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
#intro .in-mark{height:clamp(90px,14vw,150px);width:auto;overflow:visible}
#intro .in-mark path{fill:#fff;fill-opacity:0;stroke:#9fd6de;stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
html.intro.go #intro .in-mark path{animation:draw 1.1s var(--ease-io) forwards,fillin .45s ease .95s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillin{to{fill-opacity:1;stroke-opacity:0}}
#intro .in-word{height:clamp(36px,5.4vw,58px);width:auto;color:#fff;opacity:0;transform:translateX(-18px)}
html.intro.go #intro .in-word{animation:wordin .7s var(--ease-out) 1.05s forwards}
@keyframes wordin{to{opacity:1;transform:none}}
#intro .in-line{position:absolute;bottom:12vh;left:0;right:0;text-align:center;font-size:15px;font-weight:600;letter-spacing:.02em;color:#adc5ce;opacity:0}
html.intro.go #intro .in-line{animation:wordin .7s var(--ease-out) 1.35s forwards}
html.intro.out #intro{transform:translateY(-100%);transition:transform .9s var(--ease-io)}
html.intro.out #intro .in-wrap{transform:translateY(-40px) scale(.96);opacity:0;transition:all .6s var(--ease-io)}

/* ---------- page change: flat logo on a flat disc ---------- */
#curtain{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:transparent;pointer-events:none;visibility:hidden;opacity:0}
html.leaving #curtain{visibility:visible;opacity:1;transition:opacity .2s ease}
html.arriving #curtain{visibility:visible;opacity:1;transition:none}
html.arrived #curtain{visibility:visible;opacity:0;transition:opacity .35s ease .4s}
#curtain .cdisc{position:relative;width:112px;height:112px;border-radius:50%;background:#292d53;display:grid;place-items:center;transform:scale(.85);opacity:0}
html.leaving #curtain .cdisc{animation:discin .4s cubic-bezier(.16,1,.3,1) forwards}
html.arriving #curtain .cdisc,html.arrived #curtain .cdisc{transform:none;opacity:1}
@keyframes discin{to{transform:none;opacity:1}}
#curtain .cring{position:absolute;inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px);transform:rotate(-90deg);overflow:visible}
#curtain .cring circle{fill:none;stroke:#68aeb8;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:ringdraw 1.4s cubic-bezier(.65,0,.35,1) infinite}
@keyframes ringdraw{0%{stroke-dashoffset:100}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
#curtain .cm{perspective:600px}
#curtain .cmk{display:block;width:38px;height:auto;color:#fff;animation:flip 1.4s cubic-bezier(.65,0,.35,1) infinite}
@keyframes flip{0%,15%{transform:rotateY(0)}70%,100%{transform:rotateY(360deg)}}
@media (prefers-reduced-motion:reduce){#curtain{display:none}}

/* ---------- 3D mark containers ---------- */
[data-mark3d]{position:relative}
[data-mark3d] canvas{display:block;width:100%!important;height:100%!important}
[data-mark3d] .m3-fallback{width:100%;height:100%;color:#9fd6de;opacity:.9}
.phero .art3d{position:absolute;right:clamp(8px,6vw,120px);top:50%;transform:translateY(-50%);width:clamp(240px,30vw,420px);aspect-ratio:1;z-index:0}
@media (max-width:900px){.phero .art3d{position:relative;right:auto;top:auto;transform:none;width:220px;margin:-10px auto 0;order:-1}}
.phero.plain .wrap{z-index:1}

/* watermark of the mark in every page hero */
.phero .wm{position:absolute;left:-4%;bottom:-18%;height:120%;width:auto;color:#fff;opacity:.05;z-index:0;pointer-events:none;transform:translate3d(0,var(--py,0px),0) rotate(calc(-8deg + var(--pr,0deg)))}

/* ---------- footer brand close ---------- */
.fbrand{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,56px);padding:clamp(28px,4vw,48px) 0 clamp(24px,3vw,40px);margin-bottom:clamp(20px,3vw,36px);border-bottom:1px solid rgba(173,197,206,.18)}
.fbrand .fb-mark{aspect-ratio:1;width:100%}
.fbrand .fb-text{display:grid;gap:14px;min-width:0}
.fbrand .fb-word{width:100%;height:auto;color:#fff;max-width:760px}
.fbrand .fb-line{margin:0;font-size:clamp(17px,1.6vw,22px);font-weight:700;color:#adc5ce;letter-spacing:-.01em}
@media (max-width:700px){.fbrand{grid-template-columns:120px minmax(0,1fr);gap:18px}}

/* ---------- 3D tilt for cards ---------- */
.tilt{transform-style:preserve-3d;will-change:transform;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.tilt.tilting{transition:transform .08s linear}
.tilt .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.35),rgba(255,255,255,0) 45%);z-index:3}
.tilt.tilting .glare{opacity:1}
.svc-card,.ct3,.tile,.feat{position:relative}

/* ---------- scroll reveals ---------- */
html.fx .rv{opacity:0;transform:translate3d(0,26px,0);transition:opacity .8s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--i,0) * 80ms)}
html.fx .rv.in{opacity:1;transform:none}
html.fx .rv3{opacity:0;transform:perspective(1000px) rotateX(14deg) translate3d(0,40px,0);transform-origin:50% 100%;transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)}
html.fx .rv3.in{opacity:1;transform:none}

/* hero entrance on inner pages */
html.fx .phero .copy>*{opacity:0;transform:translate3d(0,22px,0);animation:heroin .9s var(--ease-out) forwards}
html.fx .phero .copy>*:nth-child(2){animation-delay:.08s}html.fx .phero .copy>*:nth-child(3){animation-delay:.16s}
html.fx .phero .copy>*:nth-child(4){animation-delay:.24s}html.fx .phero .copy>*:nth-child(5){animation-delay:.32s}html.fx .phero .copy>*:nth-child(6){animation-delay:.4s}
html.fx.arriving .phero .copy>*,html.fx.intro .phero .copy>*{animation-play-state:paused}
@keyframes heroin{to{opacity:1;transform:none}}
.phero .bgimg img{transform:translate3d(0,var(--hy,0px),0) scale(1.06);transition:transform .1s linear}

/* button press feedback */
.btn{transition:transform .2s var(--ease-out),background-color .15s,border-color .15s,color .15s}
.btn:active{transform:scale(.97)}

/* scroll progress line in the header */
.mainbar::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:#68aeb8;transform-origin:0 50%;transform:scaleX(var(--sp,0))}

@media (prefers-reduced-motion:reduce){
  html.fx .rv,html.fx .rv3,html.fx .phero .copy>*{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .brand.vb .bm{transform:none}
  .phero .bgimg img,.phero .wm{transform:none!important}
}