/* Behaviour styles shared by every page (the imported layout lives in pages/*.css). */

/* Page transitions (see js/page-transitions.js): 0.4s slide, Framer's ease [.27, 0, .51, 1] */
@view-transition {
  navigation: auto;
}
html[data-page-transition]::view-transition-group(root) {
  animation-duration: 0.4s;
}
html[data-page-transition]::view-transition-old(root),
html[data-page-transition]::view-transition-new(root) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.27, 0, 0.51, 1);
  animation-fill-mode: both;
  mix-blend-mode: normal;
}
html[data-page-transition="next"]::view-transition-old(root) { animation-name: nf-page-out-left; }
html[data-page-transition="next"]::view-transition-new(root) { animation-name: nf-page-in-right; }
html[data-page-transition="back"]::view-transition-old(root) { animation-name: nf-page-out-right; }
html[data-page-transition="back"]::view-transition-new(root) { animation-name: nf-page-in-left; }
@keyframes nf-page-in-right { from { transform: translateX(100%); } to { transform: none; } }
@keyframes nf-page-out-left { from { transform: none; } to { transform: translateX(-100%); } }
@keyframes nf-page-in-left { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes nf-page-out-right { from { transform: none; } to { transform: translateX(100%); } }

/* Scroll arrow under the hero: bobs 20px, 1s per cycle, ease-in-out on each half */
[data-component="scroll-arrow"] svg {
  animation: nf-bob 1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
@keyframes nf-bob {
  0%, 100% { transform: translateY(-10px); }
  50% { transform: translateY(10px); }
}

/* Logo ticker: the logos are listed twice, so sliding by half the row loops seamlessly */
[data-component="logo-ticker"] > .ssr-variant > div > div,
[data-component="logo-ticker"] > div > div {
  animation: nf-ticker var(--ticker-duration, 40s) linear infinite;
}
@keyframes nf-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--ticker-shift, 50%))); }
}

/* Corner buttons: grow 5%, brackets move halfway in */
[data-component="corner-button"] button:hover {
  transform: scale(1.05) !important;
}
[data-component="corner-button"] button:hover > svg:nth-of-type(1) { top: var(--corner-hover) !important; left: var(--corner-hover) !important; }
[data-component="corner-button"] button:hover > svg:nth-of-type(2) { top: var(--corner-hover) !important; right: var(--corner-hover) !important; }
[data-component="corner-button"] button:hover > svg:nth-of-type(3) { bottom: var(--corner-hover) !important; left: var(--corner-hover) !important; }
[data-component="corner-button"] button:hover > svg:nth-of-type(4) { bottom: var(--corner-hover) !important; right: var(--corner-hover) !important; }

/* Social icons: colour, lift and tilt on hover */
[data-component="socials"] a:hover {
  color: var(--socials-hover) !important;
  transform: scale(1.2) rotate(5deg) !important;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3)) !important;
}
[data-component="socials"] a:hover > div {
  transform: scale(1.1) !important;
}

/* Image cards (home "Rep the crew", collection cards): photo zooms in while hovered */
[data-component="image-card"] [role="img"] {
  transition: transform 0.3s cubic-bezier(0, 0, 0.58, 1);
}
[data-component="image-card"] [role="img"]:hover {
  transform: scale(1.1);
}

/* Cart button in the nav */
[data-component="cart-button"] [role="button"],
[data-component="cart-button"] button {
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* Project cards (Custom Builds page) --------------------------------------- */
.nf-card {
  animation: nf-card-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--card-index, 0) * 0.08s);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.nf-card-shown { animation: none; }
@keyframes nf-card-in {
  from { opacity: 0; transform: translateY(60px) scale(0.9); }
  to { opacity: 1; transform: none; }
}
.nf-card:hover { transform: translateY(var(--card-lift, -16px)) scale(1.02); }
.nf-card-inner {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.nf-card:hover .nf-card-inner {
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08);
  transform: rotateX(2deg) rotateY(-2deg);
}
.nf-card-img {
  filter: brightness(1);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.nf-card:hover .nf-card-img { transform: scale(1.1); filter: brightness(1.05); }
.nf-card-overlay { opacity: 0; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.nf-card:hover .nf-card-overlay { opacity: 1; }
.nf-card-button {
  transform: scale(0.8) translateY(10px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}
.nf-card:hover .nf-card-button { transform: none; }
.nf-card-title { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.nf-card:hover .nf-card-title { transform: translateX(6px); }
.nf-card-text { opacity: 0.7; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s; }
.nf-card:hover .nf-card-text { opacity: 1; transform: translateX(3px); }

/* Steps accordion (contact page) ------------------------------------------- */
.nf-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

/* Submit button spinner */
.nf-spinner { animation: nf-spin 1s linear infinite; }
@keyframes nf-spin { to { transform: rotate(360deg); } }

/* Buying is switched off for now: no cart until there is a checkout */
[data-component="cart-button"] { display: none !important; }

/* Headings that exist for search engines and screen readers, not for the eye */
.nf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}