.hero [hidden] { display: none; }
.hero-backdrop { position: absolute; inset: 0; }
.hero-actions {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 4px;
  width: min(100%, 400px);
}
.hero-views {
  display: flex;
  align-items: center;
  color: var(--cream);
}
.hero-views button {
  display: grid;
  min-height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  cursor: pointer;
}
.hero-view-arrow { width: 44px; }
.hero-view-arrow svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-view-dot { width: 32px; }
.hero-view-dot::before {
  width: 9px;
  height: 9px;
  border-radius: 9px;
  background: currentColor;
  opacity: .4;
  content: '';
}
.hero-view-dot:hover::before { opacity: .7; }
.hero-view-dot[aria-pressed="true"]::before { width: 27px; opacity: 1; }
.hero-view-arrow:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.hero-views button:focus-visible, .rail-dot:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

.hero[data-hero-slide="rail"] {
  --rail-bloom-left-width: min(10.9cqw, 220px);
  --rail-bloom-right-width: min(12.15cqw, 245px);
  --rail-price-inset: clamp(18px, 7.8cqw, 148px);
  --rail-price-width: clamp(94px, min(12.5cqw, 23svh), 218px);
  grid-template-rows: auto auto auto;
  align-content: center;
  gap: clamp(10px, 1.6svh, 16px);
  min-height: 0;
  aspect-ratio: auto;
  padding: calc(var(--header-height) + var(--header-top) + 28px) 0 clamp(18px, 3svh, 32px);
  isolation: isolate;
  background: #f5efe5;
}
.hero[data-hero-slide="rail"]::before,
.hero[data-hero-slide="rail"]::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  content: '';
}
.hero[data-hero-slide="rail"]::before {
  inset: 56% auto auto 0;
  width: var(--rail-bloom-left-width);
  aspect-ratio: 149 / 437;
  translate: 0 -56%;
  transform-origin: left center;
  background-image: url("./assets/artboard-6-flowers-left.webp");
}
.hero[data-hero-slide="rail"]::after {
  inset: auto 0 .44cqw auto;
  width: var(--rail-bloom-right-width);
  aspect-ratio: 166 / 269;
  transform-origin: right bottom;
  background-image: url("./assets/artboard-6-flowers-right.webp");
}
.hero[data-hero-slide="rail"] .hero-prompt { display: none; }
.hero[data-hero-slide="rail"] :is(.hero-views, .hero-copy) { color: var(--wine); }
.hero[data-hero-slide="rail"] .hero-copy {
  max-width: calc(100% - 2 * var(--gutter));
  text-shadow: none;
}
.hero[data-hero-slide="rail"] h1 {
  font-size: clamp(32px, min(5.15cqw, 8.1svh), 78px);
  line-height: .99;
  white-space: nowrap;
}
.hero[data-hero-slide="rail"] h1 > :is(.hero-title-line, em) { display: inline; }
.hero[data-hero-slide="rail"] .hero-copy p { display: none; }

.hero-price { display: none; }
.hero[data-hero-slide="rail"] .hero-price {
  --price-flower: url("./assets/rail-price-flower.webp");
  position: absolute;
  z-index: 2;
  inset: auto auto clamp(36px, min(7.2cqw, 10svh), 98px) var(--rail-price-inset);
  display: grid;
  place-items: center;
  width: var(--rail-price-width);
  aspect-ratio: 173 / 166;
  container-type: inline-size;
  color: var(--cream);
  text-align: center;
  pointer-events: none;
  filter: drop-shadow(0 3px 2px #38383850);
}
.hero-price-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--price-flower) center / contain no-repeat;
}
.hero-price-curl,
.hero-price-handle { display: none; }

@property --price-auto-curl {
  syntax: '<number>';
  inherits: true;
  initial-value: .42;
}
@property --price-curl-amount {
  syntax: '<number>';
  inherits: true;
  initial-value: .42;
}
@property --price-drag-curl {
  syntax: '<number>';
  inherits: true;
  initial-value: .42;
}
@property --price-drag-weight {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@supports (clip-path: polygon(0 0, 100% 0, 0 100%)) and (mask-image: url("./assets/rail-price-flower.webp")) and (transform: rotate(atan2(-166, 173))) {
  .hero-price {
    /* Blend back into the current point of the automatic loop when released. */
    --price-curl-amount: calc(var(--price-auto-curl) + (var(--price-drag-curl, .42) - var(--price-auto-curl)) * var(--price-drag-weight));
    --curl-peel: max(0, var(--price-curl-amount) - 1);
    --curl-deepening: calc(var(--curl-peel) * var(--curl-peel));
    /* A steeper crease holds the second petal still until the sticker is pulled. */
    --curl-slope: calc(.65 + .35 * var(--curl-deepening));
    --curl-line: calc(143% - 11.5% * var(--price-curl-amount) - 18% * var(--curl-deepening));
    --curl-edge-x: calc(var(--curl-line) - 100% * var(--curl-slope));
    --curl-edge-y: calc((var(--curl-line) - 100%) / var(--curl-slope));
    --curl-center: calc(var(--curl-line) / (1 + var(--curl-slope)));
    --curl-angle: atan2(-166, calc(173 * var(--curl-slope)));
    --curl-reflection: calc(-.78 + .30 * var(--curl-deepening));
    --curl-highlight: calc(86% - 2% * var(--curl-deepening));
  }
  .hero-price-face {
    /* Overlap the hinge by a fraction of the label to cover antialias gaps. */
    clip-path: polygon(0 0, 100% 0,
      100% calc(var(--curl-edge-y) + .65% / var(--curl-slope)),
      calc(var(--curl-edge-x) + .65%) 100%, 0 100%);
  }
  .hero-price-copy {
    clip-path: polygon(0 0, 100% 0,
      100% calc(var(--curl-edge-y) - .65% / var(--curl-slope)),
      calc(var(--curl-edge-x) - .65%) 100%, 0 100%);
  }
  .hero-price-curl {
    position: absolute;
    inset: 0;
    display: block;
    transform-origin: var(--curl-center) var(--curl-center);
    transform: rotate(var(--curl-angle)) scaleY(var(--curl-reflection)) rotate(calc(-1 * var(--curl-angle)));
  }
  .hero-price-curl::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(calc(180deg + var(--curl-angle)), #713444 var(--curl-center),
      #bd8390 calc((var(--curl-center) + var(--curl-highlight)) / 2), #f3d5ca var(--curl-highlight));
    mask: var(--price-flower) center / contain no-repeat;
    clip-path: polygon(100% var(--curl-edge-y), 100% 100%, var(--curl-edge-x) 100%);
    content: '';
  }
  .hero-price::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: var(--price-flower) center / contain no-repeat;
    clip-path: ellipse(3.4% 3.55% at 47.4% 20.5%);
    content: '';
  }
  .hero-price[data-price-interactive] .hero-price-handle {
    position: absolute;
    z-index: 2;
    inset: auto 0 15% auto;
    display: block;
    width: max(44px, 30%);
    height: max(44px, 32%);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }
  .hero-price-handle:focus-visible { outline: 2px solid var(--cream); outline-offset: -4px; }
  .hero-price[data-price-interaction="drag"],
  .hero-price[data-price-interaction="preview-still"] { --price-drag-weight: 1; }
  .hero-price[data-price-interaction="drag"] .hero-price-handle { cursor: grabbing; }
  @media (prefers-reduced-motion: no-preference) {
    .hero[data-hero-slide="rail"] .hero-price {
      animation: hero-price-enter 450ms ease-out 200ms both,
        hero-price-curl 2850ms ease-in-out 240ms infinite both;
      transition: --price-drag-weight 450ms ease-out;
    }
    .hero[data-hero-slide="rail"] .hero-price[data-price-interaction] { transition: none; }
  }
}
.hero-price-copy {
  position: absolute;
  inset: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  row-gap: clamp(2px, 1.7cqi, 4px);
}
.hero-price-caption { font: 500 clamp(9px, 7.2cqi, 13px)/1.15 var(--sans); }
.hero-price-value {
  display: flex;
  align-items: baseline;
  gap: clamp(2px, 1.4cqi, 4px);
  white-space: nowrap;
}
.hero-price-value strong { font: 400 16cqi/1 var(--serif); }
.hero-price-value small { font: 500 clamp(7px, 5.5cqi, 12px)/1 var(--sans); }

@property --rail-turn {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.garment-rail {
  --rail-size: clamp(242px, min(33.5cqw, calc(100svh - 395px)), 475px);
  --rail-dress-size: calc(var(--rail-size) * 1.15);
  --rail-axis: 13px;
  --rail-thickness: clamp(5px, .78cqw, 13px);
  --rail-hook-line: calc(var(--rail-axis) - var(--rail-thickness) / 2 + 1px);
  --rail-inset-start: clamp(14px, 7.17cqw, 130px);
  --rail-inset-end: clamp(12px, 6cqw, 110px);
  --rail-slot: clamp(97px, 30.5cqw, 169px);
  position: relative;
  width: 100%;
  min-width: 0;
  padding-top: 5px;
  color: var(--wine);
}
.rail-tube {
  position: absolute;
  z-index: 0;
  inset: calc(var(--rail-axis) + 5px) var(--rail-inset-end) auto var(--rail-inset-start);
  height: var(--rail-thickness);
  transform: translateY(-50%);
  background: url("./assets/artboard-6-rail.webp") center / 100% 100% no-repeat;
  pointer-events: none;
}
.rail-tube::before, .rail-tube::after {
  position: absolute;
  bottom: calc(100% - 1px);
  width: clamp(8px, 1.17cqw, 20px);
  height: 100svh;
  background-size: 100% 100%;
  content: '';
}
.rail-tube::before {
  left: 1.43%;
  transform: translateX(-50%);
  background-image: url("./assets/artboard-6-rail-cord-left.webp");
}
.rail-tube::after {
  right: 1.22%;
  transform: translateX(50%);
  background-image: url("./assets/artboard-6-rail-cord-right.webp");
}
.rail-viewport {
  position: relative;
  z-index: 1;
  overflow: auto hidden;
  width: 100%;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
}
.rail-viewport::-webkit-scrollbar { display: none; }
.garment-rail:not(.is-physical) .rail-viewport {
  mask-image: linear-gradient(to right,
    transparent var(--rail-inset-start), #000 calc(var(--rail-inset-start) + 8px),
    #000 calc(100% - var(--rail-inset-end) - 8px), transparent calc(100% - var(--rail-inset-end)));
}
.rail-items {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: max-content;
  min-width: 100%;
  /* Leave room for the dress hem, hook, and shadow without reserving its transparent padding. */
  min-height: calc(var(--rail-dress-size) * .92 + 42px);
  padding-inline: max(16px, calc((100cqw - var(--rail-slot)) / 2));
}
.rail-item {
  --rail-photo-size: var(--rail-size);
  --rail-sway: 0deg;
  position: relative;
  flex: 0 0 var(--rail-slot);
  width: var(--rail-slot);
  height: calc(var(--rail-photo-size) * .92 + 36px);
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  cursor: pointer;
  scroll-snap-align: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.rail-item[data-rail-length="tunic"] { --rail-photo-size: calc(var(--rail-size) * 1.18); }
.rail-item[data-rail-length="dress"] { --rail-photo-size: var(--rail-dress-size); }
.rail-item[data-facing] {
  z-index: 2;
}
.rail-item:focus-visible { outline: 2px solid var(--wine); outline-offset: -3px; }
.rail-piece {
  --rail-turn: 0;
  /* Hand off where the two photos have similar projected widths. */
  --rail-front-share: clamp(0, calc((var(--rail-turn) - .13) * 4), 1);
  --rail-photo-pivot: calc(var(--rail-photo-size) * .01333);
  --rail-hook-drop: clamp(10px, calc(var(--rail-size) * .036), 16px);
  --rail-neck-seat: calc(var(--rail-photo-pivot) + var(--rail-hook-drop));
  position: absolute;
  top: calc(var(--rail-hook-line) - var(--rail-photo-pivot));
  left: 50%;
  width: calc(var(--rail-photo-size) * .7);
  height: var(--rail-photo-size);
  translate: -50% 0;
  rotate: var(--rail-sway);
  transform-origin: 50% 1.333%;
  isolation: isolate;
  filter: drop-shadow(6px 10px 6px #3a222735);
  pointer-events: none;
}
.rail-piece::before {
  position: absolute;
  top: calc(var(--rail-photo-pivot) - 1px);
  left: 50%;
  width: clamp(11px, calc(var(--rail-size) * .041), 18px);
  height: calc(var(--rail-hook-drop) + 3px);
  transform: translateX(-50%);
  background: url("./assets/rail-hook.svg") center / 100% 100% no-repeat;
  content: '';
}
.rail-item[data-facing] .rail-piece { --rail-turn: 1; }
.rail-garment, .rail-garment-side {
  /* Start each photo at the wood and attach it to the shared metal hook. */
  --rail-neck-y-px: calc(var(--rail-photo-size) * var(--rail-neck-y) / 600);
  --rail-neck-x-px: calc(var(--rail-photo-size) * var(--rail-neck-x) / 600);
  position: absolute;
  top: calc(var(--rail-neck-seat) - var(--rail-neck-y-px));
  left: calc(50% - var(--rail-neck-x-px));
  display: block;
  width: 100%;
  height: 100%;
  clip-path: inset(calc(var(--rail-neck-y-px) - var(--rail-photo-size) / 600) 0 0);
  transform-origin: var(--rail-neck-x-px) var(--rail-neck-y-px);
}
.rail-garment {
  transform: perspective(1050px) rotateY(calc(18deg * (var(--rail-turn) - 1)));
}
.rail-garment-side {
  opacity: 0;
  transform: perspective(1050px) rotateY(calc(82deg * var(--rail-turn)));
}
.rail-item[data-side-ready] .rail-garment {
  opacity: var(--rail-front-share);
  transform: perspective(1050px) rotateY(calc(82deg * (var(--rail-turn) - 1)));
}
.rail-item[data-side-ready] .rail-garment-side {
  opacity: calc(1 - var(--rail-front-share));
  mix-blend-mode: plus-lighter;
}
.rail-dots {
  display: flex;
  justify-content: center;
  padding-inline: 16px;
}
.rail-subtitle {
  position: relative;
  margin: 0 auto;
  padding-inline: var(--gutter);
  font-size: clamp(13px, 1.35cqw, 18px);
  text-align: center;
  text-wrap: balance;
}
@media (min-width: 801px) {
  .rail-subtitle { max-width: calc(100cqw - 2 * (var(--rail-price-inset) + var(--rail-price-width))); }
}
.rail-dot {
  display: grid;
  flex: 0 1 30px;
  min-width: 0;
  min-height: 28px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--wine);
  cursor: pointer;
}
.rail-dot::before {
  width: 6px;
  height: 6px;
  border-radius: 5px;
  background: currentColor;
  opacity: .45;
  content: '';
}
.rail-dot[aria-current="true"]::before { width: 17px; opacity: 1; }

@media (min-width: 801px) and (hover: hover) and (pointer: fine) {
  .garment-rail.is-physical .rail-viewport { overflow: hidden; scroll-snap-type: none; }
  .garment-rail.is-physical .rail-items { width: 100%; padding: 0; }
  .garment-rail.is-physical .rail-item {
    position: absolute;
    left: calc(var(--rail-hit) / -2);
    width: var(--rail-hit);
    transform: translateX(var(--rail-x));
    cursor: grab;
  }
  .garment-rail.is-physical [data-rail-dragging] .rail-item { cursor: grabbing; }
  .garment-rail.is-physical .rail-dots { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-view-dot::before { transition: width 180ms ease, opacity 180ms ease; }
  .hero[data-hero-slide="rail"]::before,
  .hero-flower-left {
    --bloom-edge-shift: clamp(-10px, -.46cqw, -3px);
    --bloom-lean: 1.25deg;
    --bloom-idle-time: 10s;
  }
  .hero[data-hero-slide="rail"]::after,
  .hero-flower-right {
    --bloom-edge-shift: clamp(3px, .46cqw, 10px);
    --bloom-lean: -1.25deg;
    --bloom-idle-time: 12s;
    --bloom-entrance-delay: 120ms;
  }
  .hero[data-hero-slide="rail"]::before,
  .hero[data-hero-slide="rail"]::after {
    animation: rail-bloom-enter 950ms cubic-bezier(.25, .65, .35, 1) var(--bloom-entrance-delay, 0ms) both,
      hero-bloom-sway var(--bloom-idle-time) ease-in-out calc(950ms + var(--bloom-entrance-delay, 0ms)) infinite;
  }
  .hero-flower img {
    transform-origin: inherit;
    animation: hero-bloom-sway var(--bloom-idle-time) ease-in-out calc(1400ms + var(--bloom-entrance-delay, 0ms)) infinite;
  }
  .rail-piece {
    transition: --rail-turn 640ms cubic-bezier(.38, .05, .25, 1);
  }
  .garment-rail.is-entering .rail-item[data-side-ready]:not([data-held]) .rail-piece {
    animation: rail-entry-sway 4.2s ease-in-out var(--rail-entry-delay, 0ms);
  }
  .rail-item:nth-child(3n+1) { --rail-entry-lean: 2.3deg; }
  .rail-item:nth-child(3n+2) { --rail-entry-lean: 3.1deg; }
  .rail-item:nth-child(even) { --rail-entry-delay: 90ms; }
  .rail-item[data-held] .rail-piece {
    transition: --rail-turn 640ms cubic-bezier(.38, .05, .25, 1), rotate 150ms ease-out;
  }
  .garment-rail.is-physical.is-ready .rail-item { transition: transform 690ms cubic-bezier(.25, .72, .2, 1); }
  .garment-rail.is-physical [data-rail-coasting] .rail-item { transition: transform 140ms ease-out; }
  .garment-rail.is-physical [data-rail-dragging] .rail-item { transition: transform 95ms ease-out; }
  .garment-rail.is-physical [data-rail-dragging] .rail-item[data-held] { transition: none; }
  .hero[data-hero-slide="photo"] .hero-backdrop { animation: hero-photo-enter 650ms ease both; }
}
@keyframes hero-price-enter { from { opacity: 0; } }
@keyframes hero-price-curl {
  0%, 100% { --price-auto-curl: .95; }
  50% { --price-auto-curl: .27; }
}
@keyframes hero-photo-enter { from { opacity: 0; } }
@keyframes rail-entry-sway {
  0%, 100% { transform: rotateZ(0deg); }
  17% { transform: rotateZ(var(--rail-entry-lean, 2.7deg)); }
  39% { transform: rotateZ(calc(var(--rail-entry-lean, 2.7deg) * -.64)); }
  61% { transform: rotateZ(calc(var(--rail-entry-lean, 2.7deg) * .34)); }
  82% { transform: rotateZ(calc(var(--rail-entry-lean, 2.7deg) * -.13)); }
}
@keyframes rail-bloom-enter {
  from {
    opacity: 0;
    transform: translateX(calc(var(--bloom-edge-shift) * 2)) scale(.97);
  }
}
@keyframes hero-bloom-sway {
  0%, 100% { transform: none; }
  50% { transform: translateX(var(--bloom-edge-shift)) rotate(var(--bloom-lean)); }
}

@media (max-width: 800px) {
  .hero[data-hero-slide="rail"] {
    --mobile-price-width: clamp(72px, 20cqw, 100px);
    --mobile-price-height: calc(var(--mobile-price-width) * 166 / 173);
    --rail-bloom-left-width: 16cqw;
    --rail-bloom-right-width: 21cqw;
    grid-template-columns: minmax(0, 1fr);
  }
  .hero[data-hero-slide="rail"] h1 { font-size: min(5.25cqw, 42px); }
  .hero[data-hero-slide="rail"] .hero-price {
    position: relative;
    inset: auto;
    grid-area: 3 / 1;
    align-self: start;
    justify-self: start;
    width: var(--mobile-price-width);
    margin-inline-start: clamp(8px, 3cqw, 24px);
  }
  .hero[data-hero-slide="rail"] .hero-actions {
    grid-area: 3 / 1;
    padding-top: calc(var(--mobile-price-height) - 40px);
  }
  .garment-rail { --rail-size: clamp(218px, min(67cqw, 43svh), 355px); }
}

@media (max-width: 800px) and (max-height: 720px) {
  .hero[data-hero-slide="rail"] {
    row-gap: 3px;
    padding-top: calc(var(--header-height) + var(--header-top) + 10px);
  }
  .hero[data-hero-slide="rail"] .hero-actions { gap: 0; }
}

@media (min-width: 801px) and (min-height: 781px) and (max-height: 919px) {
  .hero[data-hero-slide="rail"] {
    row-gap: clamp(2px, calc(20svh - 170px), 12px);
    padding-top: calc(var(--header-height) + var(--header-top) + 14px);
  }
}

@media (min-width: 801px) and (max-height: 780px) {
  .hero[data-hero-slide="rail"] {
    gap: 10px;
    padding-top: calc(var(--header-height) + var(--header-top) + 24px);
  }
  .hero[data-hero-slide="rail"] h1 { font-size: clamp(39px, 4.7cqw, 58px); }
  .garment-rail { --rail-size: clamp(242px, min(33.5cqw, calc(100svh - 407px)), 475px); }
}