/* ============================================================
   ATELIER MOXIE — rebuild layer (Oct 2026)
   Loaded after site.css. Namespaced .hx-* so nothing here fights
   the engine styles. Motion is additive and respects
   prefers-reduced-motion.
   ============================================================ */

/* ---------- tokens: lift muted text to AA on paper ---------- */
:root{--mute:#6E6960}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.hx-stagger>.rv:nth-child(2){transition-delay:.06s}
.hx-stagger>.rv:nth-child(3){transition-delay:.12s}
.hx-stagger>.rv:nth-child(4){transition-delay:.18s}
.hx-stagger>.rv:nth-child(5){transition-delay:.24s}
.hx-stagger>.rv:nth-child(6){transition-delay:.30s}
.hx-stagger>.rv:nth-child(7){transition-delay:.36s}
.hx-stagger>.rv:nth-child(8){transition-delay:.42s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hx-paint i,.hx-float,.marquee{animation:none!important}
}

/* ---------- hero ---------- */
.hx-hero{position:relative;overflow:hidden;background:var(--paper);isolation:isolate}
.hx-paint{position:absolute;inset:-10% -10% -10% 30%;z-index:0;pointer-events:none;filter:blur(38px) saturate(1.15);opacity:.9}
.hx-paint i{position:absolute;border-radius:50%;mix-blend-mode:multiply;will-change:transform}
.hx-paint .b1{width:46vw;height:46vw;max-width:620px;max-height:620px;left:18%;top:-8%;background:radial-gradient(circle at 40% 40%,#FD22B4 0%,#FE1F72 45%,transparent 70%);animation:hxDrift1 18s ease-in-out infinite alternate}
.hx-paint .b2{width:36vw;height:36vw;max-width:480px;max-height:480px;right:6%;top:36%;background:radial-gradient(circle at 50% 50%,#FF1919 0%,#FE1F72 50%,transparent 72%);animation:hxDrift2 22s ease-in-out infinite alternate}
.hx-paint .b3{width:26vw;height:26vw;max-width:360px;max-height:360px;left:40%;bottom:-6%;background:radial-gradient(circle at 50% 50%,#FD22B4 0%,transparent 70%);animation:hxDrift3 16s ease-in-out infinite alternate}
@keyframes hxDrift1{from{transform:translate(0,0) scale(1)}to{transform:translate(-6%,10%) scale(1.12)}}
@keyframes hxDrift2{from{transform:translate(0,0) scale(1)}to{transform:translate(-14%,-12%) scale(.92)}}
@keyframes hxDrift3{from{transform:translate(0,0)}to{transform:translate(12%,-14%)}}

.hx-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);align-items:center;padding-block:clamp(40px,6vw,96px);min-height:min(84vh,860px)}
.hx-copy{display:grid;gap:18px;align-content:center;max-width:720px}
.hx-h1{font-family:var(--display);font-weight:700;font-size:clamp(56px,8.6vw,150px);line-height:.88;letter-spacing:-.035em;color:var(--ink)}
.hx-sub{font-family:var(--display);font-size:clamp(24px,2.6vw,42px);line-height:1;color:var(--ink-2);margin-top:-6px}
.hx-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.hx-trust{list-style:none;margin:10px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.hx-trust li{display:inline-flex;align-items:center;gap:8px}
.hx-trust li::before{content:"";width:6px;height:6px;background:var(--flame);transform:rotate(45deg);flex:none}

.hx-stage{position:relative;justify-self:end;width:100%;max-width:520px;aspect-ratio:4/5}
.hx-photo{position:absolute;inset:0;overflow:hidden;background:var(--gallery);border:1px solid var(--line);box-shadow:0 30px 80px -30px rgba(11,11,12,.35)}
.hx-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:saturate(1.05) contrast(1.04)}
.hx-photo::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(180deg,transparent,rgba(11,11,12,.18))}
.hx-float{position:absolute;left:-8%;bottom:8%;display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;padding:12px 14px 12px 12px;background:var(--gallery);border:1px solid var(--line);box-shadow:0 20px 50px -20px rgba(11,11,12,.45);min-width:240px;max-width:300px;text-decoration:none;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.hx-float:hover{transform:translateY(-3px);box-shadow:0 30px 60px -22px rgba(11,11,12,.5)}
.hx-float.tick .hx-float-img img{animation:hxSwap .55s var(--ease)}
@keyframes hxSwap{0%{opacity:0;transform:translateY(8px) scale(.96)}100%{opacity:1;transform:none}}
.hx-float-img{display:block;width:72px;aspect-ratio:4/5;background:var(--paper);border:1px solid var(--line);overflow:hidden}
.hx-float-img img{width:100%;height:100%;object-fit:contain}
.hx-float-txt{display:grid;gap:3px;min-width:0}
.hx-float-txt b{font-family:var(--display);font-size:20px;line-height:1;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-float-price{font-size:12px;color:var(--ink-2)}
.hx-float-dots{grid-column:1/-1;display:flex;gap:5px;padding-top:4px;border-top:1px solid var(--line)}
.hx-float-dots i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:transform .4s var(--ease)}
.hx-float-dots i.on{transform:scale(1.35);box-shadow:0 0 0 2px var(--gallery),0 0 0 3px var(--ink)}

@media (max-width:980px){
  .hx-hero-grid{grid-template-columns:1fr;min-height:0;padding-block:28px 56px}
  .hx-stage{justify-self:stretch;max-width:none;aspect-ratio:4/4.6}
  .hx-float{left:12px;bottom:12px}
  .hx-h1{font-size:clamp(52px,15vw,110px)}
}
@media (max-width:760px){
  /* no per-frame blur on phones: static blobs, lighter filter */
  .hx-paint{filter:blur(22px);opacity:.75}
  .hx-paint i{animation:none!important;mix-blend-mode:normal;opacity:.85}
  .hx-bottle-glow{filter:none}
}
@media (max-width:560px){
  .hx-float{grid-template-columns:56px 1fr;min-width:0;max-width:calc(100% - 24px);padding:10px}
  .hx-float-img{width:56px}
  .hx-float-txt b{font-size:17px}
  .hx-trust{gap:8px 16px;font-size:10px}
}

/* ---------- 01 pick a pigment ---------- */
.hx-pick{background:var(--paper)}
.hx-pick-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:center}
.hx-pick-stage{position:relative;aspect-ratio:4/5;background:var(--gallery);border:1px solid var(--line);overflow:hidden;display:grid;place-items:center}
.hx-pick-bg{position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 60%,var(--c) 0%,transparent 75%);opacity:.28;filter:blur(24px)}
#pickImg{position:relative;width:54%;height:auto;max-height:86%;object-fit:contain;transform:translateX(-18%);filter:drop-shadow(0 40px 50px rgba(11,11,12,.22));transition:transform .7s var(--ease)}
.hx-pick-stage:hover #pickImg{transform:translateX(-18%) translateY(-6px) rotate(-1.5deg)}
.hx-pick-lips{position:absolute;right:-1px;bottom:-1px;width:34%;aspect-ratio:1;object-fit:cover;border:1px solid var(--line);box-shadow:-20px -20px 50px -30px rgba(11,11,12,.4)}
.hx-pick-cap{position:absolute;right:8px;bottom:calc(34% - 28px);z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);background:rgba(247,244,239,.85);padding:4px 7px}
.hx-pick-side{display:grid;gap:18px;align-content:center}
.hx-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.hx-chip{display:flex;align-items:center;gap:10px;padding:9px 12px 9px 9px;border:1px solid var(--line);background:var(--gallery);text-align:left;font-size:13px;font-weight:600;letter-spacing:.01em;transition:border-color .3s,transform .4s var(--ease),box-shadow .4s var(--ease)}
.hx-chip i{width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),inset -4px -6px 10px rgba(0,0,0,.18),inset 4px 5px 8px rgba(255,255,255,.45);flex:none}
.hx-chip:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(11,11,12,.4)}
.hx-chip.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.hx-pick-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hx-fine{font-size:13.5px;color:var(--ink-2);line-height:1.55}
@media (max-width:860px){.hx-pick-grid{grid-template-columns:1fr}.hx-pick-stage{aspect-ratio:1}#pickImg{width:60%;max-height:92%;transform:translateX(-26%)}.hx-pick-stage:hover #pickImg{transform:translateX(-26%)}.hx-pick-lips{width:40%}.hx-pick-cap{bottom:calc(40% - 28px)}}

/* ---------- 02 proof ---------- */
.hx-proof{padding-block:clamp(36px,5vw,72px)}
.hx-proof-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.hx-proof-card{background:var(--gallery);padding:clamp(20px,2.4vw,34px);display:grid;gap:12px;align-content:start}
.hx-proof-card h3{font-family:var(--display);font-weight:600;font-size:clamp(22px,1.9vw,30px);line-height:1;letter-spacing:-.02em}
.hx-proof-card p{font-size:14px;line-height:1.6;color:var(--ink-2)}
@media (max-width:980px){.hx-proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.hx-proof-grid{grid-template-columns:1fr}}

/* ---------- 03 launch ---------- */
.hx-more{margin-top:clamp(26px,3vw,40px)}

/* ---------- 04 ground (Colour Match) ---------- */
.hx-ground{background:var(--night);color:var(--paper);overflow:hidden}
.hx-ground-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,96px);align-items:center}
.hx-ground-copy{display:grid;gap:20px;justify-items:start}
.hx-tones{display:grid;grid-template-columns:repeat(14,1fr);gap:3px;width:100%;max-width:520px}
.hx-tones i{aspect-ratio:1;display:block;transition:transform .4s var(--ease)}
.hx-tones i:hover{transform:scaleY(1.5)}
.hx-faces{position:relative;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);gap:8px;aspect-ratio:1}
.hx-faces figure{margin:0;overflow:hidden;background:#141416}
.hx-faces img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05);transition:transform 1.4s var(--ease)}
.hx-faces figure:hover img{transform:scale(1.06)}
.hx-faces .f1{grid-area:1/1/4/4}.hx-faces .f2{grid-area:1/4/3/7}.hx-faces .f3{grid-area:3/4/5/6}.hx-faces .f4{grid-area:4/1/7/3}.hx-faces .f5{grid-area:5/3/7/7}
.hx-faces .fp{grid-area:3/6/5/7;background:var(--paper);display:grid;place-items:center;padding:6px}
.hx-faces .fp img{object-fit:contain}
@media (max-width:900px){.hx-ground-grid{grid-template-columns:1fr}.hx-faces{max-width:520px}}
@media (max-width:420px){.hx-faces .fp{display:none}.hx-faces .f3{grid-area:3/4/5/7}}

/* ---------- 05 parfum room ---------- */
.hx-parfum{background:#0A0A0B;color:var(--paper);position:relative;overflow:hidden}
.hx-parfum::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 20% 50%,rgba(194,122,38,.18),transparent 70%);pointer-events:none}
.hx-parfum-grid{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,72px);align-items:start}
.hx-bottle{aspect-ratio:4/5;display:grid;place-items:center;background:linear-gradient(180deg,#131315,#0A0A0B);border:1px solid rgba(247,244,239,.08);overflow:hidden;position:sticky;top:90px}
.hx-bottle-glow{position:absolute;inset:0;background:radial-gradient(45% 40% at 50% 62%,var(--g),transparent 70%);transition:background .8s var(--ease);filter:blur(10px)}
.hx-bottle img{position:relative;width:60%;height:auto;max-height:80%;object-fit:contain;filter:drop-shadow(0 40px 60px rgba(0,0,0,.6));transition:opacity .5s var(--ease)}
.hx-bottle .slug{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,244,239,.6)}
.hx-frags{display:grid;gap:1px;background:rgba(247,244,239,.12);border-block:1px solid rgba(247,244,239,.12)}
.hx-frag{display:grid;grid-template-columns:120px 1fr auto;grid-template-areas:"k n p" "k h p" "k d p";gap:4px 22px;padding:22px 8px;background:#0A0A0B;text-decoration:none;color:var(--paper);transition:background .4s var(--ease),padding-left .4s var(--ease)}
.hx-frag:hover,.hx-frag.on{background:#121214;padding-left:18px}
.hx-frag .k{grid-area:k;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,244,239,.65)}
.hx-frag .k i{width:14px;height:14px;border-radius:50%;background:var(--liq);box-shadow:0 0 18px var(--liq)}
.hx-frag .n{grid-area:n;font-family:var(--display);font-size:clamp(24px,2.2vw,34px);line-height:1;letter-spacing:-.02em}
.hx-frag .h{grid-area:h;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gilt)}
.hx-frag .d{grid-area:d;font-size:14px;color:rgba(247,244,239,.7);max-width:52ch;line-height:1.5}
.hx-frag .p{grid-area:p;align-self:center;font-size:14px}
.hx-frag.soon .n,.hx-frag.soon .d{opacity:.75}.hx-frag.soon .p{color:var(--gilt)}
.hx-scent{padding:24px 8px 8px;display:grid;gap:10px;background:#0A0A0B}
.hx-scent p{font-size:15px;line-height:1.6;color:rgba(247,244,239,.8);max-width:60ch}
.hx-scent .link{background-image:linear-gradient(var(--paper),var(--paper))}
@media (max-width:900px){.hx-parfum-grid{grid-template-columns:1fr}.hx-bottle{position:relative;top:0;max-width:420px;aspect-ratio:1}.hx-frag{grid-template-columns:1fr auto;grid-template-areas:"k p" "n p" "h p" "d d"}}

/* ---------- 06 rooms ---------- */
.hx-room-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.hx-room{position:relative;display:grid;gap:8px;padding:22px 18px 20px;background:var(--gallery);text-decoration:none;overflow:hidden;transition:background .4s var(--ease)}
.hx-room .th{display:block;aspect-ratio:1;transition:transform .8s var(--ease)}
.hx-room .th svg{width:100%;height:100%}
.hx-room:hover{background:var(--paper)}
.hx-room:hover .th{transform:translateY(-6px) scale(1.04)}
.hx-room .nm{font-family:var(--display);font-size:26px;line-height:1;letter-spacing:-.02em}
.hx-room .ct{font-size:12.5px;color:var(--mute);line-height:1.4}
.hx-room .go{position:absolute;right:14px;top:14px;opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .4s var(--ease)}
.hx-room:hover .go{opacity:1;transform:none}
@media (max-width:1100px){.hx-room-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.hx-room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 07 maker ---------- */
.hx-maker-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,96px);align-items:center}
.hx-maker-shot{position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line);background:var(--night)}
.hx-maker-shot>img:first-child{width:100%;height:100%;object-fit:cover}
.hx-maker-portrait{position:absolute;right:-1px;bottom:-1px;width:32%;aspect-ratio:1;object-fit:cover;border:1px solid var(--line);box-shadow:-20px -20px 60px -30px rgba(0,0,0,.6)}
.hx-maker-copy{display:grid;gap:20px;justify-items:start}
@media (max-width:900px){.hx-maker-grid{grid-template-columns:1fr}}

/* ---------- 08 wall ---------- */
.hx-reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:clamp(26px,3vw,44px)}
.hx-review{display:grid;gap:10px;padding:24px;border:1px solid var(--line);background:var(--paper);text-decoration:none}
.hx-review .stars{display:flex;gap:2px}.hx-review .stars svg{width:14px;height:14px}
.hx-review b{font-family:var(--display);font-size:20px;line-height:1.1}
.hx-review p{font-size:14px;line-height:1.6;color:var(--ink-2)}
@media (max-width:860px){.hx-reviews{grid-template-columns:1fr}}

/* ---------- 10 faq ---------- */
.hx-faq{padding-block:clamp(40px,6vw,96px)}
.hx-faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,72px);align-items:start}
.hx-faq-grid .d3{margin-top:10px}
@media (max-width:860px){.hx-faq-grid{grid-template-columns:1fr}}

/* ---------- PDP additions ---------- */
.hx-ship{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--ink-2);padding:10px 0 0}
.hx-ship i{width:8px;height:8px;border-radius:50%;background:#2FA86B;box-shadow:0 0 0 3px rgba(47,168,107,.18);flex:none}

/* ---------- performance: no fixed grain on small screens ---------- */
@media (max-width:760px){body::after{display:none}}


/* ---------- rollover glow + lift on every product tile ---------- */
.gallery-grid .g.hx-g::before,.card-top::before,.hx-room .th::before{content:"";position:absolute;left:12%;right:12%;bottom:6%;height:30%;border-radius:50%;background:radial-gradient(ellipse at center,var(--glow,#FE1F72),transparent 70%);filter:blur(18px);opacity:0;transition:opacity .6s var(--ease);pointer-events:none;z-index:0}
.hx-room .th{position:relative}
.gallery-grid .g.hx-g:hover::before,.card:hover .card-top::before,.hx-room:hover .th::before{opacity:.45}
.gallery-grid .g.hx-g.ink:hover::before{opacity:.8}
.gallery-grid .g.hx-g svg{position:relative;z-index:1;transition:transform .9s var(--ease)}
.gallery-grid .g.hx-g:hover svg{transform:translateY(-10px) scale(1.04) rotate(-1.2deg)}
.card-top{position:relative}
.card-media,.card-top .blot,.card-top .wish,.card-top .quick,.card-tag{position:relative;z-index:1}
.card-tag,.card-top .blot,.card-top .wish,.card-top .quick{position:absolute}
.card:hover .card-media .art{transform:translateY(-6px) scale(1.04)}

/* ---------- hero motion ---------- */
.hx-photo{clip-path:inset(0 0 0 0);animation:hxWipe 1.3s var(--ease) both .15s}
@keyframes hxWipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.hx-photo img{transform-origin:50% 30%;animation:hxBurns 16s ease-in-out infinite alternate;will-change:transform}
@keyframes hxBurns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-1.5%,1.5%)}}
.hx-photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 48%,transparent 60%);transform:translateX(-120%);animation:hxSheen 7s ease-in-out infinite 2.5s;pointer-events:none;mix-blend-mode:screen}
@keyframes hxSheen{0%,20%{transform:translateX(-120%)}50%,100%{transform:translateX(120%)}}
.hx-stage{transform:perspective(1200px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:transform .5s var(--ease)}
.hx-float{animation:hxBob 6s ease-in-out infinite 1.6s}
@keyframes hxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hx-float:hover{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.hx-photo,.hx-photo img,.hx-photo::before,.hx-float{animation:none!important}.hx-stage{transform:none!important}}

/* ---------- footer social ---------- */
.hx-social{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hx-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(247,244,239,.25);color:var(--paper);transition:background .4s var(--ease),border-color .4s}
.hx-social a:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.hx-social svg{width:17px;height:17px;fill:currentColor}