/*
 * DIMITRA — COHERENT EXPERIENCE LAYER
 * Original black-and-gold editorial system inspired by vintage beauty
 * publishing, not a reproduction of any reference site.
 */

:root{--ease-lux:cubic-bezier(.22,1,.36,1);--gold-glow:rgba(201,169,110,.18)}

/* Shared visual grammar across every route. */
section{position:relative}
section:not(#hero):not(#services):not(#treatments):not(.ticker-sec)::after{content:"";position:absolute;left:clamp(1.25rem,4vw,4.5rem);right:clamp(1.25rem,4vw,4.5rem);bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);pointer-events:none}
.sec-h,.about-h,.p-hero h1,.mid-cta-h{font-family:var(--ff-d);letter-spacing:-.055em}
.sec-h em,.about-h em,.p-hero h1 em,.mid-cta-h em{font-weight:300;color:var(--brass)}
.btn{isolation:isolate}
.btn:after{content:"";position:absolute;inset:4px;border:1px solid currentColor;opacity:0;transform:scale(.92);transition:opacity .35s ease,transform .5s var(--ease-lux);pointer-events:none}
.btn:hover:after{opacity:.28;transform:scale(1)}

/* Reel-ready hero: a strong 9:16 composition lives inside the desktop one. */
#hero{min-height:100svh;isolation:isolate}
#hero::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 66% 48%,var(--gold-glow),transparent 34%),linear-gradient(115deg,#080807 0 52%,#0e0c09 52% 100%)}
#hero .hero-bg{z-index:1;left:45%;top:13%;right:8%;bottom:9%;clip-path:polygon(7% 0,100% 0,100% 93%,92% 100%,0 100%,0 8%);transition:clip-path 1.2s var(--ease-lux)}
#hero:hover .hero-bg{clip-path:polygon(0 0,100% 0,100% 100%,100% 100%,0 100%,0 0)}
.hero-frame{z-index:4}
.hero-frame::before{content:"PERSONAL SKIN RITUALS  ·  PAZARDZHIK"}
.hh{font-size:clamp(5rem,9.4vw,10.4rem);line-height:.72;max-width:10ch}
.hh-row-1{margin-left:-1vw}.hh-row-2{margin-left:14vw}.hh-row-3{margin-left:3vw}
.hh-row-3 .hh-line{color:var(--brass)}
.hero-low{right:8%;bottom:9%;width:34%;box-shadow:-20px -20px 70px rgba(0,0,0,.34)}
.hero-reel-portrait{position:absolute;z-index:5;left:42%;bottom:6%;width:clamp(110px,12vw,190px);aspect-ratio:3/4;border:1px solid var(--brass);padding:5px;background:#080807;transform:translate3d(var(--tilt-x,0),var(--tilt-y,0),0) rotate(-2deg);transition:transform .7s var(--ease-lux)}
.hero-reel-portrait img{width:100%;height:100%;object-fit:cover;object-position:52% center;filter:saturate(.5) sepia(.12) contrast(1.08) brightness(.75)}
.hero-reel-portrait span{position:absolute;left:-1px;bottom:calc(100% + .8rem);font-size:.42rem;letter-spacing:.24em;color:var(--brass);white-space:nowrap}
.hero-reel-rail{position:absolute;z-index:5;left:clamp(1.25rem,3vw,3rem);top:50%;transform:translateY(-20%);display:flex;align-items:center;gap:.8rem;writing-mode:vertical-rl;font-size:.43rem;letter-spacing:.28em;color:var(--faint)}
.hero-reel-rail i{display:block;width:1px;height:clamp(70px,12vh,130px);background:linear-gradient(var(--brass),transparent);position:relative;overflow:hidden}
.hero-reel-rail i::after{content:"";position:absolute;top:-35%;left:0;width:1px;height:35%;background:#fff;animation:railPulse 2.6s ease-in-out infinite}
@keyframes railPulse{0%{transform:translateY(0)}75%,100%{transform:translateY(390%)}}

/* Manifesto replaces unsupported vanity metrics with honest positioning. */
#stats{padding:clamp(5rem,9vw,9rem) 0;background:#0b0a08}
.manifesto-grid{display:grid;grid-template-columns:.65fr 2.2fr .9fr;gap:clamp(2rem,6vw,7rem);align-items:start}
.manifesto-kicker,.manifesto-note{font-size:.52rem;line-height:1.8;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.manifesto-line{font-family:var(--ff-d);font-size:clamp(2.4rem,4.7vw,5.4rem);font-weight:300;line-height:.9;letter-spacing:-.045em;color:var(--ivory)}
.manifesto-line em{color:var(--brass)}
.manifesto-note{color:var(--muted);letter-spacing:.12em;text-transform:none;border-left:1px solid var(--line);padding-left:1.4rem}

/* Three narrative chapters: the reference rhythm, rebuilt for skin care. */
#rituals{background:#080807;padding:clamp(8rem,13vw,14rem) 0}
.rituals-head{display:grid;grid-template-columns:.8fr 2fr;gap:2rem;align-items:start;margin-bottom:clamp(5rem,10vw,10rem)}
.rituals-head h2{font-family:var(--ff-d);font-weight:300;font-size:clamp(3.8rem,7.5vw,8rem);line-height:.76;letter-spacing:-.055em;color:var(--ivory)}
.rituals-head h2 em{color:var(--brass)}
.ritual-row{width:min(1440px,100%);margin:0 auto clamp(8rem,14vw,15rem);padding:0 clamp(1.25rem,4vw,4.5rem);display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(3rem,9vw,11rem);align-items:center}
.ritual-row:last-child{margin-bottom:0}
.ritual-row-b{grid-template-columns:.92fr 1.08fr}
.ritual-visual{position:relative;aspect-ratio:4/5;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:translate3d(var(--tilt-x,0),var(--tilt-y,0),0);transition:clip-path .9s var(--ease-lux),transform .7s var(--ease-lux)}
.ritual-visual:hover{clip-path:polygon(3% 3%,97% 0,100% 97%,0 100%)}
.ritual-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 48%);pointer-events:none}
.ritual-visual img{width:100%;height:112%;object-fit:cover;filter:saturate(.5) sepia(.1) contrast(1.08) brightness(.72);transition:transform 1.5s var(--ease-lux),filter .7s ease}
.ritual-visual:hover img{transform:scale(1.045);filter:saturate(.85) sepia(.05) contrast(1.04) brightness(.8)}
.ritual-no{position:absolute;z-index:2;right:1.3rem;bottom:.7rem;font-family:var(--ff-d);font-size:clamp(4rem,8vw,8rem);font-style:italic;color:var(--brass);line-height:1}
.ritual-copy{max-width:520px}
.ritual-overline{display:block;font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:var(--brass);margin-bottom:2rem}
.ritual-copy h3{font-family:var(--ff-d);font-size:clamp(3.2rem,5.8vw,6.3rem);font-weight:300;line-height:.76;letter-spacing:-.055em;color:var(--ivory);margin-bottom:2rem}
.ritual-copy h3 em{color:var(--brass)}
.ritual-copy p{color:var(--muted);font-size:.86rem;line-height:1.8;max-width:43ch;margin-bottom:2.5rem}
.link-button{font-family:var(--ff-b);font-size:.56rem;font-weight:500;letter-spacing:.2em;color:var(--ivory);background:none;border:0;border-bottom:1px solid var(--brass);padding:0 0 .35rem;cursor:pointer;transition:color .3s ease,letter-spacing .4s var(--ease-lux)}
.link-button:hover{color:var(--brass);letter-spacing:.26em}

/* Skin quiz becomes a primary editorial moment, not a utility hidden in a catalogue. */
#skin-test-home{min-height:min(900px,88svh);display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;background:var(--brass);color:#080807;overflow:hidden;padding:clamp(5rem,9vw,10rem) clamp(1.25rem,8vw,9rem);gap:clamp(3rem,8vw,10rem)}
#skin-test-home::after{display:none}
.skin-test-photo{position:relative;height:min(650px,70vh);overflow:hidden;clip-path:polygon(0 7%,92% 0,100% 93%,8% 100%)}
.skin-test-photo img{width:100%;height:110%;object-fit:cover;object-position:center 35%;filter:grayscale(.7) contrast(1.1) brightness(.66)}
.skin-test-copy{position:relative;z-index:2;max-width:660px}
.skin-test-copy .lbl{color:#080807}
.skin-test-copy h2{font-family:var(--ff-d);font-size:clamp(4rem,8vw,8.5rem);font-weight:300;line-height:.72;letter-spacing:-.06em;margin:1.5rem 0 2rem}
.skin-test-copy h2 em{color:#fff7e9}
.skin-test-copy p{max-width:44ch;font-size:.9rem;line-height:1.75;margin-bottom:2rem;color:rgba(8,8,7,.72)}
.skin-test-copy .btn-brass{background:#080807;color:#f6ead8}
.skin-orbit{position:absolute;right:-9vw;top:50%;transform:translateY(-50%);width:38vw;height:38vw;min-width:420px;min-height:420px;border:1px solid rgba(8,8,7,.25);border-radius:50%;display:grid;place-items:center;color:rgba(8,8,7,.26);font-family:var(--ff-d);font-size:clamp(4rem,9vw,10rem);font-style:italic;animation:orbitTurn 30s linear infinite}
.skin-orbit i{position:absolute;width:68%;height:68%;border:1px solid rgba(8,8,7,.18);border-radius:50%}
.skin-orbit span:last-child{position:absolute;transform:rotate(90deg)}
@keyframes orbitTurn{to{transform:translateY(-50%) rotate(360deg)}}

/* Harmonize legacy sections with the new chapter system. */
#about{padding-block:clamp(8rem,13vw,14rem)}
#spotlight{padding-block:clamp(7rem,11vw,12rem)}
#brands{padding-block:clamp(4rem,7vw,7rem)}
.brands-row{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brand-item{padding-block:1.5rem;transition:color .3s ease,transform .5s var(--ease-lux)}
.brand-item:hover{color:var(--brass);transform:translateY(-3px)}
.p-hero::before{content:attr(id);position:absolute;right:2vw;top:50%;transform:translateY(-50%);font-family:var(--ff-d);font-size:clamp(6rem,18vw,18rem);font-style:italic;color:transparent;-webkit-text-stroke:1px rgba(201,169,110,.09);pointer-events:none}

/* Scroll entrance is short and directional; no generic fade-up cascade. */
.js-experience .ritual-copy,.js-experience .ritual-visual,.js-experience .manifesto-line,.js-experience .skin-test-copy{opacity:0;transition:opacity .7s ease,transform 1s var(--ease-lux)}
.js-experience .ritual-copy{transform:translateX(45px)}
.js-experience .ritual-row-b .ritual-copy{transform:translateX(-45px)}
.js-experience .ritual-visual{transform:translate3d(var(--tilt-x,0),45px,0)}
.js-experience .manifesto-line,.js-experience .skin-test-copy{transform:translateY(32px)}
.js-experience .is-seen.ritual-copy,.js-experience .is-seen.ritual-visual,.js-experience .is-seen.manifesto-line,.js-experience .is-seen.skin-test-copy{opacity:1;transform:translate3d(var(--tilt-x,0),var(--tilt-y,0),0)}

@media(max-width:980px){
  .manifesto-grid{grid-template-columns:1fr 2fr}.manifesto-note{grid-column:2}
  .ritual-row,.ritual-row-b{grid-template-columns:1fr 1fr;gap:3rem}
  .hero-reel-portrait{left:auto;right:3%;bottom:40%;width:125px}
  #skin-test-home{grid-template-columns:1fr 1fr;padding-inline:clamp(1.25rem,5vw,4rem)}
}

@media(max-width:700px){
  #hero{min-height:100svh;overflow:hidden}
  #hero::after{background:linear-gradient(to bottom,#0b0a08 0 57%,#080807 57%)}
  #hero .hero-bg{left:14%;right:0;top:10%;bottom:42%;clip-path:polygon(10% 0,100% 0,100% 92%,90% 100%,0 100%,0 8%)}
  #hero .hero-bg-img{object-position:57% center}
  .hero-frame{padding:6.2rem 1rem 1.2rem;justify-content:flex-end}
  .hero-frame::before{top:5.9rem;left:1rem;transform:none;font-size:.38rem;letter-spacing:.18em}
  .hh{font-size:clamp(3.6rem,17vw,5.7rem);line-height:.7;margin-bottom:7.6rem;position:relative;z-index:6}
  .hh-row-1{margin-left:0}.hh-row-2{margin-left:6vw}.hh-row-3{margin-left:0}
  .hero-low{position:relative;right:auto;bottom:auto;width:100%;background:transparent;box-shadow:none;border-top:1px solid var(--line);padding:1rem 0 0}
  .hs{font-size:.7rem;line-height:1.6}.h-actions .btn{min-height:48px}
  .hero-reel-portrait{right:1rem;left:auto;bottom:36%;width:86px;padding:3px;transform:rotate(3deg)}
  .hero-reel-portrait span{display:none}.hero-reel-rail{display:none}
  .manifesto-grid{grid-template-columns:1fr}.manifesto-note{grid-column:auto}.manifesto-line{font-size:clamp(2.5rem,12vw,4rem)}
  .rituals-head{grid-template-columns:1fr;gap:1.5rem}.rituals-head h2{font-size:clamp(3.5rem,15vw,5.3rem)}
  .ritual-row,.ritual-row-b{grid-template-columns:1fr;gap:2.5rem;margin-bottom:7rem}.ritual-row-b .ritual-copy{order:2}.ritual-visual{aspect-ratio:4/5}.ritual-copy h3{font-size:clamp(3.3rem,15vw,5rem)}
  #skin-test-home{min-height:auto;grid-template-columns:1fr;padding:5.5rem 1.25rem;gap:3rem}.skin-test-photo{height:58vh;max-height:520px}.skin-test-copy h2{font-size:clamp(4rem,18vw,6rem)}.skin-orbit{right:-75%;top:70%}
}

@media(prefers-reduced-motion:reduce){
  .hero-reel-rail i::after,.skin-orbit{animation:none}
  .js-experience .ritual-copy,.js-experience .ritual-visual,.js-experience .manifesto-line,.js-experience .skin-test-copy{opacity:1;transform:none;transition:none}
  .ritual-visual,.hero-reel-portrait{transform:none!important}
}