/* HP Watch V6.6 — Luxury Motion Layer
   Isolated visual layer: no business logic, no product/admin data changes. */
:root {
  --v66-emerald: #5fae91;
  --v66-emerald-soft: rgba(95, 174, 145, .22);
  --v66-cyan: #69c8c4;
  --v66-ink: #06100d;
  --v66-white: #f5faf7;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* top progress */
.v66-scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  height: 2px;
  width: 0;
  z-index: 9999;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--v66-emerald), var(--v66-cyan), #e8fff7);
  box-shadow: 0 0 12px rgba(105, 200, 196, .55);
  transition: width 80ms linear;
}

/* ambient light, restrained and dark */
.v66-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .55;
  mix-blend-mode: screen;
}
.v66-ambient::before,
.v66-ambient::after {
  content: "";
  position: absolute;
  width: 42vw;
  height: 42vw;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .08;
  animation: v66AmbientDrift 16s ease-in-out infinite alternate;
}
.v66-ambient::before { background: #1a9472; left: -16vw; top: 18vh; }
.v66-ambient::after { background: #33a6a2; right: -18vw; top: 56vh; animation-delay: -7s; }
@keyframes v66AmbientDrift {
  to { transform: translate3d(7vw, -4vh, 0) scale(1.12); }
}

/* opening cinematic */
.v66-intro-curtain {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: #020806;
  opacity: 1;
  transition: opacity .65s ease .15s, visibility .65s ease .15s;
}
.v66-intro-curtain.is-gone { opacity: 0; visibility: hidden; }
.v66-intro-mark {
  display: flex;
  gap: 11px;
  align-items: baseline;
  font-family: Georgia, serif;
  letter-spacing: .16em;
  color: #f4fbf8;
  transform: translateY(10px);
  animation: v66IntroMark .75s cubic-bezier(.2,.8,.2,1) forwards;
}
.v66-intro-mark strong { font-size: clamp(26px, 4vw, 52px); font-weight: 500; }
.v66-intro-mark span { font: 700 11px/1 system-ui,sans-serif; color: #72bda4; letter-spacing: .32em; }
@keyframes v66IntroMark { to { transform: translateY(0); letter-spacing: .08em; } }

/* header glass + moving highlight */
.site-header {
  transition: background-color .35s ease, backdrop-filter .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease !important;
}
.site-header.scrolled {
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  box-shadow: 0 14px 40px rgba(0,0,0,.26);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(95,174,145,.42), transparent);
  transform: scaleX(.25);
  opacity: 0;
  transition: .35s ease;
}
.site-header.scrolled::after { transform: scaleX(1); opacity: 1; }
.desktop-nav a { position: relative; }
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: -10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #73c1a7, transparent);
  transform: scaleX(0);
  transition: transform .28s ease;
}
.desktop-nav a:hover::after { transform: scaleX(1); }

/* hero layered depth */
.hero-lux { isolation: isolate; perspective: 1100px; }
.hero-media { will-change: transform; transition: transform .18s linear; }
.hero-shade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--v66-pointer-x, 68%) var(--v66-pointer-y, 42%), rgba(84,181,151,.14), transparent 26%);
  opacity: .9;
  transition: opacity .25s ease;
}
.hero-copy-block > * {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  animation: v66HeroIn .8s cubic-bezier(.16,.8,.2,1) forwards;
}
.hero-copy-block > :nth-child(1){ animation-delay:.16s; }
.hero-copy-block > :nth-child(2){ animation-delay:.26s; }
.hero-copy-block > :nth-child(3){ animation-delay:.37s; }
.hero-copy-block > :nth-child(4){ animation-delay:.48s; }
@keyframes v66HeroIn { to { opacity:1; transform:none; } }
.hero-facts > div { transition: transform .35s ease, border-color .35s ease, background-color .35s ease; }
.hero-facts > div:hover { transform: translateY(-5px); border-color: rgba(100,190,160,.42); background: rgba(8,35,28,.25); }

/* elegant light pass on primary actions */
.lux-btn, .header-contact-button, .text-link { position: relative; overflow: hidden; }
.lux-btn::after, .header-contact-button::after {
  content: "";
  position: absolute;
  top: -70%; bottom: -70%;
  width: 42px;
  left: -80px;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transition: left .6s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.lux-btn:hover::after, .header-contact-button:hover::after { left: calc(100% + 50px); }

/* reveal system */
.v66-reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0) scale(.985);
  filter: blur(4px);
  transition: opacity .72s cubic-bezier(.18,.76,.24,1), transform .72s cubic-bezier(.18,.76,.24,1), filter .72s ease;
  transition-delay: var(--v66-delay, 0ms);
}
.v66-reveal.v66-in { opacity:1; transform:none; filter:none; }
.v66-reveal-left { transform: translate3d(-34px, 0, 0); }
.v66-reveal-right { transform: translate3d(34px, 0, 0); }
.v66-reveal-left.v66-in, .v66-reveal-right.v66-in { transform:none; }

/* product cards: 3D tilt + emerald sheen */
.product-card,
.arrival-card,
.gender-card,
.trust-grid article {
  transform-style: preserve-3d;
  will-change: transform;
}
.product-card {
  position: relative;
  transition: transform .38s cubic-bezier(.16,.78,.2,1), box-shadow .38s ease, border-color .38s ease;
}
.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle at var(--v66-card-x, 50%) var(--v66-card-y, 35%), rgba(105,200,196,.17), transparent 34%);
  opacity: 0;
  transition: opacity .3s ease;
}
.product-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(125deg, transparent 18%, rgba(111,205,174,.45), transparent 42%) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
}
.product-card:hover::before, .product-card:hover::after { opacity:1; }
.product-card:hover { box-shadow: 0 24px 55px rgba(0,0,0,.2), 0 0 0 1px rgba(96,177,149,.12); }
.product-card img, .arrival-card img { transition: transform .65s cubic-bezier(.16,.76,.2,1), filter .5s ease; }
.product-card:hover img, .arrival-card:hover img { transform: scale(1.055); filter: contrast(1.03) saturate(1.04); }

/* section headings acquire a subtle moving highlight */
.section-heading h2,
.about-copy h2,
.contact-copy h2 {
  background-image: linear-gradient(100deg, currentColor 0%, currentColor 38%, #8fd6be 49%, currentColor 60%, currentColor 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}
.v66-in .section-heading h2,
.section-heading.v66-in h2 { animation: v66TitleSweep 2.2s ease .3s 1; }
@keyframes v66TitleSweep { from { background-position: 100% 0; } to { background-position: -90% 0; } }

/* editorial break depth */
.editorial-break-inner strong {
  text-shadow: 0 0 45px rgba(92,181,151,.12);
  transition: letter-spacing .7s cubic-bezier(.16,.8,.2,1), text-shadow .7s ease;
}
.editorial-break.v66-in .editorial-break-inner strong { letter-spacing: .04em; text-shadow: 0 0 55px rgba(92,181,151,.23); }

/* contact area pulse, low frequency */
.contact-lux .lux-btn-primary,
.header-contact-button { box-shadow: 0 0 0 rgba(89,179,148,0); }
.v66-pulse { animation: v66Pulse 3.8s ease-in-out infinite; }
@keyframes v66Pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(95,174,145,0); }
  45% { box-shadow: 0 0 0 7px rgba(95,174,145,.07), 0 0 24px rgba(95,174,145,.11); }
}

/* pointer glow desktop only */
.v66-cursor-glow {
  position: fixed;
  width: 280px; height: 280px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(81,177,148,.065), rgba(81,177,148,0) 68%);
  opacity: 0;
  transition: opacity .25s ease;
}
body.v66-pointer-active .v66-cursor-glow { opacity:1; }

/* ripple for touch */
.v66-ripple-host { position: relative; overflow: hidden !important; }
.v66-ripple-dot {
  position:absolute;
  width:12px; height:12px;
  margin:-6px 0 0 -6px;
  border-radius:50%;
  pointer-events:none;
  background:rgba(126,218,190,.22);
  transform:scale(0);
  animation:v66Ripple .55s ease-out forwards;
}
@keyframes v66Ripple { to { transform:scale(18); opacity:0; } }

/* mobile: richer but GPU-safe */
@media (max-width: 820px) {
  .v66-ambient { opacity:.34; }
  .v66-ambient::before,.v66-ambient::after { filter:blur(70px); width:70vw; height:70vw; }
  .hero-media { animation: v66MobileHeroBreath 9s ease-in-out infinite alternate; }
  @keyframes v66MobileHeroBreath { to { transform: scale(1.035) translate3d(-.7%, -.4%, 0); } }
  .v66-reveal { transform: translate3d(0,22px,0) scale(.99); filter:blur(2px); transition-duration:.58s; }
  .v66-reveal.v66-in { transform:none; filter:none; }
  .product-card:active,.arrival-card:active,.gender-card:active { transform:scale(.985) !important; transition-duration:.12s; }
  .product-card::before { opacity:.55; background:linear-gradient(150deg,rgba(98,190,161,.08),transparent 38%); }
  .site-header.scrolled { backdrop-filter: blur(12px) saturate(115%); -webkit-backdrop-filter: blur(12px) saturate(115%); }
  .v66-cursor-glow { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .v66-reveal { opacity:1 !important; transform:none !important; filter:none !important; }
  .v66-intro-curtain { display:none !important; }
}
