/* =============================================================================
   Kopek — Motion system
   Editorial-agency-grade animation layer: loader, transitions, reveals,
   parallax, magnetic CTAs, custom cursor, counters.
   All patterns can be toggled via the Tweaks panel.
   ============================================================================= */

/* ----------------------------------------------------------------------------
   FOUC PREVENTION — html.motion-loading set inline before page paints
   ---------------------------------------------------------------------------- */
html.motion-loading body { opacity: 0; }
html.motion-loading { background: var(--brand-primary, #0B4E52); }

/* ----------------------------------------------------------------------------
   INTRO LOADER — counter + brand mark + curtain panels
   ---------------------------------------------------------------------------- */
.m-loader {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--brand-primary, #0B4E52);
  color: #fff;
  display: flex; align-items: stretch;
  pointer-events: auto;
  --m-loader-progress: 0;
}
.m-loader-pane {
  flex: 1; background: var(--brand-primary, #0B4E52);
  transform-origin: bottom center;
}
.m-loader-pane:nth-child(2) { background: #0E6065; }
.m-loader-pane:nth-child(3) { background: #0E6065; }
.m-loader-pane:nth-child(4) { background: #0E6065; }
.m-loader-pane:nth-child(5) { background: #0B4E52; }

.m-loader-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  font-family: var(--font-heading, 'Montserrat', system-ui, sans-serif);
  color: #fff;
  pointer-events: none;
}
.m-loader-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0.78;
}
.m-loader-top span:last-child { font-style: italic; font-weight: 300; text-transform: none; letter-spacing: 0.02em; opacity: 0.7; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 13px; }
.m-loader-center {
  position: absolute; left: 48px; right: 48px;
  top: 50%; transform: translateY(-50%);
  display: flex; align-items: baseline; gap: 28px;
  pointer-events: none;
}
.m-loader-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(8rem, 18vw, 18rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: #fff;
  display: inline-flex; align-items: baseline;
}
.m-loader-num span.suffix {
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-style: normal;
  font-size: 0.18em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-left: 24px;
  align-self: center;
  opacity: 0.55;
  font-weight: 600;
}
.m-loader-tagline {
  margin-left: auto;
  max-width: 280px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms 350ms var(--ease-emphasized, cubic-bezier(0.3,0,0,1)),
              transform 700ms 350ms var(--ease-emphasized, cubic-bezier(0.3,0,0,1));
}
.m-loader.is-late .m-loader-tagline { opacity: 0.85; transform: translateY(0); }
.m-loader-bottom {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  opacity: 0.6;
}
.m-loader-bar {
  position: absolute; left: 48px; right: 48px; bottom: 96px;
  height: 1px;
  background: rgba(255,255,255,0.12);
}
.m-loader-bar::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(var(--m-loader-progress, 0) * 1%);
  background: rgba(255,255,255,0.6);
  transition: width 90ms linear;
}

/* Loader exit: panels slide up sequentially */
.m-loader.is-exiting .m-loader-content { opacity: 0; transition: opacity 360ms ease-out; }
.m-loader.is-exiting .m-loader-pane {
  transform: translateY(-101%);
  transition: transform 1100ms var(--ease-emphasized, cubic-bezier(0.76,0,0.24,1));
}
.m-loader.is-exiting .m-loader-pane:nth-child(1) { transition-delay: 0ms; }
.m-loader.is-exiting .m-loader-pane:nth-child(2) { transition-delay: 60ms; }
.m-loader.is-exiting .m-loader-pane:nth-child(3) { transition-delay: 120ms; }
.m-loader.is-exiting .m-loader-pane:nth-child(4) { transition-delay: 180ms; }
.m-loader.is-exiting .m-loader-pane:nth-child(5) { transition-delay: 240ms; }

/* ----------------------------------------------------------------------------
   PAGE TRANSITION CURTAIN — repeat-visit + outbound nav
   ---------------------------------------------------------------------------- */
.m-curtain {
  position: fixed; inset: 0; z-index: 99998;
  display: flex; align-items: stretch;
  background: var(--brand-primary, #0B4E52);
  pointer-events: none;
}
.m-curtain-pane {
  flex: 1;
  background: var(--brand-primary, #0B4E52);
  transform: translateY(101%);
  transition: transform 900ms var(--ease-emphasized, cubic-bezier(0.76,0,0.24,1));
}
.m-curtain-pane:nth-child(2) { background: #0E6065; transition-delay: 70ms; }
.m-curtain-pane:nth-child(3) { background: var(--brand-accent, #C8955A); transition-delay: 140ms; }
.m-curtain-pane:nth-child(4) { background: #0E6065; transition-delay: 210ms; }
.m-curtain-pane:nth-child(5) { background: #0B4E52; transition-delay: 280ms; }

/* Incoming pages mount fully covered before the body becomes visible. */
.m-curtain.is-precovered .m-curtain-pane {
  transform: translateY(0);
  transition: none;
}

/* Cover (sliding in from bottom) — outbound */
.m-curtain.is-covering .m-curtain-pane { transform: translateY(0); }

/* Reveal (sliding out the top) — page enter (from a covered state) */
.m-curtain.is-revealing .m-curtain-pane {
  transform: translateY(0);
  animation: m-curtain-reveal 950ms var(--ease-emphasized, cubic-bezier(0.76,0,0.24,1)) forwards;
}
.m-curtain.is-revealing .m-curtain-pane:nth-child(1) { animation-delay: 80ms; }
.m-curtain.is-revealing .m-curtain-pane:nth-child(2) { animation-delay: 140ms; }
.m-curtain.is-revealing .m-curtain-pane:nth-child(3) { animation-delay: 200ms; }
.m-curtain.is-revealing .m-curtain-pane:nth-child(4) { animation-delay: 260ms; }
.m-curtain.is-revealing .m-curtain-pane:nth-child(5) { animation-delay: 320ms; }

@keyframes m-curtain-reveal {
  from { transform: translateY(0); }
  to   { transform: translateY(-101%); }
}

/* ----------------------------------------------------------------------------
   TEXT REVEALS — word-by-word slide-up
   ---------------------------------------------------------------------------- */
.m-words { display: inline; }
.m-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: inherit;
}
.m-word-inner {
  display: inline-block;
  transform: translateY(110%) rotate(2deg);
  opacity: 0;
  transition: transform 1000ms var(--ease-emphasized, cubic-bezier(0.2,0.7,0.1,1)),
              opacity 900ms ease-out;
  will-change: transform;
}
.m-words.is-in .m-word-inner {
  transform: translateY(0) rotate(0);
  opacity: 1;
}
.m-words.is-in .m-word:nth-child(1)  .m-word-inner { transition-delay: 20ms; }
.m-words.is-in .m-word:nth-child(2)  .m-word-inner { transition-delay: 80ms; }
.m-words.is-in .m-word:nth-child(3)  .m-word-inner { transition-delay: 140ms; }
.m-words.is-in .m-word:nth-child(4)  .m-word-inner { transition-delay: 200ms; }
.m-words.is-in .m-word:nth-child(5)  .m-word-inner { transition-delay: 260ms; }
.m-words.is-in .m-word:nth-child(6)  .m-word-inner { transition-delay: 320ms; }
.m-words.is-in .m-word:nth-child(7)  .m-word-inner { transition-delay: 380ms; }
.m-words.is-in .m-word:nth-child(8)  .m-word-inner { transition-delay: 440ms; }
.m-words.is-in .m-word:nth-child(9)  .m-word-inner { transition-delay: 500ms; }
.m-words.is-in .m-word:nth-child(10) .m-word-inner { transition-delay: 540ms; }
.m-words.is-in .m-word:nth-child(n+11) .m-word-inner { transition-delay: 580ms; }

/* ----------------------------------------------------------------------------
   FADE-UP — soft entrance for paragraphs, eyebrows, ctas
   ---------------------------------------------------------------------------- */
.m-fade {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease-emphasized, cubic-bezier(0.3,0,0,1)),
              transform 900ms var(--ease-emphasized, cubic-bezier(0.3,0,0,1));
  will-change: opacity, transform;
}
.m-fade.is-in { opacity: 1; transform: translateY(0); }
.m-fade.m-fade-delay-1.is-in { transition-delay: 80ms; }
.m-fade.m-fade-delay-2.is-in { transition-delay: 160ms; }
.m-fade.m-fade-delay-3.is-in { transition-delay: 240ms; }
.m-fade.m-fade-delay-4.is-in { transition-delay: 320ms; }
.m-fade.m-fade-delay-5.is-in { transition-delay: 400ms; }

/* ----------------------------------------------------------------------------
   MASK REVEAL — image-frame clip-path opens upward
   ---------------------------------------------------------------------------- */
.m-mask {
  clip-path: inset(100% 0 0 0);
  -webkit-clip-path: inset(100% 0 0 0);
  transition: clip-path 1200ms var(--ease-emphasized, cubic-bezier(0.76,0,0.24,1)),
              -webkit-clip-path 1200ms var(--ease-emphasized, cubic-bezier(0.76,0,0.24,1));
  will-change: clip-path;
}
.m-mask.is-in {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

/* The mask container's inner content slides counter-direction for parallax feel */
.m-mask .m-mask-inner {
  transform: translateY(40%) scale(1.08);
  transition: transform 1200ms var(--ease-emphasized, cubic-bezier(0.76,0,0.24,1));
  will-change: transform;
}
.m-mask.is-in .m-mask-inner { transform: translateY(0) scale(1); }

/* ----------------------------------------------------------------------------
   PARALLAX — applied by motion.js as inline transform var
   ---------------------------------------------------------------------------- */
.m-parallax { will-change: transform; }

/* ----------------------------------------------------------------------------
   MAGNETIC CTA — applied by motion.js via inline translate
   ---------------------------------------------------------------------------- */
.m-magnetic { transition: transform 400ms cubic-bezier(0.2,0.7,0.1,1); will-change: transform; }
.m-magnetic-inner { display: inline-flex; align-items: center; gap: inherit; transition: transform 400ms cubic-bezier(0.2,0.7,0.1,1); }

/* ----------------------------------------------------------------------------
   CUSTOM CURSOR — tiny disc that grows over interactives
   ---------------------------------------------------------------------------- */
html.m-cursor-on, html.m-cursor-on body { cursor: none; }
html.m-cursor-on a, html.m-cursor-on button, html.m-cursor-on .nav-cta,
html.m-cursor-on .hero-cta, html.m-cursor-on input, html.m-cursor-on [role="button"],
html.m-cursor-on .product-card, html.m-cursor-on .category-card,
html.m-cursor-on .lookbook-cell { cursor: none; }

.m-cursor {
  position: fixed; left: 0; top: 0;
  width: 12px; height: 12px;
  background: var(--brand-primary, #0B4E52);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99997;
  transform: translate3d(-50px, -50px, 0);
  transition: width 320ms cubic-bezier(0.2,0.7,0.1,1),
              height 320ms cubic-bezier(0.2,0.7,0.1,1),
              background 220ms ease,
              color 220ms ease,
              opacity 220ms ease,
              border-radius 280ms;
  mix-blend-mode: difference;
  opacity: 0;
}
html.m-cursor-on .m-cursor { opacity: 0.92; }
.m-cursor.is-hovering {
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.9);
  mix-blend-mode: normal;
}
.m-cursor.is-hovering-large {
  width: 116px; height: 116px;
  background: var(--brand-primary, #0B4E52);
  color: #fff;
  mix-blend-mode: normal;
}
.m-cursor.is-hovering-large .m-cursor-label {
  opacity: 1;
}
.m-cursor-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: inherit;
  mix-blend-mode: normal;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  line-height: 1.1;
}
.m-cursor-label span {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms cubic-bezier(0.2,0.7,0.1,1), transform 320ms cubic-bezier(0.2,0.7,0.1,1);
}
.m-cursor-label.is-on span { opacity: 1; transform: translateY(0); }
.m-cursor-label.is-on span:nth-child(1)  { transition-delay: 40ms; }
.m-cursor-label.is-on span:nth-child(2)  { transition-delay: 70ms; }
.m-cursor-label.is-on span:nth-child(3)  { transition-delay: 100ms; }
.m-cursor-label.is-on span:nth-child(4)  { transition-delay: 130ms; }
.m-cursor-label.is-on span:nth-child(5)  { transition-delay: 160ms; }
.m-cursor-label.is-on span:nth-child(6)  { transition-delay: 190ms; }
.m-cursor-label.is-on span:nth-child(7)  { transition-delay: 220ms; }
.m-cursor-label.is-on span:nth-child(8)  { transition-delay: 250ms; }
.m-cursor-label.is-on span:nth-child(n+9){ transition-delay: 280ms; }

/* ----------------------------------------------------------------------------
   STACKING CARDS — pinned sticky cards that pile up on scroll
   ---------------------------------------------------------------------------- */
.m-stack {
  position: relative;
  padding: 0 40px;
  max-width: 1400px;
  margin: 0 auto;
}
.m-stack-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding-bottom: 64px;
}
.m-stack-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 25vh;
}
.m-stack-card {
  position: sticky;
  top: 16vh;
  height: 70vh;
  min-height: 520px;
  border-radius: 0;
  overflow: hidden;
  background: var(--surface-alt);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
  transform-origin: center top;
  will-change: transform, opacity, filter;
  transition: transform 600ms cubic-bezier(0.2,0.7,0.1,1),
              filter 600ms cubic-bezier(0.2,0.7,0.1,1),
              opacity 600ms ease;
  box-shadow: 0 -1px 0 var(--border), 0 -24px 48px -24px rgba(11,78,82,0.18);
}
.m-stack-card-visual {
  position: relative;
  overflow: hidden;
}
.m-stack-card-visual .tp-stage {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 48px;
  background: transparent;
}
.m-stack-card-body {
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 64px 64px 64px 56px;
  position: relative;
  background: var(--surface);
}
.m-stack-card-chapter {
  font-family: var(--font-heading);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brand-accent-text, #76552E);
  margin-bottom: 28px;
  display: inline-flex; align-items: center; gap: 14px;
}
.m-stack-card-chapter::before {
  content: ''; width: 28px; height: 1px; background: var(--brand-accent);
}
.m-stack-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--brand-primary);
  margin-bottom: 28px;
}
.m-stack-card-title em { font-style: normal; font-family: var(--font-heading); font-weight: 300; font-size: 0.7em; letter-spacing: -0.01em; display: block; margin-top: 4px; }
.m-stack-card-body p {
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.7;
  color: var(--text-muted);
  font-weight: 300;
  max-width: 460px;
  margin-bottom: 32px;
}
.m-stack-card-meta {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-heading);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-primary);
  margin-top: auto;
}
.m-stack-card-meta-rule { flex: 1; height: 1px; background: var(--brand-primary); opacity: 0.25; }
.m-stack-index {
  position: absolute;
  top: 36px; right: 36px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: 1;
  color: var(--brand-primary);
  opacity: 0.65;
  letter-spacing: -0.03em;
}
@media (max-width: 1024px) {
  .m-stack-card { grid-template-columns: 1fr; }
  .m-stack-card-visual { display: none; }
  .m-stack-card-body { padding: 48px 32px; }
}
@media (max-width: 640px) {
  .m-stack { padding: 0 20px; }
  .m-stack-card { height: auto; min-height: 0; position: relative; top: 0; }
  .m-stack-list { padding-bottom: 0; gap: 16px; }
}

/* ----------------------------------------------------------------------------
   FOOTER PARALLAX REVEAL — main slides up to expose pinned footer below
   ---------------------------------------------------------------------------- */
html.m-footer-pin body {
  background: var(--brand-primary);
}
html.m-footer-pin > body > main {
  position: relative;
  z-index: 2;
  background: var(--surface, #fff);
  margin-bottom: var(--m-footer-h, 540px);
}
html.m-footer-pin > body > footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  width: 100%;
}
/* When motion-loading: keep footer hidden underneath */
html.motion-loading > body > footer { visibility: hidden; }

/* Subtle parallax: footer content rises into view */
html.m-footer-pin > body > footer .footer-inner {
  transform: translate3d(0, var(--m-footer-parallax, 0px), 0);
  transition: transform 80ms linear;
  will-change: transform;
}

@media (max-width: 768px) {
  /* Mobile: switch back to flow footer; fixed footer is awkward with mobile chrome */
  html.m-footer-pin > body > main { margin-bottom: 0; }
  html.m-footer-pin > body > footer { position: static; }
  html.m-footer-pin > body > footer .footer-inner { transform: none; }
}

/* ----------------------------------------------------------------------------
   MARQUEE — speed-up on hover (existing strip uses .marquee-track)
   ---------------------------------------------------------------------------- */
.marquee-strip:hover .marquee-track { animation-duration: 18s; }
.marquee-track { transition: animation-duration 600ms; }

/* ----------------------------------------------------------------------------
   STAT COUNTER — keep stable width while counting
   ---------------------------------------------------------------------------- */
.m-counter { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------------------
   PIN / SCROLL HINTS — show after intro
   ---------------------------------------------------------------------------- */
.m-scroll-hint {
  position: fixed;
  right: 32px; bottom: 32px;
  z-index: 50;
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brand-primary, #0B4E52);
  display: flex; align-items: center; gap: 12px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms var(--ease-emphasized);
  pointer-events: none;
}
.m-scroll-hint.is-in { opacity: 0.7; transform: translateY(0); }
.m-scroll-hint.is-out { opacity: 0; transform: translateY(-20px); }
.m-scroll-hint-rule {
  width: 32px; height: 1px;
  background: currentColor;
  animation: m-scroll-pulse 2s ease-in-out infinite;
}
@keyframes m-scroll-pulse {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50%      { transform: scaleX(0.4); opacity: 0.4; }
}

/* ----------------------------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.motion-reduced .m-word-inner { transform: none !important; opacity: 1 !important; transition: none !important; }
  html.motion-reduced .m-fade { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.motion-reduced .m-mask { clip-path: inset(0) !important; -webkit-clip-path: inset(0) !important; }
  html.motion-reduced .m-mask .m-mask-inner { transform: none !important; }
  html.motion-reduced .m-loader,
  html.motion-reduced .m-curtain { display: none !important; }
}

/* ----------------------------------------------------------------------------
   MOBILE — disable cursor and heavy parallax
   ---------------------------------------------------------------------------- */
@media (max-width: 768px), (pointer: coarse) {
  html.m-cursor-on { cursor: auto; }
  html.m-cursor-on body { cursor: auto; }
  .m-cursor { display: none !important; }
  .m-magnetic { transform: none !important; }
  .m-loader-center { padding: 0 8px; gap: 12px; }
  .m-loader-tagline { display: none; }
  .m-loader-content { padding: 24px; }
  .m-loader-bar { left: 24px; right: 24px; bottom: 64px; }
}