/* ============================================================
   cuecom — animations.css
   Decision table: reveals YES · hero entrance YES · accordion YES
   toast YES · marquee YES · counter YES · draw-path YES
   float YES (Bold) · line reveal YES (Bold) · tilt YES (Bold)
   parallax NO (not Editorial/Luxury)
   ============================================================ */

/* ---- TIER 1: Scroll reveals ---- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity var(--t-slow),transform var(--t-slow)}
.reveal-fade{opacity:0;transition:opacity var(--t-slow)}
.reveal-left{opacity:0;transform:translateX(-24px);transition:opacity var(--t-slow),transform var(--t-slow)}
.reveal-right{opacity:0;transform:translateX(24px);transition:opacity var(--t-slow),transform var(--t-slow)}
.reveal.visible,.reveal-fade.visible,.reveal-left.visible,.reveal-right.visible{opacity:1;transform:none}
.reveal-stagger>*{opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.reveal-stagger.visible>*:nth-child(1){opacity:1;transform:none;transition-delay:0ms}
.reveal-stagger.visible>*:nth-child(2){opacity:1;transform:none;transition-delay:80ms}
.reveal-stagger.visible>*:nth-child(3){opacity:1;transform:none;transition-delay:160ms}
.reveal-stagger.visible>*:nth-child(4){opacity:1;transform:none;transition-delay:240ms}
.reveal-stagger.visible>*:nth-child(5){opacity:1;transform:none;transition-delay:320ms}
.reveal-stagger.visible>*:nth-child(6){opacity:1;transform:none;transition-delay:400ms}

/* ---- Bounce-in rows (services list): slide in from the left,
        overshoot to the right, settle — strictly in order ---- */
@keyframes rowBounceIn{
  0%{opacity:0;transform:translateX(-140px)}
  50%{opacity:1;transform:translateX(44px)}
  70%{transform:translateX(-18px)}
  85%{transform:translateX(9px)}
  100%{opacity:1;transform:translateX(0)}
}
/* Rows are only hidden when JS is confirmed running (html.js is set
   by scroll-animations.js) — content can never get stuck invisible. */
html.js .bounce-rows:not(.visible)>*{opacity:0}
.bounce-rows.visible>*{animation:rowBounceIn 1.3s var(--ease-out) both}
.bounce-rows.visible>*:nth-child(1){animation-delay:0ms}
.bounce-rows.visible>*:nth-child(2){animation-delay:280ms}
.bounce-rows.visible>*:nth-child(3){animation-delay:560ms}
.bounce-rows.visible>*:nth-child(4){animation-delay:840ms}
.bounce-rows.visible>*:nth-child(5){animation-delay:1120ms}
.bounce-rows.visible>*:nth-child(6){animation-delay:1400ms}

/* ---- TIER 1: Hero entrance ---- */
@keyframes heroIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero-animate{opacity:0;animation:heroIn .8s var(--ease-out) forwards}
.hero-animate:nth-child(1){animation-delay:.10s}
.hero-animate:nth-child(2){animation-delay:.22s}
.hero-animate:nth-child(3){animation-delay:.34s}
.hero-animate:nth-child(4){animation-delay:.46s}

/* ---- TIER 1: Smooth accordion ---- */
.accordion-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-base)}
.accordion-body.open{grid-template-rows:1fr}
.accordion-body>*{overflow:hidden}

/* ---- TIER 2: Marquee (client strip) ---- */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track{display:flex;width:max-content;animation:marquee 28s linear infinite}
.marquee-wrap{overflow:hidden;mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent)}
.marquee-wrap:hover .marquee-track{animation-play-state:paused}

/* ---- TIER 2: SVG path draw (process/icons) ---- */
.draw-path{
  stroke-dasharray:var(--path-length,300);
  stroke-dashoffset:var(--path-length,300);
  transition:stroke-dashoffset 1.2s var(--ease-out);
}
.draw-path.visible{stroke-dashoffset:0}

/* ---- TIER 3: Float (Bold) — max 2 elements per page ---- */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.float{animation:float 3.5s ease-in-out infinite}
.float-slow{animation:float 5s ease-in-out infinite}
.float-delay{animation-delay:1.2s}

/* ---- TIER 3: Text line reveal (Bold) ---- */
.reveal-line{overflow:hidden;display:block}
.reveal-line-inner{display:block;transform:translateY(110%);transition:transform var(--t-slow) var(--ease-out)}
.reveal-line.visible .reveal-line-inner{transform:translateY(0)}

/* ---- Scroll-expand hero (21st.dev port, driven by scroll-expand.js) ---- */
.xhero{position:relative;background:var(--c-dark)}
.xhero__stage{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;
}
.xhero__bg{position:absolute;inset:0;z-index:0}
.xhero__bg img{width:100%;height:100%;object-fit:cover}
.xhero__bg::after{content:'';position:absolute;inset:0;background:rgba(12,10,9,.45)}
.xhero__media{
  position:absolute;z-index:2;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:var(--xw,300px);height:var(--xh,240px);
  max-width:95vw;max-height:85svh;
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 0 50px rgba(0,0,0,.55);
}
.xhero__media video,.xhero__media img{width:100%;height:100%;object-fit:cover}
.xhero__media::after{
  content:'';position:absolute;inset:0;
  background:rgba(12,10,9,var(--xdim,.42));pointer-events:none;
}
.xhero__title{
  position:relative;z-index:3;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:0;
  mix-blend-mode:difference;pointer-events:none;
  padding-inline:var(--gutter);
}
.xhero__title h1{color:#EDEAE4;font-size:var(--fs-hero)}
/* title halves slide fully off-screen and fade — nothing lingers
   over the fully expanded video */
.xhero__title .t1{display:block;transform:translateX(calc(var(--xp,0)*-95vw));opacity:calc(1 - var(--xp,0)*1.25)}
.xhero__title .t2{display:block;transform:translateX(calc(var(--xp,0)*95vw));opacity:calc(1 - var(--xp,0)*1.25)}
.xhero__meta{
  position:absolute;z-index:3;left:50%;transform:translateX(-50%);
  bottom:clamp(1.5rem,6svh,4rem);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  color:var(--c-text-2);pointer-events:none;
  opacity:calc(1 - var(--xp,0)*1.6);
}
.xhero__meta .kicker{
  font-family:var(--font-display);font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);letter-spacing:var(--ls-wider);
  text-transform:uppercase;color:var(--c-brand);
}
.xhero__meta .hint{font-size:var(--fs-sm)}
.xhero__meta .hint-arrow{
  width:20px;height:20px;color:var(--c-brand);
  animation:float 2.2s ease-in-out infinite;
}
.xhero__content{
  position:relative;z-index:4;
  opacity:var(--xc,0);transform:translateY(calc((1 - var(--xc,0))*24px));
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
.xhero.expanded .xhero__content{pointer-events:auto;visibility:visible}
.xhero:not(.expanded) .xhero__content{pointer-events:none;visibility:hidden}

/* ---- Hover-expand gallery (21st.dev "cool fotos" port) ---- */
.xgallery{display:flex;gap:var(--sp-2);height:420px;width:100%}
.xgallery__item{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;
  border-radius:var(--r-md);cursor:pointer;
  transition:flex-grow .55s var(--ease-out);
}
.xgallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease-out)}
.xgallery__item::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(12,10,9,.72) 0%,transparent 46%);
}
.xgallery__item figcaption{
  position:absolute;left:var(--sp-4);right:var(--sp-4);bottom:var(--sp-4);z-index:2;
  font-family:var(--font-display);font-weight:var(--fw-semibold);
  font-size:var(--fs-sm);color:#F6F2EA;
  opacity:0;transform:translateY(8px);
  transition:opacity .4s var(--ease-out) .12s,transform .4s var(--ease-out) .12s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.xgallery__item figcaption span{
  display:block;font-family:var(--font-body);font-weight:var(--fw-regular);
  font-size:var(--fs-xs);color:#CFC8BA;
}
.xgallery__item:hover,.xgallery__item:focus-visible,.xgallery__item.active{flex-grow:3.6}
.xgallery__item:hover img{transform:scale(1.04)}
.xgallery__item:hover figcaption,
.xgallery__item:focus-visible figcaption,
.xgallery__item.active figcaption{opacity:1;transform:none}
@media(max-width:767px){
  .xgallery{flex-direction:column;height:auto}
  .xgallery__item{height:64px;flex:none;transition:height .5s var(--ease-out)}
  .xgallery__item:hover,.xgallery__item.active{height:300px;flex:none}
  .xgallery__item figcaption{white-space:normal}
}

/* ---- Photo fan (21st.dev "member fotos" port): a stack of photos
        springs outward when scrolled into view; hover lifts a photo ---- */
.photo-fan{
  position:relative;height:412px;
  display:flex;align-items:center;justify-content:center;
  --fan-scale:1;
}
.photo-fan .fan-item{
  position:absolute;width:252px;height:252px;
  border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--shadow-md);
  transform:translate(0,0) rotate(0deg);
  transition:transform 1.1s var(--ease-spring),box-shadow .3s var(--ease-out);
  will-change:transform;cursor:pointer;
}
.photo-fan .fan-item img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.photo-fan.visible .fan-item{
  transform:translate(calc(var(--fx,0px)*var(--fan-scale)),var(--fy,0px)) rotate(var(--fr,0deg));
}
.photo-fan.visible .fan-item:nth-child(1){transition-delay:.05s}
.photo-fan.visible .fan-item:nth-child(2){transition-delay:.2s}
.photo-fan.visible .fan-item:nth-child(3){transition-delay:.35s}
.photo-fan.visible .fan-item:nth-child(4){transition-delay:.5s}
.photo-fan.visible .fan-item:nth-child(5){transition-delay:.65s}
.photo-fan.visible .fan-item:hover,
.photo-fan.visible .fan-item:focus-visible{
  transform:translate(calc(var(--fx,0px)*var(--fan-scale)),var(--fy,0px)) rotate(0deg) scale(1.09);
  z-index:60!important;box-shadow:var(--shadow-lg);
  transition-delay:0s;transition-duration:.35s;
}
@media(max-width:767px){
  .photo-fan{height:250px;--fan-scale:.44}
  .photo-fan .fan-item{width:150px;height:150px}
}

/* ---- Arc gallery / carousel / orbital keyframes (hero-animations.js) ---- */
@keyframes arcIn{
  from{opacity:0;transform:translate(-50%,58%)}
  to{opacity:1;transform:translate(-50%,50%)}
}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
/* Orbit-mode focus card: same reveal but KEEPS the translate(-50%,-50%)
   centering (a plain fadeInUp would clobber the transform and shove the
   card off to one side). */
@keyframes orbitalFocusIn{
  from{opacity:0;transform:translate(-50%,calc(-50% + 12px))}
  to{opacity:1;transform:translate(-50%,-50%)}
}
@keyframes orbitalPulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes orbitalPing{75%,100%{transform:scale(2);opacity:0}}
.animate-fade-in-up{opacity:0;animation:fadeInUp .8s var(--ease-out) forwards}
/* gallery-cta cells: blur + fade + rise (staggered by delay in components.css) */
@keyframes galleryCellIn{
  from{opacity:0;filter:blur(10px);transform:translateY(14px)}
  to{opacity:1;filter:blur(0);transform:none}
}

/* ---- REDUCED MOTION — always last ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal,.reveal-fade,.reveal-left,.reveal-right,.reveal-stagger>*,
  .reveal-line-inner,.draw-path{opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
  .hero-animate{opacity:1!important}
  .bounce-rows>*{opacity:1!important;animation:none!important;transform:none!important}
  .photo-fan .fan-item{transition-duration:.01ms!important;transform:translate(calc(var(--fx,0px)*var(--fan-scale)),var(--fy,0px)) rotate(var(--fr,0deg))!important}
  .marquee-track{animation:none}
  .float,.float-slow,.hint-arrow{animation:none}
  .xhero__title .t1,.xhero__title .t2{transform:none;opacity:1}
  /* new hero components: show fully, no motion */
  .arc-item{opacity:1!important;animation:none!important}
  .animate-fade-in-up{opacity:1!important;animation:none!important}
  .gallery-cta__cell{opacity:1!important;filter:none!important;transform:none!important;animation:none!important}
  .orbital__hub,.orbital__hub::before,.orbital__hub::after,
  .orbital-node.is-related .orbital-node__dot{animation:none!important}
}