/* Glam layer by Theo (preview). Loads after style.css. Gold shimmer buttons, glass tiles, soft color washes.
   Gold buttons use Plum Navy text on light gold (about 6.5:1), never white on gold. Motion is slow and switches off for reduced motion. */
:root{--gold-light:#EBD08F;--gold-mid:#C9A24E;--gold-warm:#E3C27A;--glass:rgba(255,255,255,.55);--glass-line:rgba(255,255,255,.75)}

/* Gold shimmer buttons: header, hero, final call, mobile dock. Card buttons stay plum so gold stays rare. */
header .btn,.hero .btn:not(.sec),.final .btn,.dock .btn{
  position:relative;overflow:hidden;color:var(--ink);border:1px solid rgba(138,106,36,.55);
  background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold-mid) 48%,var(--gold-warm) 100%);
  box-shadow:0 6px 18px rgba(184,145,63,.35),inset 0 1px 0 rgba(255,255,255,.65);
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
header .btn::after,.hero .btn:not(.sec)::after,.final .btn::after,.dock .btn::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);
  transform:translateX(-130%);animation:shimmer 5.5s ease-in-out infinite}
header .btn:hover,.hero .btn:not(.sec):hover,.final .btn:hover,.dock .btn:hover{
  background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold-mid) 48%,var(--gold-warm) 100%);
  border-color:rgba(138,106,36,.7);transform:translateY(-2px);filter:brightness(1.04);
  box-shadow:0 12px 28px rgba(184,145,63,.5),0 0 0 4px rgba(235,208,143,.35),inset 0 1px 0 rgba(255,255,255,.75)}
@keyframes shimmer{0%,62%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.btn.sec{background:rgba(255,255,255,.4);backdrop-filter:blur(8px);border-color:rgba(42,32,56,.7)}
.card .btn{transition:transform .25s ease,background .2s,border-color .2s,box-shadow .25s ease}
.card .btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(31,122,112,.3)}

/* Soft color washes so the glass has something to refract */
.hero{background:radial-gradient(500px 360px at 85% 20%,rgba(235,208,143,.55),transparent 70%),radial-gradient(520px 380px at 8% 85%,rgba(92,201,181,.28),transparent 70%),linear-gradient(180deg,var(--blush-100) 0%,var(--blush-50) 100%)}
.alt{background:radial-gradient(460px 320px at 100% 0,rgba(247,217,212,.9),transparent 70%),radial-gradient(420px 300px at 0 100%,rgba(195,222,210,.9),transparent 70%),var(--mint-50)}
#visit,#artist{background:radial-gradient(480px 340px at 0 20%,rgba(235,208,143,.35),transparent 70%),radial-gradient(420px 320px at 100% 90%,rgba(92,201,181,.2),transparent 70%),var(--blush-50)}
.final{background:radial-gradient(520px 340px at 80% 0,rgba(201,162,78,.35),transparent 70%),radial-gradient(480px 340px at 0 100%,rgba(92,201,181,.22),transparent 70%),var(--ink)}

/* Glass tiles */
.card,.steps li,.panel,.rev,details,.glass{
  background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 10px 30px rgba(42,32,56,.08),inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.card:hover,.glass:hover,.steps li:hover,.panel:hover{transform:translateY(-4px);border-color:rgba(201,162,78,.8);box-shadow:0 18px 40px rgba(42,32,56,.14),0 0 0 1px rgba(235,208,143,.6),inset 0 1px 0 rgba(255,255,255,.9)}
.rev{border-style:solid}
.steps li::before{background:linear-gradient(135deg,var(--gold-light),var(--gold-mid));color:var(--ink)}
.rule{background:linear-gradient(90deg,var(--gold-mid),var(--gold-light),var(--gold-mid));background-size:200% 100%;animation:ruleglint 7s linear infinite}
@keyframes ruleglint{to{background-position:200% 0}}

/* Photos */
.thumb-img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;border-radius:12px;margin-bottom:8px}
.pgal{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.pgal li{aspect-ratio:4/5;border-radius:18px;overflow:hidden;padding:6px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:0 10px 30px rgba(42,32,56,.1);transition:transform .3s ease,box-shadow .3s ease}
.pgal li:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(42,32,56,.18),0 0 0 2px rgba(201,162,78,.7)}
.pgal img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:13px}
@media(min-width:760px){.pgal{grid-template-columns:repeat(4,1fr)}}

/* The artist section */
.artist-grid{display:grid;gap:16px;margin-top:28px}
.artist-grid .glass{border-radius:var(--r-md);padding:28px 24px}
.artist-grid h3{margin-bottom:8px}
.artist-grid p{color:var(--ink-soft)}
.artist-grid .mark{display:block;font:600 1.1rem var(--font-display);letter-spacing:.2em;color:var(--gold-700);margin-bottom:12px}
@media(min-width:760px){.artist-grid{grid-template-columns:repeat(3,1fr)}}

.preview-bar{background:var(--ink);color:#fff;text-align:center;padding:10px 16px;font-size:.875rem}
@media(max-width:700px){.card,.steps li,.panel,.rev,details,.glass{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}
@media(prefers-reduced-motion:reduce){
  header .btn::after,.hero .btn:not(.sec)::after,.final .btn::after,.dock .btn::after{animation:none;display:none}
  .rule{animation:none}
  .card,.glass,.steps li,.panel,.pgal li,header .btn,.hero .btn,.final .btn,.dock .btn{transition:none}
  .card:hover,.glass:hover,.steps li:hover,.panel:hover,.pgal li:hover,header .btn:hover,.hero .btn:hover,.final .btn:hover,.dock .btn:hover{transform:none}}

/* Hero salon backdrop: AI mood image in the brand colors, faded into the page. Replace with a real photo of Eva's space before launch. */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(253,243,241,.96) 0%,rgba(253,243,241,.82) 38%,rgba(253,243,241,.38) 100%),
    linear-gradient(180deg,rgba(253,243,241,0) 55%,var(--blush-50) 100%),
    linear-gradient(180deg,var(--blush-50) 0%,rgba(253,243,241,0) 18%),
    url("salon-mood.jpg") center 35%/cover no-repeat;
  opacity:.9}
@media(max-width:819px){.hero::before{background:
    linear-gradient(180deg,rgba(253,243,241,.9) 0%,rgba(253,243,241,.7) 60%,var(--blush-50) 100%),
    url("salon-mood.jpg") center top/cover no-repeat}}

/* Carousel: scroll-snap, arrows, dots, no autoplay */
#carousel{background:radial-gradient(460px 320px at 100% 0,rgba(247,217,212,.9),transparent 70%),radial-gradient(420px 300px at 0 100%,rgba(195,222,210,.9),transparent 70%),var(--mint-50)}
.car{position:relative;margin-top:28px}
.car-track{display:flex;gap:16px;list-style:none;margin:0;padding:6px 2px 12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;outline-offset:4px}
.car-track::-webkit-scrollbar{display:none}
.car-track li{flex:0 0 78%;scroll-snap-align:center;border-radius:20px;overflow:hidden;position:relative;aspect-ratio:4/5;background:var(--glass);border:1px solid var(--glass-line);padding:6px;box-shadow:0 14px 34px rgba(42,32,56,.12)}
.car-track img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:15px}
.car-track span{position:absolute;left:18px;right:18px;bottom:18px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-line);font:600 1rem var(--font-display);color:var(--ink);text-align:center}
.car-btn{position:absolute;top:45%;z-index:2;width:48px;height:48px;border-radius:50%;border:1px solid rgba(138,106,36,.55);background:linear-gradient(135deg,var(--gold-light),var(--gold-mid));color:var(--ink);font-size:1.75rem;line-height:1;cursor:pointer;box-shadow:0 6px 18px rgba(184,145,63,.4);transition:transform .2s}
.car-btn:hover{transform:scale(1.08)}.car-btn:focus-visible{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--teal-700)}
.car-btn.prev{left:-8px}.car-btn.next{right:-8px}
.car-dots{display:flex;justify-content:center;gap:8px;margin-top:6px}
.car-dots i{width:8px;height:8px;border-radius:50%;background:var(--blush-300);transition:all .25s}
.car-dots i.on{width:22px;border-radius:99px;background:var(--gold-mid)}
@media(min-width:760px){.car-track li{flex-basis:calc((100% - 32px)/3)}.car-btn.prev{left:-24px}.car-btn.next{right:-24px}}
@media(prefers-reduced-motion:reduce){.car-track{scroll-behavior:auto}.car-btn{transition:none}}

/* Depth: film grain, woven braid texture, vignette, layered shadows. All decorative, pointer-events off. */
body::after{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .16  0 0 0 0 .12  0 0 0 0 .22  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
/* braid weave: two crossing hairlines, very faint, on the tinted sections */
.alt,#artist,#visit,#carousel{background-blend-mode:normal}
.alt::before,#artist::before,#visit::before,#carousel::before,.final::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(60deg,rgba(184,145,63,.09) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(-60deg,rgba(31,122,112,.07) 0 1px,transparent 1px 22px)}
.final::before{opacity:.35;background:
    repeating-linear-gradient(60deg,rgba(235,208,143,.12) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(-60deg,rgba(255,255,255,.06) 0 1px,transparent 1px 22px)}
.alt,#artist,#visit,#carousel,.final{position:relative;isolation:isolate}
.alt>.wrap,#artist>.wrap,#visit>.wrap,#carousel>.wrap,.final>.wrap{position:relative;z-index:1}
/* soft shadow where a section meets the next, so the page reads as layers */
section+section{box-shadow:inset 0 14px 18px -14px rgba(42,32,56,.14)}
.final{box-shadow:inset 0 0 140px rgba(0,0,0,.35)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;box-shadow:inset 0 -60px 80px -50px rgba(138,106,36,.18)}
.card,.glass,.steps li,.panel,.rev{box-shadow:0 1px 1px rgba(42,32,56,.04),0 6px 12px rgba(42,32,56,.06),0 22px 44px rgba(42,32,56,.08),inset 0 1px 0 rgba(255,255,255,.85)}
.portrait{box-shadow:0 24px 50px rgba(42,32,56,.18),inset 0 0 0 6px rgba(255,255,255,.7)}
.hero-art img{box-shadow:0 30px 60px rgba(42,32,56,.22),0 0 0 1px rgba(201,162,78,.5)}

/* Sound button: glass pill, bottom left, clear of the mobile Book dock */
.sound-btn{position:fixed;left:16px;bottom:86px;z-index:45;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;
  border:1px solid var(--glass-line);background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);font:700 .875rem var(--font-body);cursor:pointer;
  box-shadow:0 8px 22px rgba(42,32,56,.16)}
.sound-btn:hover{border-color:rgba(201,162,78,.9)}
.sound-btn:focus-visible{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--teal-700)}
.sound-ico{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--gold-light),var(--gold-mid));position:relative;flex:none}
.sound-ico::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:2px;background:var(--ink);transform:translate(-50%,-50%) rotate(-45deg);border-radius:2px}
.sound-btn.on .sound-ico::after{display:none}
.sound-btn.on .sound-ico{animation:pulse 3s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(235,208,143,.45)}}
@media(min-width:820px){.sound-btn{bottom:20px}}
@media(prefers-reduced-motion:reduce){.sound-btn.on .sound-ico{animation:none}}

/* Sheik's picks, Oct 16: Gemini salon image 2 as the hero (AI mood image, labeled), logo A in the header */
.hero::before{background:
    linear-gradient(90deg,rgba(253,243,241,.3) 0%,rgba(253,243,241,0) 42%),
    linear-gradient(180deg,rgba(253,243,241,0) 72%,var(--blush-50) 100%),
    linear-gradient(180deg,var(--blush-50) 0%,rgba(253,243,241,0) 12%),
    url("salon-hero.jpg") center 40%/cover no-repeat;opacity:1}
.hero-art{min-height:240px}
@media(max-width:819px){.hero::before{background:
    linear-gradient(180deg,rgba(253,243,241,.9) 0%,rgba(253,243,241,.62) 52%,rgba(253,243,241,.08) 100%),
    linear-gradient(180deg,rgba(253,243,241,0) 80%,var(--blush-50) 100%),
    url("salon-hero-mobile.jpg") center bottom/cover no-repeat}.hero-art{display:none}}
.brand img{width:auto;height:48px;border-radius:0;object-fit:contain;object-position:center}

/* Included section: size chips and tile grid */
#included{background:radial-gradient(460px 320px at 100% 0,rgba(247,217,212,.9),transparent 70%),radial-gradient(420px 300px at 0 100%,rgba(195,222,210,.9),transparent 70%),var(--mint-50)}
.sizes{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.sizes .glass{display:inline-flex;flex-direction:column;align-items:center;padding:10px 18px;border-radius:14px;min-width:96px;font-size:.85rem;color:var(--ink-soft)}
.sizes b{font:600 1.15rem var(--font-display);color:var(--ink)}
.inc-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.inc-grid .glass{padding:22px}

/* Polaroid table: photos drop onto a blush linen table. Without script or with reduced motion they sit in a wrapped row. */
#carousel .table{position:relative;margin-top:28px;border-radius:26px;padding:28px 16px 20px;
  background:radial-gradient(600px 300px at 50% 0,rgba(255,255,255,.7),transparent 70%),
    repeating-linear-gradient(0deg,rgba(138,106,36,.05) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(90deg,rgba(138,106,36,.04) 0 1px,transparent 1px 7px),
    linear-gradient(180deg,#F7D9D4,#F2C9C3);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -30px 60px rgba(138,106,36,.12),0 24px 50px rgba(42,32,56,.14);border:1px solid rgba(201,162,78,.5)}
.pola-stage{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;padding:8px 0}
.pola{margin:0;width:min(250px,44vw);padding:10px 10px 44px;background:#fff;border-radius:3px;position:relative;
  box-shadow:0 1px 1px rgba(42,32,56,.12),0 10px 22px rgba(42,32,56,.22);transform:rotate(var(--r,0deg))}
.pola:nth-child(odd){--r:-3deg}.pola:nth-child(even){--r:2.5deg}
.pola img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;display:block;background:#EEF6F2}
.pola figcaption{position:absolute;left:10px;right:10px;bottom:10px;text-align:center;font:600 1.35rem/1 'Caveat',cursive;color:var(--ink)}
.pola-stage.is-stack{display:block;position:relative;height:clamp(430px,68vw,580px)}
.is-stack .pola{position:absolute;left:50%;top:50%;width:min(300px,64vw);opacity:0;pointer-events:none;
  transform:translate(-50%,-50%) translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg))}
.is-stack .pola.in{opacity:1}
.is-stack .pola.dropping{animation:polaDrop 1s cubic-bezier(.2,.8,.25,1) both}
@keyframes polaDrop{
  0%{opacity:0;transform:translate(-50%,-50%) translate(var(--x,0),calc(var(--y,0px) - 360px)) rotate(var(--fr,18deg)) scale(1.18);box-shadow:0 40px 50px rgba(42,32,56,.18)}
  12%{opacity:1}
  62%{transform:translate(-50%,-50%) translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg)) scale(1);box-shadow:0 1px 1px rgba(42,32,56,.12),0 10px 22px rgba(42,32,56,.22)}
  78%{transform:translate(-50%,-50%) translate(var(--x,0),calc(var(--y,0px) - 14px)) rotate(calc(var(--r,0deg) + 1.5deg)) scale(1.01)}
  100%{transform:translate(-50%,-50%) translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg)) scale(1)}}
.pola-controls{display:flex;justify-content:center;gap:12px;margin-top:12px}
.pola-btn{min-width:48px;min-height:48px;border-radius:999px;border:1px solid rgba(138,106,36,.55);background:linear-gradient(135deg,var(--gold-light),var(--gold-mid));color:var(--ink);font:700 1rem var(--font-body);cursor:pointer;box-shadow:0 6px 16px rgba(184,145,63,.35)}
.pola-btn.wide{padding:0 22px}.pola-btn:hover{filter:brightness(1.05)}.pola-btn:focus-visible{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--teal-700)}
.pola-stage:not(.is-stack)~.pola-controls{display:none}
@media(prefers-reduced-motion:reduce){.is-stack .pola.dropping{animation:none}.pola-controls{display:none}}