/* Quiet-technology interaction layer */
:root { --page-progress: 0%; --pointer-x: 50%; --pointer-y: 35%; }

.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 220;
  width: var(--page-progress);
  height: 3px;
  background: linear-gradient(90deg, #09aab0, #65d4c7, #a99bef, #f1c75b);
  box-shadow: 0 0 16px rgba(9,170,176,.35);
  pointer-events: none;
}

.site-header {
  transition: height .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, background-color .35s ease;
}

.site-header.is-scrolled {
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 35px rgba(8,45,85,.08);
  backdrop-filter: blur(18px) saturate(1.2);
}

.button,.header-cta,.filter,.rail-arrow,.modal-arrow,.modal-close {
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, background-color .28s ease, color .28s ease;
}

.button:hover,.header-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(8,45,85,.18); }
.button:active,.header-cta:active { transform: translateY(0) scale(.98); }

.hero-art,.modal-color {
  background-image: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255,255,255,.7), rgba(255,255,255,0) 34%);
}

.details-visual {
  background: linear-gradient(145deg,#c8f0ec 0%,#e9faf8 58%,#f7fcfc 100%);
}

.details-visual::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 72%;
  z-index: 1;
  width: min(35vw,460px);
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(8,45,85,.09);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.82) 34%,
    rgba(104,219,207,.24) 58%,
    rgba(104,219,207,0) 73%);
  box-shadow: 0 0 70px rgba(255,255,255,.42);
  pointer-events: none;
}

.details-visual .device-callout {
  z-index: 3;
  color: var(--navy);
  text-shadow: 0 1px 0 rgba(255,255,255,.32);
}

.details-visual .device-callout strong { color: var(--navy); }
.details-visual .device-callout p { color: #35566d; }

.details-visual > img {
  z-index: 4;
  filter:
    drop-shadow(0 0 2px rgba(8,45,85,.28))
    drop-shadow(0 28px 22px rgba(8,45,85,.27))
    drop-shadow(0 7px 5px rgba(8,45,85,.14));
}

.hero-bottle img { transition: transform .18s ease-out, filter .35s ease; transform: translate(var(--bottle-x,0),var(--bottle-y,0)); }
.hero-art:hover .hero-bottle img { filter: drop-shadow(0 30px 22px rgba(9,44,69,.25)) drop-shadow(0 7px 5px rgba(9,44,69,.12)); }

.js .reveal-ready {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.js .reveal-ready.reveal-in { opacity: 1; transform: translateY(0); }
.js .reveal-ready:nth-child(2) { transition-delay: .07s; }
.js .reveal-ready:nth-child(3) { transition-delay: .14s; }
.js .reveal-ready:nth-child(4) { transition-delay: .21s; }

.product-card,.portfolio-card,.principle-card,.lead-options a {
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, filter .35s ease;
}
.product-card:hover,.principle-card:hover,.lead-options a:hover {
  transform: translateY(-7px);
  box-shadow: 0 24px 50px rgba(8,45,85,.12);
}
.portfolio-card:hover { box-shadow: 0 28px 55px rgba(8,45,85,.14); }
.js .product-card.reveal-ready.reveal-in:hover,
.js .portfolio-card.reveal-ready.reveal-in:hover,
.js .principle-card.reveal-ready.reveal-in:hover,
.js .lead-options a.reveal-ready.reveal-in:hover { transform: translateY(-7px); }
.portfolio-card:hover img,.product-card:hover img { transform: translateY(-6px) scale(1.025); }
.portfolio-card img,.product-card img { transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .35s ease; }

.quick-dock {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: .55rem;
}
.quick-dock nav {
  display: grid;
  width: 210px;
  overflow: hidden;
  border: 1px solid rgba(8,45,85,.1);
  border-radius: 16px;
  padding: .45rem;
  background: rgba(255,255,255,.94);
  box-shadow: 0 22px 60px rgba(8,45,85,.18);
  backdrop-filter: blur(20px);
  transform: translateY(10px) scale(.97);
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.quick-dock.open nav { opacity: 1; visibility: visible; transform: none; }
.quick-dock nav a { padding: .75rem .8rem; border-radius: 10px; color: var(--navy); font-size: .82rem; font-weight: 700; }
.quick-dock nav a:hover { background: #eef7f8; }
.quick-dock-toggle {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: .65rem;
  border: 0;
  border-radius: 999px;
  padding: 0 1rem;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 14px 34px rgba(8,45,85,.25);
  font: 800 .78rem Manrope,sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
}
.quick-dock-toggle i { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: var(--teal); font-style: normal; transition: transform .25s ease; }
.quick-dock.open .quick-dock-toggle i { transform: rotate(45deg); }

.page-wash {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--navy);
  pointer-events: none;
  transform: translateY(100%);
  transition: transform .42s cubic-bezier(.65,0,.35,1);
}
.page-leaving .page-wash { transform: translateY(0); }

.product-modal,.modal-backdrop { will-change: transform,opacity; }
.modal-color img { transition: opacity .18s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.product-modal.is-switching .modal-color img { opacity: .25; transform: translateX(8px) scale(.97); }

@media (max-width:700px) {
  .details-visual::before { left: 70%; width: 250px; }
  .quick-dock { right: .75rem; bottom: max(.75rem,env(safe-area-inset-bottom)); }
  .quick-dock-toggle { min-height: 44px; padding: 0 .85rem; }
  .quick-dock nav { width: 190px; }
  .product-card:hover,.principle-card:hover,.lead-options a:hover,.portfolio-card:hover,
  .js .product-card.reveal-ready.reveal-in:hover,.js .portfolio-card.reveal-ready.reveal-in:hover,
  .js .principle-card.reveal-ready.reveal-in:hover,.js .lead-options a.reveal-ready.reveal-in:hover { transform: none; box-shadow: none; }
  .portfolio-card:hover img,.product-card:hover img { transform: none; }
}

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