/* الأنيس v2 — "من رذّة العطر إلى رغوة التنظيف".
   The page changes mood as you scroll: pearl → blush (Shaik) → petal (Zaragoza, Gabrini)
   → lilac (Master Colorist) → aqua (Atak) → plum (the lit sign).
   Display: El Messiri. Text: Rubik. Arabic never gets letter-spacing.
   Motion only animates transform and opacity. html.motion is set by boot.js when the visitor
   has not asked for reduced motion; without it every section is a plain, complete layout. */

:root {
  --pearl: #f6eef2;
  --blush: #f7e1dc;
  --petal: #f8e5ec;
  --lilac: #ebe3f3;
  --aqua: #ddf0f1;
  --plum: #22122b;
  --ink: #2a1832;
  --ink-2: #5d4863;
  --line: rgba(42, 24, 50, .14);
  --mark: #253280;
  --rose: #c25a6f;
  --gold: #f2b552;
  --glass: rgba(255, 255, 255, .62);
  --w: #d16b86;
  --m: #34407e;
  --u: #b0832f;
  --wa: #1f9d55;
  --display: "El Messiri", "Noto Naskh Arabic", "Amiri", serif;
  --text: "Rubik", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --ease: cubic-bezier(.2, .75, .2, 1);
  --wrap: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
html.motion { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--pearl); color: var(--ink);
  font-family: var(--text); font-size: 1.0625rem; line-height: 1.8; letter-spacing: normal;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; letter-spacing: normal; }
button { font: inherit; color: inherit; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.center { text-align: center; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 60; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; border-radius: 6px; }

.title { font-family: var(--display); font-weight: 700; font-size: clamp(2.1rem, 5.4vw, 3.6rem); line-height: 1.35; margin-bottom: .4em; }

/* mood layers */
.tones { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.tones i { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.tones i.on { opacity: 1; }
.tones [data-tone="pearl"] { background: radial-gradient(120% 80% at 80% 0%, #fdf7f4 0%, var(--pearl) 55%, #efe4ec 100%); }
.tones [data-tone="blush"] { background: radial-gradient(110% 90% at 20% 10%, #fff2ec 0%, var(--blush) 60%, #f1d2cc 100%); }
.tones [data-tone="petal"] { background: radial-gradient(120% 90% at 80% 20%, #fff4f7 0%, var(--petal) 60%, #f2d6e0 100%); }
.tones [data-tone="lilac"] { background: radial-gradient(120% 90% at 20% 20%, #f7f2fb 0%, var(--lilac) 60%, #ddd0ea 100%); }
.tones [data-tone="aqua"] { background: radial-gradient(120% 90% at 70% 10%, #f4fcfc 0%, var(--aqua) 55%, #c6e6e8 100%); }
.tones [data-tone="plum"] { background: radial-gradient(110% 90% at 50% 30%, #3a1f45 0%, var(--plum) 70%); }

/* buttons: lift on hover, squash on press */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer;
  font-weight: 700; text-decoration: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(0) scale(.96); transition-duration: .1s; }
.btn--ink { background: var(--ink); color: #fff; box-shadow: 0 12px 26px -14px rgba(42, 24, 50, .7); }
.btn--ghost { background: var(--glass); border: 1.5px solid var(--ink); backdrop-filter: blur(6px); }
.btn--glow { background: var(--gold); color: #2a1404; box-shadow: 0 0 0 0 rgba(242, 181, 82, .6), 0 14px 30px -12px rgba(242, 181, 82, .7); }
.btn--glow:hover { box-shadow: 0 0 0 8px rgba(242, 181, 82, .18), 0 18px 34px -12px rgba(242, 181, 82, .8); }

/* header */
.top { position: fixed; inset-inline: 0; top: 0; z-index: 30; transition: background-color .3s, box-shadow .3s; }
.top.solid { background: rgba(246, 238, 242, .86); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
.top.dark { background: rgba(34, 18, 43, .82); color: #fff; }
.top__in { width: min(var(--wrap), 100% - 32px); margin-inline: auto; display: flex; align-items: center; gap: 22px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.55rem; line-height: 1.2; }
.brand img { width: 16px; }
.top.dark .brand img { filter: brightness(0) invert(1); }
.nav { display: flex; gap: 6px; margin-inline-start: auto; }
.nav a { position: relative; text-decoration: none; font-weight: 500; padding: 6px 12px; border-radius: 999px; transition: background-color .25s; }
.nav a:hover { background: rgba(42, 24, 50, .07); }
.top.dark .nav a:hover { background: rgba(255, 255, 255, .1); }
.top__call { font-weight: 700; text-decoration: none; background: var(--ink); color: #fff; border-radius: 999px; padding: 7px 16px; font-size: .95rem; transition: transform .3s var(--ease); }
.top__call:hover { transform: translateY(-2px); }
.top.dark .top__call { background: var(--gold); color: #2a1404; }
.top__progress { position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: linear-gradient(to left, var(--rose), var(--gold)); transform-origin: right; transform: scaleX(var(--sp, 0)); }
@media (max-width: 900px) { .nav { display: none; } .top__call { margin-inline-start: auto; } }

/* intro: text rises in once on load */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.motion .rise { animation: rise 1s var(--ease) both; animation-delay: calc(.15s + var(--i, 0) * .11s); }

/* scroll reveals (staggered with --i) */
.motion .rv { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.motion .rv.in { opacity: 1; transform: none; }

/* ============ hero ============ */
.hero { position: relative; }
.motion .hero { height: 210vh; }
.hero__stick { position: relative; min-height: 100svh; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 4vw; padding: 100px max(16px, (100% - var(--wrap)) / 2) 70px; overflow: hidden; }
.motion .hero__stick { position: sticky; top: 0; height: 100svh; }
.mist { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__copy { position: relative; z-index: 2; transform: translate3d(0, calc(var(--p, 0) * -14vh), 0); opacity: calc(1 - var(--p, 0) * 1.4); }
.hero__kicker { font-weight: 700; color: var(--ink-2); margin-bottom: .2em; }
.hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(4.4rem, 15vw, 10.5rem); line-height: 1.15; color: var(--mark); margin: 0 0 .05em; }
.hero__line { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.5; font-weight: 500; }
.hero__lede { max-width: 30em; color: var(--ink-2); font-size: 1.12rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
/* the logo, alive: the bowl settles, the two leaves grow out of it and keep swaying,
   scent rings spread from the bowl and the "جملة وقطاعي" seal turns slowly around it */
.emblem { position: relative; z-index: 1; margin: 0; justify-self: center; width: min(100%, 460px); aspect-ratio: 1; display: grid; place-items: center;
  transform: translate3d(calc(var(--p, 0) * 8vw), calc(var(--p, 0) * -6vh), 0) scale(calc(1 + var(--p, 0) * .18)); }
.emblem::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 50% 58%, #fff 0%, rgba(255, 255, 255, .75) 45%, rgba(255, 255, 255, 0) 70%); }
.emblem__mark { position: absolute; inset: 14% 0 16%; width: 100%; height: 70%; overflow: visible; }
.emblem__mark .leaf, .emblem__mark .bowl { fill: var(--mark); }
.emblem__mark .sway, .emblem__mark .leaf, .emblem__mark .bowl { transform-box: fill-box; }
.sway--big, .leaf--big { transform-origin: 12% 100%; }
.sway--small, .leaf--small { transform-origin: 0% 100%; }
.bowl { transform-origin: 50% 100%; }
/* scroll: the leaves open a little as the hero scrolls away */
.leaf--big { transform: rotate(calc(var(--p, 0) * -7deg)); }
.leaf--small { transform: rotate(calc(var(--p, 0) * 9deg)); }
.motion .bowl { animation: bowl-in 1s var(--ease) .2s both; }
.motion .sway--big { animation: grow 1.3s var(--ease) .55s both, sway-big 6.5s ease-in-out 1.9s infinite; }
.motion .sway--small { animation: grow 1.3s var(--ease) .8s both, sway-small 5.5s ease-in-out 2.1s infinite; }
@keyframes bowl-in { from { opacity: 0; transform: translateY(40%) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes grow { from { opacity: 0; transform: scale(.2) rotate(-14deg); } to { opacity: 1; transform: none; } }
@keyframes sway-big { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3.5deg); } }
@keyframes sway-small { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(4.5deg); } }
.emblem__ring { position: absolute; left: 50%; top: 74%; width: 64%; aspect-ratio: 1; margin: -32% 0 0 -32%; border-radius: 50%; border: 1.5px solid rgba(194, 90, 111, .35); opacity: 0; pointer-events: none; }
.motion .emblem__ring { animation: ripple 6s ease-out infinite; }
.motion .emblem__ring:nth-child(2) { animation-delay: 2s; border-color: rgba(37, 50, 128, .25); }
.motion .emblem__ring:nth-child(3) { animation-delay: 4s; border-color: rgba(242, 181, 82, .45); }
@keyframes ripple { 0% { opacity: 0; transform: scale(.3); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
.emblem__seal { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.motion .emblem__seal { animation: seal-sway 9s ease-in-out infinite; }
@keyframes seal-sway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.hero__cue { position: absolute; bottom: 22px; inset-inline-start: 50%; transform: translateX(50%); display: grid; justify-items: center; gap: 6px; margin: 0; font-size: .85rem; color: var(--ink-2); opacity: calc(1 - var(--p, 0) * 4); }
.hero__cue span { width: 24px; height: 38px; border: 2px solid currentColor; border-radius: 999px; position: relative; }
.hero__cue span::after { content: ""; position: absolute; top: 7px; left: 50%; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: currentColor; }
.motion .hero__cue span::after { animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 760px) {
  .motion .hero { height: auto; }
  .hero__stick, .motion .hero__stick { position: relative; height: auto; min-height: 0; grid-template-columns: 1fr; padding-top: 88px; padding-bottom: 40px; }
  .emblem { order: -1; width: min(86%, 340px); transform: none; }
  .hero__copy { transform: none; opacity: 1; }
  .hero__cue { display: none; }
}

/* ============ brand capsules ============ */
.brands { padding: clamp(60px, 9vw, 120px) 0 clamp(50px, 7vw, 90px); overflow-x: clip; }
.caps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.cap {
  position: relative; isolation: isolate; display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; text-align: center; gap: 6px;
  height: 100%; min-height: 360px; padding: 26px 18px 30px; border-radius: 999px; text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .45)); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 30px 50px -36px rgba(42, 24, 50, .55);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.cap::before { content: ""; position: absolute; inset: auto 18% 16px; height: 38%; border-radius: 999px; opacity: .45; z-index: -1; filter: blur(22px); transition: transform .5s var(--ease); }
.cap--shaik::before { background: #e8505b; } .cap--zar::before { background: #f29ab6; } .cap--gab::before { background: #d9a36a; }
.cap--mc::before { background: #8c4a8f; } .cap--atak::before { background: #48b6d0; }
.cap img { width: 100px; height: 100px; object-fit: contain; border-radius: 50%; background: #fff; border: 20px solid #fff; box-shadow: 0 8px 20px -12px rgba(42, 24, 50, .5); transition: transform .6s var(--ease); }
.cap b { font-family: var(--display); font-size: 1.45rem; line-height: 1.35; margin-top: 10px; }
.cap b .ltr { display: block; font-family: var(--text); font-weight: 500; font-size: .8rem; color: var(--ink-2); }
.cap > span { color: var(--ink-2); font-size: .95rem; line-height: 1.6; }
.cap em { font-style: normal; font-weight: 700; font-size: .85rem; background: var(--ink); color: #fff; border-radius: 999px; padding: 3px 12px; }
.cap:hover { transform: translateY(-12px); box-shadow: 0 40px 60px -36px rgba(42, 24, 50, .7); }
.cap:hover img { transform: translateY(-6px) rotate(-8deg) scale(1.06); }
.cap:hover::before { transform: scale(1.25); }
.cap:active { transform: translateY(-4px) scale(.98); }
@media (max-width: 980px) {
  .caps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 200px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 16px 24px; margin-inline: -16px; scrollbar-width: none; }
  .caps li { scroll-snap-align: center; }
  .cap { min-height: 330px; }
}

/* ============ Shaik rail ============ */
.shaik { padding-top: clamp(60px, 9vw, 120px); overflow-x: clip; }
.shaik__head { display: grid; grid-template-columns: 120px 1fr; gap: 28px; align-items: center; }
.shaik__logo, .zar__logo, .sec-head > img { background: #fff; border-radius: 50%; border: 24px solid #fff; width: 120px; height: 120px; object-fit: contain; box-shadow: 0 16px 30px -18px rgba(42, 24, 50, .5); }
.shaik__head p { max-width: 46em; color: var(--ink-2); }
.legend { display: flex; flex-wrap: wrap; gap: 18px; font-weight: 500; font-size: .95rem; }
.legend > span { display: inline-flex; align-items: center; gap: 7px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.dot--w { background: var(--w); } .dot--m { background: var(--m); } .dot--u { background: var(--u); }
.rail { position: relative; }
.rail__stick { padding: 30px 0 10px; }
.rail__track { list-style: none; margin: 0; padding: 20px 16px 30px; display: flex; gap: clamp(18px, 3vw, 44px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.flask { flex: none; width: clamp(190px, 21vw, 270px); scroll-snap-align: center; text-align: center; }
.flask__glass { position: relative; aspect-ratio: 3 / 4; display: grid; place-items: center; padding: 10%; background: #fff; border-radius: 30px; box-shadow: 0 30px 50px -34px rgba(42, 24, 50, .55); overflow: hidden; }
.flask__halo { position: absolute; inset: auto -20% -40%; height: 70%; border-radius: 50%; background: radial-gradient(rgba(194, 90, 111, .14), transparent 70%); }
.flask__glass img { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; transition: transform .5s var(--ease); }
.flask:hover .flask__glass img { transform: translateY(-10px) scale(1.04); }
.flask__code { margin: 10px 0 0; font-weight: 700; font-size: .85rem; color: var(--rose); }
.flask__name { margin: 0; font-family: var(--display); font-size: 1.35rem; font-weight: 700; line-height: 1.4; }
.flask__g { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: .85rem; color: var(--ink-2); }
.rail__meter { display: none; }
/* pinned version: JS sets the rail height and --x on the track, and --d/--a on each bottle */
.motion .rail[data-ready] .rail__stick { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 60px 0 0; }
.motion .rail[data-ready] .rail__track { overflow: visible; scroll-snap-type: none; padding-inline: 12vw; width: max-content; transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; }
.motion .rail[data-ready] .flask { transform: perspective(900px) rotateY(calc(var(--d, 0) * 32deg)) scale(calc(1 - var(--a, 0) * .14)); opacity: calc(1 - var(--a, 0) * .35); }
.motion .rail[data-ready] .rail__meter { display: block; width: min(320px, 60%); height: 3px; margin: 18px auto 0; background: rgba(42, 24, 50, .12); border-radius: 3px; overflow: hidden; }
.rail__meter span { display: block; height: 100%; background: var(--rose); transform-origin: right; transform: scaleX(var(--rp, 0)); }
.ask { margin-top: 26px; padding-bottom: 20px; color: var(--ink-2); }
.ask a, .fb, .mail { font-weight: 700; color: var(--ink); text-decoration-color: var(--rose); text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (max-width: 760px) {
  .shaik__head { grid-template-columns: 80px 1fr; gap: 16px; }
  .shaik__head > div { display: contents; }
  .shaik__head p, .shaik__head .legend { grid-column: 1 / -1; }
  .shaik__logo, .zar__logo, .sec-head > img { width: 80px; height: 80px; border-width: 16px; }
  .flask { width: 62vw; }
  .motion .rail[data-ready] .flask { width: 58vw; }
}

/* ============ Zaragoza fan ============ */
.zar { padding: clamp(70px, 10vw, 140px) 0; overflow-x: clip; }
.zar__in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 5vw; align-items: center; }
.zar__text p { color: var(--ink-2); }
.zar__logo { margin-bottom: 18px; }
.fan { --f: 1; --spread: 52px; list-style: none; margin: 0; padding: 0; position: relative; height: 560px; }
.motion .fan { --f: var(--fan, 0); }
.fan li { position: absolute; top: 40px; left: 50%; width: 210px; margin-left: -105px;
  transform: translateX(calc(var(--k) * var(--spread) * var(--f))) translateY(calc(var(--k) * var(--k) * 6px * var(--f))) rotate(calc(var(--k) * 6deg * var(--f)));
  transform-origin: 50% 120%; z-index: calc(10 - var(--k) * var(--k)); }
.fan button { display: block; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #fff; cursor: zoom-in; box-shadow: 0 24px 40px -24px rgba(42, 24, 50, .65); transition: transform .45s var(--ease); }
.fan button:hover, .fan button:focus-visible { transform: translateY(-26px) scale(1.04); }
.fan img { width: 210px; }
@media (max-width: 860px) {
  .zar__in { grid-template-columns: 1fr; }
  .fan { --spread: 30px; height: 400px; }
  .fan li { width: 150px; margin-left: -75px; }
  .fan img { width: 150px; }
}

/* ============ Gabrini vanity ============ */
.gab { padding: clamp(40px, 6vw, 80px) 0 clamp(70px, 9vw, 120px); }
.sec-head { display: grid; grid-template-columns: 120px 1fr; gap: 28px; align-items: center; margin-bottom: 30px; }
.sec-head p { color: var(--ink-2); max-width: 46em; margin: 0; }
@media (max-width: 760px) {
  .sec-head { grid-template-columns: 80px 1fr; gap: 12px 16px; }
  .sec-head > div { display: contents; }
  .sec-head p { grid-column: 1 / -1; }
}
.vanity { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.tube { text-align: center; }
.tube[hidden] { display: none; }
.tube__img { position: relative; aspect-ratio: 4 / 5; border-radius: 28px; display: grid; place-items: center; padding: 18px; background: #fff; box-shadow: 0 24px 40px -32px rgba(42, 24, 50, .5); overflow: hidden; }
.tube__img::before { content: ""; position: absolute; inset: auto 15% 8%; height: 18px; border-radius: 50%; background: radial-gradient(rgba(42, 24, 50, .22), transparent 70%); }
.tube__img img { position: absolute; inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); object-fit: contain; transition: transform .55s var(--ease); }
.tube:hover .tube__img img { transform: translateY(-10px) rotate(-6deg) scale(1.05); }
.tube__code { margin: 10px 0 0; font-size: .8rem; font-weight: 700; color: var(--rose); }
.tube__name { margin: 0; font-weight: 700; line-height: 1.5; }
@media (max-width: 520px) { .vanity { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.more { text-align: center; margin-top: 30px; }
.more button { min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--glass); font-weight: 700; cursor: pointer; transition: transform .3s var(--ease); }
.more button:hover { transform: translateY(-3px); }
.more button:active { transform: scale(.96); }

/* ============ Master Colorist stacking slides ============ */
.mc { padding: clamp(70px, 10vw, 140px) 0; }
.stack { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; }
.slide { margin-bottom: 7vh; }
.motion .slide { position: sticky; top: calc(96px + var(--k) * 16px); }
.slide button { display: block; width: 100%; padding: 0; border: 0; border-radius: 22px; overflow: hidden; cursor: zoom-in; background: #fff; box-shadow: 0 -10px 40px -24px rgba(42, 24, 50, .5), 0 30px 60px -40px rgba(42, 24, 50, .6); transform-origin: 50% 0; transform: scale(var(--sc, 1)); }
.slide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.slide p { margin: 10px 4px 0; font-weight: 500; color: var(--ink-2); }
.motion .slide p { opacity: calc(1 - var(--cov, 0)); }
@media (max-width: 640px) { .motion .slide { top: calc(78px + var(--k) * 10px); } .slide button { border-radius: 14px; } }

/* ============ Atak foam ============ */
.atak { position: relative; overflow: hidden; padding: clamp(70px, 10vw, 140px) 0; }
.suds { position: absolute; inset: 0; pointer-events: none; }
.suds i { position: absolute; bottom: -80px; left: calc(var(--x) * 1%); width: calc(var(--s) * 1px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .95) 0 8%, rgba(255, 255, 255, .25) 22%, rgba(120, 205, 215, .16) 60%, rgba(255, 255, 255, .55) 100%);
  border: 1px solid rgba(255, 255, 255, .8); opacity: 0; }
.motion .atak.live .suds i { animation: bubble calc(var(--t) * 1s) linear calc(var(--d) * -1.3s) infinite; }
@keyframes bubble {
  0% { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  10% { opacity: .9; }
  50% { transform: translate3d(22px, -60vh, 0) scale(1); }
  90% { opacity: .8; }
  100% { transform: translate3d(-14px, -125vh, 0) scale(1.1); opacity: 0; }
}
.atak .wrap { position: relative; }
.foam { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 22px; }
.bub { text-align: center; }
.bub__ball { margin-inline: auto; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; position: relative;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .7), 0 26px 40px -26px rgba(20, 90, 100, .6); transition: transform .5s var(--ease); }
.bub__ball::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .7) 0 6%, rgba(255, 255, 255, 0) 24%), radial-gradient(circle at 50% 50%, transparent 62%, rgba(255, 255, 255, .35) 100%); pointer-events: none; }
.bub__ball img { width: 100%; height: 100%; object-fit: cover; }
.bub--m .bub__ball { width: 86%; } .bub--s .bub__ball { width: 74%; }
.motion .bub__ball { animation: bob 6s ease-in-out infinite; animation-delay: calc(var(--b) * -.6s); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.bub:hover .bub__ball { animation-play-state: paused; transform: scale(1.05); }
.bub__name { margin: 14px 0 0; font-weight: 700; line-height: 1.5; }
.bub__tag { margin: 0; font-size: .85rem; color: var(--ink-2); }
@media (max-width: 860px) { .foam { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============ wholesale: the sign lights up ============ */
.wholesale { color: #f7eef6; padding: clamp(80px, 11vw, 150px) 0; }
.ws__in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 6vw; align-items: center; }
.neon { justify-self: center; margin: 0; padding: 34px 40px; border-radius: 26px; background: #170b1d; box-shadow: inset 0 0 0 2px rgba(242, 181, 82, .25), 0 40px 70px -40px #000;
  font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.3; color: #ffe0a6; text-align: center;
  text-shadow: 0 0 6px #ffcf7a, 0 0 22px rgba(242, 181, 82, .9), 0 0 48px rgba(242, 181, 82, .55); }
.neon span { display: inline-block; }
.motion .neon span { opacity: .12; }
.motion .neon.in span { animation: flick 1.6s linear both; }
.motion .neon.in span + span { animation-delay: .45s; }
@keyframes flick { 0% { opacity: .12; } 8% { opacity: 1; } 12% { opacity: .2; } 20% { opacity: 1; } 24% { opacity: .35; } 34%, 100% { opacity: 1; } }
.ws__text p { color: rgba(247, 238, 246, .82); max-width: 34em; }
.path { list-style: none; margin: 8px 0 28px; padding: 0 22px 0 0; position: relative; display: grid; gap: 14px; }
.path::before { content: ""; position: absolute; top: 8px; bottom: 8px; inset-inline-start: 4px; width: 2px; background: linear-gradient(var(--gold), var(--rose)); transform-origin: top; }
.motion .path::before { transform: scaleY(0); transition: transform 1.4s var(--ease) .3s; }
.motion .path.in::before { transform: scaleY(1); }
.path li { position: relative; }
.path li::before { content: ""; position: absolute; inset-inline-start: -24px; top: .62em; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.path b { color: #ffe0a6; }
@media (max-width: 860px) { .ws__in { grid-template-columns: 1fr; } .neon { justify-self: start; } }

/* ============ contact ============ */
.contact { padding: clamp(70px, 10vw, 130px) 0; }
.contact__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .9); border-radius: 28px; padding: 24px; box-shadow: 0 24px 40px -32px rgba(42, 24, 50, .5); transition: transform .45s var(--ease); }
.card:hover { transform: translateY(-6px); }
.card h3 { font-size: 1rem; font-weight: 500; color: var(--ink-2); margin-bottom: 12px; }
.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lines li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.num { font-size: 1.35rem; font-weight: 700; }
.acts { display: flex; gap: 6px; }
.acts a { font-size: .88rem; font-weight: 700; text-decoration: none; border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 12px; transition: transform .25s var(--ease), background-color .2s, color .2s; }
.acts a:last-child { border-color: var(--wa); color: var(--wa); }
.acts a:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); }
.acts a:active { transform: scale(.94); }
.mail { font-size: 1.05rem; word-break: break-all; }
.map-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; background: var(--ink); color: #fff; border-radius: 999px; padding: 8px 16px; margin-bottom: 14px; transition: transform .3s var(--ease); }
.map-link:hover { transform: translateY(-3px); }
.map-link:active { transform: scale(.96); }
.map-link__pin { width: 12px; height: 12px; border-radius: 50% 50% 50% 0; background: var(--gold); transform: rotate(-45deg); }
.motion .map-link:hover .map-link__pin { animation: drop .6s var(--ease); }
@keyframes drop { 0% { transform: rotate(-45deg) translate(0, 0); } 40% { transform: rotate(-45deg) translate(4px, -4px); } 100% { transform: rotate(-45deg) translate(0, 0); } }
.where { font-family: var(--display); font-weight: 700; font-size: 1.35rem; line-height: 1.45; margin-bottom: 2px; }
.where__city { color: var(--ink-2); margin-bottom: 12px; }
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } }

/* footer */
.foot { background: var(--plum); color: #f3e9f2; padding: 30px 0 calc(30px + env(safe-area-inset-bottom)); }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; }
.foot p { margin: 0; font-size: .92rem; }
.foot__brand { display: flex; align-items: center; gap: 10px; }
.foot__brand img { width: 14px; filter: brightness(0) invert(1); }
.nivo-it { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.nivo-it__badge { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fbf4f9; box-shadow: 0 0 0 3px rgba(242, 181, 82, 0); transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.nivo-it__badge img { width: 38px; height: auto; transform-origin: 50% 80%; transition: transform .45s var(--ease); }
.nivo-it__text { display: grid; line-height: 1.35; }
.nivo-it__text > .ltr { font-weight: 700; font-size: .98rem; }
.nivo-it__text small { font-size: .78rem; opacity: .75; }
.nivo-it:hover .nivo-it__badge { transform: translateY(-3px); box-shadow: 0 0 0 3px rgba(242, 181, 82, .7); }
.nivo-it:hover .nivo-it__badge img { transform: rotate(-10deg) scale(1.08); }
.motion .nivo-it:hover .nivo-it__badge img { animation: nod .9s var(--ease) both; }
@keyframes nod { 0% { transform: rotate(0); } 30% { transform: rotate(-12deg) scale(1.08); } 60% { transform: rotate(8deg) scale(1.08); } 100% { transform: rotate(-4deg) scale(1.06); } }
.nivo-it:active .nivo-it__badge { transform: scale(.94); }

/* floating WhatsApp (phones) */
.float-wa { position: fixed; inset-inline-end: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 30; background: var(--wa); color: #fff; font-weight: 700; text-decoration: none; padding: 12px 20px; border-radius: 999px; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45); transition: opacity .3s, transform .3s var(--ease); }
.float-wa.is-hidden { opacity: 0; transform: translateY(18px) scale(.9); pointer-events: none; }
@media (min-width: 901px) { .float-wa { display: none; } }

/* catalogue viewer */
.viewer { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: rgba(24, 12, 30, .96); color: #fff; }
.viewer::backdrop { background: rgba(24, 12, 30, .7); }
.viewer[open] { display: grid; grid-template-rows: auto 1fr auto; }
.viewer__bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; }
.viewer__title { margin: 0; font-weight: 700; }
.viewer__close { font-size: 2rem; line-height: 1; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); cursor: pointer; }
.viewer__stage { overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 0 12px; }
.viewer__stage img { width: min(100%, 1400px); margin: auto; }
.motion .viewer__stage img.swap { animation: rise .45s var(--ease) both; }
.viewer--tall .viewer__stage img { width: min(100%, 620px); margin-block: 0 12px; }
.viewer__nav { display: flex; justify-content: center; gap: 12px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
.viewer__nav button { font-weight: 700; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .5); background: transparent; cursor: pointer; transition: transform .2s; }
.viewer__nav button:hover { background: #fff; color: var(--ink); }
.viewer__nav button:active { transform: scale(.95); }

/* 404 */
.lost { min-height: 100dvh; display: grid; place-items: center; text-align: center; padding: 40px 0; }
.lost img { width: 34px; margin: 0 auto 18px; }
.lost h1 { font-family: var(--display); font-size: clamp(2.6rem, 8vw, 4.4rem); line-height: 1.4; }
.lost p { color: var(--ink-2); max-width: 30em; margin-inline: auto; }
.lost__nivo { margin-top: 40px; }
.lost__nivo .nivo-it { color: var(--ink); }
.lost__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }

/* reduced motion: boot.js does not set .motion, so the layouts above are static. This also
   stops the few effects that are not gated by .motion (hover lifts, tone cross-fades). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .suds { display: none; }
  .hero__copy, .emblem, .leaf { transform: none !important; opacity: 1 !important; }
}