/* Agenz interactions layer · cursor, motion, conversion. Palette untouched. */

/* ---- scroll progress ---- */
#sprog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--coral,#FF4D33);z-index:2000;pointer-events:none;transition:width .08s linear}

/* ---- custom cursor (fine pointers only) ---- */
@media (hover:hover) and (pointer:fine){
  body.cx-on, body.cx-on a, body.cx-on button, body.cx-on .pill, body.cx-on .tab, body.cx-on .fq{cursor:none}
  body.cx-on .hero, body.cx-on .hero:active, body.cx-on .hero .wrap{cursor:none}
  #cxd{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;background:var(--coral,#FF4D33);z-index:2002;pointer-events:none;transform:translate(-50%,-50%);transition:width .25s,height .25s,opacity .3s}
  #cxr{position:fixed;top:0;left:0;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--coral,#FF4D33);opacity:.55;z-index:2001;pointer-events:none;transform:translate(-50%,-50%);transition:width .3s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1),opacity .3s,border-color .3s}
  body.cx-hover #cxr{width:58px;height:58px;opacity:.9}
  body.cx-hover #cxd{width:5px;height:5px}
  body.cx-down #cxr{width:26px;height:26px}
  #cxr .cxt{position:absolute;inset:0;display:grid;place-items:center;font:600 9px/1 ui-monospace,'SF Mono',monospace;letter-spacing:.1em;color:var(--coral,#FF4D33);opacity:0;transition:opacity .25s;text-transform:uppercase;white-space:nowrap}
  body.cx-view #cxr{width:64px;height:64px;opacity:1;background:rgba(255,77,51,.08);backdrop-filter:blur(2px)}
  body.cx-view #cxr .cxt{opacity:1}
  body.cx-view #cxd{opacity:0}
}

/* ---- word-by-word headline reveal ---- */
.wsplit .wo{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.wsplit .w{display:inline-block;transform:translateY(112%);opacity:0;transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .5s ease;transition-delay:var(--wd,0s)}
.wsplit.win .w{transform:none;opacity:1}

/* ---- CTA shine sweep + soft pulse ---- */
.pill.fill{position:relative;overflow:hidden}
.pill.fill .sh{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);transform:skewX(-18deg);animation:shsweep 5.2s ease-in-out infinite;pointer-events:none}
@keyframes shsweep{0%,72%{left:-80%}88%,100%{left:140%}}
nav .pill.fill{animation:ctapulse 5.2s ease-in-out infinite}
@keyframes ctapulse{0%,86%,100%{box-shadow:0 0 0 0 rgba(255,77,51,0)}90%{box-shadow:0 0 0 7px rgba(255,77,51,.22)}96%{box-shadow:0 0 0 12px rgba(255,77,51,0)}}

/* ---- tilt cards ---- */
.tilt{transform-style:preserve-3d;will-change:transform}
.tilt.tilting{transition:none!important}

/* ---- marquee pause on hover ---- */
.statrow:hover,.lmq:hover{animation-play-state:paused}

/* ---- mid-page conversion band ---- */
.convband{background:var(--coral,#FF4D33);color:#fff;border-radius:24px;margin:0 40px;position:relative;overflow:hidden}
.convband .cbw{max-width:1340px;margin:0 auto;padding:54px 56px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;position:relative;z-index:1}
.convband h3{font-family:var(--disp,'Bricolage Grotesque',sans-serif);font-weight:700;font-size:clamp(26px,3.4vw,44px);letter-spacing:-.03em;line-height:1.08}
.convband h3 i{font-family:var(--serif,'Instrument Serif',Georgia,serif);font-weight:400}
.convband p{font-size:15px;opacity:.92;margin-top:10px;max-width:480px}
.convband .pill{background:#fff;color:#1d1d1f;border-color:#fff;font-weight:600;font-size:15.5px;padding:15px 28px;white-space:nowrap}
.convband .pill:hover{background:#1d1d1f;color:#fff;border-color:#1d1d1f}
.convband::after{content:'';position:absolute;right:-120px;top:-120px;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.12);animation:cbfloat 9s ease-in-out infinite alternate}
@keyframes cbfloat{to{transform:translate(-30px,40px) scale(1.15)}}
@media(max-width:760px){.convband{margin:0 18px}.convband .cbw{padding:34px 26px}}

/* ---- exit-intent booking prompt ---- */
#xint{position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;padding:24px}
#xint.show{display:flex}
#xint .xbg{position:absolute;inset:0;background:rgba(10,10,11,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .4s}
#xint.in .xbg{opacity:1}
#xint .xcard{position:relative;background:var(--panel,#fff);color:var(--text,#1d1d1f);border-radius:26px;max-width:520px;width:100%;padding:46px 44px 40px;box-shadow:0 40px 100px -20px rgba(0,0,0,.45);transform:translateY(28px) scale(.97);opacity:0;transition:all .5s cubic-bezier(.16,1,.3,1)}
#xint.in .xcard{transform:none;opacity:1}
#xint .xtag{display:inline-flex;align-items:center;gap:9px;font:600 11px/1 ui-monospace,'SF Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--coral,#FF4D33);margin-bottom:18px}
#xint .xtag .d{width:8px;height:8px;border-radius:50%;background:var(--coral,#FF4D33);animation:xblink 1.6s infinite}
@keyframes xblink{50%{opacity:.3}}
#xint h3{font-family:var(--disp,'Bricolage Grotesque',sans-serif);font-weight:700;font-size:clamp(26px,3vw,36px);letter-spacing:-.03em;line-height:1.1}
#xint h3 i{font-family:var(--serif,'Instrument Serif',Georgia,serif);font-weight:400;color:var(--coral,#FF4D33)}
#xint p{color:var(--muted,#6e6e73);font-size:15.5px;margin:16px 0 26px;line-height:1.6}
#xint .xacts{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
#xint .xgo{display:inline-flex;align-items:center;gap:10px;background:var(--coral,#FF4D33);color:#fff;border-radius:100px;padding:15px 28px;font-weight:600;font-size:15.5px;transition:all .3s;position:relative;overflow:hidden}
#xint .xgo:hover{background:var(--ink,#1d1d1f)}
#xint .xno{background:none;border:0;color:var(--muted,#6e6e73);font-size:14px;cursor:pointer;font-family:inherit;padding:10px}
#xint .xno:hover{color:var(--text,#1d1d1f)}
#xint .xx{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line,rgba(0,0,0,.1));display:grid;place-items:center;background:none;font-size:17px;cursor:pointer;color:var(--muted,#6e6e73);transition:all .3s}
#xint .xx:hover{background:var(--ink,#1d1d1f);color:#fff;border-color:var(--ink,#1d1d1f)}
#xint .xproof{display:flex;gap:18px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line,rgba(0,0,0,.1))}
#xint .xproof div b{font-family:var(--disp,'Bricolage Grotesque',sans-serif);font-weight:700;font-size:19px;display:block;letter-spacing:-.02em}
#xint .xproof div span{font-size:11px;color:var(--muted,#6e6e73);text-transform:uppercase;letter-spacing:.06em}

/* ---- reduced motion: kill everything ---- */
@media (prefers-reduced-motion:reduce){
  #cxd,#cxr,#sprog{display:none!important}
  body.cx-on,body.cx-on a,body.cx-on button{cursor:auto!important}
  .wsplit .w{transform:none!important;opacity:1!important;transition:none!important}
  .pill.fill .sh{animation:none!important}
  nav .pill.fill{animation:none!important}
  .convband::after{animation:none!important}
  .tilt{transform:none!important}
}


/* ---- view transitions (progressive: Chrome/Edge/Safari 18+) ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtout .32s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vtin .55s cubic-bezier(.16,1,.3,1) both}
@keyframes vtout{to{opacity:0;transform:translateY(-14px) scale(.995)}}
@keyframes vtin{from{opacity:0;transform:translateY(16px)}}

/* ---- hero letter cascade ---- */
h1.lsplit .l>span{animation:none!important;transform:none!important}
.axchw{display:inline-block;white-space:nowrap}
.axch{display:inline-block;transform:translateY(.62em);opacity:0;animation:chrise .72s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--cd,0s)}
@keyframes chrise{to{transform:none;opacity:1}}

/* ---- scroll parallax media ---- */
.plx{will-change:transform;transform:scale(1.12)}

/* ---- tactile press ---- */
.pill:active,.fq:active,.srow:active,.xgo:active{transform:scale(.965)!important;transition:transform .08s!important}

/* ---- grid child stagger ---- */
.stagger>*{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);transition-delay:var(--rd,0s)}
.stagger.sin>*{opacity:1;transform:none}

/* ---- booking widget attention ring ---- */
.calflash{animation:calring 1.1s ease-out 2}
@keyframes calring{0%{box-shadow:0 0 0 0 rgba(255,77,51,.5)}100%{box-shadow:0 0 0 26px rgba(255,77,51,0)}}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  .axch{animation:none!important;transform:none!important;opacity:1!important}
  .plx{transform:none!important}
  .stagger>*{opacity:1!important;transform:none!important;transition:none!important}
  .calflash{animation:none!important}
}


/* ---- layer 3 ---- */
/* cursor spotlight on cards */
.axspot{position:relative}
.axspot .axglow{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,77,51,.085),transparent 65%)}
.axspot:hover .axglow{opacity:1}
/* eyebrow decode */
.eyebrow{font-variant-ligatures:none}
/* marquee scroll-skew */
.statband{will-change:transform}
/* click ripple */
.axrip{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);transform:translate(-50%,-50%) scale(0);animation:axrip .6s ease-out forwards;pointer-events:none}
@keyframes axrip{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .axspot .axglow{display:none}
  .axrip{display:none}
  .statband{transform:none!important}
}