/* ==========================================================================
   Motion layer for the Need For Strength site.
   Only opacity and transform are animated, so scrolling stays smooth on phones.
   Everything here is switched off for visitors who ask for reduced motion.
   ========================================================================== */

/* Blocks waiting to slide in from the side must never widen the page. */
main {
  overflow-x: hidden;
}

@supports (overflow-x: clip) {
  main {
    overflow-x: clip;
  }
}

/* ---- Scroll progress bar ------------------------------------------------ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--lime), #ffb38a);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ---- Hero entrance ------------------------------------------------------ */
@keyframes motion-rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

@keyframes motion-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes motion-zoom {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}

@keyframes motion-drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.06) translate3d(-1.5%, -1%, 0); }
}

.hero-media img {
  animation: motion-zoom 1.8s cubic-bezier(.2, .7, .2, 1) both, motion-drift 22s ease-in-out 1.8s infinite alternate;
  will-change: transform;
}

.hero-content > * {
  animation: motion-rise .8s cubic-bezier(.2, .7, .2, 1) both;
}

.hero-content > :nth-child(1) { animation-delay: .15s; }
.hero-content > :nth-child(2) { animation-delay: .3s; }
.hero-content > :nth-child(3) { animation-delay: .5s; }
.hero-content > :nth-child(4) { animation-delay: .65s; }
.hero-content > :nth-child(5) { animation-delay: .8s; }
.hero-content > :nth-child(6) { animation-delay: .95s; }
.hero-content > :nth-child(7) { animation-delay: 1.1s; }

.hero h1 span {
  display: inline-block;
  animation: motion-wipe 1s cubic-bezier(.7, 0, .2, 1) .55s both;
}

.hero-benefits .benefit-item {
  animation: motion-rise .7s cubic-bezier(.2, .7, .2, 1) both;
}

.hero-benefits .benefit-item:nth-child(1) { animation-delay: 1.1s; }
.hero-benefits .benefit-item:nth-child(2) { animation-delay: 1.22s; }
.hero-benefits .benefit-item:nth-child(3) { animation-delay: 1.34s; }
.hero-benefits .benefit-item:nth-child(4) { animation-delay: 1.46s; }

.benefit-icon {
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.benefit-item:hover .benefit-icon {
  transform: translateY(-4px) rotate(-8deg) scale(1.08);
}

/* The First 50 call-out in the hero gently draws the eye. */
@keyframes motion-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 97, 45, 0); }
  50% { box-shadow: 0 0 0 6px rgba(232, 97, 45, .18); }
}

a.hero-offer {
  animation: motion-rise .8s cubic-bezier(.2, .7, .2, 1) .65s both, motion-glow 2.8s ease-in-out 2s infinite;
}

/* ---- Moving strip under the hero ---------------------------------------- */
.motion-ticker {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--lime);
  color: #ffffff;
}

.motion-ticker__track {
  display: flex;
  width: max-content;
  animation: motion-ticker 34s linear infinite;
}

.motion-ticker__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: 28px;
  padding: 12px 14px;
  margin: 0;
  list-style: none;
}

.motion-ticker__group li {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.motion-ticker__group li::after {
  content: "";
  width: 8px;
  height: 8px;
  background: #ffffff;
  transform: rotate(45deg);
  opacity: .8;
}

.motion-ticker:hover .motion-ticker__track {
  animation-play-state: paused;
}

@keyframes motion-ticker {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ---- Directional reveals ------------------------------------------------ */
.reveal {
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}

.reveal.reveal--left:not(.is-visible) { transform: translate3d(-48px, 0, 0); }
.reveal.reveal--right:not(.is-visible) { transform: translate3d(48px, 0, 0); }
.reveal.reveal--zoom:not(.is-visible) { transform: scale(.94); }

/* Section labels draw their accent line once the block appears. */
.reveal .eyebrow::before {
  transform-origin: 0 50%;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1) .25s;
}

.reveal:not(.is-visible) .eyebrow::before {
  transform: scaleX(0);
}

/* ---- Staggered groups --------------------------------------------------- */
.motion-stagger.motion-stagger > * {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--motion-index, 0) * 90ms);
}

.motion-stagger.is-in > * {
  opacity: 1;
  transform: none;
}

/* Cards in a stagger group keep their own hover lift after appearing. */
.motion-stagger.is-in > .membership-card:hover,
.motion-stagger.is-in > .pt-package-card:hover,
.motion-stagger.is-in > .bca-feature-card:hover {
  transform: translateY(-6px);
  transition-delay: 0s;
}

/* The older "always visible" fix for plan cards must not cancel the stagger. */
.membership-grid.motion-stagger:not(.is-in) .membership-card.reveal {
  opacity: 0 !important;
  transform: translate3d(0, 26px, 0) !important;
}

/* ---- Hover life ---------------------------------------------------------- */
.button {
  position: relative;
  overflow: hidden;
}

.button::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  pointer-events: none;
}

.button:hover::after,
.button:focus-visible::after {
  left: 120%;
}

.button:not(.button--outline):not(.button--ghost):hover {
  box-shadow: 0 10px 26px rgba(232, 97, 45, .35);
}

.membership-card,
.pt-package-card,
.bca-feature-card,
.first50-offers li,
.cue-master-card,
.visit-row {
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .3s ease, box-shadow .3s ease;
}

.menu-card,
.public-table-card {
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .3s ease, box-shadow .3s ease;
}

@keyframes motion-card-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: none; }
}

.menu-grid > .menu-card,
.public-table-card {
  animation: motion-card-in .55s cubic-bezier(.2, .7, .2, 1) both;
}

.menu-grid > .menu-card:nth-child(2), .public-table-card:nth-child(2) { animation-delay: .08s; }
.menu-grid > .menu-card:nth-child(3), .public-table-card:nth-child(3) { animation-delay: .16s; }
.menu-grid > .menu-card:nth-child(n+4), .public-table-card:nth-child(n+4) { animation-delay: .24s; }

.menu-card:hover,
.public-table-card:hover,
.bca-feature-card:hover,
.cue-master-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

.first50-offers li:hover {
  border-color: rgba(232, 97, 45, .6);
  transform: translateX(6px);
}

.gallery-tile,
.experience-media,
.bca-hero-image {
  overflow: hidden;
}

.gallery-tile img,
.experience-media img,
.bca-hero-image img {
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}

.gallery-tile:hover img,
.experience-media:hover img,
.bca-hero-image:hover img {
  transform: scale(1.06);
}

.desktop-nav a {
  position: relative;
}

/* ---- First 50 ------------------------------------------------------------ */
@keyframes motion-ping {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(2.6); opacity: 0; }
}

.first50-left::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--lime);
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(232, 97, 45, .6);
}

.first50-left {
  position: relative;
}

.first50-left::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--lime);
  animation: motion-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes motion-shine {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}

.first50-bar > span {
  position: relative;
  overflow: hidden;
  transition: width 1.4s cubic-bezier(.2, .7, .2, 1);
}

.first50-bar > span::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  animation: motion-shine 2.4s ease-in-out infinite;
}

@keyframes motion-pop {
  0% { transform: scale(.9); opacity: 0; }
  60% { transform: scale(1.03); opacity: 1; }
  100% { transform: none; }
}

.first50-done:not([hidden]) {
  animation: motion-pop .6s cubic-bezier(.2, .7, .2, 1) both;
}

/* ---- Floating WhatsApp button --------------------------------------------- */
.floating-contact {
  overflow: visible !important;
}

.floating-contact::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--lime);
  border-radius: inherit;
  animation: motion-ring 2.6s cubic-bezier(0, 0, .2, 1) infinite;
  pointer-events: none;
}

@keyframes motion-ring {
  0% { transform: scale(1); opacity: .65; }
  70%, 100% { transform: scale(1.45); opacity: 0; }
}

/* ---- Reduced motion: no movement at all ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .hero-media img,
  .hero-content > *,
  .hero h1 span,
  .hero-benefits .benefit-item,
  a.hero-offer,
  .motion-ticker__track,
  .first50-left::after,
  .first50-bar > span::after,
  .first50-done:not([hidden]),
  .menu-grid > .menu-card,
  .public-table-card,
  .floating-contact::after {
    animation: none !important;
  }
  .motion-ticker__track { transform: none; }
  .motion-stagger > *,
  .membership-grid.motion-stagger:not(.is-in) .membership-card.reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .reveal.reveal--left:not(.is-visible),
  .reveal.reveal--right:not(.is-visible),
  .reveal.reveal--zoom:not(.is-visible),
  .reveal:not(.is-visible) .eyebrow::before {
    transform: none;
  }
  .button::after { display: none; }
  .gallery-tile img,
  .experience-media img,
  .bca-hero-image img,
  .first50-bar > span { transition: none; }
}

/* ==========================================================================
   Round two: countdown, chalk dust, word reveals, tilt, menu follow, confetti
   ========================================================================== */

/* ---- Inauguration countdown (hero) -------------------------------------- */
.hero-countdown {
  margin: 22px 0 6px;
}

.hero-countdown__label {
  margin: 0 0 10px;
  color: #ffa27a;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero-countdown__units {
  display: flex;
  gap: 10px;
}

.hero-countdown__units > span {
  display: grid;
  min-width: 70px;
  padding: 10px 8px 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: center;
}

.hero-countdown__units strong {
  display: block;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hero-countdown__units small {
  margin-top: 4px;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@keyframes motion-tick {
  from { opacity: .2; transform: translateY(-45%); }
  to { opacity: 1; transform: none; }
}

.hero-countdown__units strong.is-ticking {
  animation: motion-tick .45s cubic-bezier(.2, .7, .2, 1);
}

.hero-content > :nth-child(8) { animation-delay: 1.25s; }

@media (max-width: 420px) {
  .hero-countdown__units { gap: 7px; }
  .hero-countdown__units > span { min-width: 0; flex: 1; }
}

/* ---- Chalk dust over the hero photo --------------------------------------- */
.hero-dust {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---- Headings rise in word by word ---------------------------------------- */
.reveal .motion-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.55em) rotate(2deg);
  transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--motion-word, 0) * 55ms + 120ms);
}

.reveal.is-visible .motion-word {
  opacity: 1;
  transform: none;
}

/* ---- 3D tilt with a soft light that follows the pointer -------------------- */
.membership-card,
.pt-package-card,
.bca-feature-card,
.cue-master-card,
.menu-card,
.public-table-card {
  position: relative;
}

.is-tilting.is-tilting.is-tilting {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-6px) !important;
  transition: transform .12s ease-out, border-color .3s ease, box-shadow .3s ease !important;
  transition-delay: 0s !important;
  box-shadow: 0 22px 46px rgba(0, 0, 0, .4);
}

.membership-card::after,
.pt-package-card::after,
.bca-feature-card::after,
.cue-master-card::after,
.menu-card::after,
.public-table-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(232, 97, 45, .18), transparent 55%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.is-tilting::after {
  opacity: 1;
}

/* ---- Menu link for the section on screen ------------------------------------ */
.desktop-nav a.is-current {
  color: var(--lime);
}

.desktop-nav a.is-current::after {
  right: 0;
}

/* ---- Confetti ----------------------------------------------------------------- */
.motion-confetti {
  position: fixed;
  inset: 0;
  z-index: 2000;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-countdown__units strong.is-ticking { animation: none; }
  .hero-dust, .motion-confetti { display: none; }
  .reveal .motion-word { opacity: 1; transform: none; transition: none; }
  .is-tilting.is-tilting.is-tilting { transform: none !important; }
}