/* ==========================================================================
   Skin Hobbies — home page
   ==========================================================================
   Ported from the Phase 1 Astro site (website/src/pages/index.astro and its
   HeroCarousel / ModelShowcase components).

   Astro scoped each component's <style> to that component with a generated
   attribute. Django has no equivalent, so the carousel and showcase rules are
   prefixed with their root class (.carousel / .showcase) to reproduce that
   isolation. Without it their bare `.card`, `.dot`, `.dots` and `.active`
   rules would collide with each other and with the sitewide product card,
   which is also `.card`.

   Loaded only by catalogue/home.html. This is the source of truth for the home
   page design -- edit the look here, not in the template.
   ========================================================================== */


/* ===== Home page sections — website/src/pages/index.astro ===== */

  /* Consistent rhythm: white sections alternate with ONE soft tint,
     with the dark ritual band + clay CTA as the only accent moments. */
  .concerns {
    background: transparent;
  }

  .spotlight {
    background: transparent;
  }

  #products {
    background: var(--tint-blush);
  }

  .ritual .eyebrow.light {
    color: var(--gold-2);
  }

  .marquee {
    overflow: hidden;
    background: transparent;
    color: var(--muted);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 28s linear infinite;
  }

  .marquee-group {
    display: flex;
    gap: 1.25rem;
    padding: 0.85rem 0;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
  }

  /* Modern header split */
  .concerns-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    margin-bottom: clamp(2rem, 4vw, 3.25rem);
  }

  .concerns-top .section-head {
    margin-bottom: 0;
  }

  .concerns-lead {
    color: var(--muted);
    max-width: 24rem;
    font-size: 1.02rem;
  }

  /* Bento grid — one large feature + a wide + two compact */
  .concern-bento {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: 1fr;
  }

  .concern {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 0.6rem;
    min-height: 250px;
    padding: 1.5rem;
    border-radius: 26px;
    overflow: hidden;
    color: var(--ink);
    isolation: isolate;
    transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out);
  }

  .concern:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
  }

  /* Soft radial pastels, one per concern */
  .concern.t-butter { background: radial-gradient(125% 95% at 78% 12%, #fdf6e6, #efe0b6); }
  .concern.t-blush { background: radial-gradient(125% 95% at 78% 12%, #fdeee8, #f2ccbf); }
  .concern.t-sage { background: radial-gradient(125% 95% at 78% 12%, #eef4ea, #cfdfc9); }
  .concern.t-sky { background: radial-gradient(125% 95% at 78% 12%, #edf3f6, #cbdde6); }

  /* ---- Shop by skin type (product clusters + name badge) ---- */
  .skintypes-lead {
    margin-top: 0.8rem;
    color: var(--muted);
    max-width: 42rem;
  }
  .skintype-grid {
    margin-top: 2.8rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 1.6rem;
  }
  .skintype {
    flex: 1 1 246px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    text-align: center;
    color: var(--ink);
    transition: transform 0.4s var(--ease-out);
  }
  .skintype:hover {
    transform: translateY(-6px);
  }

  /* per-type colour: --sc circle, --sb soft backdrop */
  .skintype.st-dry { --sc: #cf847a; --sb: #f7e7e3; }
  .skintype.st-oily { --sc: #6f9fc4; --sb: #e4eff5; }
  .skintype.st-sensitive { --sc: #7fae7a; --sb: #e8f1e6; }
  .skintype.st-dull { --sc: #d2a24c; --sb: #f8eecf; }
  .skintype.st-mature { --sc: #b083a6; --sb: #f1e6ef; }
  .skintype.st-normal { --sc: #5aa39b; --sb: #e0efec; }
  .skintype.st-blemish { --sc: #9aa257; --sb: #eef1dc; }

  .skintype-scene {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    background: radial-gradient(66% 66% at 50% 50%, var(--sb), transparent 74%);
  }

  /* coloured name circle — soft sheen + tinted shadow, sits BEHIND the products */
  .skintype-badge {
    position: relative;
    width: 78%;
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    background:
      radial-gradient(130% 130% at 32% 24%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%),
      var(--sc);
    box-shadow: 0 20px 38px -10px color-mix(in srgb, var(--sc) 60%, transparent),
      inset 0 -14px 26px -14px rgba(0, 0, 0, 0.25);
    transition: transform 0.4s var(--ease-out);
  }
  .skintype:hover .skintype-badge {
    transform: scale(1.04);
  }
  .badge-word {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.35rem, 3.4vw, 1.9rem);
    line-height: 1;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
  }
  .badge-sub {
    font-size: 0.56rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-top: 0.35rem;
    opacity: 0.88;
  }

  .skintype-body {
    margin-top: 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
  }
  .skintype-body h3 {
    font-family: var(--font-body);
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0;
  }
  .skintype-body p {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0;
    max-width: 22rem;
  }
  .skintype-link {
    margin-top: 0.5rem;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: color-mix(in srgb, var(--sc) 82%, #4a3b32);
    position: relative;
    padding-bottom: 2px;
  }
  .skintype-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1.5px;
    background: var(--sc);
    transform: translateX(-50%);
    transition: width 0.35s var(--ease-out);
  }
  .skintype:hover .skintype-link::after {
    width: 100%;
  }

  /* ---- Ready-made routines (bundles / kits) ---- */
  .bundles-lead {
    margin-top: 0.8rem;
    color: var(--muted);
    max-width: 42rem;
  }
  .bundle-grid {
    margin-top: 2.4rem;
    display: grid;
    gap: 1.6rem;
    grid-template-columns: 1fr;
  }
  .bundle {
    --sc: #6f9fc4;
    --sb: #e4eff5;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;
    color: var(--ink);
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
  }
  .bundle.st-sky { --sc: #6f9fc4; --sb: #e4eff5; }
  .bundle.st-mauve { --sc: #b083a6; --sb: #f1e6ef; }
  .bundle:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
  }
  /* The same circle as the skin-type cards, so the two sections read as one
     family. The kit name sits inside it where "Dry / Skin" sits above. */
  /* No fixed aspect ratio: the scene hugs the circle instead of reserving a
     box for products that are no longer there. */
  .bundle-scene {
    display: grid;
    place-items: center;
    padding: 2.2rem 1rem 1.4rem;
    background: radial-gradient(72% 92% at 50% 44%, var(--sb), #fff 78%);
  }
  .bundle-badge {
    position: relative;
    /* Width and height both set, and the padding in rem rather than a
       percentage: percentage padding resolves against the containing block's
       width, not the circle's, so 12% here was 65px a side and squeezed the
       name into a 78px column four lines deep -- which is what turned the
       circle into an egg. */
    width: clamp(11rem, 24vw, 13.5rem);
    height: clamp(11rem, 24vw, 13.5rem);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 1.5rem;
    color: #fff;
    text-align: center;
    background:
      radial-gradient(130% 130% at 32% 24%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%),
      var(--sc);
    box-shadow: 0 20px 38px -10px color-mix(in srgb, var(--sc) 60%, transparent),
      inset 0 -14px 26px -14px rgba(0, 0, 0, 0.25);
    transition: transform 0.4s var(--ease-out);
  }
  .bundle:hover .bundle-badge {
    transform: scale(1.04);
  }
  /* The kit names run to three or four words, where a skin type is one, so
     this circle's text wraps rather than being set on a single line. */
  .bundle-badge .badge-word {
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
    line-height: 1.15;
  }
  .bundle-badge .badge-sub {
    margin-top: 0;
    font-size: 0.5rem;
    letter-spacing: 0.22em;
    line-height: 1.6;
  }

  .bundle-info {
    padding: 0.4rem 1.5rem 1.6rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .bundle-tagline {
    color: var(--muted);
    font-size: 0.92rem;
    margin: 0;
  }
  .bundle-items {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
  }
  .bundle-items li {
    font-size: 0.72rem;
    background: var(--sb);
    color: var(--ink-soft);
    border-radius: 999px;
    padding: 0.32rem 0.62rem;
  }
  .bundle-link {
    margin-top: 1.1rem;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--sc);
  }
  @media (min-width: 760px) {
    .bundle-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  .concern-index {
    position: absolute;
    top: 1.3rem;
    left: 1.5rem;
    z-index: 2;
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: rgba(28, 25, 23, 0.4);
  }

  .concern-media {
    display: grid;
    place-items: center;
    min-height: 0;
    padding: 0.8rem 0.5rem 0;
    pointer-events: none;
  }

  .concern-media img {
    max-height: 100%;
    max-width: 68%;
    object-fit: contain;
    filter: drop-shadow(0 16px 26px rgba(28, 25, 23, 0.18));
    transition: transform 0.6s var(--ease-out);
  }

  .concern:hover .concern-media img {
    transform: scale(1.06) translateY(-4px);
  }

  .concern-body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.25rem;
    padding-right: 3.2rem;
  }

  .concern-body h3 {
    font-size: 1.5rem;
  }

  .concern-body p {
    color: var(--ink-soft);
    font-size: 0.9rem;
  }

  .concern-arrow {
    position: absolute;
    bottom: 1.4rem;
    right: 1.4rem;
    z-index: 2;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(28, 25, 23, 0.08);
    backdrop-filter: blur(6px);
    color: var(--ink);
    font-size: 1.1rem;
    transition: 0.35s var(--ease-out);
  }

  .concern:hover .concern-arrow {
    background: var(--ink);
    color: #fff;
    transform: translateX(3px);
  }

  @media (min-width: 760px) {
    .concern-bento {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, minmax(215px, 1fr));
    }
    .concern.c1 {
      grid-column: span 2;
      grid-row: span 2;
    }
    .concern.c2 {
      grid-column: span 2;
    }
    .concern.c1 .concern-media img {
      max-width: 52%;
    }
    .concern.c1 .concern-body h3 {
      font-size: 2.3rem;
    }
    .concern.c1 .concern-body p {
      font-size: 1rem;
      max-width: 22rem;
    }
    /* Wide short card: keep product modest so text stays clear */
    .concern.c2 .concern-media img {
      max-width: 34%;
    }
  }

  .section-head.wide {
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
  }

  .section-head.wide > div {
    display: grid;
    gap: 0.7rem;
    max-width: 40rem;
  }

  /* Two-brand story */
  .brands {
    background: transparent;
  }

  .brand-grid {
    display: grid;
    gap: 1.5rem;
  }

  .brand-card {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: stretch;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
  }

  .brand-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }

  .brand-media {
    overflow: hidden;
    background: var(--paper-deep);
  }

  .brand-card.lebelage .brand-media,
  .brand-card.oradew .brand-media {
    background: var(--paper-deep);
  }

  .brand-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-out);
  }

  .brand-card:hover .brand-media img {
    transform: scale(1.05);
  }

  .brand-body {
    padding: 1.75rem;
    display: grid;
    align-content: center;
    gap: 0.5rem;
  }

  .brand-body h3 {
    font-size: clamp(2rem, 4vw, 2.8rem);
  }

  .brand-copy {
    color: var(--muted);
    font-size: 0.98rem;
  }

  .brand-link {
    margin-top: 0.6rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent-deep);
  }

  /* Inclusive faces live in the intro section */

  .ritual {
    /* The halo behind the logo card is a fixed 460px circle, and between about
       900 and 1100px wide its column is narrower than that, so it hung over the
       edge and took the whole page with it -- 46px of sideways scroll at 900px.
       It is decoration, so it is clipped at the section rather than resized;
       overflow-x: clip does that without making a scroll container. */
    overflow-x: clip;
    padding: clamp(4.5rem, 9vw, 8rem) 0;
    background:
      radial-gradient(circle at 82% 15%, rgba(192, 106, 73, 0.16), transparent 42%),
      var(--ink);
    color: var(--paper);
  }

  .ritual-grid {
    display: grid;
    gap: 2.5rem;
    align-items: center;
  }

  /* Grid items refuse to shrink below their content by default, which is how
     this row grew wider than the container it sits in. */
  .ritual-grid > * {
    min-width: 0;
  }

  .ritual h2 {
    margin: 0.7rem 0 1.2rem;
    font-size: clamp(2.4rem, 5vw, 4rem);
    max-width: 12ch;
  }

  .ritual ul {
    margin: 0 0 1.6rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.7rem;
    color: rgba(248, 243, 237, 0.8);
  }

  .ritual li {
    padding-left: 1.2rem;
    position: relative;
  }

  .ritual li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--gold);
  }

  .ritual-visual {
    position: relative;
    justify-self: center;
    display: grid;
    place-items: center;
    min-height: 320px;
    padding: 1.5rem;
  }

  .ritual-visual::before {
    content: "";
    position: absolute;
    width: min(460px, 84vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(206, 124, 84, 0.3), transparent 62%);
    filter: blur(26px);
  }

  .logo-card {
    position: relative;
    z-index: 1;
    /* Measured against its own parent, not the viewport. At 88vw the circle
       was 343px on a 390px phone, and the 24px of padding either side of it
       took the section 41px past the container -- which is what made the whole
       page scroll sideways. */
    width: min(470px, 100%);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, #33261b, #1b130f 72%);
    border: 1px solid rgba(206, 124, 84, 0.35);
    box-shadow:
      0 30px 70px rgba(0, 0, 0, 0.45),
      inset 0 0 0 1px rgba(248, 243, 237, 0.05);
  }

  .logo-card img {
    display: block;
    width: 86%;
    height: auto;
  }

  .cta-band {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    background: var(--accent-soft);
    border-top: 1px solid var(--line);
  }

  .cta-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: space-between;
    align-items: center;
  }

  .cta-inner h2 {
    margin: 0.4rem 0 0.5rem;
    font-size: clamp(2rem, 4vw, 3rem);
  }

  .cta-inner p {
    color: var(--muted);
    max-width: 36rem;
  }

  .cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  @media (min-width: 900px) {
    .ritual-grid {
      grid-template-columns: 1.2fr 0.8fr;
    }
  }

/* ===== Hero carousel — website/src/components/HeroCarousel.astro ===== */


.carousel {/* one continuous dark→warm→white sweep so the two halves blend with no hard seam */
    position: relative;
    min-height: min(84vh, 880px);
    overflow: hidden;
    
    background: linear-gradient(
      100deg,
      #1a1310 0%,
      #241a15 42%,
      #5c4a3a 49%,
      #b6a794 53%,
      #ede6dc 61%,
      #faf7f2 100%
    );
    color: var(--paper);
  }
.carousel .slides {
    position: absolute;
    inset: 0;
  }
.carousel .slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease, visibility 0.9s;
  }
.carousel .slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
  }/* ---- text panel ---- */
.carousel .slide-panel {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 2rem clamp(1.5rem, 4vw, 4rem);
  }
.carousel .panel-inner {
    max-width: 30rem;
    width: 100%;
    margin-left: max(calc((100% - var(--max) / 2) / 1), 0);
  }
.carousel .panel-inner .eyebrow {
    color: var(--gold-2);
  }
.carousel .panel-inner h2 {
    margin: 0.8rem 0 0;
    font-size: clamp(2.4rem, 4.6vw, 4.2rem);
    line-height: 0.98;
    max-width: 12ch;
    transform: translateY(16px);
    opacity: 0;
    transition: 0.7s ease 0.15s;
  }
.carousel .panel-inner .copy {
    margin: 1.1rem 0 1.6rem;
    max-width: 30rem;
    color: rgba(248, 243, 237, 0.8);
    font-size: 1.05rem;
    transform: translateY(16px);
    opacity: 0;
    transition: 0.7s ease 0.25s;
  }
.carousel .panel-inner .btn {
    transform: translateY(16px);
    opacity: 0;
    transition: 0.7s ease 0.35s;
  }
.carousel .slide.active .panel-inner h2,
.carousel .slide.active .panel-inner .copy,
.carousel .slide.active .panel-inner .btn {
    transform: translateY(0);
    opacity: 1;
  }/* ---- image panel (product cut-out floating on the brown backdrop) ---- */
.carousel .slide-media {/* transparent so the carousel sweep shows through; a soft highlight lifts the product */
    position: relative;
    overflow: hidden;
    padding: 8%;
    box-sizing: border-box;
    
    background: radial-gradient(46% 44% at 54% 42%, rgba(255, 255, 255, 0.55), transparent 70%);
  }/* contain within the padded box: the whole product always fits with clear
     margin on every side and can never be clipped, on any screen size */
.carousel .slide-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 18px 22px rgba(60, 40, 30, 0.16));
  }/* gentle rise-in on activation — no scaling, so the product is never cropped */
.carousel .slide.active .slide-media img {
    animation: floatIn 0.9s var(--ease-out, ease) both;
  }
@keyframes floatIn {
from {
      opacity: 0;
      transform: translateY(14px);
    }
to {
      opacity: 1;
      transform: translateY(0);
    }
  }/* both panels share the brown backdrop now, so no seam blend is needed */
.carousel .media-fade {
    display: none;
  }
.carousel .controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.4rem;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
.carousel .dots {
    display: flex;
    gap: 0.45rem;
    /* Never wrap. Seven dashes at their full width need 267px and only 244px is
       free beside the arrows, so the seventh dropped onto a second row on every
       phone -- a stray dash sitting under the others, close enough to the strip
       below to look like a mistake. They share the width that is going instead.
       min-width:0 because a flex item will not shrink past its content
       otherwise, which is what the dashes have to do here. */
    flex-wrap: nowrap;
    min-width: 0;
  }
.carousel .dot {
    position: relative;
    /* 2rem is the width it wants; on a wide screen there is room and nothing
       changes. Narrower, they give ground evenly rather than one of them
       wrapping. The floor keeps the smallest phone's dash still tappable. */
    width: 2rem;
    flex-shrink: 1;
    min-width: 0.85rem;
    height: 3px;
    border: 0;
    padding: 0;
    background: rgba(248, 243, 237, 0.3);
    cursor: pointer;
  }
  /* The dash stays 3px. The pressable area is grown with a pseudo-element,
     which costs the layout nothing -- padding made the row taller and the
     negative margin needed to hide that dragged the dots up into the copy
     above them. A 2rem x 3px target is a miss waiting to happen otherwise. */
.carousel .dot::after {
    content: "";
    position: absolute;
    inset: -1.1rem -0.25rem;
  }
.carousel .dot.active {
    background: var(--gold);
  }
.carousel .arrows {
    display: flex;
    gap: 0.45rem;
    /* The dashes absorb the squeeze, not these. */
    flex-shrink: 0;
  }
.carousel .arrow {
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid rgba(248, 243, 237, 0.35);
    background: rgba(8, 7, 6, 0.35);
    color: var(--paper);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: 0.25s ease;
  }
.carousel .arrow:hover {
    background: var(--gold);
    color: var(--ink);
    border-color: var(--gold);
  }
.carousel .progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: rgba(248, 243, 237, 0.12);
    z-index: 4;
  }
.carousel .progress span {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--gold), var(--skin-2));
  }
.carousel .progress span.run {
    animation: progressRun var(--dur, 6s) linear;
  }
@keyframes progressRun {
from {
      width: 0%;
    }
to {
      width: 100%;
    }
  }
@media (max-width: 820px) {
.carousel {/* stacked: light product panel on top blends down into the dark text panel */
      min-height: 0;
      
      background: linear-gradient(
        180deg,
        #faf7f2 0%,
        #ede6dc 40%,
        #b6a794 47%,
        #5c4a3a 51%,
        #241a15 58%,
        #1a1310 100%
      );
    }
.carousel .slide {
      grid-template-columns: 1fr;
      grid-template-rows: 64vw 1fr;
      position: absolute;
    }
.carousel .slide-media {
      order: -1;
      padding: 4.5% 7%;
    }
.carousel .slide-panel {
      justify-content: flex-start;
      align-items: flex-start;
      padding: 1.5rem clamp(1.25rem, 6vw, 2rem) 4.5rem;
    }
.carousel .panel-inner {
      margin-left: 0;
    }/* give the stacked slide an explicit height so absolute slides overlap cleanly */
.carousel .slides {
      position: relative;
      /* The slides are absolutely positioned so they cannot size this
         container -- the reserve here is the only thing setting its height, and
         at 22rem it was between 86 and 114px short of the tallest slide at every
         width from 360 to 819. The carousel clips its overflow, so the Discover
         button was being cut in half. Longer product names made it worse: the
         titles gained their sizes ("... Cream 50ml") and started wrapping to a
         fourth line.
         30rem clears the tallest slide at every width with room to spare. */
      min-height: calc(64vw + 30rem);
    }
  }
@media (prefers-reduced-motion: reduce) {
.carousel .slide,
.carousel .slide-media img,
.carousel .panel-inner h2,
.carousel .panel-inner .copy,
.carousel .panel-inner .btn,
.carousel .progress span {
      transition: none;
      animation: none;
    }
  }

/* ===== Model showcase — website/src/components/ModelShowcase.astro ===== */


.showcase {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 8vw, 7rem) 0 clamp(3.5rem, 6vw, 5.5rem);
    color: var(--paper);
    isolation: isolate;
  }
.showcase-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(70% 55% at 50% 8%, rgba(206, 124, 84, 0.22), transparent 60%),
      linear-gradient(160deg, #2a201b 0%, #1a1310 55%, #120d0b 100%);
  }
.showcase-head {
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 0.85rem;
    max-width: 44rem;
    margin-inline: auto;
  }
.showcase-head .eyebrow {
    color: var(--gold-2);
  }
.showcase-head h2 {
    font-size: clamp(2.6rem, 6vw, 4.8rem);
    line-height: 0.98;
    margin: 0;
    max-width: 14ch;
  }
.showcase-head .lede {
    color: rgba(248, 243, 237, 0.74);
    font-size: 1.05rem;
    max-width: 34rem;
    margin: 0;
  }/* ---- peek slider ---- */
.showcase .slider {
    position: relative;
    margin-top: clamp(2.5rem, 5vw, 4rem);
  }
.showcase .viewport {
    overflow: hidden;
    width: 100%;
  }
.showcase .track {
    display: flex;
    gap: clamp(1rem, 2.4vw, 2rem);
    padding: 1.5rem 0;
    margin: 0;
    list-style: none;
    transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
.showcase .card {
    position: relative;
    flex: 0 0 auto;
    width: clamp(230px, 34vw, 380px);
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    overflow: hidden;
    opacity: 0.42;
    transform: scale(0.9);
    transition:
      opacity 0.6s ease,
      transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
  }
.showcase .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    display: block;
  }
.showcase .card .ring {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(248, 243, 237, 0.14);
    pointer-events: none;
  }
.showcase .card.active {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 34px 80px rgba(0, 0, 0, 0.55);
  }
.showcase .card.active .ring {
    box-shadow:
      inset 0 0 0 1px rgba(248, 243, 237, 0.16),
      inset 0 0 0 4px rgba(206, 124, 84, 0.55);
  }/* subtle bottom fade on the focused card */
.showcase .card.active::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 42%;
    background: linear-gradient(0deg, rgba(18, 13, 11, 0.42), transparent);
    pointer-events: none;
  }
.showcase .nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid rgba(248, 243, 237, 0.35);
    background: rgba(12, 9, 8, 0.5);
    color: var(--paper);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: 0.25s ease;
  }
.showcase .nav:hover {
    background: var(--gold);
    color: var(--ink);
    border-color: var(--gold);
  }
.showcase .nav.prev {
    left: clamp(0.5rem, 3vw, 2.5rem);
  }
.showcase .nav.next {
    right: clamp(0.5rem, 3vw, 2.5rem);
  }
.showcase .dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.6rem;
  }
.showcase .dot {
    position: relative;
    width: 2.2rem;
    height: 3px;
    border: 0;
    padding: 0;
    background: rgba(248, 243, 237, 0.28);
    cursor: pointer;
    transition: background 0.25s ease;
  }
  /* Same trick as the hero carousel. */
.showcase .dot::after {
    content: "";
    position: absolute;
    inset: -1.1rem -0.25rem;
  }
.showcase .dot.active {
    background: var(--gold);
  }
.showcase-cta {
    text-align: center;
    margin-top: clamp(2rem, 4vw, 3rem);
  }
@media (max-width: 640px) {
.showcase .card {
      width: clamp(210px, 66vw, 300px);
    }
.showcase .nav {
      width: 2.6rem;
      height: 2.6rem;
    }
  }
@media (prefers-reduced-motion: reduce) {
.showcase .track,
.showcase .card {
      transition: none;
    }
  }