/*
 * Gold Talent Motion Design System — Phase 4
 *
 * This layer only coordinates existing interaction motion. It deliberately
 * avoids layout properties so it can be removed without changing structure.
 */
:root{
  --motion-micro:180ms;
  --motion-standard:360ms;
  --motion-reveal:600ms;
  --motion-media-reveal:1050ms;
  --motion-lighting:800ms;
  --motion-ease-apple:cubic-bezier(.22,1,.36,1);
  --motion-ease-standard:cubic-bezier(.2,0,0,1);
  --motion-reveal-distance:24px;
  --motion-hover-scale:1.025;
  --motion-press-scale:.98;
}

html[data-motion-system="enhanced"] .motion-reveal{
  opacity:0;
  transform:translate3d(0,var(--motion-reveal-distance),0);
  transition:
    opacity var(--motion-reveal) var(--motion-ease-apple) var(--reveal-delay,0ms),
    transform var(--motion-reveal) var(--motion-ease-apple) var(--reveal-delay,0ms);
}

html[data-motion-system="enhanced"] .motion-reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}

html[data-motion-system="enhanced"] :is(.button,.text-button,.add-mini,.product-add,.mobile-enquiry-dock){
  transition-duration:var(--motion-micro);
  transition-timing-function:var(--motion-ease-standard);
}

html[data-motion-system="enhanced"] :is(.button,.text-button,.add-mini,.product-add,.card-gallery-arrow,.product-gallery-thumb):active{
  transform:scale(var(--motion-press-scale));
}

html[data-motion-system="enhanced"] :is(.product-card-track,.product-card-slide>img,.hero-product-surface>picture>img){
  transition-timing-function:var(--motion-ease-apple);
}

html[data-motion-system="enhanced"] .collections-nav-item.open .collections-mega-menu{
  animation-duration:var(--motion-micro);
  animation-timing-function:var(--motion-ease-apple);
}

/* Phase 4: product-aware page continuity. Native cross-document View
   Transitions are progressive enhancement; the runtime supplies a fallback. */
@view-transition{
  navigation:auto;
}

html[data-motion-system="enhanced"]::view-transition-old(root){
  animation:motion-page-out 180ms var(--motion-ease-standard) both;
}

html[data-motion-system="enhanced"]::view-transition-new(root){
  animation:motion-page-in 320ms var(--motion-ease-apple) both;
}

html[data-motion-system="enhanced"]::view-transition-group(*){
  animation-duration:520ms;
  animation-timing-function:var(--motion-ease-apple);
}

@keyframes motion-page-out{
  to{opacity:.82;transform:translate3d(0,-4px,0)}
}

@keyframes motion-page-in{
  from{opacity:.72;transform:translate3d(0,6px,0)}
}

/* Product-safe illumination: a one-time exposure lift and restrained ambient
   halo. It never invents bulbs, colours or lighting modes. */
html[data-motion-system="enhanced"] .motion-light-reveal{
  isolation:isolate;
}

html[data-motion-system="enhanced"] .motion-light-reveal::after{
  content:"";
  position:absolute;
  z-index:3;
  inset:-12%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 50% 48%,rgba(248,181,61,.11),rgba(248,181,61,.035) 36%,transparent 68%);
}

html[data-motion-system="enhanced"] .motion-light-reveal.is-light-revealed::after{
  animation:motion-light-halo var(--motion-lighting) var(--motion-ease-apple) both;
}

@keyframes motion-light-halo{
  0%{opacity:0;transform:scale(.96)}
  62%{opacity:.72}
  100%{opacity:.18;transform:scale(1)}
}

/* The maximum movement is set by JavaScript to eight pixels. This wrapper
   motion stays separate from gallery image and shared-element transforms. */
html[data-motion-system="enhanced"] .motion-parallax{
  transform:translate3d(0,var(--motion-parallax-y,0),0);
  transition:transform 160ms linear;
  will-change:transform;
}

html[data-motion-system="enhanced"] .motion-media-reveal{
  opacity:0;
  filter:blur(2.5px) brightness(.94);
  transform:translate3d(0,28px,0) scale(.985);
  transition:
    opacity var(--motion-media-reveal) var(--motion-ease-apple),
    filter var(--motion-media-reveal) var(--motion-ease-apple),
    transform var(--motion-media-reveal) var(--motion-ease-apple);
  will-change:opacity,filter,transform;
}

html[data-motion-system="enhanced"] .motion-media-reveal.is-visible{
  opacity:1;
  filter:blur(0) brightness(1);
  transform:translate3d(0,0,0) scale(1);
  will-change:auto;
}

.hero-written-title .hero-title-line{
  display:block;
  width:max-content;
  max-width:100%;
  will-change:clip-path,opacity;
}

/* Homepage handwriting. Tegaki draws actual pen strokes in their natural
   order; the semantic H1 and a static fallback remain available throughout. */
.hero-written-title{
  line-height:1;
  width:100%;
  max-width:620px;
  min-height:220px;
  position:relative;
}

.hero-handwriting-fallback,
.hero-handwriting-engine{
  width:100%;
}

.hero-handwriting-fallback{
  display:flex;
  flex-direction:column;
  font:italic 500 clamp(3.35rem,7.1vw,6.45rem)/.98 'Playfair Display',Georgia,serif;
  letter-spacing:-.045em;
  color:var(--paper);
}

.hero-handwriting-fallback>span{display:block;white-space:nowrap}
.hero-handwriting-fallback i{font:inherit;color:var(--ember)}

.hero-handwriting-engine{
  display:none;
  font-size:clamp(7.2rem,13.4vw,11.6rem);
  line-height:.78;
  letter-spacing:-.015em;
}

.hero-written-title.is-tegaki-preparing .hero-handwriting-engine,
.hero-written-title.is-tegaki-ready .hero-handwriting-engine{display:block}

.hero-written-title.is-tegaki-preparing .hero-handwriting-engine{visibility:hidden}
.hero-written-title.is-tegaki-ready .hero-handwriting-fallback{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-written-title.is-tegaki-ready.is-ink-visible .hero-handwriting-fallback{display:none}
.hero-written-title.is-tegaki-ready .hero-handwriting-engine{position:relative;z-index:1}

.hero-handwritten-row{
  display:flex;
  align-items:baseline;
  width:max-content;
  max-width:100%;
  white-space:nowrap;
}

.hero-handwritten-row-two{gap:.11em;margin-top:-.05em}

.hero-handwriting-segment{
  display:inline-block;
  flex:0 0 auto;
  width:max-content;
  max-width:100%;
  white-space:nowrap;
  color:var(--paper);
}

.hero-handwriting-season{color:var(--ember);will-change:filter}
.hero-handwriting-season.is-season-glowing{
  z-index:1;
  animation:hero-season-finish-glow 1850ms linear both;
}

@keyframes hero-season-finish-glow{
  0%{filter:drop-shadow(0 0 0 rgba(255,248,226,0)) brightness(1)}
  24%{filter:drop-shadow(0 0 8px rgba(255,248,226,1)) drop-shadow(0 0 25px rgba(255,244,215,.86)) drop-shadow(0 0 42px rgba(255,241,204,.52)) brightness(1.22)}
  55%{filter:drop-shadow(0 0 5px rgba(255,248,226,.62)) drop-shadow(0 0 16px rgba(255,244,215,.42)) brightness(1.09)}
  76%{filter:drop-shadow(0 0 9px rgba(255,248,226,.98)) drop-shadow(0 0 29px rgba(255,244,215,.74)) brightness(1.2)}
  100%{filter:drop-shadow(0 0 14px rgba(255,248,226,0)) brightness(1)}
}

html[data-motion-system="off"] .hero-handwriting-engine{display:none}
html[data-motion-system="off"] .hero-handwriting-fallback{display:flex}
html[data-motion-system="off"] .hero-handwriting-season{animation:none;filter:none}

@media(max-width:720px){
  .hero-written-title{min-height:176px}
  .hero-handwriting-fallback{font-size:clamp(3.1rem,14.6vw,3.65rem)}
  .hero-handwriting-engine{font-size:clamp(6.1rem,27.5vw,7rem)}
  .hero-handwritten-row-two{gap:.08em}
}

/* Compact tablet/small-desktop composition: retain the approved handwriting,
   but bring the featured product into view sooner so the hero is not top-heavy. */
@media(min-width:721px) and (max-width:850px){
  .hero-written-title{min-height:166px}
  .hero-handwriting-engine{font-size:clamp(6.2rem,12vw,10.4rem)}
}

html[data-motion-system="off"] .motion-reveal,
html[data-motion-system="off"] .motion-reveal.is-visible{
  opacity:1;
  transform:none;
  transition:none;
}

html[data-motion-system="off"] .motion-parallax,
html[data-motion-system="off"] .motion-light-reveal{
  transform:none;
  transition:none;
}

html[data-motion-system="off"] .motion-light-reveal::after{
  display:none;
}

@media(prefers-reduced-motion:reduce){
  :root{
    --motion-micro:1ms;
    --motion-standard:1ms;
    --motion-reveal:1ms;
    --motion-lighting:1ms;
    --motion-reveal-distance:0px;
  }

  html[data-motion-system] .motion-reveal,
  html[data-motion-system] .motion-reveal.is-visible{
    opacity:1;
    transform:none;
    transition:none;
  }

  html[data-motion-system] .motion-media-reveal,
  html[data-motion-system] .motion-media-reveal.is-visible{
    opacity:1;
    transform:none;
    transition:none;
  }

  .hero-handwriting-engine{display:none!important}
  .hero-handwriting-fallback{display:flex!important}
  .hero-handwriting-season{animation:none!important;filter:none!important}

  html[data-motion-system] .motion-parallax{
    transform:none!important;
    transition:none;
    will-change:auto;
  }

  html[data-motion-system] .motion-light-reveal::after{
    display:none;
    animation:none;
  }

  html[data-motion-system]::view-transition-old(root),
  html[data-motion-system]::view-transition-new(root),
  html[data-motion-system]::view-transition-group(*){
    animation:none;
  }
}