/* ZIDKAR motion language — restrained, editorial, and GPU-friendly.
   All enhancements progressively degrade, with full reduced-motion support. */

/* A quiet red reading indicator that tracks the page without layout shifts. */
.scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 100;
  width: 100%;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(232,78,64,.42);
}

/* First impression: editorial type reveals, then the campaign photograph. */
@keyframes zk-letter-rise {
  from { opacity: 0; transform: translate3d(0, 112%, 0); filter: blur(6px); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}
@keyframes zk-soft-rise {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes zk-hero-unmask {
  from { clip-path: inset(0 0 100% 0); transform: scale(1.07); }
  to   { clip-path: inset(0 0 0 0); transform: scale(1); }
}
@keyframes zk-photo-unmask {
  from { transform: scale(1.14); filter: grayscale(.45) contrast(1.13); }
  to   { transform: scale(1); filter: grayscale(.2) contrast(1.07); }
}
@keyframes zk-accent {
  0%, 100% { opacity: 1; }
  50% { opacity: .48; }
}
@keyframes zk-pop-in {
  from { opacity: 0; transform: translateY(15px) scale(.975); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes zk-mobile-menu {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero h1 > span {
    animation: zk-letter-rise .95s cubic-bezier(.17,.75,.24,1) both;
    will-change: transform;
  }
  .hero h1 > span:nth-child(1) { animation-delay: .12s; }
  .hero h1 > span:nth-child(2) { animation-delay: .26s; }
  .hero h1 > span:nth-child(3) { animation-delay: .4s; }
  .hero-copy > .eyebrow { animation: zk-soft-rise .7s .1s both; }
  .hero-lede { animation: zk-soft-rise .8s .64s both; }
  .hero-actions { animation: zk-soft-rise .8s .78s both; }
  .hero-bottom { animation: zk-soft-rise .8s .92s both; }
  .hero-visual { animation: zk-hero-unmask 1.15s .15s cubic-bezier(.19,1,.22,1) both; }
  .hero-visual img { animation: zk-photo-unmask 1.8s .25s ease-out backwards; }
  .hero-photo-number,.hero-photo-badge { animation: zk-soft-rise .65s 1.0s both; }
  .period { animation: zk-accent 4.3s 1.6s ease-in-out infinite; }
  .mobile-nav:not([hidden]) { animation: zk-mobile-menu .32s cubic-bezier(.2,.7,.3,1) both; }
  .mobile-nav:not([hidden]) a { animation: zk-soft-rise .32s both; }
  .mobile-nav:not([hidden]) a:nth-child(2) { animation-delay:.05s; }
  .mobile-nav:not([hidden]) a:nth-child(3) { animation-delay:.10s; }
  .mobile-nav:not([hidden]) a:nth-child(4) { animation-delay:.15s; }
  dialog[open] { animation: zk-pop-in .36s cubic-bezier(.2,.8,.25,1) both; }
  dialog[open]::backdrop { animation: zk-soft-rise .28s ease-out both; }
}

/* Elements are only hidden after JS has installed IntersectionObserver. */
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity .75s cubic-bezier(.2,.7,.3,1),
              transform .85s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-ready [data-reveal="left"] { transform: translate3d(-32px, 0, 0); }
.motion-ready [data-reveal="right"] { transform: translate3d(32px, 0, 0); }
.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.motion-ready .product-card[hidden] { display: none; }

/* Product interactions: gentle lift, real image detail, and an animated CTA. */
@media (hover: hover) and (pointer: fine) {
  .product-card { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
  .product-card:hover { transform: translateY(-7px); }
  .product-image img { transition: transform .85s cubic-bezier(.17,.7,.25,1), filter .6s ease; }
  .product-image:hover img { transform: scale(1.065); filter: contrast(1.045); }
  .detail-main img,.detail-side > button img {
    transition: transform 1s cubic-bezier(.2,.7,.2,1);
  }
  .detail-main:hover img,.detail-side > button:hover img { transform: scale(1.055); }
  .button, .nav-cta { transition: transform .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease; }
  .button-light:hover { box-shadow: 0 10px 28px rgba(232,78,64,.14); }
  .button span, .nav-cta span, .text-link span { display:inline-block;transition:transform .28s cubic-bezier(.2,.8,.2,1); }
  .button:hover span, .nav-cta:hover span, .text-link:hover span { transform: translate(3px,-3px); }
  .text-link:hover span { transform: translateY(4px); }
  .ticker:hover .ticker-inner { animation-play-state: paused; }
  .hero-visual:hover img { transform: scale(1.035) translate3d(var(--photo-x,0px), var(--photo-y,0px), 0); }
}

/* Section underline grows in when titles become visible. */
.section-head h2::after {
  content: '';
  display: block;
  width: 54px;
  height: 3px;
  margin-top: 26px;
  background: var(--red);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform .9s cubic-bezier(.17,.75,.25,1) .23s;
}
.motion-ready .section-head h2::after { transform: scaleX(0); }
.motion-ready .section-head [data-reveal].is-visible h2::after { transform: scaleX(1); }

/* No hover on touch: keep the gallery affordance visible. */
@media (hover: none) {
  .product-image .zoom {
    transform: none;
    left: 9px;right: 9px;bottom: 9px;
    padding: 9px 5px;
    font-size: 8px;
    background: rgba(241,239,233,.94);
  }
}
@media (max-width: 760px) {
  .hero h1 > span { animation-duration: .72s; }
  .hero-visual { animation-delay: .05s; animation-duration: .85s; }
  .hero-visual img { animation-duration: 1.2s; }
  .motion-ready [data-reveal] { transform: translate3d(0, 20px, 0);transition-duration:.65s; }
  .motion-ready [data-reveal="left"],.motion-ready [data-reveal="right"] { transform:translate3d(0,20px,0); }
  .motion-ready [data-reveal].is-visible { transform:translate3d(0,0,0); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .ticker-inner { animation: none !important; }
  .hero *, .mobile-nav *, .mobile-nav, dialog, dialog::backdrop { animation: none !important; }
  [data-reveal], [data-reveal].is-visible, .motion-ready [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .product-card, .product-image img, .button, .text-link span,
  .hero-visual img, .detail-main img, .detail-side > button img,
  .scroll-progress { animation: none !important; transition: none !important; }
  .hero-visual { clip-path: none !important; transform: none !important; }
  .section-head h2::after { transform:scaleX(1);transition:none !important; }
}

/* Accessible menu affordance: the two bars become a close icon. */
@media(max-width:760px) and (prefers-reduced-motion:no-preference) {
  .menu-button span { transform-origin: 50% 50%; transition: transform .28s ease; }
  .menu-button[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .motion-ready .product-card.is-visible:hover { transform: translateY(-7px); }
}

/* === V3: motion you can actually SEE, not merely one-time hover fades === */
.intro-screen{position:fixed;inset:0;z-index:1500;color:#f0eee9;background:#0c0c0e;display:flex;flex-direction:column;justify-content:space-between;padding:30px clamp(20px,5vw,78px);overflow:hidden;isolation:isolate;opacity:1;visibility:visible;transition:opacity .72s cubic-bezier(.2,.75,.2,1), visibility .72s}
.intro-screen.intro-gone{opacity:0;visibility:hidden;pointer-events:none}
.intro-noise{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 70% 35%,rgba(100,100,100,.16),transparent 40%),linear-gradient(130deg,rgba(255,255,255,.025),transparent 35%,rgba(255,255,255,.025));z-index:-1}
.intro-watermark{position:absolute;font:900 clamp(550px,95vw,1600px)/.8 var(--display);letter-spacing:-.12em;color:transparent;-webkit-text-stroke:1px #29292a;left:50%;top:50%;transform:translate(-58%,-52%) rotate(-11deg);z-index:-1;user-select:none}
.intro-top,.intro-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;font:700 10px var(--display);letter-spacing:.22em;color:#909090}
.intro-centre{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;text-align:center;z-index:1}
.intro-symbol{position:relative;font:800 clamp(110px,24vw,270px)/.84 var(--display);letter-spacing:-.14em;animation:zk-intro-symbol 1s cubic-bezier(.12,.86,.17,1) both;text-indent:-.14em}
.intro-slash{position:absolute;left:46%;top:5%;height:89%;width:9%;background:#e84e40;transform:skewX(-25deg) scaleY(0);transform-origin:bottom center;animation:zk-intro-slash .7s .55s cubic-bezier(.16,.85,.25,1) forwards}
.intro-word{font:800 clamp(48px,10vw,144px)/.95 var(--display);letter-spacing:-.095em;animation:zk-intro-word .85s .24s cubic-bezier(.18,.78,.2,1) both}
.intro-red{color:#e84e40}
.intro-divider{width:min(150px,40vw);height:2px;background:#e84e40;animation:zk-intro-divider .7s .72s ease-out both}
.intro-tagline{font:700 clamp(10px,1.3vw,15px) var(--display);letter-spacing:.45em;animation:zk-intro-word .65s .8s ease-out both}
.intro-load{position:absolute;left:0;bottom:0;width:100%;height:4px;background:#282828}
.intro-load span{display:block;width:100%;height:100%;transform-origin:left;background:#e84e40;animation:zk-intro-load 2.4s linear both}
.intro-skip{position:absolute;right:clamp(20px,5vw,78px);bottom:72px;z-index:2;color:#e2e2e2;border:1px solid #555;background:rgba(0,0,0,.25);font:700 10px var(--display);letter-spacing:.12em;padding:11px 14px;cursor:pointer}
.intro-skip:hover{background:#e84e40;color:#141414;border-color:#e84e40}
@keyframes zk-intro-symbol{from{opacity:0;transform:translateY(65px) rotate(-9deg) scale(.7);filter:blur(10px)}to{opacity:1;transform:translateY(0) rotate(0) scale(1);filter:blur(0)}}
@keyframes zk-intro-slash{to{transform:skewX(-25deg) scaleY(1)}}
@keyframes zk-intro-word{from{opacity:0;transform:translateY(35px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes zk-intro-divider{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes zk-intro-load{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.replay-intro{display:inline-flex;align-items:center;gap:10px;border:0;background:transparent;color:#b5b3b0;cursor:pointer;font:700 10px var(--display);letter-spacing:.16em;padding:7px 0;transition:color .25s ease}
.replay-intro:hover,.replay-intro:focus-visible{color:white}
.replay-icon{font-size:20px;color:#e84e40;transition:transform .45s ease}
.replay-intro:hover .replay-icon{transform:rotate(160deg)}
.hero-motion-stamp{position:absolute;z-index:3;bottom:95px;right:24px;display:flex;gap:10px;align-items:center;border:1px solid rgba(255,255,255,.24);background:rgba(0,0,0,.52);backdrop-filter:blur(5px);padding:10px 13px;font:700 9px var(--display);letter-spacing:.11em;color:#eee}
.live-ring{width:7px;height:7px;display:block;border-radius:50%;background:#e84e40;animation:zk-live-pulse 1.7s infinite ease-out}
.live-bars{display:flex;align-items:flex-end;height:13px;gap:2px}
.live-bars i{width:3px;height:8px;display:block;background:#e84e40;animation:zk-equalize .75s infinite ease-in-out alternate}
.live-bars i:nth-child(2){animation-delay:.25s;height:13px}.live-bars i:nth-child(3){animation-delay:.46s;height:6px}
@keyframes zk-live-pulse{0%{box-shadow:0 0 0 0 rgba(232,78,64,.6)}75%,100%{box-shadow:0 0 0 8px rgba(232,78,64,0)}}
@keyframes zk-equalize{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
/* A slow cinematic camera shift that continues after the initial page load */
@keyframes zk-kenburns{0%{transform:scale(1.03) translate3d(-.6%,0,0)}100%{transform:scale(1.12) translate3d(1.1%,-.7%,0)}}
@media(prefers-reduced-motion:no-preference){
 .hero-visual img{animation:zk-kenburns 14s 1.3s ease-in-out infinite alternate}
 .ticker-inner{display:flex;width:max-content;animation:zk-marquee 20s linear infinite;will-change:transform}
 .ticker-inner>span{flex:0 0 auto}
}
@keyframes zk-marquee{to{transform:translateX(-50%)}}
@media(max-width:760px){
 .intro-screen{padding:22px}.intro-top,.intro-bottom{font-size:8px;letter-spacing:.12em}.intro-centre{gap:14px}.intro-tagline{letter-spacing:.23em}.intro-skip{bottom:65px;right:22px}
 .hero-motion-stamp{bottom:84px;right:14px;padding:8px;font-size:8px}
 .hero-bottom{gap:16px}.replay-intro{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
 .intro-screen{display:none!important}
 .hero-visual img{animation:none!important}
 .hero-motion-stamp .live-bars i,.hero-motion-stamp .live-ring{animation:none!important}
}

.intro-screen[hidden]{display:none!important}