/* effects.css - shared animation layer (see js/effects.js) */

/* ---------- 1) page transition curtain ---------- */
.fx-curtain{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:linear-gradient(160deg,#0b0d16,#07080d);transform:translateY(0);transition:transform .75s cubic-bezier(.76,0,.24,1)}
.fx-ready .fx-curtain{transform:translateY(-101%)}
.fx-ready.fx-leave .fx-curtain{transform:translateY(0);transition-duration:.42s}
.fx-curtain-mark{display:flex;gap:9px}
.fx-curtain-mark i{width:7px;height:46px;border-radius:4px;background:#FF9900;transform:skewX(-28deg);animation:fxBars .9s ease-in-out infinite alternate}
.fx-curtain-mark i:nth-child(2){background:#cfcdcb;animation-delay:.15s}
.fx-curtain-mark i:nth-child(3){background:#cfcdcb;animation-delay:.3s}
@keyframes fxBars{from{opacity:.25;transform:skewX(-28deg) scaleY(.6)}to{opacity:1;transform:skewX(-28deg) scaleY(1)}}
.fx-ready:not(.fx-leave) .fx-curtain-mark{opacity:0;transition:opacity .3s}

/* ---------- 2) custom cursor ---------- */
.fx-dot,.fx-ring{position:fixed;left:0;top:0;z-index:9998;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s}
.fx-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#FF9900}
.fx-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid rgba(255,153,0,.7);
  transition:opacity .3s,width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),margin .35s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s}
.fx-cursor-on .fx-dot,.fx-cursor-on .fx-ring{opacity:1}
.fx-hot .fx-ring{width:62px;height:62px;margin:-31px 0 0 -31px;background:rgba(255,153,0,.12);border-color:#FF9900}
.fx-view .fx-ring{width:84px;height:84px;margin:-42px 0 0 -42px;background:rgba(255,153,0,.18)}
.fx-text .fx-ring{width:4px;height:28px;margin:-14px 0 0 -2px;border-radius:2px;background:#FF9900;border-color:transparent}
.fx-text .fx-dot{opacity:0}
.fx-down .fx-ring{width:28px;height:28px;margin:-14px 0 0 -14px}

/* ---------- 3) tilt light ---------- */
.fx-tilt{transition:rotate .1s}
.fx-tilt::marker{content:none}

/* ---------- 4) word-by-word headings ---------- */
.fx-words .fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.fx-words .fx-w>span{display:inline-block;transform:translateY(105%) rotate(4deg);opacity:0;
  transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .6s;transition-delay:calc(var(--w,0)*.06s)}
.fx-words.fx-on .fx-w>span{transform:none;opacity:1}

/* ---------- 5) image wipe reveal ---------- */
.fx-wipe{clip-path:inset(0 0 100% 0 round 24px);transition:clip-path 1.2s cubic-bezier(.76,0,.24,1)}
.fx-wipe.fx-in{clip-path:inset(0 0 0 0 round 0)}
.fx-wipe img{scale:1.18;transition:scale 1.6s cubic-bezier(.2,.8,.2,1)}
.fx-wipe.fx-in img{scale:1.08}
.story-ph.fx-wipe.fx-in,.ct-ph.fx-wipe.fx-in,.ct-loc.fx-wipe.fx-in{clip-path:inset(0 0 0 0 round 28px)}
.ceo-av.fx-wipe{clip-path:circle(0% at 50% 50%)}
.ceo-av.fx-wipe.fx-in{clip-path:circle(50% at 50% 50%)}

/* ---------- 7) floating light orbs ---------- */
.fx-orbs{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx-orbs i{position:absolute;border-radius:50%;filter:blur(40px);opacity:.5;animation:fxFloat 18s ease-in-out infinite alternate}
.fx-orbs i:nth-child(1){width:260px;height:260px;left:8%;top:12%;background:radial-gradient(circle,rgba(255,153,0,.35),transparent 70%)}
.fx-orbs i:nth-child(2){width:340px;height:340px;right:6%;top:40%;background:radial-gradient(circle,rgba(255,196,107,.28),transparent 70%);animation-duration:24s;animation-delay:-6s}
.fx-orbs i:nth-child(3){width:220px;height:220px;left:42%;bottom:-6%;background:radial-gradient(circle,rgba(100,130,220,.22),transparent 70%);animation-duration:21s;animation-delay:-12s}
@keyframes fxFloat{0%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-40px) scale(1.15)}100%{transform:translate(-40px,30px) scale(.9)}}
.sx>.sx-in{position:relative;z-index:1}

/* section eyebrow line draws in */
.sx-eb i{transform-origin:left;transition:transform 1s .2s cubic-bezier(.2,.8,.2,1)}
.rx:not(.in) .sx-eb i,.sx-eb.rx:not(.in) i{transform:scaleX(0)}

/* links in text get an animated underline */
.ft-nav a,.ft-legal a{background:linear-gradient(#FF9900,#FF9900) 0 100%/0 1px no-repeat;transition:background-size .4s cubic-bezier(.2,.8,.2,1),color .3s}
.ft-nav a:hover,.ft-legal a:hover{background-size:100% 1px}

@media (prefers-reduced-motion:reduce){
  .fx-curtain,.fx-dot,.fx-ring,.fx-orbs{display:none!important}
  .fx-words .fx-w>span{transform:none!important;opacity:1!important}
  .fx-wipe{clip-path:none!important}
}
@media (hover:none),(pointer:coarse){.fx-dot,.fx-ring{display:none}}