/* ==========================================================================
   Ultimate Bully — premium motion kit (shared across all 4 landings)
   Powers: scroll-reveal, parallax, magnetic CTAs, animated counters,
   smooth hover (from the design's [style-hover]), hero slider, marquee.
   All motion is transform/opacity based and fully respects reduced-motion.
   ========================================================================== */

:root{
  --ub-ease:        cubic-bezier(.16,1,.3,1);    /* expo-out — the luxe curve   */
  --ub-ease-inout:  cubic-bezier(.76,0,.24,1);   /* smooth in-out for sliders   */
  --ub-rev-dur:     .9s;                          /* reveal duration             */
}

*{box-sizing:border-box}
/* overflow-x:clip contains the ±52px reveal transforms without creating a scroll
   container (so position:sticky headers keep working, unlike overflow:hidden). */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip;max-width:100%}
img{max-width:100%}

/* --- marquee (design uses inline animation:ub-tick) ---------------------- */
@keyframes ub-tick{to{transform:translateX(-50%)}}

/* --- input placeholder colours carried over from the design -------------- */
input.ub-w::placeholder{color:rgba(255,255,255,.45)}
input.ub-d::placeholder{color:rgba(42,32,24,.40)}
input.ub-k::placeholder{color:rgba(10,10,11,.45)}

/* --- scroll-reveal ------------------------------------------------------- */
[data-reveal]{
  opacity:0;transform:translateY(38px);
  transition:opacity var(--ub-rev-dur) var(--ub-ease),
             transform var(--ub-rev-dur) var(--ub-ease);
  transition-delay:var(--ub-d,0ms);
  will-change:opacity,transform;
}
[data-reveal="left"] {transform:translateX(-52px)}
[data-reveal="right"]{transform:translateX(52px)}
[data-reveal="scale"]{transform:scale(.93)}
[data-reveal="fade"] {transform:none}
[data-reveal="blur"] {transform:translateY(24px);filter:blur(14px)}
[data-reveal="clip"] {opacity:1;transform:none;clip-path:inset(0 0 101% 0);
  transition:clip-path 1.15s var(--ub-ease);transition-delay:var(--ub-d,0ms)}
.ub-in[data-reveal]{opacity:1;transform:none;filter:none}
.ub-in[data-reveal="clip"]{clip-path:inset(0 0 0 0)}

/* --- smooth hover: JS applies [style-hover] values on pointer enter ------ */
[style-hover]{
  transition:background .40s var(--ub-ease),background-color .40s var(--ub-ease),
    color .35s var(--ub-ease),border-color .35s var(--ub-ease),
    border-bottom-color .35s var(--ub-ease),box-shadow .5s var(--ub-ease),
    opacity .35s var(--ub-ease),transform .5s var(--ub-ease),filter .5s var(--ub-ease);
}

/* --- image hover zoom: wrap an <img> in [data-zoom] ---------------------- */
[data-zoom]{overflow:hidden}
[data-zoom] img{transition:transform 1.2s var(--ub-ease),filter .8s var(--ub-ease);will-change:transform}
[data-zoom]:hover img{transform:scale(1.065)}

/* --- magnetic hover (JS-driven translate) -------------------------------- */
[data-magnetic]{transition:transform .4s var(--ub-ease)}

/* --- parallax layer (JS sets translate3d) -------------------------------- */
[data-parallax]{will-change:transform}

/* --- scroll progress bar ------------------------------------------------- */
[data-progress]{position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
  transform-origin:left;transition:width .1s linear;pointer-events:none}

/* --- accessible focus ring ---------------------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid currentColor;outline-offset:3px;border-radius:2px}

/* ==========================================================================
   Responsive utilities — tag design containers with these class names so all
   four landings collapse identically. Overrides win over inline styles via
   !important inside the media queries (desktop keeps the design's inline look).
   ========================================================================== */
.ub-pad{padding-left:56px;padding-right:56px}

@media (max-width:1100px){
  .ub-pad{padding-left:40px !important;padding-right:40px !important}
  .ub-display{font-size:clamp(40px,6.6vw,72px) !important;line-height:1.04 !important}
}
@media (max-width:900px){
  .ub-hero-grid{grid-template-columns:minmax(0,1fr) !important;gap:30px !important}
  .ub-hero-grid > *{min-width:0}
  .ub-g4{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important}
  .ub-g3{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important}
  .ub-g2{grid-template-columns:minmax(0,1fr) !important}
  .ub-row-stack{flex-direction:column !important;align-items:flex-start !important;gap:22px !important}
  .ub-nav-mid{display:none !important}
  .ub-display{font-size:clamp(38px,7.4vw,60px) !important;line-height:1.05 !important}
  .ub-h2{font-size:clamp(28px,5vw,40px) !important}
  .ub-tall{height:440px !important}
}
@media (max-width:640px){
  .ub-pad{padding-left:20px !important;padding-right:20px !important}
  .ub-g4,.ub-g3,.ub-g2{grid-template-columns:minmax(0,1fr) !important}
  .ub-hide-xs{display:none !important}
  .ub-stack-xs{flex-direction:column !important;align-items:flex-start !important;gap:16px !important}
  .ub-display{font-size:clamp(32px,9.4vw,50px) !important;line-height:1.07 !important}
  .ub-h2{font-size:clamp(25px,7vw,34px) !important}
  .ub-tall{height:340px !important}
  .ub-hero-tall{height:auto !important;min-height:78vh !important}
}

/* --- mobile carousel: photo grids become swipeable (scroll-snap) --------
   Tag an image grid with .ub-car-m — on phones it turns into a horizontal
   snap-carousel (84% cards, next-card peek as affordance). .ub-car-fixh
   fixes child height for bento grids that relied on grid-auto-rows. ------ */
@media (max-width:640px){
  .ub-car-m{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px !important;scrollbar-width:none;-ms-overflow-style:none;
    padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .ub-car-m::-webkit-scrollbar{display:none}
  .ub-car-m > *{flex:0 0 84% !important;min-width:0;scroll-snap-align:start}
  .ub-car-fixh > *{height:310px !important}
}

/* --- slider dots (used by [data-slider-dots]) --------------------------- */
.ub-dot{width:8px;height:8px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:currentColor;opacity:.35;transition:opacity .3s var(--ub-ease),transform .3s var(--ub-ease)}
.ub-dot.is-active{opacity:1;transform:scale(1.35)}

/* --- reduced motion: strip everything that could disorient --------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none!important}
  [style-hover]{transition:none!important}
  [data-parallax]{transform:none!important}
  [style*="ub-tick"]{animation:none!important;transform:none!important}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}