/* Shared interaction timing. All motion is defined in this file.
   Curves are named after their Webflow-interactions equivalents so the
   feel (quart/quint/circ "outs" for reveals, a gentle "back" overshoot
   for presses) stays consistent everywhere it's reused. */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
.button {
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    opacity 0.2s ease,
    transform 0.35s var(--ease-out-quart);
}
.button:hover {
  background: var(--palette-navy);
  color: white;
}
.button:active {
  transform: scale(0.96);
}
.button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.arrow-link .icon {
  transition: transform 0.35s var(--ease-in-out-circ);
}
.arrow-link:hover .icon {
  transform: translateX(6px);
}
.product-card__image img,
.crew-card img {
  transition: transform 0.5s var(--ease-in-out-cubic);
}
.product-card__link:hover img,
.crew-card a:hover img {
  transform: scale(0.97);
}
.product-gallery__item img,
.lightbox-thumbnails img {
  transition: transform 0.5s var(--ease-in-out-circ);
}
.product-gallery__item:hover img,
.lightbox-thumbnails button:hover img {
  transform: scale(1.06);
}
.lightbox-arrow::after {
  transition: transform 0.3s var(--ease-in-out-circ);
}
.lightbox-arrow--previous:hover::after {
  transform: translateX(-6px);
}
.lightbox-arrow--next:hover::after {
  transform: translateX(6px);
}
.newsletter-form button {
  transition: background-color 0.2s ease;
}
.newsletter-form button:hover {
  background: #383838;
}
.menu-links a > span {
  display: block;
  transition:
    transform 0.8s var(--ease-in-out-circ),
    opacity 0.4s ease;
}
.menu-links__alternate {
  transform: translateY(110%);
  opacity: 0;
}
.menu-links a:hover > span:first-child,
.menu-links a:focus-visible > span:first-child {
  transform: translateY(-110%);
  opacity: 0;
  transition-duration: 0.7s;
}
.menu-links a:hover .menu-links__alternate,
.menu-links a:focus-visible .menu-links__alternate {
  transform: translateY(0);
  opacity: 1;
  transition-duration: 0.7s;
}

/* Magnetic controls: small icon buttons drift toward the cursor and
   spring back on release. Desktop, fine-pointer only (see animation.js). */
[data-magnetic] {
  transition: transform 0.5s var(--ease-back);
}

/* Page entrances and scroll reveals. */
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(35px);
  transition:
    transform 0.9s var(--ease-out),
    opacity 0.8s ease;
}
.motion-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Staggered reveal for related items in a grid or horizontal strip. */
.collection-grid [data-reveal]:nth-child(2),
.product-strip__track [data-reveal]:nth-child(2),
.crew-grid [data-reveal]:nth-child(2) {
  transition-delay: 0.06s;
}
.collection-grid [data-reveal]:nth-child(3),
.product-strip__track [data-reveal]:nth-child(3),
.crew-grid [data-reveal]:nth-child(3) {
  transition-delay: 0.12s;
}
.collection-grid [data-reveal]:nth-child(4),
.product-strip__track [data-reveal]:nth-child(4),
.crew-grid [data-reveal]:nth-child(4) {
  transition-delay: 0.18s;
}
.collection-grid [data-reveal]:nth-child(5),
.product-strip__track [data-reveal]:nth-child(5) {
  transition-delay: 0.24s;
}
.collection-grid [data-reveal]:nth-child(n + 6),
.product-strip__track [data-reveal]:nth-child(n + 6) {
  transition-delay: 0.3s;
}
/* Manual stagger for sequences an nth-child selector can't reach. */
.reveal-delay-1 {
  transition-delay: 0.08s !important;
}
.reveal-delay-2 {
  transition-delay: 0.16s !important;
}
.reveal-delay-3 {
  transition-delay: 0.24s !important;
}

/* Text mask reveal: the wrapper clips, the inner line slides up into view.
   Used for hero-scale titles and standalone page headings. */
.motion-ready [data-reveal-mask] {
  overflow: hidden;
  display: block;
}
.motion-ready [data-reveal-mask] > * {
  display: block;
  transform: translateY(105%);
  transition: transform 0.85s var(--ease-out-quart);
}
.motion-ready [data-reveal-mask].is-revealed > * {
  transform: translateY(0);
}

/* Image reveal: the frame is already clipped by its layout, so the photo
   itself slides up out of a soft over-scale as it enters the viewport. */
.motion-ready [data-reveal-media] img {
  transform: scale(1.12) translateY(3%);
  transition: transform 1.1s var(--ease-out-quart);
}
.motion-ready [data-reveal-media].is-revealed img {
  transform: scale(1) translateY(0);
}

.hero__content {
  transform: translateY(var(--hero-text-y, 0px));
}
.hero__image img, .hero__image video {
  transform: translateY(var(--hero-image-y, 0px)) scale(var(--hero-scale, 1));
}
/* Hero media mask: the frame opens on load without touching the image's
   own transform, which stays free for the scroll parallax above. */
.motion-ready .hero__image {
  animation: hero-media-reveal 1.3s var(--ease-in-out-circ) both;
}
@keyframes hero-media-reveal {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0% 0);
  }
}
.motion-ready .hero__line {
  overflow: hidden;
}
.motion-ready .hero__line-inner,
.motion-ready .hero__last {
  display: block;
  animation: hero-line-enter 0.9s var(--ease-out-quart) both;
}
.motion-ready .hero__last {
  display: inline-flex;
}
.motion-ready .hero__line:nth-child(2) .hero__line-inner,
.motion-ready .hero__line:nth-child(2) .hero__last {
  animation-delay: 0.12s;
}
.motion-ready .hero__line:nth-child(3) .hero__line-inner,
.motion-ready .hero__line:nth-child(3) .hero__last {
  animation-delay: 0.24s;
}
.motion-ready .hero__cta {
  animation: hero-cta-enter 0.8s var(--ease-out-quart) 0.4s both;
}
@keyframes hero-line-enter {
  from {
    transform: translateY(105%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes hero-cta-enter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Navigation, cart and image viewer entrances / exits. */
.menu-dialog[open] {
  animation: menu-enter 0.55s var(--ease-in-out) both;
}
.menu-dialog.is-closing {
  animation: menu-exit 0.4s var(--ease-in-out) both;
}
.menu-dialog[open] .menu-links a {
  animation: menu-link-enter 0.7s var(--ease-out) both;
}
.menu-links a:nth-child(2) {
  animation-delay: 0.04s;
}
.menu-links a:nth-child(3) {
  animation-delay: 0.08s;
}
.menu-links a:nth-child(4) {
  animation-delay: 0.12s;
}
.menu-links a:nth-child(5) {
  animation-delay: 0.16s;
}
.menu-links a:nth-child(6) {
  animation-delay: 0.2s;
}
.menu-links a:nth-child(7) {
  animation-delay: 0.24s;
}
.cart-dialog[open] {
  animation: cart-enter 0.3s ease both;
}
.cart-dialog.is-closing {
  animation: cart-exit 0.3s ease both;
}
dialog[open]::backdrop {
  animation: backdrop-enter 0.3s ease both;
}
dialog.is-closing::backdrop {
  animation: backdrop-enter 0.3s ease reverse both;
}
.product-lightbox[open] {
  animation: backdrop-enter 0.3s ease both;
}
.product-lightbox.is-closing {
  animation: backdrop-enter 0.2s ease reverse both;
}
.lightbox-image.is-changing {
  animation: photo-enter 0.25s ease both;
}
@keyframes menu-enter {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes menu-exit {
  to {
    transform: translateY(-100%);
  }
}
@keyframes menu-link-enter {
  from {
    opacity: 0;
    transform: translateY(45px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes cart-enter {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes cart-exit {
  to {
    transform: translateX(100%);
  }
}
@keyframes backdrop-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes photo-enter {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}

/* Home: pinned feature stack. The stage stays pinned across the whole
   scroll range; each card sits stacked on the one before it and is pulled
   up from below by animation.js as you scroll through its slot, so the
   current card visibly holds still while the next slides up to cover it. */
@media (min-width: 700px) {
  .home-features {
    position: relative;
  }
  .home-features__stage {
    position: sticky;
    /* Stops right under the fixed navbar, not behind it. */
    top: var(--header-height);
    height: calc(100svh - var(--header-height));
    overflow: hidden;
  }
  .home-features__stage .home-feature {
    position: absolute;
    inset: 0;
    min-height: 0;
  }
  /* min-height:0 above (needed so the card can't overflow its slot) breaks
     the usual min-height:inherit centering chain, so re-center directly
     against the card's own actual (inset-defined) height instead. */
  .home-features__stage .home-feature > .container {
    min-height: 100%;
  }
  /* The pinned slot is shorter than an ordinary full-height section (the
     navbar offset above takes some of that back), so the copy's spacing
     is tightened here only, to keep it fitting and genuinely centered
     rather than centered-but-clipped. Typography itself is untouched. */
  .home-features__stage .split-section__copy {
    padding-block: 48px;
  }
  .home-features__stage .split-section__copy .feature-kicker {
    margin-bottom: 16px;
  }
  .home-features__stage .split-section__copy h2 {
    margin-bottom: 16px;
  }
  .home-features__stage .split-section__copy .arrow-link {
    margin-top: 32px;
  }
  .home-features__stage .home-feature ~ .home-feature {
    transform: translateY(100%);
    will-change: transform;
  }
}

/* Home: category tape, manifesto asterisk and closing text. */
.feature-kicker__track {
  animation: category-tape 12s linear infinite;
}
@keyframes category-tape {
  to {
    transform: translateX(-50%);
  }
}
.home-manifesto__star {
  transform: rotate(var(--asterisk-angle, 0deg));
}
.home-club__line {
  transform: translateX(var(--text-x, 0px));
}
/* Story and Worn Loud: opposing photography rows. */
.photo-row {
  transform: translateX(var(--row-x, 0px));
  will-change: transform;
}

/* FAQ accordion: height animates via a grid-rows trick so it never has to
   measure layout in JS. */
.faq-answer:not([hidden]) {
  display: grid;
}
.faq-answer {
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.5s var(--ease-out-quart),
    opacity 0.35s ease;
}
.faq-answer > p {
  min-height: 0;
  overflow: hidden;
}
.faq-question[aria-expanded="true"] + .faq-answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* Reduced motion: all content stays visible and controls remain functional. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .motion-ready [data-reveal],
  .motion-ready [data-reveal-mask] > *,
  .motion-ready [data-reveal-media] img,
  .hero__content,
  .hero__image,
  .hero__image img,
  .hero__image video,
  .home-club__line,
  .photo-row,
  .home-manifesto__star,
  [data-magnetic] {
    opacity: 1;
    transform: none;
    clip-path: none;
    will-change: auto;
  }
  /* Skip the scroll-jacking pin/reveal entirely: plain stacked sections. */
  .home-features {
    height: auto !important;
  }
  .home-features__stage {
    position: static;
    height: auto;
    overflow: visible;
  }
  .home-features__stage .home-feature {
    position: static;
    transform: none !important;
  }
}