/* =========================================================
   C A T A L I N A A — v5.0 Motion Layer
   Animations, transitions and auto-scroll behaviour.
   Loads AFTER styles.css. Everything is scoped to html.motion,
   which motion.js adds, so removing the two v5.0 tags returns
   the site to v4.9 exactly.
   ========================================================= */

:root{
  --ease-out:cubic-bezier(.16,.84,.32,1);
  --ease-soft:cubic-bezier(.22,.68,.24,1);
}

/* ---------- 1. Focus + baseline ---------- */
/* If motion.js never runs, html.motion is absent — make sure no reveal state
   can strand content at opacity 0. */
html:not(.motion) .reveal{opacity:1;transform:none}

html.motion a:focus-visible,
html.motion button:focus-visible,
html.motion input:focus-visible,
html.motion textarea:focus-visible,
html.motion select:focus-visible{
  outline:2px solid var(--caramel);
  outline-offset:3px;
}

/* ---------- 2. Line-mask reveal for display type ---------- */
html.motion .reveal.m-split{opacity:1;transform:none;transition:none}
html.motion .m-line{
  display:block;
  overflow:hidden;
  padding:0 .06em .16em;
  margin:0 -.06em -.16em;
}
html.motion .m-line-i{
  display:block;
  transform:translate3d(0,112%,0);
  transition:transform 1.05s var(--ease-out);
  transition-delay:calc(var(--li,0) * .085s);
}
html.motion .m-split.m-in .m-line-i{transform:none}

/* ---------- 3. Child stagger inside revealed groups ---------- */
html.motion .m-stagger>*{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .7s var(--ease-out),transform .78s var(--ease-out);
  transition-delay:calc(var(--i,0) * .055s);
}
html.motion .m-stagger.m-in>*{opacity:1;transform:none}

/* ---------- 4. Image wipe-in (clips the tile, not the img) ---------- */
html.motion .m-clip{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.2s var(--ease-soft);
  transition-delay:calc(var(--i,0) * .09s);
}
html.motion .m-clip.m-in{clip-path:inset(0 0 0 0)}

/* ---------- 5. Hero ---------- */
html.motion .hero-media img{will-change:transform}
html.motion .hero-tag{
  opacity:0;
  transform:translateY(-50%) translateX(10px);
  transition:opacity 1s var(--ease-out) .5s,transform 1s var(--ease-out) .5s;
}
html.motion .hero.m-in .hero-tag{opacity:1;transform:translateY(-50%)}

/* scroll cue — sits in the hero's empty bottom padding strip */
.m-cue{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  z-index:4;
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 4px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.72);
  font:800 .6rem/1 Arial,Helvetica,sans-serif;
  letter-spacing:.24em;
  text-transform:uppercase;
  cursor:pointer;
  opacity:0;
  animation:mCueIn .9s var(--ease-out) 1.1s forwards;
  transition:color .3s,opacity .4s;
}
.m-cue-rail{
  position:relative;
  display:block;
  width:78px;
  height:1px;
  background:rgba(255,255,255,.28);
  overflow:hidden;
}
.m-cue-rail:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:26px;
  height:1px;
  background:var(--caramel);
  animation:mCueRun 2.4s var(--ease-soft) infinite;
}
.m-cue:hover{color:#fff}
.m-cue.m-gone{opacity:0;pointer-events:none;animation:none}
@keyframes mCueIn{to{opacity:1}}
@keyframes mCueRun{
  0%{transform:translateX(-30px)}
  100%{transform:translateX(80px)}
}

/* ---------- 6. Read progress + header auto-hide ---------- */
.m-progress{
  position:fixed;
  top:0;left:0;right:0;
  height:2px;
  z-index:1002;
  pointer-events:none;
  background:rgba(255,255,255,.08);
}
.m-progress span{
  display:block;
  height:100%;
  width:100%;
  background:linear-gradient(90deg,var(--cocoa),var(--caramel));
  transform:scaleX(0);
  transform-origin:0 50%;
}
html.motion .site-header{will-change:transform}
html.motion .site-header.m-hidden{transform:translateY(-102%)}
body.menu-open .m-progress{opacity:0}

/* ---------- 7. Mobile menu ---------- */
html.motion .mobile-menu{transform:scale(1.03);transition:opacity .45s var(--ease-out),visibility .45s,transform .6s var(--ease-out)}
html.motion .mobile-menu.open{transform:none}
html.motion .mobile-menu nav a{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .5s var(--ease-out),transform .62s var(--ease-out);
  transition-delay:calc(var(--i,0) * .06s + .1s);
}
html.motion .mobile-menu.open nav a{opacity:1;transform:none}
html.motion .mobile-menu nav a:hover{color:var(--bronze)}
body.menu-open .menu-btn{border-color:rgba(255,255,255,.55)}
body.menu-open .menu-btn span{background:transparent}
body.menu-open .menu-btn span:before{transform:translateY(5px) rotate(45deg)}
body.menu-open .menu-btn span:after{transform:translateY(-5px) rotate(-45deg)}

/* ---------- 8. Back to top ---------- */
.m-top{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:900;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.24);
  border-radius:50%;
  background:rgba(9,8,7,.72);
  backdrop-filter:blur(12px);
  color:#fff;
  font-size:1rem;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px) scale(.9);
  transition:opacity .4s var(--ease-out),transform .5s var(--ease-out),visibility .4s,background .3s,border-color .3s;
}
.m-top.m-on{opacity:1;visibility:visible;transform:none}
.m-top:hover{background:var(--caramel);border-color:var(--caramel)}
body.menu-open .m-top{opacity:0;visibility:hidden}

/* ---------- 9. Button + link micro-interactions ---------- */
html.motion .btn{position:relative;overflow:hidden;isolation:isolate}
html.motion .btn>span{display:inline-block;transition:transform .35s var(--ease-out)}
html.motion .btn:hover>span{transform:translate(3px,-3px)}
html.motion .btn:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(105deg,transparent 34%,rgba(183,128,85,.42) 50%,transparent 66%);
  transform:translateX(-125%);
  transition:transform .85s var(--ease-soft);
  pointer-events:none;
}
html.motion .btn:hover:after{transform:translateX(125%)}
html.motion .book-link{position:relative;overflow:hidden}
html.motion .footer-col a{transition:transform .3s var(--ease-out),color .3s}
html.motion .footer-col a:hover{transform:translateX(5px);color:#fff}
html.motion .footer-brand{transition:letter-spacing .8s var(--ease-soft)}
html.motion footer:hover .footer-brand{letter-spacing:.23em}
html.motion .texture-pills span{transition:background .3s,border-color .3s,transform .3s var(--ease-out)}
html.motion .texture-pills span:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45);transform:translateY(-2px)}
html.motion .care-slide-copy{transition:transform .55s var(--ease-out)}
html.motion .care-slide:hover .care-slide-copy{transform:translateY(-5px)}

/* ---------- 10. Form ---------- */
html.motion .field{position:relative}
html.motion .field:after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:100%;height:1px;
  background:var(--caramel);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--ease-out);
}
html.motion .field:focus-within:after{transform:scaleX(1)}
html.motion .success.show{animation:mFadeUp .6s var(--ease-out) both}
@keyframes mFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- 11. Auto-scroll bands (CSS-driven) ----------
   Both bands are pure CSS keyframe animations travelling -50% of a track made
   of an EVEN number of identical halves, so the loop is seamless with nothing
   measured. Deliberately NOT scoped to html.motion: the scroll keeps running
   even if motion.js never loads or throws. JS only tunes the duration so the
   speed stays constant across widths, and clones units on ultrawide screens.
   This is the same engine used on the ThrashMetalIQ and jadabutler.com bands. */

.marquee .marquee-track{
  animation:catalinaa-marquee var(--mq,34s) linear infinite;
  will-change:transform;
  backface-visibility:hidden;
}
@keyframes catalinaa-marquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

.care-carousel .care-carousel-viewport{
  overflow:hidden !important;
  cursor:default;
}
.care-carousel .care-carousel-track{
  display:flex;
  width:max-content;
  /* No !important on transform here: an important author declaration outranks a
     CSS animation, which would freeze the very keyframes driving the strip. */
  animation:catalinaa-care var(--care,84s) linear infinite;
  will-change:transform;
  backface-visibility:hidden;
}
@keyframes catalinaa-care{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
/* Hover pauses the strip so the captions stay readable. */
.care-carousel .care-carousel-viewport:hover .care-carousel-track{animation-play-state:paused}

/* ---------- 11b. Pointer transitions (spotlight + card tilt) ---------- */
.m-spot{
  position:fixed;
  top:0;left:0;
  width:520px;height:520px;
  margin:-260px 0 0 -260px;
  z-index:1;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,rgba(199,155,110,.16),rgba(199,155,110,0) 68%);
  opacity:0;
  transition:opacity .5s var(--ease-out);
  will-change:transform;
}
html.motion .m-spot.m-on{opacity:1}
html.motion .focus-grid{perspective:1400px}
html.motion .focus-card{transform-style:preserve-3d}
html.motion .focus-card.m-tilt:hover{
  transform:translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .18s linear,box-shadow .45s var(--ease);
}

/* ---------- 12. Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html.motion .m-line-i{transform:none!important;transition:none!important}
  html.motion .m-clip{clip-path:none!important;transition:none!important}
  html.motion .m-stagger>*{opacity:1!important;transform:none!important;transition:none!important}
  html.motion .hero-tag{opacity:1!important;transform:translateY(-50%)!important}
  html.motion .site-header.m-hidden{transform:none}
  html.motion .btn:after{display:none}
  html.motion .mobile-menu{transform:none}
  html.motion .mobile-menu nav a{opacity:1;transform:none;transition:none}
  .m-cue,.m-progress{display:none}
  .m-cue-rail:after{animation:none}
  html.motion .success.show{animation:none}
  .m-spot{display:none}
  html.motion .focus-card.m-tilt:hover{transform:translateY(-6px)}
  /* Don't stop the two bands outright — a dead band reads as broken. Slow them
     to a gentle drift so they still say "continuous" without pulsing motion. */
  .marquee .marquee-track{animation-duration:calc(var(--mq,34s) * 3.2)}
  .care-carousel .care-carousel-track{animation-duration:calc(var(--care,84s) * 3.2)}
}