/* ruwayda.co depth layer: the footer's treatment carried through every page.
   Loaded after site.css and funnel.css. Light sections get drifting lilac and warm light plus grain;
   mist sections get a lilac gradient and a cloud wash; plum sections get the footer's lit plum.
   Cards become raised, frosted surfaces that tilt toward the cursor with a moving glare (depth.js sets
   --rx/--ry/--mx/--my on hover-capable devices). Motion is transform/opacity, off for reduced motion. */
@property --glare { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  --d-ease: cubic-bezier(.2, .8, .2, 1);
  --d-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .18 0 0 0 0 .3 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --d-grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* brand graphics, drawn in code: silk contour lines, seal rings, ✦ sparkles; baked-alpha grain */
  --d-waves: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1400 520%22%3E%3Cpath d=%22M-60 150 C 260 55, 540 270, 780 162 S 1190 20, 1460 126%22 fill=%22none%22 stroke=%22%239F8BCF%22 stroke-opacity=%220.5%22 stroke-width=%221.15%22/%3E%3Cpath d=%22M-60 174 C 260 74, 540 291, 780 186 S 1190 51, 1460 150%22 fill=%22none%22 stroke=%22%239F8BCF%22 stroke-opacity=%220.462%22 stroke-width=%221.15%22/%3E%3Cpath d=%22M-60 198 C 260 93, 540 312, 780 210 S 1190 82, 1460 174%22 fill=%22none%22 stroke=%22%239F8BCF%22 stroke-opacity=%220.423%22 stroke-width=%221.15%22/%3E%3Cpath d=%22M-60 222 C 260 112, 540 333, 780 234 S 1190 113, 1460 198%22 fill=%22none%22 stroke=%22%239F8BCF%22 stroke-opacity=%220.385%22 stroke-width=%221.15%22/%3E%3Cpath d=%22M-60 246 C 260 131, 540 354, 780 258 S 1190 144, 1460 222%22 fill=%22none%22 stroke=%22%239F8BCF%22 stroke-opacity=%220.346%22 stroke-width=%221.15%22/%3E%3Cpath d=%22M-60 270 C 260 150, 540 375, 780 282 S 1190 175, 1460 246%22 fill=%22none%22 stroke=%22%239F8BCF%22 stroke-opacity=%220.308%22 stroke-width=%221.15%22/%3E%3Cpath d=%22M-60 294 C 260 169, 540 396, 780 306 S 1190 206, 1460 270%22 fill=%22none%22 stroke=%22%239F8BCF%22 stroke-opacity=%220.269%22 stroke-width=%221.15%22/%3E%3Cpath d=%22M-60 318 C 260 188, 540 417, 780 330 S 1190 237, 1460 294%22 fill=%22none%22 stroke=%22%239F8BCF%22 stroke-opacity=%220.231%22 stroke-width=%221.15%22/%3E%3Cpath d=%22M-60 342 C 260 207, 540 438, 780 354 S 1190 268, 1460 318%22 fill=%22none%22 stroke=%22%239F8BCF%22 stroke-opacity=%220.192%22 stroke-width=%221.15%22/%3E%3Cpath d=%22M-60 366 C 260 226, 540 459, 780 378 S 1190 299, 1460 342%22 fill=%22none%22 stroke=%22%239F8BCF%22 stroke-opacity=%220.154%22 stroke-width=%221.15%22/%3E%3Cpath d=%22M-60 390 C 260 245, 540 480, 780 402 S 1190 330, 1460 366%22 fill=%22none%22 stroke=%22%239F8BCF%22 stroke-opacity=%220.115%22 stroke-width=%221.15%22/%3E%3C/svg%3E");
  --d-waves-white: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1400 520%22%3E%3Cpath d=%22M-60 150 C 260 55, 540 270, 780 162 S 1190 20, 1460 126%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.75%22 stroke-width=%221.15%22/%3E%3Cpath d=%22M-60 174 C 260 74, 540 291, 780 186 S 1190 51, 1460 150%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.692%22 stroke-width=%221.15%22/%3E%3Cpath d=%22M-60 198 C 260 93, 540 312, 780 210 S 1190 82, 1460 174%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.635%22 stroke-width=%221.15%22/%3E%3Cpath d=%22M-60 222 C 260 112, 540 333, 780 234 S 1190 113, 1460 198%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.577%22 stroke-width=%221.15%22/%3E%3Cpath d=%22M-60 246 C 260 131, 540 354, 780 258 S 1190 144, 1460 222%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.519%22 stroke-width=%221.15%22/%3E%3Cpath d=%22M-60 270 C 260 150, 540 375, 780 282 S 1190 175, 1460 246%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.462%22 stroke-width=%221.15%22/%3E%3Cpath d=%22M-60 294 C 260 169, 540 396, 780 306 S 1190 206, 1460 270%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.404%22 stroke-width=%221.15%22/%3E%3Cpath d=%22M-60 318 C 260 188, 540 417, 780 330 S 1190 237, 1460 294%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.346%22 stroke-width=%221.15%22/%3E%3Cpath d=%22M-60 342 C 260 207, 540 438, 780 354 S 1190 268, 1460 318%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.288%22 stroke-width=%221.15%22/%3E%3Cpath d=%22M-60 366 C 260 226, 540 459, 780 378 S 1190 299, 1460 342%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.231%22 stroke-width=%221.15%22/%3E%3Cpath d=%22M-60 390 C 260 245, 540 480, 780 402 S 1190 330, 1460 366%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.173%22 stroke-width=%221.15%22/%3E%3C/svg%3E");
  --d-rings: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 900 900%22%3E%3Ccircle cx=%22450%22 cy=%22450%22 r=%22110%22 fill=%22none%22 stroke=%22%23A895D6%22 stroke-opacity=%220.55%22 stroke-width=%221%22/%3E%3Ccircle cx=%22450%22 cy=%22450%22 r=%22160%22 fill=%22none%22 stroke=%22%23A895D6%22 stroke-opacity=%220.49%22 stroke-width=%221%22/%3E%3Ccircle cx=%22450%22 cy=%22450%22 r=%22210%22 fill=%22none%22 stroke=%22%23A895D6%22 stroke-opacity=%220.43%22 stroke-width=%221%22/%3E%3Ccircle cx=%22450%22 cy=%22450%22 r=%22260%22 fill=%22none%22 stroke=%22%23A895D6%22 stroke-opacity=%220.37%22 stroke-width=%221%22/%3E%3Ccircle cx=%22450%22 cy=%22450%22 r=%22310%22 fill=%22none%22 stroke=%22%23A895D6%22 stroke-opacity=%220.31%22 stroke-width=%221%22/%3E%3Ccircle cx=%22450%22 cy=%22450%22 r=%22360%22 fill=%22none%22 stroke=%22%23A895D6%22 stroke-opacity=%220.25%22 stroke-width=%221%22/%3E%3Ccircle cx=%22450%22 cy=%22450%22 r=%22410%22 fill=%22none%22 stroke=%22%23A895D6%22 stroke-opacity=%220.19%22 stroke-width=%221%22/%3E%3Ccircle cx=%22450%22 cy=%22450%22 r=%22235%22 fill=%22none%22 stroke=%22%23A895D6%22 stroke-opacity=%22.6%22 stroke-width=%222.2%22 stroke-dasharray=%220.1 11%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --d-rings-light: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 900 900%22%3E%3Ccircle cx=%22450%22 cy=%22450%22 r=%22110%22 fill=%22none%22 stroke=%22%23C4B6E3%22 stroke-opacity=%220.55%22 stroke-width=%221%22/%3E%3Ccircle cx=%22450%22 cy=%22450%22 r=%22160%22 fill=%22none%22 stroke=%22%23C4B6E3%22 stroke-opacity=%220.49%22 stroke-width=%221%22/%3E%3Ccircle cx=%22450%22 cy=%22450%22 r=%22210%22 fill=%22none%22 stroke=%22%23C4B6E3%22 stroke-opacity=%220.43%22 stroke-width=%221%22/%3E%3Ccircle cx=%22450%22 cy=%22450%22 r=%22260%22 fill=%22none%22 stroke=%22%23C4B6E3%22 stroke-opacity=%220.37%22 stroke-width=%221%22/%3E%3Ccircle cx=%22450%22 cy=%22450%22 r=%22310%22 fill=%22none%22 stroke=%22%23C4B6E3%22 stroke-opacity=%220.31%22 stroke-width=%221%22/%3E%3Ccircle cx=%22450%22 cy=%22450%22 r=%22360%22 fill=%22none%22 stroke=%22%23C4B6E3%22 stroke-opacity=%220.25%22 stroke-width=%221%22/%3E%3Ccircle cx=%22450%22 cy=%22450%22 r=%22410%22 fill=%22none%22 stroke=%22%23C4B6E3%22 stroke-opacity=%220.19%22 stroke-width=%221%22/%3E%3Ccircle cx=%22450%22 cy=%22450%22 r=%22235%22 fill=%22none%22 stroke=%22%23C4B6E3%22 stroke-opacity=%22.6%22 stroke-width=%222.2%22 stroke-dasharray=%220.1 11%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --d-sparks-a: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1400 700%22%3E%3Cpath d=%22M703 184Q703 194 713 194Q703 194 703 204Q703 194 693 194Q703 194 703 184Z%22 fill=%22%23FFFFFF%22 fill-opacity=%220.55%22/%3E%3Cpath d=%22M1137 128Q1137 136 1145 136Q1137 136 1137 144Q1137 136 1129 136Q1137 136 1137 128Z%22 fill=%22%23FFFFFF%22 fill-opacity=%220.85%22/%3E%3Cpath d=%22M479 73Q479 78 484 78Q479 78 479 83Q479 78 474 78Q479 78 479 73Z%22 fill=%22%23D8B48E%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M183 281Q183 286 188 286Q183 286 183 291Q183 286 178 286Q183 286 183 281Z%22 fill=%22%23D8B48E%22 fill-opacity=%220.55%22/%3E%3Cpath d=%22M1198 160Q1198 166 1204 166Q1198 166 1198 172Q1198 166 1192 166Q1198 166 1198 160Z%22 fill=%22%23FFFFFF%22 fill-opacity=%220.85%22/%3E%3Cpath d=%22M1239 441Q1239 446 1244 446Q1239 446 1239 451Q1239 446 1234 446Q1239 446 1239 441Z%22 fill=%22%23FFFFFF%22 fill-opacity=%220.55%22/%3E%3Cpath d=%22M1180 168Q1180 176 1188 176Q1180 176 1180 184Q1180 176 1172 176Q1180 176 1180 168Z%22 fill=%22%23D8B48E%22 fill-opacity=%220.55%22/%3E%3Cpath d=%22M1147 147Q1147 160 1160 160Q1147 160 1147 173Q1147 160 1134 160Q1147 160 1147 147Z%22 fill=%22%23B9A7E0%22 fill-opacity=%220.85%22/%3E%3Cpath d=%22M410 132Q410 145 423 145Q410 145 410 158Q410 145 397 145Q410 145 410 132Z%22 fill=%22%23FFFFFF%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M239 584Q239 600 255 600Q239 600 239 616Q239 600 223 600Q239 600 239 584Z%22 fill=%22%23FFFFFF%22 fill-opacity=%220.85%22/%3E%3Cpath d=%22M162 240Q162 250 172 250Q162 250 162 260Q162 250 152 250Q162 250 162 240Z%22 fill=%22%23D8B48E%22 fill-opacity=%220.7%22/%3E%3C/svg%3E");
  --d-sparks-b: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1400 700%22%3E%3Cpath d=%22M633 120Q633 125 638 125Q633 125 633 130Q633 125 628 125Q633 125 633 120Z%22 fill=%22%23B9A7E0%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M816 574Q816 582 824 582Q816 582 816 590Q816 582 808 582Q816 582 816 574Z%22 fill=%22%23FFFFFF%22 fill-opacity=%220.85%22/%3E%3Cpath d=%22M433 303Q433 313 443 313Q433 313 433 323Q433 313 423 313Q433 313 433 303Z%22 fill=%22%23FFFFFF%22 fill-opacity=%220.55%22/%3E%3Cpath d=%22M1310 500Q1310 505 1315 505Q1310 505 1310 510Q1310 505 1305 505Q1310 505 1310 500Z%22 fill=%22%23FFFFFF%22 fill-opacity=%220.55%22/%3E%3Cpath d=%22M1060 466Q1060 471 1065 471Q1060 471 1060 476Q1060 471 1055 471Q1060 471 1060 466Z%22 fill=%22%23D8B48E%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M157 230Q157 250 177 250Q157 250 157 270Q157 250 137 250Q157 250 157 230Z%22 fill=%22%23FFFFFF%22 fill-opacity=%220.85%22/%3E%3Cpath d=%22M795 203Q795 216 808 216Q795 216 795 229Q795 216 782 216Q795 216 795 203Z%22 fill=%22%23FFFFFF%22 fill-opacity=%220.85%22/%3E%3Cpath d=%22M782 599Q782 619 802 619Q782 619 782 639Q782 619 762 619Q782 619 782 599Z%22 fill=%22%23B9A7E0%22 fill-opacity=%220.85%22/%3E%3Cpath d=%22M616 348Q616 361 629 361Q616 361 616 374Q616 361 603 361Q616 361 616 348Z%22 fill=%22%23FFFFFF%22 fill-opacity=%220.7%22/%3E%3Cpath d=%22M403 521Q403 534 416 534Q403 534 403 547Q403 534 390 534Q403 534 403 521Z%22 fill=%22%23D8B48E%22 fill-opacity=%220.85%22/%3E%3Cpath d=%22M1355 201Q1355 207 1361 207Q1355 207 1355 213Q1355 207 1349 207Q1355 207 1355 201Z%22 fill=%22%23FFFFFF%22 fill-opacity=%220.85%22/%3E%3C/svg%3E");
  --d-grain-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .18 0 0 0 0 .3 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --d-grain-glow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --d-card: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .72));
  --d-card-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(58, 47, 77, .06), 0 22px 44px -26px rgba(58, 47, 77, .38);
  --d-card-shadow-up: inset 0 1px 0 #FFFFFF, 0 0 0 1px rgba(196, 182, 227, .55), 0 40px 70px -30px rgba(58, 47, 77, .55), 0 0 50px -18px rgba(196, 182, 227, .7);
}

/* ---------- page ground ---------- */
body { background:
  radial-gradient(1100px 700px at 100% 0%, rgba(196, 182, 227, .22), transparent 70%),
  var(--bone); }

/* ---------- sections ---------- */
/* overflow: clip keeps each section's light and graphics inside it (no scroll container, so sticky children
   still work); masks fade them out at the top and bottom so neighbouring sections meet without a seam */
.section, .page-hero { position: relative; isolation: isolate; overflow: clip; }

/* plain sections: a bone ground that blushes lilac through the middle, with fine grain */
.section:not(.section--mist, .section--plum), .page-hero {
  background: var(--d-grain-soft), linear-gradient(180deg, rgba(247, 243, 238, 0), rgba(239, 231, 243, .75) 50%, rgba(247, 243, 238, 0)); }

/* light: lilac, blush, periwinkle and sand glows that drift slowly (mirrored on even sections) */
.section::before, .page-hero::before { content: ""; position: absolute; inset: -6%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(40% 50% at 86% 20%, rgba(196, 182, 227, .56), transparent 70%),
    radial-gradient(34% 42% at 64% 90%, rgba(236, 196, 214, .38), transparent 70%),
    radial-gradient(32% 40% at 18% 16%, rgba(176, 186, 236, .3), transparent 70%),
    radial-gradient(36% 44% at 6% 82%, rgba(216, 180, 142, .24), transparent 70%),
    radial-gradient(28% 34% at 46% 50%, rgba(255, 255, 255, .6), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  animation: d-drift 26s var(--d-ease) infinite alternate; }
main > section:nth-of-type(even)::before { transform: scaleX(-1); animation-name: d-drift-flip; animation-duration: 30s; }
@keyframes d-drift { from { transform: translate3d(-2%, -1.5%, 0) scale(1); } to { transform: translate3d(2.5%, 2%, 0) scale(1.06); } }
@keyframes d-drift-flip { from { transform: scaleX(-1) translate3d(-2%, 1.5%, 0); } to { transform: scaleX(-1) translate3d(2.5%, -2%, 0) scale(1.06); } }

/* graphics: silk contour lines + sparkles on odd sections, seal rings + sparkles on even ones, floating gently */
.section::after, .page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    var(--d-sparks-a) 50% 50% / max(1400px, 100%) auto no-repeat,
    var(--d-waves) right -140px bottom -70px / min(1400px, 125%) auto no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  animation: d-float 16s ease-in-out infinite alternate; }
main > section:nth-of-type(even)::after { background:
    var(--d-sparks-b) 50% 50% / max(1400px, 100%) auto no-repeat,
    var(--d-rings) left -300px top -250px / 760px auto no-repeat; }
@keyframes d-float { from { transform: translate3d(0, -6px, 0); } to { transform: translate3d(0, 8px, 0); } }
/* phones: no sparkles (they would sit behind running text in a single column), smaller rings */
@media (max-width: 700px) {
  .section::after, .page-hero::after { background-image: none, var(--d-waves); }
  main > section:nth-of-type(even)::after { background-image: none, var(--d-rings); background-size: auto, 520px auto; background-position: 0 0, left -250px top -210px; }
}

/* product pages: the top product area isn't a .section, so it gets its own full-width light behind it */
main { overflow-x: clip; }
.pdp { position: relative; isolation: isolate; }
.pdp::before { content: ""; position: absolute; z-index: -1; top: -90px; bottom: -40px; left: 50%; width: 100vw; transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(40% 55% at 22% 40%, rgba(196, 182, 227, .42), transparent 70%),
    radial-gradient(36% 50% at 85% 20%, rgba(216, 180, 142, .16), transparent 70%),
    radial-gradient(40% 50% at 80% 85%, rgba(170, 148, 210, .22), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 80%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 15%, #000 80%, transparent); }

/* mist sections: a lilac gradient, a faint cloud bank across the top, white silk lines or pale seal rings */
.section--mist { background:
  var(--d-grain-soft),
  radial-gradient(60% 70% at 0% 0%, rgba(255, 255, 255, .7), transparent 65%),
  radial-gradient(50% 60% at 100% 100%, rgba(170, 148, 210, .38), transparent 70%),
  radial-gradient(40% 50% at 70% 10%, rgba(236, 196, 214, .3), transparent 70%),
  linear-gradient(170deg, #EFEAF6 0%, #E4DBF0 55%, #EBE3F2 100%); }
.section--mist::before { inset: 0 0 45% 0; animation: d-cloud 40s ease-in-out infinite alternate;
  background: url("img/brand/hero-clouds.jpg") 50% 0% / cover no-repeat; opacity: .42; mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
main > section.section--mist:nth-of-type(n)::before { transform: none; animation-name: d-cloud; }
main > section.section--mist:nth-of-type(odd)::after { background:
    var(--d-sparks-a) 50% 50% / max(1400px, 100%) auto no-repeat,
    var(--d-waves-white) left -160px bottom -80px / min(1400px, 125%) auto no-repeat; }
main > section.section--mist:nth-of-type(even)::after { background:
    var(--d-sparks-b) 50% 50% / max(1400px, 100%) auto no-repeat,
    var(--d-rings-light) right -300px bottom -320px / 760px auto no-repeat; }
@keyframes d-cloud { from { transform: translate3d(-1.5%, 0, 0) scale(1.04); } to { transform: translate3d(1.5%, 0, 0) scale(1.08); } }

/* plum sections: the footer's lit plum, with seal rings catching the light */
.section--plum { background:
  var(--d-grain-glow),
  radial-gradient(60% 80% at 88% 0%, rgba(196, 182, 227, .45), transparent 70%),
  radial-gradient(45% 60% at 14% 20%, rgba(160, 130, 205, .22), transparent 70%),
  radial-gradient(60% 75% at 4% 100%, rgba(122, 92, 160, .45), transparent 72%),
  linear-gradient(180deg, #54456E 0%, var(--plum) 48%, #1E1729 100%); }
.section--plum::before { inset: 0 0 45% 0; background: url("img/brand/hero-clouds.jpg") 50% 0% / cover no-repeat;
  opacity: .3; mix-blend-mode: screen; animation: d-cloud 40s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
main > section.section--plum:nth-of-type(n)::before { transform: none; animation-name: d-cloud; }
main > section.section--plum:nth-of-type(n)::after { opacity: .4; mix-blend-mode: screen; background:
    var(--d-sparks-b) 50% 50% / max(1400px, 100%) auto no-repeat,
    var(--d-rings-light) right -280px top -300px / 760px auto no-repeat; }

/* ---------- headings: a quiet plum gradient ---------- */
.section-head h2, .page-hero h1 { background: linear-gradient(100deg, var(--plum) 35%, #7A5CA0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.section--plum .section-head h2 { background: linear-gradient(100deg, var(--bone) 40%, var(--lilac)); -webkit-background-clip: text; background-clip: text; }

/* ---------- announcement bar: slow colour drift ---------- */
.announce { background: linear-gradient(90deg, #E9E3F2, #F2E7EC, #E2D9F1, #EDE4F3, #E9E3F2) 0 0 / 300% 100%;
  animation: d-pan 24s linear infinite; }
@keyframes d-pan { to { background-position: 300% 0; } }

/* ---------- cards: raised, frosted, tilt + glare ---------- */
.step, .standard, .icon-item, .photo-card, .ingredient, .aside-card, .bundle-item {
  border: 1px solid rgba(255, 255, 255, .85);
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, calc(var(--glare) * .9)), transparent 45%),
    var(--d-card);
  box-shadow: var(--d-card-shadow);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: transform .5s var(--d-ease), box-shadow .5s var(--d-ease), --glare .4s; }
.aside-card { background:
  radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, calc(var(--glare) * .9)), transparent 45%),
  linear-gradient(160deg, #F1ECF7, #E3DAF0); }
.step::before { background: linear-gradient(160deg, var(--lilac), #8E74BF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.icon-item__mark { background: radial-gradient(circle at 30% 25%, #FFFFFF, var(--mist) 55%, #D9CDEB); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -10px rgba(58, 47, 77, .45); }

/* product cards and category tiles: the media box carries the depth */
.card__media { transform: translateY(var(--lift, 0px)); }
.card__media, .tile { box-shadow: 0 22px 44px -28px rgba(58, 47, 77, .45);
  background: radial-gradient(70% 60% at 50% 40%, #FFFFFF, var(--mist) 75%);
  transition: transform .5s var(--d-ease), box-shadow .5s var(--d-ease); }
.tile { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); }
.card__media::after, .tile::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .55), transparent 45%);
  opacity: var(--glare); transition: opacity .4s; }

@media (hover: hover) {
  .step:hover, .standard:hover, .icon-item:hover, .photo-card:hover, .ingredient:hover, .aside-card:hover, .bundle-item:hover {
    --lift: -6px; --glare: 1; box-shadow: var(--d-card-shadow-up); }
  .card:hover .card__media, .tile:hover { --lift: -6px; box-shadow: 0 40px 70px -32px rgba(58, 47, 77, .6), 0 0 50px -16px rgba(196, 182, 227, .75); }
  .card:hover, .tile:hover { --glare: 1; }
}

/* ---------- buttons: plum gradient with a sheen ---------- */
.btn:where(:not(.btn--ghost, .btn--sand)) { background-color: var(--plum);
  background-image: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%), linear-gradient(180deg, #554670, var(--plum));
  background-size: 260% 100%, 100% 100%; background-position: 130% 0, 0 0; background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 22px -12px rgba(58, 47, 77, .7);
  transition: background-position .9s var(--d-ease), transform .3s var(--d-ease), box-shadow .3s; }
.btn:where(:not(.btn--ghost, .btn--sand)):hover { background-color: #2A2139; background-position: -30% 0, 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 16px 30px -12px rgba(58, 47, 77, .75), 0 0 24px -6px rgba(196, 182, 227, .8); }
.btn--ghost:hover { box-shadow: 0 12px 26px -14px rgba(58, 47, 77, .6); }

/* ---------- reduced motion: keep the depth, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .section::before, .page-hero::before, .section::after, .page-hero::after, .announce { animation: none; }
  .step, .standard, .icon-item, .photo-card, .ingredient, .aside-card, .bundle-item, .card__media, .tile { transform: none; transition: none; }
  .btn:where(:not(.btn--ghost, .btn--sand)) { transition: none; }
}

/* phones: mist and plum sections keep their graphics but lose the sparkles; plum light is calmer behind text */
@media (max-width: 700px) {
  main > section.section--mist:nth-of-type(odd)::after { background-image: none, var(--d-waves-white); }
  main > section.section--mist:nth-of-type(even)::after { background-image: none, var(--d-rings-light); background-position: 0 0, right -260px bottom -280px; background-size: auto, 560px auto; }
  main > section.section--plum:nth-of-type(n)::after { background-image: none, var(--d-rings-light); opacity: .28; background-size: auto, 560px auto; background-position: 0 0, right -240px top -220px; }
  .section--plum::before { opacity: .18; }
}

/* ---------- sign-up panel ("club") + its three fanned cards ---------- */
/* the panel takes the footer's lit plum, clouds, grain, seal rings and sparkles */
.club { position: relative; isolation: isolate;
  background:
    var(--d-grain-glow),
    radial-gradient(60% 80% at 92% 0%, rgba(196, 182, 227, .48), transparent 70%),
    radial-gradient(45% 60% at 12% 18%, rgba(160, 130, 205, .24), transparent 70%),
    radial-gradient(55% 70% at 0% 100%, rgba(122, 92, 160, .5), transparent 72%),
    linear-gradient(180deg, #54456E 0%, var(--plum) 50%, #1E1729 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 40px 80px -40px rgba(30, 23, 41, .75); }
.club::before, .club::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.club::before { bottom: 45%; background: url("img/brand/hero-clouds.jpg") 50% 0% / cover no-repeat; opacity: .3; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent);
  animation: d-cloud 40s ease-in-out infinite alternate; }
.club::after { opacity: .45; mix-blend-mode: screen;
  background: var(--d-sparks-b) 50% 50% / max(1400px, 100%) auto no-repeat, var(--d-rings-light) right -300px bottom -320px / 760px auto no-repeat;
  animation: d-float 16s ease-in-out infinite alternate; }
.club input[type="email"], .club input[type="text"], .club select { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* each card: a sheen layer and a deeper, lilac-lit shadow when it's the one under the cursor */
.fan__routine::after, .fan__disc::after, .fan__draw::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%) 130% 0 / 260% 100% no-repeat;
  opacity: 0; transition: background-position 1s var(--d-ease), opacity .3s; }
.fan > * { transition: transform .7s var(--d-ease), box-shadow .5s var(--d-ease); }
@media (hover: hover) and (min-width: 521px) {
  .fan > *:hover { z-index: 5; }
  .fan > *:hover::after { opacity: 1; background-position: -30% 0; }
  .fan .fan__routine:hover { transform: translate(-50%, -50%) translate(-14%, -42%) rotate(0deg) scale(1.05);
    box-shadow: 0 40px 70px -28px rgba(10, 6, 18, .8), 0 0 50px -12px rgba(196, 182, 227, .8); }
  .fan .fan__disc:hover { transform: translate(-50%, -50%) translate(44%, -2%) rotate(2deg) scale(1.06);
    box-shadow: 0 40px 70px -28px rgba(10, 6, 18, .8), 0 0 50px -10px rgba(216, 180, 142, .7); }
  .fan .fan__draw:hover { transform: translate(-50%, -50%) translate(-42%, 58%) rotate(-1deg) scale(1.06);
    box-shadow: 0 40px 70px -28px rgba(10, 6, 18, .85), 0 0 50px -10px rgba(196, 182, 227, .75), inset 0 0 0 1px rgba(196, 182, 227, .45); }
}
@media (max-width: 700px) {
  .club::after { background-image: none, var(--d-rings-light); opacity: .3; background-size: auto, 560px auto; background-position: 0 0, right -260px bottom -300px; }
}
@media (prefers-reduced-motion: reduce) {
  .club::before, .club::after { animation: none; }
  .fan__routine::after, .fan__disc::after, .fan__draw::after, .fan > * { transition: none; }
}

/* ---------- homepage hero: the clouds move ---------- */
/* A silent 12 s loop rendered from the hero photo (first frame = last frame, camera locked, plinth still).
   The photo stays as the video's poster and as the CSS background underneath; the bone fade that keeps the
   copy crisp sits above the video. Reduced motion shows the still photo. */
.hero--live .hero__sky { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 70% 78%; pointer-events: none; }
.hero--live .hero__sky[data-pending] { display: none; }
.hero--live .hero__bg::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(247, 243, 238, .94) 0%, rgba(247, 243, 238, .8) 26%, rgba(247, 243, 238, .25) 46%, rgba(247, 243, 238, 0) 58%),
    linear-gradient(0deg, rgba(247, 243, 238, .55), rgba(247, 243, 238, 0) 22%); }
@media (max-width: 900px) {
  .hero--live .hero__sky { bottom: auto; height: min(66vh, 590px); object-position: 74% 0; }
  .hero--live .hero__bg::after { background: linear-gradient(180deg, rgba(247, 243, 238, 0) 0, rgba(247, 243, 238, 0) min(52vh, 470px), #F7F3EE min(66vh, 590px)); }
}
@media (prefers-reduced-motion: reduce) { .hero--live .hero__sky { display: none; } }