/* A quiet botanical motion layer. All content remains readable without JavaScript. */
:root {
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", system-ui, sans-serif;
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --serum-white: #fff;
  --serum-black: #000;
  --serum-radius: 48% 52% 55% 45% / 60% 60% 40% 40%;
}
.hero {
  position: relative;
  isolation: isolate;
}
.hero h1 {
  font-size: clamp(3.2rem, 5.6vw, 5.6rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.03;
}
.hero h1 em {
  font-weight: 400;
}
.hero-copy {
  position: relative;
  z-index: 1;
}
h2 {
  font-weight: 500;
  letter-spacing: -0.025em;
}
.brand > span {
  font-weight: 500;
}
.serum-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}
.serum-overlay .serum-cover {
  fill: var(--cream);
}
.serum-mask-base {
  fill: var(--serum-white);
}
.serum-opening {
  fill: var(--serum-black);
  transform-origin: 500px 500px;
  transform: scale(0);
}
.serum-drop {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 22px;
  border-radius: var(--serum-radius);
  background: var(--gold);
  z-index: 6;
  pointer-events: none;
  opacity: 0;
}
.hero.entering .serum-drop {
  animation: serum-fall 730ms var(--ease-soft) both;
}
.hero.entering .serum-opening {
  animation: serum-spread 1120ms 430ms cubic-bezier(0.25, 0.7, 0.25, 1) both;
}
.word-group {
  display: inline-block;
  white-space: nowrap;
}
.hero.entering h1 .word-group {
  animation: hero-words 600ms var(--ease-soft) both;
  animation-delay: calc(1120ms + var(--word-index, 0) * 60ms);
}
.hero.entering .hero-description,
.hero.entering .hero-copy > .button,
.hero.entering .hero-note,
.hero.entering .hero-copy > .eyebrow {
  animation: quiet-arrival 500ms var(--ease-soft) both;
  animation-delay: 1580ms;
}
.hero.entering .hero-copy > .button {
  animation-delay: 1660ms;
}
.hero.entering .hero-note {
  animation-delay: 1720ms;
}
.hero.entering .hero-copy > .eyebrow {
  animation-delay: 1040ms;
}
@keyframes serum-fall {
  0% {
    opacity: 0;
    transform: translate(-50%, -85px) scale(0.06, 0.1);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -60px) scale(0.7, 1.2);
  }
  62% {
    opacity: 1;
    transform: translate(-50%, -7px) scale(0.85, 1.28);
  }
  78% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.45, 0.62);
  }
  90% {
    opacity: 0.75;
    transform: translate(-50%, 0) scale(1.25, 0.85);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 0) scale(2.5, 0.7);
  }
}
@keyframes serum-spread {
  0% {
    transform: scale(0);
    d: path(
      "M500 390 C553 380 593 420 603 469 C625 510 586 558 541 581 C487 612 433 590 406 550 C373 507 394 465 419 438 C439 411 469 401 500 390 Z"
    );
  }
  70% {
    transform: scale(8.8);
    d: path(
      "M500 393 C554 375 605 427 596 471 C620 519 579 570 540 585 C482 602 421 578 403 542 C382 497 400 450 425 429 C450 406 468 406 500 393 Z"
    );
  }
  86% {
    transform: scale(8.5);
  }
  100% {
    transform: scale(9.2);
    d: path(
      "M500 390 C553 380 593 420 603 469 C625 510 586 558 541 581 C487 612 433 590 406 550 C373 507 394 465 419 438 C439 411 469 401 500 390 Z"
    );
  }
}
@keyframes hero-words {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}
@keyframes quiet-arrival {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hero-divider {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 27px;
  z-index: 2;
  pointer-events: none;
}
.hero-divider .wave-back {
  fill: var(--sage);
  opacity: 0.17;
}
.hero-divider .wave-front {
  fill: var(--cream);
}
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--ink-soft);
  opacity: 0.65;
  transition: opacity 250ms var(--ease-soft);
  pointer-events: none;
}
.scroll-cue svg {
  width: 14px;
  height: 14px;
  animation: cue-breathe 2.4s ease-in-out infinite;
}
.hero-past .scroll-cue {
  opacity: 0;
}
.hero.entering .scroll-cue {
  opacity: 0;
}
@keyframes cue-breathe {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}
.heading-reveal .word-group {
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition:
    opacity 520ms var(--ease-soft),
    transform 520ms var(--ease-soft);
  transition-delay: calc(var(--word-index, 0) * 60ms);
}
.heading-reveal.visible .word-group {
  opacity: 1;
  transform: none;
}
.reveal {
  transform: none;
  transition: opacity 650ms var(--ease-soft);
}

/* Cascading fan-in for grids/carousels, ported from the reference reel's stacked-card drop:
   cards settle in with a slight rotation and stagger rather than arriving as one flat block. */
.cascade-grid > * {
  opacity: 0;
  transform: translateY(26px) scale(0.94) rotate(var(--cascade-rot, 0deg));
  transition:
    opacity 640ms var(--ease-soft),
    transform 640ms var(--ease-soft);
  transition-delay: calc(var(--cascade-index, 0) * 70ms);
}
.cascade-grid.visible > * {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .cascade-grid > * {
    transition: none;
  }
}

/* Gentle bob for floating badges/chips — the reference reel's chips hover and drift in place. */
.badge,
.hero-fan-chip {
  animation: badge-bob 4.6s ease-in-out infinite;
}
.hero-fan-chip.chip-left {
  animation-delay: 0.3s;
}
.hero-fan-chip.chip-right {
  animation-delay: 1.1s;
}
@keyframes badge-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* Hero fan-in: the deck of product cards drops and settles with a stagger, rotated per card,
   echoing the reference reel's stacked-card entrance. Chips float in just after. */
.hero-fan-card {
  opacity: 0;
  transform: rotate(var(--fan-rot, 0deg)) translateY(46px) scale(0.85);
}
.hero-fan-card:nth-child(3) {
  transform: rotate(var(--fan-rot, 0deg)) translateY(30px) scale(0.85);
}
.hero.entering .hero-fan-card {
  animation: fan-drop 720ms var(--ease-soft) both;
  animation-delay: calc(1120ms + var(--fan-index, 0) * 80ms);
}
.hero:not(.entering) .hero-fan-card {
  opacity: 1;
}
@keyframes fan-drop {
  from {
    opacity: 0;
    transform: rotate(var(--fan-rot, 0deg)) translateY(46px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: rotate(var(--fan-rot, 0deg)) translateY(0) scale(1);
  }
}
.hero-fan-card:nth-child(3).hero-fan-card {
}
.hero-fan-chip {
  opacity: 0;
  transform: translateY(10px) scale(0.9);
}
.hero.entering .hero-fan-chip {
  animation: chip-pop 520ms var(--ease-soft) both;
}
.hero.entering .hero-fan-chip.chip-left {
  animation-delay: 1780ms;
}
.hero.entering .hero-fan-chip.chip-right {
  animation-delay: 1860ms;
}
.hero:not(.entering) .hero-fan-chip {
  opacity: 1;
  transform: none;
}
@keyframes chip-pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Scroll-linked hero parallax: the fan eases back slightly as the hero scrolls past, echoing the
   reference reel's pinned-hero scale-down transition into the next section. */
.hero-fan {
  will-change: transform;
  transform: scale(calc(1 - var(--hero-scroll, 0) * 0.06))
    translateY(calc(var(--hero-scroll, 0) * 16px));
}

.botanical-accent {
  display: block;
  width: 58px;
  height: 38px;
  margin-bottom: 18px;
  stroke: var(--sage);
  stroke-width: 1.15;
  fill: none;
  pointer-events: none;
}
.values-section .botanical-accent {
  margin-left: auto;
  margin-right: auto;
}
.story-copy .botanical-accent {
  stroke: var(--clay-deep);
  opacity: 0.65;
}
.essence-particle {
  position: fixed;
  z-index: 25;
  width: var(--particle-size, 8px);
  height: var(--particle-size, 8px);
  pointer-events: none;
  color: var(--gold);
  opacity: 0;
  animation: essence-drift 900ms var(--ease-soft) forwards;
}
.essence-particle.dot {
  background: var(--gold);
  border-radius: var(--radius-pill);
  width: 6px;
  height: 6px;
}
.essence-particle svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}
@keyframes essence-drift {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0);
  }
  15% {
    opacity: 0.65;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--drift-x, 8px)), -38px) rotate(18deg);
  }
}
.product-card {
  transition:
    transform 260ms var(--ease-soft),
    box-shadow 260ms var(--ease-soft);
}
.product-carousel {
  padding-top: 6px;
  padding-bottom: 14px;
}
.category img {
  transition: transform 400ms var(--ease-soft);
}
.category:hover img {
  transform: scale(1.03);
}
.button,
.icon-button {
  transition:
    background 260ms var(--ease-soft),
    border-color 260ms var(--ease-soft),
    transform 260ms var(--ease-soft);
}

/* Marquee ticker, ported from the reference reel's infinite scrolling banner. Duplicated content
   track drifts left continuously; pauses for reduced motion. */
.values-ribbon {
  overflow: hidden;
  position: relative;
}
.values-ribbon-track {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  animation: ribbon-scroll 26s linear infinite;
}
.values-ribbon:hover .values-ribbon-track {
  animation-play-state: paused;
}
@keyframes ribbon-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .values-ribbon-track {
    animation: none;
  }
}

.product-buy a,
.text-link,
.footer-links a,
.contact-email,
.product-info h3 a,
.email-row button {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size 260ms var(--ease-soft);
  text-decoration: none;
}
.text-link {
  border-bottom-color: var(--line);
}
.product-buy a:hover,
.text-link:hover,
.footer-links a:hover,
.contact-email:hover,
.product-info h3 a:hover,
.email-row button:hover {
  background-size: 100% 1px;
  text-decoration: none;
}
.footer a:hover {
  text-decoration: none;
}
.header nav a:after {
  transition: width 260ms var(--ease-soft);
}
@media (hover: hover) and (pointer: fine) {
  .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px var(--shadow);
  }
  .product-card:hover .product-image img {
    transform: scale(1.03);
  }
}
@media (min-width: 761px) and (max-width: 1050px) {
  .hero h1 {
    font-size: clamp(2.9rem, 5.8vw, 4rem);
  }
}
@media (max-width: 760px) {
  .hero h1 {
    font-size: clamp(3.05rem, 11.7vw, 5rem);
    line-height: 1.03;
  }
  .hero h1 em {
    white-space: normal;
  }
  .hero-copy {
    padding-bottom: 45px;
  }
  .hero-divider {
    height: 21px;
  }
  .scroll-cue {
    left: auto;
    right: 25px;
    bottom: 112px;
    background: var(--cream-glass);
    padding: 7px 10px;
  }
  .botanical-accent {
    width: 47px;
    height: 30px;
    margin-bottom: 13px;
  }
  .values-section .botanical-accent {
    margin-left: 0;
  }
  .essence-particle {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .serum-overlay,
  .serum-drop,
  .essence-particle {
    display: none !important;
  }
  .hero.entering h1 .word-group,
  .hero.entering .hero-description,
  .hero.entering .hero-copy > .button,
  .hero.entering .hero-note,
  .hero.entering .hero-copy > .eyebrow,
  .heading-reveal .word-group,
  .hero-fan-card,
  .hero-fan-chip {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .product-card:hover,
  .category:hover img {
    transform: none;
  }
  .scroll-cue svg {
    animation: none;
  }
  .reveal {
    opacity: 1;
  }
  .badge,
  .hero-fan-chip {
    animation: none;
  }
  .hero-fan {
    transform: none !important;
  }
}

.product-image img {
  transition: transform 260ms var(--ease-soft);
}