/* ==========================================================================
   IronBark Leathers — animations
   Subtle, short motion (0.3–0.8s, soft easing). Everything that starts hidden
   is scoped to html.js, so content is always visible if JavaScript is off.
   Visitors with "reduce motion" switched on get a still version (end of file).
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 1. Page load ---------- */

/* Hero background layer with a slow "Ken Burns" drift */
.hero { background: var(--walnut); isolation: isolate; }
.hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background: var(--walnut) center / cover no-repeat;
  transform-origin: 60% 40%;
  animation: kenburns 24s ease-in-out infinite alternate;
}
.hero::before { z-index: 0; }
.hero .wrap { z-index: 2; }
.hero-stamp { z-index: 2; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, -1%); } }

/* Hero text arrives in sequence */
.js .hero-in { opacity: 0; animation: rise .8s var(--ease-out) var(--d, 0s) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Hero heading: words rise into place one after another */
.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.js [data-split] .wi { display: inline-block; transform: translateY(105%); animation: word-up .75s var(--ease-out) var(--wd, 0s) forwards; }
@keyframes word-up { to { transform: none; } }

/* Stamp is "pressed" on last, then its outer ring turns very slowly */
.js .hero-stamp { opacity: 0; animation: stamp-press .7s var(--ease-out) 1.7s forwards; }
@keyframes stamp-press {
  0%   { opacity: 0; transform: scale(1.35) rotate(-10deg); }
  70%  { opacity: .95; transform: scale(.96) rotate(1deg); }
  100% { opacity: .9; transform: none; }
}
.stamp-ring { transform-origin: 100px 100px; transform-box: view-box; animation: ring-turn 60s linear infinite; }
@keyframes ring-turn { to { transform: rotate(360deg); } }

/* Inner page banners: label, title and intro fade up on load */
.js .page-banner .wrap > * { opacity: 0; animation: rise .7s var(--ease-out) both; }
.js .page-banner .wrap > :nth-child(1) { animation-delay: .05s; }
.js .page-banner .wrap > :nth-child(2) { animation-delay: .15s; }
.js .page-banner .wrap > :nth-child(3) { animation-delay: .27s; }
.js .page-banner .wrap > :nth-child(4) { animation-delay: .39s; }

/* ---------- 2. Scroll reveals ---------- */

/* Uses opacity + the separate "translate" property, so hover effects that use
   "transform" (cards lifting, photos zooming) stay quick and are never overridden */
.js .reveal { opacity: 0; }
.js .reveal.in { animation: reveal-in .8s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes reveal-in {
  from { opacity: 0; translate: var(--rx, 0px) var(--ry, 22px); }
  to   { opacity: 1; translate: 0 0; }
}

/* Two-column sections: text and photo slide in from opposite sides */
.split > .reveal:first-child { --rx: -36px; --ry: 0px; }
.split > .reveal:last-child  { --rx: 36px;  --ry: 0px; }
.split.reverse > .reveal:first-child { --rx: 36px; }
.split.reverse > .reveal:last-child  { --rx: -36px; }
@media (max-width: 900px) { .split > .reveal:first-child, .split > .reveal:last-child { --rx: 0px; --ry: 22px; } }

/* Ornament dividers: lines draw outward from the diamond */
.js .ornament::before, .js .ornament::after { transform: scaleX(0); transition: transform .8s var(--ease-out) .15s; }
.js .ornament::before { transform-origin: right center; }
.js .ornament::after { transform-origin: left center; }
.js .ornament span { display: inline-block; opacity: 0; transform: rotate(-90deg) scale(.4); transition: opacity .4s ease, transform .5s var(--ease-out); }
.js .ornament.in::before, .js .ornament.in::after { transform: scaleX(1); }
.js .ornament.in span { opacity: 1; transform: none; }

/* "How ordering works": the dashed line draws across, badges pop in as it passes */
.js .steps::before { transform: scaleX(0); transform-origin: left center; transition: transform 1.5s var(--ease-soft) .1s; }
.js .steps.in::before { transform: scaleX(1); }
.js .steps .step { --ry: 16px; }
.js .steps .step.in { animation-delay: calc(var(--i, 0) * 380ms + 100ms); }
.js .steps .step .badge { transform: scale(.55); transition: transform .55s cubic-bezier(.2, 1.25, .4, 1); transition-delay: calc(var(--i, 0) * 380ms + 250ms); }
.js .steps .step.in .badge { transform: none; }

/* Quality timeline: the dashed line grows down as you scroll (set by JS) */
.js .timeline::before { transform: scaleY(var(--progress, 0)); transform-origin: top center; transition: transform .15s linear; }
.js .timeline .badge { transform: scale(.6); transition: transform .5s cubic-bezier(.2, 1.25, .4, 1); transition-delay: calc(var(--i, 0) * 90ms + .15s); }
.js .timeline li.in .badge { transform: none; }

/* Framed photos open with a soft wipe inside their parchment mount */
.js .framed img { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-soft); transition-delay: calc(var(--i, 0) * 150ms + .15s); }
.js .framed.in img { clip-path: inset(0 0 0 0); }

/* Trust strip icons draw themselves in */
.js .trust-item svg * { stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset 1.4s var(--ease-soft); transition-delay: calc(var(--i, 0) * 120ms + .2s); }
.js .trust-item.in svg * { stroke-dashoffset: 0; }

/* ---------- 3. Hover & interaction (only on devices that can hover) ---------- */

/* Buttons: colour sweeps across from left to right */
.btn {
  background-image: linear-gradient(var(--sweep, transparent), var(--sweep, transparent));
  background-repeat: no-repeat; background-position: left center; background-size: 0% 100%;
  transition: background-size .45s var(--ease-out), color .3s ease, border-color .3s ease, transform .25s ease, box-shadow .25s ease;
}
.btn-primary { --sweep: var(--saddle); }
.btn-primary:hover { background-color: var(--walnut); border-color: var(--saddle); }
.btn-secondary { --sweep: var(--walnut); }
.btn-secondary:hover { background-color: var(--saddle); border-color: var(--walnut); }
.btn-outline { --sweep: var(--walnut); }
.btn-outline:hover { background-color: transparent; }
.btn-light { --sweep: #E3D2B4; }
.btn-light:hover { background-color: var(--parchment); }
.btn-ghost-light { --sweep: var(--parchment); }
.btn-ghost-light:hover { background-color: transparent; color: var(--walnut); border-color: var(--parchment); }
/* style.css hover rules use the "background" shorthand, so restate the sweep layer here */
.btn:hover, .btn:focus-visible {
  background-image: linear-gradient(var(--sweep, transparent), var(--sweep, transparent));
  background-repeat: no-repeat; background-position: left center; background-size: 0% 100%;
}
@media (hover: hover) {
  .btn:hover { background-size: 100% 100%; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(41, 40, 35, .18); }
}
.btn:focus-visible { background-size: 100% 100%; }
.btn:active { transform: translateY(0); }

/* Main navigation (desktop). The current page and hover state are marked with a small
   diamond above the link; see "Heritage header" in style.css */
@media (min-width: 981px) {
  .nav-link .caret { display: inline-block; transition: transform .3s var(--ease-out); }
  .has-sub:hover .caret, .has-sub.open .caret, .has-sub:focus-within .caret { transform: rotate(180deg); }

  /* Products dropdown: fades and slides in, items follow one after another */
  .subnav { transform: translateY(10px); transition: opacity .25s ease, transform .3s var(--ease-out), visibility .25s; }
  .subnav li { opacity: 0; transform: translateY(-4px); transition: opacity .25s ease, transform .3s var(--ease-out); }
  .has-sub:hover .subnav li, .has-sub:focus-within .subnav li, .has-sub.open .subnav li { opacity: 1; transform: none; }
  .subnav li:nth-child(1) { transition-delay: .04s; }
  .subnav li:nth-child(2) { transition-delay: .08s; }
  .subnav li:nth-child(3) { transition-delay: .12s; }
  .subnav li:nth-child(4) { transition-delay: .16s; }
  .subnav li:nth-child(5) { transition-delay: .20s; }
  .subnav li:nth-child(6) { transition-delay: .24s; }
  .subnav a { transition: background-color .2s ease, color .2s ease, padding-left .25s var(--ease-out); }
  .subnav a:hover { padding-left: 26px; }
}

/* Mobile slide-out menu: links follow the panel in */
@media (max-width: 980px) {
  .nav .nav-list > li, .nav .quote-tag { opacity: 0; transform: translateX(16px); transition: opacity .3s ease, transform .35s var(--ease-out); }
  .nav.open .nav-list > li, .nav.open .quote-tag { opacity: 1; transform: none; }
  .nav.open .nav-left > li:nth-child(1) { transition-delay: .08s; }
  .nav.open .nav-left > li:nth-child(2) { transition-delay: .13s; }
  .nav.open .nav-left > li:nth-child(3) { transition-delay: .18s; }
  .nav.open .nav-right .nav-list > li:nth-child(1) { transition-delay: .23s; }
  .nav.open .nav-right .nav-list > li:nth-child(2) { transition-delay: .28s; }
  .nav.open .quote-tag { transition-delay: .33s; }
}
}

/* Product cards: calm hover. The card lifts slightly and the arrow nudges; the photo stays still. */
.product-card .more .arr { display: inline-block; transition: transform .3s var(--ease-out); }
.product-card { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.mini-card { transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); overflow: hidden; }
@media (hover: hover) {
  .product-card:hover .more .arr { transform: translateX(6px); }
}

/* "Typical uses" tags */
.uses li { transition: background-color .25s ease, color .25s ease, transform .25s var(--ease-out), box-shadow .25s ease; }
@media (hover: hover) {
  .uses li:hover { background: var(--saddle); color: var(--parchment); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(41, 40, 35, .12); }
}

/* Footer links and icons */
.site-footer a { transition: color .25s ease; }
.site-footer .footer-grid ul:not(.footer-contact) a { display: inline-block; transition: color .25s ease, transform .25s var(--ease-out); }
.site-footer .footer-grid ul:not(.footer-contact) a:hover { transform: translateX(4px); text-decoration: none; }
.footer-contact li svg { transition: color .25s ease, transform .25s var(--ease-out); }
.footer-contact li:hover svg { color: var(--parchment); transform: scale(1.12); }
.social a { transition: background-color .25s ease, color .25s ease, transform .25s var(--ease-out), border-color .25s ease; }
.social a:hover { background: var(--parchment); color: var(--walnut); border-color: var(--parchment); transform: translateY(-3px); }

/* ---------- 4. Header shrinks a little once you scroll ---------- */
.site-header { transition: box-shadow .3s ease; }
.site-header .wrap { transition: min-height .3s var(--ease-out); }
.brand img { transition: height .3s var(--ease-out); }
.site-header.scrolled { box-shadow: 0 6px 20px rgba(30, 20, 14, .35); }
.site-header.scrolled .wrap { min-height: 76px; }
.site-header.scrolled .brand img { height: 64px; }
@media (max-width: 980px) {
  .site-header.scrolled .wrap { min-height: 70px; }
  .site-header.scrolled .brand img { height: 56px; }
}

/* ---------- 5. Forms ---------- */
.field label { transition: color .25s ease; }
.field:focus-within > label { color: var(--saddle); }
.field input, .field select, .field textarea, .product-line select, .product-line input {
  transition: border-color .25s ease, box-shadow .3s ease, background-color .25s ease;
}
.field input:focus, .field select:focus, .field textarea:focus, .product-line select:focus, .product-line input:focus {
  box-shadow: 0 0 0 4px rgba(120, 83, 58, .16), 0 4px 14px rgba(120, 83, 58, .10);
}
.product-lines:focus-within legend { color: var(--saddle); }

/* Product rows slide in when added and fold away when removed */
.product-line.is-new { animation: row-in .4s var(--ease-out); }
@keyframes row-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.product-line.is-leaving { overflow: hidden; transition: height .3s var(--ease-soft), opacity .25s ease, margin .3s var(--ease-soft), padding .3s var(--ease-soft); opacity: 0; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.add-line, .line-remove { transition: background-color .25s ease, color .25s ease, transform .25s var(--ease-out); }
.line-remove:hover { transform: rotate(90deg); }

/* Submit button spinner while sending */
.btn.is-loading { pointer-events: none; opacity: .9; }
.btn.is-loading::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(243, 235, 221, .35); border-top-color: var(--parchment);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Errors get a gentle shake */
.shake { animation: shake .45s var(--ease-soft); }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.alert:not([hidden]) { animation: rise .4s var(--ease-out); }

/* ---------- Reduced motion: calm, still version ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .hero-bg, .stamp-ring { animation: none !important; }
  .js .reveal, .js .hero-in, .js .hero-stamp, .js .page-banner .wrap > * { opacity: 1 !important; transform: none !important; translate: none !important; }
  .js [data-split] .wi { transform: none !important; }
  .js .framed img { clip-path: none !important; }
  .js .ornament::before, .js .ornament::after, .js .steps::before, .js .timeline::before { transform: none !important; }
  .js .ornament span, .js .steps .badge, .js .timeline .badge { opacity: 1 !important; transform: none !important; }
  .js .trust-item svg * { stroke-dashoffset: 0 !important; }
}

/* Side-sliding reveals must never cause a sideways scrollbar */
main { overflow-x: clip; }

/* ==========================================================================
   Smoother page-to-page navigation
   ========================================================================== */

/* Hero heading: stay hidden until it has been split into words, so the plain
   heading never flashes before the word-by-word animation starts. A fallback
   reveals it after 2s in case the script cannot run. */
.js [data-split]:not(.is-split) { visibility: hidden; animation: show-anyway 0s linear 2s forwards; }
@keyframes show-anyway { to { visibility: visible; } }

/* Keep the page width steady between short and long pages (no scrollbar jump) */
html { scrollbar-gutter: stable; }

/* Cross-fade between pages instead of a blank flash (Chrome, Edge, Safari 18+;
   other browsers simply load pages normally). The header stays in place. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-fade-out .22s ease both; }
::view-transition-new(root) { animation: vt-fade-in .32s ease both; }
::view-transition-group(site-header) { animation: none; }
::view-transition-old(site-header) { display: none; }
::view-transition-new(site-header) { animation: none; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}