/* =========================================================================
   PoolConcept 2026 — Rénovation (CSS dedicat paginii)
   Identitate: avant → après. O linie aurie mătură și renovează.
   ========================================================================= */
:root{
  --r-noir:#070708; --r-noir2:#0c0c0e;
  --r-ivoire:#EFEBE3; --r-gris:#9a9a9e;
  --r-or:#C8A24C; --r-or2:#E4C879; --r-orsoft:rgba(200,162,76,.34);
  --r-line:rgba(239,235,227,.12);
  --r-disp:"Bodoni Moda", Georgia, serif;
  --r-ui:"Space Grotesk", system-ui, sans-serif;
  --r-mono:"Space Mono", ui-monospace, monospace;
  --r-e:cubic-bezier(.22,.61,.36,1); --r-slow:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--r-noir);color:var(--r-ivoire);font-family:var(--r-ui);font-weight:300;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ---------- HERO avant/après (sticky, scroll + drag) ---------- */
.r-track{height:240vh;position:relative}
.r-stick{position:sticky;top:0;height:100vh;overflow:hidden;--x:12}

.r-head{position:absolute;top:clamp(5.2rem,12vh,8rem);left:0;right:0;text-align:center;z-index:6;padding-inline:1rem;pointer-events:none}
.r-head .eyebrow{font-family:var(--r-mono);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--r-or2)}
.r-head h1{font-family:var(--r-disp);font-weight:500;font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.05;margin:.5rem 0 0}
.r-head .sub{color:var(--r-gris);font-size:.95rem;margin-top:.8rem}

/* scenă */
.r-scene{position:absolute;inset:0}
.half{position:absolute;inset:0}
/* AVANT: stânga liniei — obosit */
.half.avant{clip-path:inset(0 calc(100% - var(--x)*1%) 0 0)}
.half.avant .pool{filter:grayscale(1) brightness(.8)}
.half.avant::before{content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
/* APRÈS: dreapta liniei — renăscut */
.half.apres{clip-path:inset(0 0 0 calc(var(--x)*1%))}

/* bazinul (SVG identic, redat diferit) */
.pool{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:min(64vw,680px);height:auto}
.pool .contour{fill:none;stroke-width:1.6}
.avant .contour{stroke:#8a8a8e;stroke-dasharray:14 9 3 7;opacity:.85}
.apres .contour{stroke:var(--r-or2);filter:drop-shadow(0 0 14px rgba(200,162,76,.25))}
.avant .crack{fill:none;stroke:#77777b;stroke-width:1;opacity:.8}
.apres .crack{display:none}
.apres .eau{fill:url(#eauGrad);opacity:.5}
.avant .eau{fill:#3a3a3e;opacity:.28}
.apres .reflet{stroke:rgba(228,200,121,.5);stroke-width:1;fill:none;stroke-dasharray:2 10;animation:rShine 5s linear infinite}
.avant .reflet{display:none}
@keyframes rShine{to{stroke-dashoffset:-120}}
/* etichete */
.tagab{position:absolute;top:calc(54% - min(64vw,680px)*.33);z-index:5;font-family:var(--r-mono);
  font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;pointer-events:none;transition:opacity .3s var(--r-e)}
.tagab.a{left:clamp(1.2rem,4vw,3rem);color:var(--r-gris)}
.tagab.b{right:clamp(1.2rem,4vw,3rem);color:var(--r-or2)}

/* linia de renovare + mâner */
.sweep{position:absolute;top:0;bottom:0;left:calc(var(--x)*1%);z-index:5;width:0}
.sweep .ln{position:absolute;top:0;bottom:0;left:-.75px;width:1.5px;background:linear-gradient(180deg,transparent,var(--r-or2) 18%,var(--r-or2) 82%,transparent);
  box-shadow:0 0 18px rgba(200,162,76,.5)}
.sweep .grip{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;
  border:1px solid var(--r-or);background:rgba(7,7,8,.72);backdrop-filter:blur(6px);cursor:ew-resize;
  display:grid;place-items:center;color:var(--r-or2);touch-action:none}
.sweep .grip svg{width:20px;height:20px}
.sweep .grip::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--r-orsoft);
  animation:rPulse 2.4s var(--r-e) infinite}
@keyframes rPulse{0%{transform:scale(.85);opacity:0}35%{opacity:.8}100%{transform:scale(1.25);opacity:0}}

.r-cue{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);z-index:6;
  font-family:var(--r-mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--r-gris);
  display:flex;flex-direction:column;align-items:center;gap:.5rem}
.r-cue .bar{width:1px;height:30px;background:linear-gradient(var(--r-or2),transparent);animation:rCue 2s var(--r-e) infinite}
@keyframes rCue{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ---------- Pași : fisura se vindecă ---------- */
.r-steps{max-width:1100px;margin-inline:auto;padding:clamp(4rem,10vh,7rem) clamp(1.2rem,4vw,3rem)}
.r-steps h2{font-family:var(--r-disp);font-weight:500;font-size:clamp(1.9rem,4.4vw,3.2rem);margin:0 0 .4rem}
.r-steps .lead{color:var(--r-gris);max-width:56ch;margin:0 0 clamp(2.2rem,6vh,3.6rem)}
.r-step{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,3vw,2.4rem);
  padding-block:clamp(1.3rem,3.2vh,2rem)}
.r-step .no{font-family:var(--r-mono);font-size:.7rem;letter-spacing:.2em;color:var(--r-or2);padding-top:.35rem}
.r-step h3{font-family:var(--r-disp);font-weight:500;font-size:clamp(1.3rem,2.6vw,1.9rem);margin:0}
.r-step p{color:var(--r-gris);max-width:52ch;margin:.6rem 0 0}
/* fisură → linie: două path-uri suprapuse */
.heal{display:block;width:min(100%,420px);height:16px;margin-top:.9rem}
.heal .fis{fill:none;stroke:#6b6b70;stroke-width:1;stroke-dasharray:230;stroke-dashoffset:0;transition:opacity .8s var(--r-e) .55s}
.heal .net{fill:none;stroke:var(--r-or2);stroke-width:1.2;stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.2s var(--r-slow) .25s}
.r-step.in .heal .net{stroke-dashoffset:0}
.r-step.in .heal .fis{opacity:0}
/* intrare "șlefuită": din granulat/blur -> net */
.r-step .no,.r-step h3,.r-step p{opacity:0;filter:blur(6px);transform:translateY(10px);transition:.8s var(--r-e)}
.r-step.in .no,.r-step.in h3,.r-step.in p{opacity:1;filter:blur(0);transform:none}
.r-step.in p{transition-delay:.1s}

/* ---------- CTA ---------- */
.r-cta{max-width:1100px;margin-inline:auto;padding:0 clamp(1.2rem,4vw,3rem) clamp(5rem,12vh,8rem);text-align:center}
.r-cta .rule{width:1px;height:clamp(40px,8vh,70px);background:linear-gradient(transparent,var(--r-or2));margin:0 auto clamp(1.4rem,4vh,2.2rem)}
.r-cta h2{font-family:var(--r-disp);font-weight:500;font-size:clamp(1.8rem,4.6vw,3.4rem);margin:0 0 1.6rem}
.r-cta h2 em{font-style:italic;color:var(--r-or2)}
.r-cta a{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--r-mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--r-ivoire);text-decoration:none;border:1px solid var(--r-or);
  padding:.9rem 1.8rem;border-radius:1px;transition:.35s var(--r-e)}
.r-cta a:hover{background:var(--r-or);color:#000}

/* ---------- Avant/Après réels (comparateurs) ---------- */
.r-compare{max-width:1100px;margin-inline:auto;padding:0 clamp(1.2rem,4vw,3rem) clamp(4rem,10vh,7rem)}
.r-compare h2{font-family:var(--r-disp);font-weight:500;font-size:clamp(1.9rem,4.4vw,3.2rem);margin:0 0 .4rem}
.r-compare .lead{color:var(--r-gris);max-width:56ch;margin:0 0 clamp(1.8rem,5vh,2.8rem)}
.cmp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.6vw,1.2rem)}
@media (max-width:860px){.cmp-grid{grid-template-columns:1fr}}
.cmp{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--r-line);cursor:zoom-in;--cx:50}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.cmp .im-b{clip-path:inset(0 calc(100% - var(--cx)*1%) 0 0);filter:grayscale(.25) brightness(.92)}
.cmp .ln{position:absolute;top:0;bottom:0;left:calc(var(--cx)*1%);width:1.5px;margin-left:-.75px;z-index:2;
  background:linear-gradient(180deg,transparent,var(--r-or2) 15%,var(--r-or2) 85%,transparent);
  box-shadow:0 0 14px rgba(200,162,76,.55)}
.cmp .tg{position:absolute;top:.7rem;z-index:2;font-family:var(--r-mono);font-size:.56rem;letter-spacing:.22em;
  text-transform:uppercase;padding:.3em .7em;background:rgba(7,7,8,.55);backdrop-filter:blur(4px);pointer-events:none}
.cmp .tg.a{left:.7rem;color:var(--r-ivoire)}
.cmp .tg.b{right:.7rem;color:var(--r-or2)}
.cmp .zoom{position:absolute;right:.7rem;bottom:.7rem;z-index:2;width:30px;height:30px;display:grid;place-items:center;
  color:var(--r-or2);background:rgba(7,7,8,.55);backdrop-filter:blur(4px);border:1px solid var(--r-orsoft);
  opacity:0;transition:opacity .3s var(--r-e);pointer-events:none}
.cmp:hover .zoom{opacity:1}
.cmp .zoom svg{width:15px;height:15px}
.cmp::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--r-orsoft);opacity:0;transition:opacity .3s var(--r-e)}
.cmp:hover::after{opacity:.7}

/* lightbox zoom cu linia draggabilă */
.cmp-box{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,3vw,2.4rem);opacity:0;visibility:hidden;transition:opacity .4s var(--r-e),visibility .4s var(--r-e)}
.cmp-box.open{opacity:1;visibility:visible}
.cmp-box .bg{position:absolute;inset:0;background:rgba(4,4,5,.86);backdrop-filter:blur(8px)}
.cmp-box .stage{position:relative;width:min(1100px,94vw);aspect-ratio:4/3;max-height:88vh;overflow:hidden;
  border:1px solid var(--r-orsoft);--cx:50;cursor:ew-resize;touch-action:none}
.cmp-box .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.cmp-box .stage .im-b{clip-path:inset(0 calc(100% - var(--cx)*1%) 0 0);filter:grayscale(.25) brightness(.92)}
.cmp-box .stage .ln{position:absolute;top:0;bottom:0;left:calc(var(--cx)*1%);width:1.5px;margin-left:-.75px;z-index:2;
  background:linear-gradient(180deg,transparent,var(--r-or2) 12%,var(--r-or2) 88%,transparent);
  box-shadow:0 0 20px rgba(200,162,76,.6)}
.cmp-box .stage .knob{position:absolute;top:50%;left:calc(var(--cx)*1%);transform:translate(-50%,-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--r-or);background:rgba(7,7,8,.72);
  backdrop-filter:blur(6px);display:grid;place-items:center;color:var(--r-or2);pointer-events:none}
.cmp-box .stage .knob svg{width:18px;height:18px}
.cmp-box .stage .tg{position:absolute;top:1rem;z-index:2;font-family:var(--r-mono);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;padding:.35em .8em;background:rgba(7,7,8,.6);backdrop-filter:blur(4px)}
.cmp-box .stage .tg.a{left:1rem;color:var(--r-ivoire)}
.cmp-box .stage .tg.b{right:1rem;color:var(--r-or2)}
.cmp-box .close{position:absolute;top:clamp(.8rem,2.4vw,1.6rem);right:clamp(.8rem,2.4vw,1.6rem);z-index:4;
  width:42px;height:42px;display:grid;place-items:center;background:rgba(7,7,8,.6);border:1px solid var(--r-orsoft);
  color:var(--r-ivoire);cursor:pointer;transition:.3s var(--r-e)}
.cmp-box .close:hover{background:var(--r-or);color:#000}

/* a11y / motion */
a:focus-visible,button:focus-visible{outline:2px solid var(--r-or2);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  .r-track{height:auto}
  .r-stick{--x:50}
  .r-step .no,.r-step h3,.r-step p{opacity:1;filter:none;transform:none}
  .r-step .heal .net{stroke-dashoffset:0}
  .r-step .heal .fis{opacity:0}
}
@media (max-width:760px){
  .pool{width:88vw}
  .tagab{top:calc(54% - 88vw*.33)}
}