/* Retail beauty story: scroll turns a subjective image reel into a measured
   architectural conclusion. The base state is the complete static result;
   JavaScript only expands it into the authored scroll sequence. */
.ca-beauty-story {
  --beauty-size: min(calc(50vw - 18px), calc(100svh - 126px));
  --beauty-paper: #d3d0c8;
  --beauty-cream: #fdefd6;
  --beauty-ink: #111213;
  --beauty-intro: 0;
  --beauty-final: 1;
  --beauty-intro-shift: -22px;
  --beauty-final-shift: 0px;
  --beauty-intro-blur: 4px;
  --beauty-final-blur: 0px;
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  margin-top: var(--ca-story-seam);
  background: var(--ca-story-black);
}
.ca-beauty-story.is-enhanced { height: 560svh; }
.ca-beauty-story__sticky {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 86px clamp(5px, 2vw, 28px) 24px;
}
.ca-beauty-story.is-enhanced .ca-beauty-story__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
}
.ca-beauty-story__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, var(--beauty-size)));
  gap: var(--ca-story-seam);
  justify-content: center;
  align-items: center;
}
.ca-beauty-story__visual,
.ca-beauty-story__copy {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
}
.ca-beauty-story__reel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--beauty-paper);
}
.ca-beauty-story__reel::after {
  content: "";
  position: absolute;
  z-index: 20;
  inset: 0;
  border: 1px solid rgb(17 18 19 / .12);
  pointer-events: none;
}
.ca-beauty-card {
  position: absolute;
  z-index: 5;
  top: 6%;
  width: 16.4%;
  height: 16.4%;
  margin: 0;
  overflow: hidden;
  background: #d8d5cd;
  box-shadow: 0 14px 32px rgb(25 22 18 / .16);
}
.ca-beauty-card:nth-of-type(1) { left: 5%; }
.ca-beauty-card:nth-of-type(2) { left: 23.4%; }
.ca-beauty-card:nth-of-type(3) { left: 41.8%; }
.ca-beauty-card:nth-of-type(4) { left: 60.2%; }
.ca-beauty-card:nth-of-type(5) { left: 78.6%; }
.ca-beauty-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #d8d5cd;
}
.ca-beauty-story.is-enhanced .ca-beauty-card {
  left: 50%;
  top: 50%;
  width: 72%;
  height: 72%;
  will-change: transform, opacity, filter;
}
.ca-beauty-story__conclusion {
  position: absolute;
  z-index: 30;
  left: 6%;
  right: 6%;
  top: 31%;
  margin: 0;
  color: var(--beauty-ink);
  font: 500 clamp(30px, 4vw, 62px)/.98 var(--font-body);
  letter-spacing: -.04em;
  text-wrap: balance;
}
.ca-beauty-story.is-enhanced .ca-beauty-story__conclusion {
  opacity: var(--beauty-final);
  filter: blur(var(--beauty-final-blur));
  transform: translateY(var(--beauty-final-shift));
  will-change: opacity, transform, filter;
}
.ca-beauty-story__counter {
  position: absolute;
  z-index: 31;
  left: 6%;
  right: 6%;
  bottom: 5%;
  display: none;
  grid-template-columns: auto minmax(18px, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: rgb(17 18 19 / .58);
  font: 500 10px/1 var(--font-body);
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
.ca-beauty-story.is-enhanced .ca-beauty-story__counter {
  display: grid;
  opacity: calc(1 - var(--beauty-final));
}
.ca-beauty-story__counter i {
  height: 1px;
  background: currentColor;
}
.ca-beauty-story__copy {
  background: var(--beauty-cream);
  color: var(--beauty-ink);
}
.ca-beauty-story__intro,
.ca-beauty-story__analysis {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(30px, 4vw, 62px);
}
.ca-beauty-story__intro { opacity: 0; }
.ca-beauty-story.is-enhanced .ca-beauty-story__intro {
  opacity: var(--beauty-intro);
  filter: blur(var(--beauty-intro-blur));
  transform: translateY(var(--beauty-intro-shift));
  will-change: opacity, transform, filter;
}
.ca-beauty-story__intro h3 {
  max-width: 9.5ch;
  margin: 0;
  color: var(--beauty-ink);
  font: 500 clamp(38px, 4.6vw, 72px)/.96 var(--font-body);
  letter-spacing: -.04em;
  text-wrap: balance;
}
.ca-beauty-story__intro h3::before {
  content: "";
  width: 10px;
  height: 10px;
  display: block;
  margin-bottom: clamp(22px, 3vw, 44px);
  background: var(--accent, #ef2b24);
  border-radius: 50%;
}
.ca-beauty-story__analysis {
  justify-content: flex-end;
  gap: clamp(18px, 2vw, 30px);
}
.ca-beauty-story.is-enhanced .ca-beauty-story__analysis {
  opacity: var(--beauty-final);
  filter: blur(var(--beauty-final-blur));
  transform: translateY(var(--beauty-final-shift));
  will-change: opacity, transform, filter;
}
.ca-beauty-story__analysis p {
  max-width: 23ch;
  margin: 0;
  color: var(--beauty-ink);
  font: 500 clamp(19px, 2.05vw, 32px)/1.17 var(--font-body);
  letter-spacing: -.032em;
}
.ca-beauty-story__analysis p + p { color: rgb(17 18 19 / .7); }
.ca-beauty-glyph {
  width: 1.42em;
  height: 1.42em;
  display: inline-grid;
  place-items: center;
  margin-inline: .06em;
  vertical-align: -.3em;
  background: #fff8e9;
  box-shadow: 0 .22em .5em rgb(44 33 17 / .12);
}
.ca-beauty-glyph svg { width: 82%; height: 82%; overflow: visible; }
.ca-beauty-glyph--heat { background: #f4d6cf; }
.ca-beauty-glyph--heat rect { fill: #ef6c73; }
.ca-beauty-glyph--heat rect:nth-child(1),
.ca-beauty-glyph--heat rect:nth-child(6),
.ca-beauty-glyph--heat rect:nth-child(8) { opacity: .22; }
.ca-beauty-glyph--heat rect:nth-child(2),
.ca-beauty-glyph--heat rect:nth-child(4),
.ca-beauty-glyph--heat rect:nth-child(9) { opacity: .5; }
.ca-beauty-glyph--heat rect:nth-child(3),
.ca-beauty-glyph--heat rect:nth-child(7) { opacity: .72; }
.ca-beauty-glyph--heat rect:nth-child(5) { opacity: 1; }
.ca-beauty-glyph__pulse {
  fill: none;
  stroke: #ef2b24;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
}
.ca-beauty-glyph--yield { background: #dce5f2; }
.ca-beauty-glyph--yield > svg > path:first-child { fill: #243ccc; opacity: .2; }
.ca-beauty-glyph__yield-line {
  fill: none;
  stroke: #243ccc;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: bevel;
  stroke-dasharray: 42;
  stroke-dashoffset: 0;
}
.ca-beauty-glyph--analysis { background: #202124; }
.ca-beauty-glyph--analysis circle { fill: #fdefd6; }
.ca-beauty-glyph__analysis-line {
  fill: none;
  stroke: #ef6c73;
  stroke-width: 2;
  stroke-linejoin: bevel;
  stroke-dasharray: 46;
  stroke-dashoffset: 0;
}
.ca-beauty-glyph__scan { stroke: #9babeb; stroke-width: 1.4; opacity: .75; }
.ca-beauty-story.is-in-view:not(.is-paused) .ca-beauty-glyph__pulse {
  animation: ca-beauty-heat-pulse 1.9s cubic-bezier(.16, 1, .3, 1) infinite;
}
.ca-beauty-story.is-in-view:not(.is-paused) .ca-beauty-glyph__yield-line {
  animation: ca-beauty-yield-draw 2.8s cubic-bezier(.16, 1, .3, 1) infinite;
}
.ca-beauty-story.is-in-view:not(.is-paused) .ca-beauty-glyph__analysis-line {
  animation: ca-beauty-analysis-draw 2.6s cubic-bezier(.16, 1, .3, 1) infinite;
}
.ca-beauty-story.is-in-view:not(.is-paused) .ca-beauty-glyph__scan {
  animation: ca-beauty-scan 2.6s linear infinite;
}
@keyframes ca-beauty-heat-pulse {
  0%, 22% { opacity: 0; transform: scale(.45); }
  52% { opacity: .9; transform: scale(1.8); }
  78%, 100% { opacity: 0; transform: scale(2.5); }
}
@keyframes ca-beauty-yield-draw {
  0%, 15% { stroke-dashoffset: 42; opacity: .35; }
  50%, 82% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -42; opacity: .25; }
}
@keyframes ca-beauty-analysis-draw {
  0%, 16% { stroke-dashoffset: 46; opacity: .3; }
  52%, 84% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -46; opacity: .25; }
}
@keyframes ca-beauty-scan {
  0% { opacity: 0; transform: translateX(0); }
  14%, 74% { opacity: .75; }
  86%, 100% { opacity: 0; transform: translateX(27px); }
}

@media (max-width: 920px) {
  .ca-beauty-story {
    --beauty-size: min(calc(100vw - 28px), calc((100svh - 98px) / 2));
  }
  .ca-beauty-story.is-enhanced { height: 500svh; }
  .ca-beauty-story__sticky { padding: 68px 14px 12px; }
  .ca-beauty-story__grid {
    grid-template-columns: minmax(0, var(--beauty-size));
    grid-template-rows: repeat(2, var(--beauty-size));
  }
  .ca-beauty-story__intro,
  .ca-beauty-story__analysis { padding: clamp(16px, 4vw, 28px); }
  .ca-beauty-story__intro h3 { font-size: clamp(27px, 8.4vw, 48px); }
  .ca-beauty-story__intro h3::before {
    width: 7px;
    height: 7px;
    margin-bottom: clamp(12px, 3vw, 24px);
  }
  .ca-beauty-story__analysis { gap: clamp(9px, 2vw, 16px); }
  .ca-beauty-story__analysis p {
    max-width: 28ch;
    font-size: clamp(11.5px, 3.25vw, 19px);
    line-height: 1.22;
    letter-spacing: -.02em;
  }
  .ca-beauty-story__conclusion {
    top: 30%;
    font-size: clamp(23px, 7.1vw, 42px);
    line-height: .98;
  }
  .ca-beauty-story__counter { bottom: 4%; }
}
@media (max-width: 420px) and (max-height: 700px) {
  .ca-beauty-story {
    --beauty-size: min(calc(100vw - 24px), calc((100svh - 78px) / 2));
  }
  .ca-beauty-story__sticky { padding: 54px 12px 10px; }
  .ca-beauty-story__analysis p { font-size: clamp(10.5px, 3.35vw, 13px); }
  .ca-beauty-story__intro h3 { font-size: clamp(25px, 8vw, 34px); }
  .ca-beauty-story__conclusion { font-size: clamp(21px, 6.8vw, 30px); }
}
@media (prefers-reduced-motion: reduce) {
  .ca-beauty-story,
  .ca-beauty-story.is-enhanced { height: auto; min-height: 100svh; }
  .ca-beauty-story__sticky { position: static; height: auto; }
  .ca-beauty-card,
  .ca-beauty-story__intro,
  .ca-beauty-story__analysis,
  .ca-beauty-story__conclusion,
  .ca-beauty-glyph * { animation: none !important; transition: none !important; }
}