@layer motion {
  :root {
    --sf-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --sf-ease-silk: cubic-bezier(0.22, 1, 0.36, 1);
    --sf-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --sf-dur-reveal: 600ms;
    --sf-reveal-y: 18px;
    --sf-hero-clip: 1100ms;
    --sf-hero-sweep: 900ms;
    --sf-hero-sweep-delay: 300ms;
    --sf-hero-actions: 400ms;
    --sf-hero-delay-mobile: 300ms;
    --sf-hero-delay-desktop: 600ms;
    --sf-plate-drift: 14s;
    --sf-plate-fade: 12s;
    --sf-fan-rotate: 16deg;
    --sf-fan-rise: 24px;
    --sf-card-sweep: 700ms;
    --sf-story-hue: 900ms;
    --sf-story-hue-mobile: 300ms;
    --sf-quiz-slide: 320ms;
    --sf-veil: 200ms;
    --sf-veil-failsafe: 900ms;
    --sf-underline: 280ms;
  }
  html.js .sf-reveal.sf-reveal--gsap,
  html.js .sf-reveal--stagger.sf-reveal--gsap > * {
    transition: none;
    will-change: auto;
  }
  .sf-layer,
  .sf-plate,
  .sf-veil,
  .sf-cursor,
  .sf-spray {
    pointer-events: none;
    user-select: none;
  }
  html.sf-intro-calm .sf-intro {
    background: transparent;
    pointer-events: none;
  }
  html.sf-intro-calm .sf-intro__skip {
    display: none;
  }
  html.lenis,
  html.lenis body {
    height: auto;
    scroll-behavior: auto;
  }
  html.lenis:not(.lenis-autoToggle).lenis-stopped {
    overflow: clip;
  }
  html.lenis [data-lenis-prevent],
  html.lenis [data-lenis-prevent-wheel],
  html.lenis [data-lenis-prevent-touch] {
    overscroll-behavior: contain;
  }
  @media (prefers-reduced-motion: reduce) {
    html.sf-reduce .sf-layer,
    html.sf-reduce .sf-plate {
      animation: none;
      transform: none;
    }
    html.sf-reduce .sf-veil,
    html.sf-reduce .sf-cursor,
    html.sf-reduce .sf-spray {
      display: none;
    }
  }
}
@layer motion {
  .hero {
    --hero-object: clamp(5rem, 22vw, 7rem);
    contain: paint;
  }
  html.motion--mobile .hero,
  html.motion--low .hero {
    --sf-plate-x: 10;
    --sf-plate-y: 5;
  }
  .hero__title {
    padding-block: 0.06em 0.16em;
    margin-block: -0.06em -0.16em;
  }
  .hero__object {
    position: relative;
    width: var(--hero-object);
    height: var(--hero-object);
    margin-block-end: calc(var(--sp-2) * -1);
  }
  .hero__object img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .hero__glow {
    position: absolute;
    left: 50%;
    top: calc(var(--hero-object) / 2);
    z-index: -1;
    width: 0;
    height: 0;
    pointer-events: none;
    user-select: none;
  }
  .hero__glow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--hero-object) * var(--sf-plate-x, 13.33));
    height: calc(var(--hero-object) * var(--sf-plate-y, 6.67));
    translate: -50% -50%;
    background: var(--glow-hero, radial-gradient(circle closest-side, rgba(215, 164, 102, 0.5) 0%, rgba(213, 162, 102, 0.24) 24%, rgba(209, 159, 101, 0.08) 50%, rgba(209, 159, 101, 0) 82%));
    mix-blend-mode: var(--glow-hero-blend, normal);
    transition: opacity var(--sf-hero-gl-fade, 900ms) var(--sf-ease-out);
  }
  .hero.is-gl .hero__glow::before {
    opacity: 0;
    mix-blend-mode: normal;
  }
  .hero__plate {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--hero-object) * var(--sf-plate-x, 13.33));
    height: calc(var(--hero-object) * var(--sf-plate-y, 6.67));
    max-width: none;
    translate: -50% -50%;
    opacity: 0;
    transition: opacity var(--sf-hero-gl-fade, 900ms) var(--sf-ease-out);
  }
  .hero__plate--a.is-ready {
    opacity: 1;
  }
  html.motion--desktop .hero__plate--a,
  html.motion--mobile .hero__plate--a {
    animation: sf-plate-drift var(--sf-plate-drift, 14s) ease-in-out var(--sf-plate-cycles, 6) alternate both;
  }
  html.motion--mobile .hero__plate--b,
  html.motion--desktop .hero__plate--b {
    animation: sf-plate-fade var(--sf-plate-fade, 12s) ease-in-out var(--sf-plate-cycles, 6) alternate both;
  }
  html.motion--low .hero__plate--a {
    display: none;
  }
  .hero.is-offscreen .hero__plate,
  .hero.is-gl-settled .hero__plate {
    animation-play-state: paused;
  }
  .hero.is-gl .hero__plate {
    opacity: 0;
  }
  .hero__ribbons {
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    display: block;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    transition: opacity var(--sf-hero-gl-fade, 900ms) var(--sf-ease-out);
  }
  .hero__ribbons.is-live {
    opacity: 1;
  }
  @keyframes sf-plate-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(2.5%, -1.5%, 0) scale(1.07); }
  }
  @keyframes sf-plate-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  html.motion--desktop .hero__title {
    background-image: linear-gradient(110deg, rgba(255, 241, 205, 0) 40%, var(--sheen-title, rgba(255, 241, 205, 0.92)) 50%, rgba(255, 241, 205, 0) 60%), var(--grad-gold);
    background-size: 250% 100%, 100% 100%;
    background-position: 120% 0, 0 0;
    background-repeat: no-repeat;
    animation: sf-hero-clip var(--sf-hero-clip, 1100ms) var(--sf-ease-out) both, sf-hero-sweep var(--sf-hero-sweep, 900ms) var(--sf-ease-silk) var(--sf-hero-sweep-delay, 300ms) both;
  }
  html.motion--desktop.sf-intro-full .hero__title {
    animation-play-state: running, paused;
  }
  html.motion--desktop .hero__actions,
  html.motion--mobile .hero__actions,
  html.motion--low .hero__actions,
  html.motion--desktop .hero__trust,
  html.motion--mobile .hero__trust,
  html.motion--low .hero__trust {
    animation: sf-hero-settle var(--sf-hero-actions, 400ms) var(--sf-ease-out) both;
  }
  .hero__enter {
    opacity: 0;
    transform: translateY(1.5rem);
    animation: sf-hero-enter var(--dur-slow) var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 120ms);
  }
  html.motion--desktop .hero__enter {
    animation-delay: calc(var(--sf-hero-delay-desktop, 600ms) - 240ms + var(--i, 0) * 120ms);
  }
  html.motion--mobile .hero__enter,
  html.motion--low .hero__enter {
    animation-delay: calc(var(--sf-hero-delay-mobile, 300ms) - 240ms + var(--i, 0) * 120ms);
  }
  html.motion--desktop.sf-intro-full .hero__enter,
  html.motion--desktop.sf-intro-full .hero__actions,
  html.motion--desktop.sf-intro-full .hero__trust {
    animation-play-state: paused;
  }
  @keyframes sf-hero-enter {
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes sf-hero-clip {
    from { clip-path: inset(-0.1em 0 100% 0); }
    to { clip-path: inset(-0.1em 0 -0.2em 0); }
  }
  @keyframes sf-hero-sweep {
    from { background-position: 120% 0, 0 0; }
    to { background-position: -30% 0, 0 0; }
  }
  @keyframes sf-hero-settle {
    from { opacity: 0.6; }
    to { opacity: 1; }
  }
  @media (max-width: 767px) {
    .hero__object { margin-block-end: calc(var(--sp-3) * -1); }
  }
  @media (prefers-reduced-motion: reduce) {
    html.sf-reduce .hero__plate { display: none; }
    html.sf-reduce .hero__title { clip-path: none; animation: none; }
    html.sf-reduce .hero__actions, html.sf-reduce .hero__trust { animation: none; opacity: 1; }
    html.sf-reduce .hero__enter { animation: none; opacity: 1; transform: none; }
  }
}
@layer motion {
  :root {
    --sf-fan-failsafe: 6000ms;
    --sf-fan-settle: 900ms;
    --sf-card-tilt: 6deg;
    --sf-card-lift: 8px;
    --sf-card-perspective: 1000px;
    --sf-card-follow: 160ms;
    --sf-card-return: 600ms;
    --sf-rail-thumb: 0.38;
    --sf-reveal-step: 70ms;
  }
  html.motion--desktop [data-motion~="cards"] > * {
    opacity: 1;
    transition: none;
  }
  html.motion--desktop [data-motion~="cards"]:not([data-cards-state]) > * {
    transform-origin: 50% 110%;
    transform: translate3d(var(--sf-fan-x, 0%), calc(var(--sf-fan-ry, 1) * var(--sf-fan-rise)), 0) rotate(calc(var(--sf-fan-r, 0) * var(--sf-fan-rotate)));
    animation: sf-fan-failsafe var(--sf-fan-settle) var(--sf-ease-out) var(--sf-fan-failsafe) both;
  }
  html.motion--desktop [data-motion~="cards"].is-settling > * {
    transition: transform var(--sf-dur-reveal) var(--sf-ease-out);
  }
  html.motion--desktop [data-motion~="cards"].is-fanning > * {
    will-change: transform;
  }
  @keyframes sf-fan-failsafe {
    to {
      transform: none;
    }
  }
  html.motion--desktop [data-motion~="cards"]:not(.grid--mosaic) > * {
    --sf-fan-r: 0;
    --sf-fan-x: 0%;
    --sf-fan-ry: 0;
  }
  html.motion--desktop .grid--mosaic[data-motion~="cards"] > :nth-child(1) {
    --sf-fan-r: 0;
    --sf-fan-x: 0%;
    --sf-fan-ry: 1.5;
  }
  html.motion--desktop .grid--mosaic[data-motion~="cards"] > :nth-child(2) {
    --sf-fan-r: -0.35;
    --sf-fan-x: -18%;
  }
  html.motion--desktop .grid--mosaic[data-motion~="cards"] > :nth-child(3) {
    --sf-fan-r: 0.7;
    --sf-fan-x: -36%;
  }
  html.motion--desktop .grid--mosaic[data-motion~="cards"] > :nth-child(4) {
    --sf-fan-r: -0.15;
    --sf-fan-x: -18%;
    --sf-fan-ry: 2;
  }
  html.motion--desktop .grid--mosaic[data-motion~="cards"] > :nth-child(5) {
    --sf-fan-r: 0.55;
    --sf-fan-x: -36%;
    --sf-fan-ry: 2;
  }
  html.motion--desktop .grid--mosaic[data-motion~="cards"] > :nth-child(n+6) {
    --sf-fan-r: 0.3;
    --sf-fan-x: -20%;
    --sf-fan-ry: 3;
  }
  html.motion--desktop [data-cards-state="spread"] [data-motion-card],
  html.motion--desktop [data-cards-state="spread"] .collection-card {
    --sf-tilt-x: 0deg;
    --sf-tilt-y: 0deg;
    --sf-tilt-lift: 0px;
  }
  html.motion--desktop [data-cards-state="spread"] [data-motion-card].is-tilting,
  html.motion--desktop [data-cards-state="spread"] [data-motion-card].is-untilting,
  html.motion--desktop [data-cards-state="spread"] .collection-card.is-tilting,
  html.motion--desktop [data-cards-state="spread"] .collection-card.is-untilting {
    z-index: 1;
    transform: perspective(var(--sf-card-perspective)) rotateX(var(--sf-tilt-x)) rotateY(var(--sf-tilt-y)) translateY(var(--sf-tilt-lift));
    transition: transform var(--sf-card-return) var(--sf-ease-out);
  }
  html.motion--desktop [data-cards-state="spread"] [data-motion-card].is-tilting,
  html.motion--desktop [data-cards-state="spread"] .collection-card.is-tilting {
    transition-duration: var(--sf-card-follow);
    transition-timing-function: linear;
  }
  html.motion--desktop [data-cards-state="spread"] [data-motion-card]:focus-within:not(.is-tilting):not(.is-untilting),
  html.motion--desktop [data-cards-state="spread"] .collection-card:focus-visible:not(.is-tilting):not(.is-untilting) {
    transform: translateY(calc(var(--sf-card-lift) * -1));
    transition: transform var(--sf-card-return) var(--sf-ease-out);
  }
  html.motion--desktop [data-cards-state="spread"] [data-motion-card] .product-card__media::before,
  html.motion--desktop [data-cards-state="spread"] .collection-card::after {
    content: "";
    position: absolute;
    inset: -10% -30%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-70%, 0, 0);
  }
  html.motion--desktop [data-cards-state="spread"] [data-motion-card] .product-card__media::before {
    background: var(--sheen-card, linear-gradient(105deg, rgba(242, 230, 210, 0) 34%, rgba(242, 230, 210, 0.16) 46%, rgba(242, 230, 210, 0.5) 50%, rgba(242, 230, 210, 0.16) 54%, rgba(242, 230, 210, 0) 66%));
    mix-blend-mode: var(--sheen-card-blend, soft-light);
  }
  html.motion--desktop [data-cards-state="spread"] .collection-card::after {
    background: linear-gradient(105deg, rgba(242, 230, 210, 0) 34%, rgba(242, 230, 210, 0.16) 46%, rgba(242, 230, 210, 0.5) 50%, rgba(242, 230, 210, 0.16) 54%, rgba(242, 230, 210, 0) 66%);
    mix-blend-mode: soft-light;
  }
  html.motion--desktop [data-cards-state="spread"] [data-motion-card].is-sweeping .product-card__media::before,
  html.motion--desktop [data-cards-state="spread"] .collection-card.is-sweeping::after {
    animation: sf-card-sweep var(--sf-card-sweep) var(--sf-ease-silk) both;
  }
  @keyframes sf-card-sweep {
    0% {
      opacity: 0;
      transform: translate3d(-70%, 0, 0);
    }
    18% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translate3d(70%, 0, 0);
    }
  }
  .sf-rail-progress {
    display: none;
  }
  @media (max-width: 767px) {
    @supports (animation-timeline: scroll()) {
      html.motion--mobile .sf-rail-progress,
      html.motion--low .sf-rail-progress {
        position: relative;
        display: block;
        width: min(9rem, 42%);
        height: 2px;
        margin-block-start: var(--sp-5);
        margin-inline: auto;
        overflow: hidden;
        border-radius: 1px;
        background: var(--track, rgba(212, 176, 132, 0.18));
      }
      html.motion--mobile .rail:has(+ .sf-rail-progress),
      html.motion--low .rail:has(+ .sf-rail-progress) {
        scroll-timeline-name: --sf-rail;
        scroll-timeline-axis: inline;
      }
      html.motion--mobile .container:has(> .sf-rail-progress),
      html.motion--low .container:has(> .sf-rail-progress) {
        timeline-scope: --sf-rail;
      }
      .sf-rail-progress::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 1px;
        background: var(--fill-accent, linear-gradient(90deg, var(--gold-600), var(--gold-300) 50%, var(--gold-600)));
        transform-origin: 0 50%;
        transform: scaleX(var(--sf-rail-thumb));
        animation: sf-rail-track linear both;
        animation-timeline: --sf-rail;
      }
    }
  }
  @keyframes sf-rail-track {
    from {
      transform: translate3d(0, 0, 0) scaleX(var(--sf-rail-thumb));
    }
    to {
      transform: translate3d(calc((1 - var(--sf-rail-thumb)) * 100%), 0, 0) scaleX(var(--sf-rail-thumb));
    }
  }
}
@layer motion {
  :root {
    --sf-story-tilt: 900ms;
    --sf-story-notes: 700ms;
    --sf-story-notes-y: 16px;
    --sf-story-glow-alpha: 0.22;
    --sf-story-wash-alpha: 0.06;
  }
  .story {
    position: relative;
    isolation: isolate;
    --sf-story-rgb: 212 176 132;
  }
  .story__container {
    position: relative;
    z-index: 1;
  }
  .story__glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    background:
      radial-gradient(ellipse 60% 48% at 50% 42%, rgb(var(--sf-story-rgb) / var(--sf-story-glow-alpha)) 0%, rgb(var(--sf-story-rgb) / 0.05) 48%, rgb(var(--sf-story-rgb) / 0) 74%),
      linear-gradient(180deg, rgb(var(--sf-story-rgb) / 0) 0%, rgb(var(--sf-story-rgb) / var(--sf-story-wash-alpha)) 55%, rgb(var(--sf-story-rgb) / 0) 100%);
    transition: opacity var(--sf-story-hue) var(--sf-ease-silk);
  }
  .story__glow.is-on { opacity: 1; }
  .story__glow.is-dip,
  .story__halo.is-dip {
    opacity: 0;
    transition-duration: var(--sf-story-hue-mobile);
  }
  .story__figure { display: none; }
  html.motion--desktop .story--gsap .pyramid__tier:not(.is-seen) .pyramid__label,
  html.motion--desktop .story--gsap .pyramid__tier:not(.is-seen) .pyramid__note {
    opacity: 0;
  }
  html.motion--desktop .story--gsap .pyramid__tier.is-seen .pyramid__label,
  html.motion--desktop .story--gsap .pyramid__tier.is-seen .pyramid__note {
    opacity: 1;
  }
  @media (max-width: 1023px) {
    .story__glow--b { display: none; }
  }
  @media (min-width: 1024px) {
    .story__layout {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: var(--sp-8);
      align-items: start;
    }
    .story__figure {
      display: block;
      position: sticky;
      top: calc(var(--header-h-solid) + var(--sp-6));
      z-index: 0;
    }
    .story__stage {
      position: relative;
      display: grid;
      place-items: center;
      height: calc(100vh - var(--header-h-solid) - var(--sp-9));
      max-height: 40rem;
      perspective: 1200px;
    }
    .story__tilt {
      position: relative;
      display: grid;
      place-items: center;
      width: min(100%, 22rem);
      height: 100%;
      transform-style: preserve-3d;
    }
    .story.is-active .story__tilt { will-change: transform; }
    .story__halo {
      position: absolute;
      inset: -6% -18%;
      z-index: 0;
      pointer-events: none;
      opacity: 0;
      background: radial-gradient(ellipse 52% 46% at 50% 50%, rgb(var(--sf-story-rgb) / 0.42) 0%, rgb(var(--sf-story-rgb) / 0.08) 45%, rgb(var(--sf-story-rgb) / 0) 72%);
      mix-blend-mode: var(--halo-blend, screen);
      transition: opacity var(--sf-story-hue) var(--sf-ease-silk);
    }
    .story__halo.is-on { opacity: 1; }
    .story__bottle {
      position: relative;
      z-index: 1;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      -webkit-mask-image: radial-gradient(ellipse 46% 60% at 50% 50%, #000 34%, rgb(0 0 0 / 0) 82%);
      mask-image: radial-gradient(ellipse 46% 60% at 50% 50%, #000 34%, rgb(0 0 0 / 0) 82%);
    }
    .story .pyramid { gap: 0; }
    .story .pyramid__tier {
      --tier-w: 100%;
      justify-items: start;
      text-align: start;
      align-content: center;
      min-height: 30vh;
      padding-block: var(--sp-6);
    }
    .story .pyramid__notes { justify-content: flex-start; }
    .story .pyramid__label {
      position: relative;
      padding-bottom: 0.5rem;
    }
    .story .pyramid__label::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 1.5rem;
      height: 1px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--sf-story-hue) var(--sf-ease-out);
    }
    .story[data-note="top"] .pyramid__tier--top .pyramid__label::after,
    .story[data-note="heart"] .pyramid__tier--heart .pyramid__label::after,
    .story[data-note="base"] .pyramid__tier--base .pyramid__label::after { transform: scaleX(1); }
    .story--no-figure .story__layout { grid-template-columns: minmax(0, 1fr); }
    .story--no-figure .pyramid__tier { min-height: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    html.sf-reduce .story__glow,
    html.sf-reduce .story__halo { transition: none; }
    html.sf-reduce .story__tilt { transform: none; }
    html.sf-reduce .story .pyramid__label::after { transform: scaleX(1); }
  }
  html[data-theme="light"] .story__bottle {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    padding: clamp(0.625rem, 1.2vw, 1rem);
    background: var(--lt-vellum);
    box-shadow: inset 0 0 0 1px var(--mount-line), var(--shadow-paper);
    -webkit-mask-image: none;
    mask-image: none;
  }
}
@layer motion {
  .site-footer__link {
    background-image: linear-gradient(var(--accent), var(--accent));
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: 0 calc(50% + 0.85em);
    transition: color var(--dur-fast) var(--ease-out), background-size var(--sf-underline) var(--sf-ease-out);
  }
  .site-footer__link:hover,
  .site-footer__link:focus-visible,
  .btn--text:focus-visible,
  .section-header__link:focus-visible,
  .site-header__link:focus-visible {
    background-size: 100% 1px;
  }
  .btn--text,
  .section-header__link,
  .site-header__link {
    transition-duration: var(--dur-fast), var(--sf-underline);
    transition-timing-function: var(--ease-out), var(--sf-ease-out);
  }

  .sf-tick__real {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .sf-tick__num {
    display: inline-block;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-feature-settings: var(--num-tabular);
  }

  .drawer__title .js-cart-count {
    display: inline-block;
  }
  .drawer__title .js-cart-count.is-bumped {
    animation: count-bump var(--dur-base) var(--ease-out);
  }

  .sf-burst {
    position: fixed;
    z-index: var(--z-toast);
    width: 0;
    height: 0;
    pointer-events: none;
  }
  .sf-spray {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--sz, 6px);
    height: var(--sz, 6px);
    margin: calc(var(--sz, 6px) / -2);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: var(--spray-glow, 0 0 6px var(--accent));
    opacity: 0.9;
    transform: translate3d(0, 0, 0) scale(0.6);
    animation: sf-spray var(--sf-burst) var(--sf-ease-silk) var(--d, 0ms) both;
  }
  @keyframes sf-spray {
    30% { opacity: 0.85; }
    100% {
      transform: translate3d(var(--dx), var(--dy), 0) scale(0.1);
      opacity: 0;
    }
  }
  .sf-fly {
    position: fixed;
    z-index: var(--z-toast);
    display: block;
    object-fit: cover;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: var(--shadow-float, 0 2px 10px rgba(0, 0, 0, 0.45));
    pointer-events: none;
    will-change: transform, opacity;
  }

  html.motion--desktop.sf-cursor-on .product-card__media,
  html.motion--desktop.sf-cursor-on .collection-card__media,
  html.motion--desktop.sf-cursor-on .gallery__open {
    cursor: none;
  }
  .sf-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-toast);
    pointer-events: none;
    width: var(--sf-cursor-size);
    height: var(--sf-cursor-size);
    margin: calc(var(--sf-cursor-size) / -2) 0 0 calc(var(--sf-cursor-size) / -2);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
    will-change: transform;
  }
  .sf-cursor.is-visible.is-grown:not(.is-hidden):not(.is-native) { opacity: 1; }
  .sf-cursor.is-hidden,
  .sf-cursor.is-native { opacity: 0; }
  .sf-cursor__ring {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid var(--accent);
    box-shadow: var(--cursor-outline, none);
    transform: scale(1);
    transition: transform var(--dur-base) var(--sf-ease-out);
  }
  .sf-cursor__ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  .sf-cursor.is-grown .sf-cursor__ring { transform: scale(var(--sf-cursor-grow)); }
  .sf-cursor.is-grown .sf-cursor__ring::before { opacity: var(--sf-cursor-fill); }
  .sf-cursor.is-down .sf-cursor__ring { transform: scale(0.85); }

  html.motion--mobile .sf-cursor,
  html.motion--low .sf-cursor,
  html.sf-reduce .sf-cursor,
  html.sf-reduce .sf-burst,
  html.sf-reduce .sf-fly {
    display: none;
  }
}
@layer motion {
  :root {
    --sf-quiz-flip-out: 380ms;
    --sf-quiz-flip-in: 520ms;
    --sf-quiz-undo: 600ms;
    --sf-quiz-deal: 700ms;
    --sf-quiz-hold: 450ms;
    --sf-quiz-turn: 900ms;
    --sf-quiz-mist: 400ms;
    --sf-quiz-notes-at: 1250ms;
    --sf-quiz-notes-step: 60ms;
    --sf-quiz-settle: 700ms;
  }
  :is(html.motion--desktop, html.motion--mobile, html.motion--low) .quiz-deck {
    position: relative;
    perspective: var(--sf-quiz-perspective, 2600px);
  }
  :is(html.motion--desktop, html.motion--mobile, html.motion--low) .quiz-deck .form__section {
    position: relative;
    padding: var(--sp-6) var(--sp-5);
    border: var(--border-hair) solid var(--quiz-line, rgba(212, 176, 132, 0.28));
    background: linear-gradient(180deg, var(--tint-ghost-hover, rgba(212, 176, 132, 0.06)), rgba(212, 176, 132, 0) 42%), var(--surface-raised);
    box-shadow: var(--shadow-deep, 0 30px 60px -40px rgba(0, 0, 0, 0.9));
    backface-visibility: hidden;
  }
  :is(html.motion--desktop, html.motion--mobile, html.motion--low) .quiz-deck .form__section::before {
    content: "";
    position: absolute;
    inset: 0.5rem;
    border: var(--border-hair) solid var(--quiz-line-faint, rgba(212, 176, 132, 0.14));
    pointer-events: none;
  }
  :is(html.motion--desktop, html.motion--mobile, html.motion--low) .quiz-deck .form__section.is-leaving {
    display: grid;
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    pointer-events: none;
    z-index: 1;
  }
  .quiz-deck.is-flipping .form__section {
    will-change: transform, opacity;
  }
  html.motion--desktop .quiz-deck {
    animation: sf-quiz-deal var(--sf-quiz-deal) var(--sf-ease-out) both;
  }
  html.motion--mobile .quiz-deck .form__section.is-leaving {
    animation: sf-quiz-slide-out var(--sf-quiz-slide) var(--sf-ease-in) both;
  }
  html.motion--mobile .quiz-deck .form__section.is-entering {
    animation: sf-quiz-slide-in var(--sf-quiz-slide) var(--sf-ease-out) both;
  }
  html.motion--low .quiz-deck .form__section.is-leaving {
    animation: sf-quiz-fade-out var(--dur-fast) linear both;
  }
  html.motion--low .quiz-deck .form__section.is-entering {
    animation: sf-quiz-fade-in var(--dur-fast) linear both;
  }
  .quiz-deck .form__section.is-entering .progress__fill {
    transform-origin: left;
    animation: sf-quiz-fill var(--sf-quiz-flip-in) var(--sf-ease-out) both;
  }
  .quiz-deck .form__section.is-armed .choice__input:checked + .choice__card {
    position: relative;
    overflow: hidden;
  }
  .quiz-deck .form__section.is-armed .choice__input:checked + .choice__card::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: var(--grad-gold-button);
    transform-origin: left;
    transform: scaleX(0);
    animation: sf-quiz-arm var(--sf-quiz-undo) linear forwards;
  }
  @keyframes sf-quiz-deal {
    from { transform: perspective(var(--sf-quiz-perspective, 2600px)) rotateY(-10deg) translateY(10px); }
    to { transform: none; }
  }
  @keyframes sf-quiz-slide-out {
    to { opacity: 0; transform: translateX(calc(var(--sf-quiz-dir, 1) * -24px)); }
  }
  @keyframes sf-quiz-slide-in {
    from { opacity: 0; transform: translateX(calc(var(--sf-quiz-dir, 1) * 24px)); }
  }
  @keyframes sf-quiz-fade-out {
    to { opacity: 0; }
  }
  @keyframes sf-quiz-fade-in {
    from { opacity: 0; }
  }
  @keyframes sf-quiz-fill {
    from { transform: scaleX(var(--sf-quiz-fill-from, 1)); }
    to { transform: scaleX(1); }
  }
  @keyframes sf-quiz-arm {
    to { transform: scaleX(1); }
  }
  .quiz-card {
    position: relative;
  }
  .quiz-card__inner {
    position: relative;
  }
  .quiz-card__back,
  .quiz-card__glow,
  .quiz-card__mist {
    display: none;
    pointer-events: none;
    user-select: none;
  }
  .quiz-match__tick {
    display: inline-block;
    min-width: 2ch;
    text-align: right;
    font-feature-settings: var(--num-tabular);
    font-variant-numeric: tabular-nums;
  }
  html.motion--desktop .quiz-card {
    perspective: 1400px;
    isolation: isolate;
  }
  html.motion--desktop .quiz-card__inner {
    transform-style: preserve-3d;
    animation: sf-quiz-turn var(--sf-quiz-turn) var(--sf-ease-out) var(--sf-quiz-hold) both;
  }
  html.motion--desktop .quiz-card__front {
    backface-visibility: hidden;
  }
  html.motion--desktop .quiz-card__back {
    display: grid;
    place-items: center;
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    border: var(--border-hair) solid var(--quiz-line-strong, rgba(212, 176, 132, 0.42));
    background: radial-gradient(ellipse 70% 55% at 50% 42%, var(--quiz-line, rgba(212, 176, 132, 0.18)), rgba(10, 10, 10, 0) 72%), var(--surface-sunken);
  }
  html.motion--desktop .quiz-card__frame {
    position: absolute;
    inset: 0.75rem;
    border: var(--border-hair) solid var(--quiz-line, rgba(212, 176, 132, 0.3));
  }
  html.motion--desktop .quiz-card__frame::before {
    content: "";
    position: absolute;
    inset: 0.5rem;
    border: var(--border-hair) solid var(--quiz-line-faint, rgba(212, 176, 132, 0.14));
  }
  html.motion--desktop .quiz-card__sigil {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(3rem, 7vw, 5.5rem);
    letter-spacing: 0.22em;
    line-height: 1;
    color: var(--title-fallback, var(--gold-400));
    background-image: var(--grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: sf-quiz-breathe var(--sf-quiz-hold) var(--sf-ease-out) both;
  }
  html.motion--desktop .quiz-card__glow {
    display: block;
    position: absolute;
    inset: -14%;
    z-index: -1;
    background: var(--glow-strong, radial-gradient(ellipse at 50% 50%, rgba(212, 176, 132, 0.55), rgba(212, 176, 132, 0.12) 45%, rgba(10, 10, 10, 0) 70%));
    opacity: 0;
    transform: scale(0.9);
    animation: sf-quiz-glow calc(var(--sf-quiz-turn) + var(--sf-quiz-mist)) var(--sf-ease-out) var(--sf-quiz-hold) both;
  }
  html.motion--desktop .quiz-card__mist {
    display: block;
    position: absolute;
    inset: -6%;
    z-index: 2;
    background:
      radial-gradient(circle at 30% 60%, var(--mist-a, rgba(245, 240, 232, 0.5)), rgba(245, 240, 232, 0) 45%),
      radial-gradient(circle at 70% 35%, var(--mist-b, rgba(212, 176, 132, 0.45)), rgba(212, 176, 132, 0) 50%),
      radial-gradient(circle at 50% 82%, var(--mist-a, rgba(245, 240, 232, 0.35)), rgba(245, 240, 232, 0) 40%);
    opacity: 0.85;
    animation: sf-quiz-mist var(--sf-quiz-mist) var(--sf-ease-out) calc(var(--sf-quiz-hold) + var(--sf-quiz-turn) * 0.5) forwards;
  }
  html.motion--desktop .quiz-card.is-waiting :is(.quiz-card__inner, .quiz-card__glow, .quiz-card__mist, .quiz-card__sigil) {
    animation-play-state: paused;
  }
  .quiz-card.is-revealed .quiz-card__back,
  .quiz-card.is-revealed .quiz-card__mist {
    display: none;
  }
  html.motion--desktop body.quiz-result .page-head__title.text-gold-grad {
    background-size: 200% 100%;
    animation: sf-quiz-sweep var(--sf-quiz-turn) var(--sf-ease-out) var(--sf-quiz-hold) both;
  }
  html.motion--desktop body.quiz-result .quiz-notes {
    animation: sf-quiz-rise var(--sf-dur-reveal) var(--sf-ease-out) var(--sf-quiz-notes-at) both;
  }
  html.motion--desktop body.quiz-result .quiz-match {
    display: inline-block;
    animation: sf-quiz-rise var(--sf-dur-reveal) var(--sf-ease-out) var(--sf-quiz-notes-at) both;
  }
  html.motion--desktop body.quiz-result .meter__seg::after {
    transition-delay: calc(var(--sf-quiz-notes-at) + 3 * var(--sf-quiz-notes-step) + var(--i, 0) * 60ms);
  }
  html.motion--mobile body.quiz-result .quiz-card__front .product-card__img {
    animation: sf-quiz-settle var(--sf-quiz-settle) var(--sf-ease-out) both;
  }
  @keyframes sf-quiz-turn {
    from { transform: rotateY(180deg); }
    to { transform: rotateY(0deg); }
  }
  @keyframes sf-quiz-breathe {
    from { opacity: 0.4; transform: scale(0.96); }
    to { opacity: 1; transform: none; }
  }
  @keyframes sf-quiz-glow {
    0% { opacity: 0; transform: scale(0.9); }
    45% { opacity: 0.9; transform: scale(1.05); }
    100% { opacity: 0.18; transform: none; }
  }
  @keyframes sf-quiz-mist {
    to { opacity: 0; transform: scale(1.25) translateY(-4%); }
  }
  @keyframes sf-quiz-sweep {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
  }
  @keyframes sf-quiz-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes sf-quiz-settle {
    from { transform: scale(1.06); }
    to { transform: scale(1.001); }
  }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}
@layer motion {
  :root {
    --sf-veil-out: 160ms;
    --sf-veil-in: 200ms;
    --sf-mist: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(212, 176, 132, 0.14), rgba(212, 176, 132, 0) 70%), #0A0A0A;
  }
  html[data-theme="light"] {
    --sf-mist: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(154, 116, 66, 0.10), rgba(154, 116, 66, 0) 70%), #F6F1E8;
  }
  ::view-transition {
    background: var(--sf-mist);
  }
  ::view-transition-old(root) {
    animation: sf-mist-out var(--sf-veil-out) var(--sf-ease-in) both;
    mix-blend-mode: normal;
  }
  ::view-transition-new(root) {
    animation: sf-mist-in var(--sf-veil-in) var(--sf-ease-out) both;
    mix-blend-mode: normal;
  }
  @keyframes sf-mist-out {
    to {
      opacity: 0;
      transform: scale(1.012);
    }
  }
  @keyframes sf-mist-in {
    from {
      opacity: 0;
    }
  }
  .sf-veil {
    position: fixed;
    inset: 0;
    z-index: 590;
    display: none;
    opacity: 0;
    visibility: hidden;
    background: var(--sf-mist);
    transition: opacity var(--sf-veil) var(--sf-ease-in), visibility 0s linear var(--sf-veil);
  }
  html.motion--desktop .sf-veil {
    display: block;
  }
  html.motion--desktop .sf-veil.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--sf-veil) var(--sf-ease-in), visibility 0s;
    animation: sf-veil-failsafe var(--sf-veil) var(--sf-ease-out) var(--sf-veil-failsafe) forwards;
  }
  html.motion--desktop .sf-veil.is-restored {
    transition: none;
    animation: none;
  }
  @keyframes sf-veil-failsafe {
    to {
      opacity: 0;
      visibility: hidden;
    }
  }
}