/* ============================================================
   The Lex Bakehouse — cofetărie artizanală
   Editorial, aerisit, à la Crumbly/Mark.One
   Tokens: crem #FFF3EF · roz #FA82B7 · navy #244069
   Type:   Syne (unic — display & body)
   ============================================================ */

/* ---------- font ---------- */
@font-face{
  font-family:"Syne";
  src:url("../fonts/Syne-var.woff2") format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Fraunces Num";
  src:url("../fonts/Fraunces-num.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --bg:#FFF3EF;
  --ink:#244069;
  --ink-soft:rgb(36 64 105/.68);
  --hairline:rgb(36 64 105/.16);
  --pink:#FA82B7;
  --pink-deep:#F0619E;
  --pink-soft:#FFE3EE;
  --shadow:36 64 105;
  --r-md:20px; --r-lg:28px;
  --container:1200px;
  --font:"Syne",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- reset & base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:6.5rem;overflow-x:clip}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:1rem;
  line-height:1.7;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
::selection{background:var(--pink);color:var(--bg)}

.eyebrow{
  font-weight:700;font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--pink-deep);margin-bottom:1.2rem;
}
.eyebrow--light{color:var(--pink)}

h2{
  font-weight:700;letter-spacing:-.02em;
  font-size:clamp(2.2rem,4.6vw,3.6rem);
  line-height:1.05;
}
h2 em{font-style:normal;color:var(--pink)}

/* ---------- progress ---------- */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:120;pointer-events:none}
.progress i{display:block;height:100%;background:var(--pink);transform:scaleX(0);transform-origin:0 50%}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:2rem;
  padding:1rem clamp(1.2rem,4vw,3rem);
  transition:background .35s,box-shadow .35s,padding .35s;
}
.nav.scrolled{
  background:rgba(255,243,239,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--hairline);
  padding-block:.6rem;
}
.nav__brand{
  display:flex;flex-direction:column;line-height:1;text-decoration:none;
  transition:transform .25s var(--ease);
}
.nav__brand:hover{transform:rotate(-2deg) scale(1.04)}
.nav__logo{width:clamp(88px,9vw,118px);height:auto}
.nav__links{display:flex;gap:1.8rem;margin-left:auto}
.nav__links a{
  position:relative;text-decoration:none;font-weight:600;font-size:.92rem;padding:.3rem 0;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:var(--pink);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__cta{flex-shrink:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font);font-weight:700;font-size:.95rem;line-height:1;
  padding:.85rem 1.45rem;border-radius:999px;text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .22s var(--ease),background .22s,color .22s,border-color .22s,box-shadow .22s;
  touch-action:manipulation;
}
.btn .ic{width:1.2em;height:1.2em;flex-shrink:0;transition:transform .3s var(--ease)}
.btn:active{transform:scale(.97)}
.btn--pink{background:var(--pink);color:var(--ink)}
.btn--pink:hover{background:var(--pink-deep);transform:translateY(-2px);box-shadow:0 14px 28px -14px rgb(240 97 158/.7)}
.btn--pink:hover .ic{transform:rotate(-8deg) scale(1.1)}
.btn--ghost{border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--bg);transform:translateY(-2px)}
.btn--big{padding:1.05rem 1.8rem;font-size:1rem}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100dvh;
  display:grid;place-items:center;
  padding:7.5rem clamp(1rem,4vw,3rem) 4rem;
}
.hero__inner{
  position:relative;width:100%;max-width:1280px;margin-inline:auto;
  text-align:center;
}
.hero__eyebrow{
  font-weight:700;font-size:.74rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;gap:1rem;
}
.hero__eyebrow i{font-style:normal;color:var(--pink);font-size:.8rem}
.hero__title{display:flex;flex-direction:column;align-items:center}
.hero__logo{
  width:min(80%,880px);height:auto;
  margin-top:clamp(1rem,3vh,1.8rem);
  filter:drop-shadow(0 26px 50px rgb(250 130 183/.38));
}
.hero__bakehouse{
  font-weight:700;font-size:clamp(.85rem,1.7vw,1.15rem);
  letter-spacing:clamp(.45em,1.2vw,.62em);text-transform:uppercase;
  color:var(--ink);
  margin-top:1.6em;text-indent:.5em;
}
.hero__lead{
  max-width:30rem;margin:2.1rem auto 0;
  font-size:1.02rem;font-weight:500;color:var(--ink-soft);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2.1rem}

/* fotografii plutitoare (decupate) */
.hero__float{
  position:absolute;height:auto;
  filter:drop-shadow(0 26px 30px rgb(var(--shadow)/.30));
  animation:bob 7s ease-in-out infinite alternate;
}
.hero__float--1{width:clamp(100px,11vw,160px);left:2.5%;top:0;animation-delay:-2s;rotate:-8deg}
.hero__float--2{width:clamp(130px,15.5vw,225px);right:2.5%;top:34%;animation-delay:-4.5s;rotate:6deg}
.hero__float--3{width:clamp(110px,12.5vw,180px);left:8%;bottom:0;animation-delay:-6s;rotate:5deg}
@keyframes bob{from{translate:0 -7px}to{translate:0 9px}}

/* badge rotativ */
.badge{
  position:absolute;right:9%;bottom:1%;
  width:clamp(96px,10vw,132px);aspect-ratio:1;
  display:grid;place-items:center;border-radius:50%;text-decoration:none;
  background:var(--ink);
  box-shadow:0 24px 48px -20px rgb(var(--shadow)/.55);
  transition:transform .3s var(--ease);
}
.badge:hover{transform:scale(1.06) rotate(4deg)}
.badge__ring{position:absolute;inset:4%;animation:spin 18s linear infinite}
.badge:hover .badge__ring{animation-play-state:paused}
.badge__ring text{
  font-family:var(--font);font-weight:700;font-size:8.6px;
  letter-spacing:.14em;fill:var(--bg);text-transform:uppercase;
}
.badge__core{
  width:38%;aspect-ratio:1;border-radius:50%;
  background:var(--pink);color:var(--ink);
  display:grid;place-items:center;
  transition:transform .3s var(--ease);
}
.badge__core svg{width:52%;height:52%}
.badge:hover .badge__core{transform:scale(1.12) rotate(45deg)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- marquee ---------- */
.marquee{
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  overflow:hidden;
}
.marquee__track{display:flex;width:max-content;animation:marquee 36s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;align-items:center;gap:3rem;padding:1rem 1.5rem}
.marquee__group span{
  font-weight:600;font-size:.88rem;letter-spacing:.26em;text-transform:uppercase;
  white-space:nowrap;color:var(--ink);
}
.marquee__group i{font-style:normal;color:var(--pink);font-size:.9rem}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- sections shared ---------- */
.section-head{max-width:var(--container);margin:0 auto;text-align:center;padding-inline:1rem}
.section-sub{max-width:34rem;margin:1.2rem auto 0;color:var(--ink-soft);font-size:.98rem}

/* ---------- products ---------- */
.products{padding:clamp(5rem,12vh,8.5rem) clamp(1.2rem,4vw,3rem)}
.grid{
  max-width:var(--container);margin:clamp(3rem,7vh,4.5rem) auto 0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:3.4rem 2.2rem;
}
.card{text-align:center}
@media (min-width:1024px){.grid .card:nth-child(3n+1):last-child{grid-column:2}}
@media (min-width:520px) and (max-width:1023px){
  .grid .card:nth-child(odd):last-child{grid-column:1/-1;justify-self:center;width:calc(50% - .8rem)}
}
.card__media{
  aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;
  background:#fff;
  display:grid;place-items:center;padding:11%;
  box-shadow:0 26px 55px -36px rgb(var(--shadow)/.4);
  transition:box-shadow .4s var(--ease),transform .4s var(--ease);
}
.card:hover .card__media,.card:focus-within .card__media{
  transform:translateY(-6px);
  box-shadow:0 36px 70px -36px rgb(var(--shadow)/.45);
}
.card__media img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 18px 20px rgb(var(--shadow)/.18));
  transition:transform .6s var(--ease);
}
.card:hover .card__media img,.card:focus-within .card__media img{transform:scale(1.05) rotate(1deg)}
.card__body{padding-top:1.25rem}
.card__body h3{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.card__body .card__price{
  font-family:"Fraunces Num",Georgia,serif;
  font-variation-settings:"SOFT" 100,"opsz" 40;
  font-weight:700;font-size:1.12rem;color:var(--pink-deep);
  margin-top:.35rem;letter-spacing:.02em;
}
.card__body p{
  font-size:.86rem;color:var(--ink-soft);
  max-width:17rem;margin:.4rem auto 0;line-height:1.55;
}
.card__order{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  margin-top:1rem;min-height:2.75rem;
  font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);
  background:var(--pink);padding:.7rem 1.5rem;border-radius:999px;
  box-shadow:0 12px 24px -12px rgb(240 97 158/.75);
  transition:background .25s,transform .25s var(--ease),box-shadow .25s;
}
.card__order .ic{width:1.2em;height:1.2em;transition:transform .3s var(--ease)}
.card__order:hover{background:var(--pink-deep);transform:translateY(-2px);box-shadow:0 16px 30px -12px rgb(240 97 158/.9)}
.card__order:hover .ic{transform:translateX(4px)}
.card__order:active{transform:scale(.97)}
.products__min{
  max-width:var(--container);margin:3.2rem auto 0;text-align:center;
  font-weight:600;font-size:.92rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);
}
.products__min strong{
  font-family:"Fraunces Num",Georgia,serif;
  font-variation-settings:"SOFT" 100,"opsz" 40;
  font-weight:700;font-size:1.18em;color:var(--pink-deep);
  letter-spacing:.02em;text-transform:none;
}
.products__note{
  max-width:var(--container);margin:.9rem auto 0;text-align:center;
  font-size:.95rem;color:var(--ink-soft);
}
.products__note a{color:var(--ink);font-weight:700;text-decoration-color:var(--pink);text-decoration-thickness:1.5px;text-underline-offset:4px}
.products__note a:hover{color:var(--pink-deep)}

/* ---------- steps (scrollytelling) ---------- */
.steps{position:relative;border-top:1px solid var(--hairline)}
@media (min-width:900px){.steps{height:280vh}}
.steps__pin{position:sticky;top:0;min-height:100dvh;display:grid;align-items:center;overflow:hidden}
.steps__inner{
  max-width:var(--container);margin-inline:auto;width:100%;
  padding:clamp(3rem,8vh,5rem) clamp(1.2rem,4vw,3rem);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center;
}
.steps__list{list-style:none;margin-top:2rem}
.step{
  display:flex;gap:1.6rem;align-items:baseline;
  padding-block:1.5rem;
  transition:opacity .45s;
}
.step+.step{border-top:1px solid var(--hairline)}
.js .step{opacity:.35}
.js .step.is-active{opacity:1}
.step__num{
  flex-shrink:0;min-width:3.2rem;
  font-weight:800;font-size:2.1rem;letter-spacing:-.02em;line-height:1;
  color:rgb(36 64 105/.25);
  transition:color .45s;
}
.step.is-active .step__num{color:var(--pink)}
.step h3{font-size:1.12rem;font-weight:700}
.step p{font-size:.92rem;color:var(--ink-soft);max-width:26rem;margin-top:.3rem;line-height:1.6}
.steps__bar{height:2px;background:rgb(36 64 105/.12);border-radius:99px;margin-top:1.6rem;overflow:hidden}
.steps__bar i{display:block;height:100%;width:100%;background:var(--pink);transform:scaleX(0);transform-origin:left}
.steps__media{
  position:relative;justify-self:center;width:min(100%,400px);aspect-ratio:1/1.05;
  background:#fff;border-radius:var(--r-lg);
  box-shadow:0 40px 80px -38px rgb(var(--shadow)/.45);
}
.steps__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:12%;
  filter:drop-shadow(0 20px 24px rgb(var(--shadow)/.18));
  opacity:0;transform:scale(1.04);transition:opacity .55s,transform .7s var(--ease);
}
.steps__media img.is-active{opacity:1;transform:none}

/* ---------- statement ---------- */
.statement{
  padding:clamp(5rem,14vh,9rem) clamp(1.4rem,6vw,3rem);
  text-align:center;
  border-top:1px solid var(--hairline);
}
.statement__text{
  max-width:46rem;margin-inline:auto;
  font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.5rem,3vw,2.45rem);line-height:1.35;
}
.statement__text em{font-style:normal;color:var(--pink-deep)}
.statement__kiss{
  margin:1.8rem auto 0;width:clamp(60px,6vw,84px);height:auto;rotate:-10deg;
  filter:drop-shadow(0 12px 20px rgb(var(--shadow)/.18));
}
.js .statement__kiss{opacity:0;transform:scale(.3) rotate(18deg);transition:opacity .5s,transform .55s var(--ease);transition-delay:.8s}
.js .statement__text.in+.statement__kiss{opacity:1;transform:none}

/* ---------- CTA ---------- */
.cta{padding:0 clamp(1.2rem,4vw,3rem) clamp(5rem,10vh,7.5rem)}
.cta__panel{
  position:relative;max-width:var(--container);margin-inline:auto;
  background:
    radial-gradient(34rem 22rem at 88% -12%,rgb(250 130 183/.16),transparent 60%),
    radial-gradient(26rem 18rem at 6% 112%,rgb(250 130 183/.12),transparent 60%),
    var(--ink);
  color:var(--bg);text-align:center;
  border-radius:var(--r-lg);
  padding:clamp(3.5rem,9vh,6rem) clamp(1.5rem,5vw,4rem);
}
.cta__panel h2{color:var(--bg)}
.cta__sub{max-width:32rem;margin:1.3rem auto 0;opacity:.9;font-size:.98rem}
.cta__actions{display:flex;flex-direction:column;align-items:center;gap:1.15rem;margin-top:2.2rem}
.cta__tel{color:var(--bg);opacity:.85;font-size:.95rem;text-underline-offset:4px;text-decoration-thickness:1.5px}
.cta__tel:hover{opacity:1;color:var(--pink)}
.cta__tel strong{font-weight:700;white-space:nowrap}
.sticker{position:absolute;filter:drop-shadow(0 14px 24px rgb(var(--shadow)/.25));transition:transform .3s var(--ease)}
.sticker:hover{transform:rotate(6deg) scale(1.06)}
.cta .sticker--ctaseal{top:-2.6rem;right:clamp(1rem,7vw,4.5rem);width:clamp(84px,9vw,120px);rotate:10deg;animation:bob 6s ease-in-out infinite alternate}
.cta :focus-visible{outline-color:var(--pink-soft)}

/* ---------- footer ---------- */
.footer{padding-top:clamp(3rem,8vh,5rem);overflow:hidden}
.footer__meta{
  display:flex;flex-wrap:wrap;gap:.5rem 3rem;justify-content:center;
  padding-inline:clamp(1rem,4vw,3rem);
  font-size:.85rem;color:var(--ink-soft);text-align:center;
}
.footer__meta a{color:var(--ink);font-weight:600;text-decoration-color:var(--pink);text-underline-offset:3px}
.footer__meta a:hover{color:var(--pink-deep)}
.footer__giant{
  display:block;width:min(88vw,1240px);height:auto;
  margin:clamp(2rem,5vh,3.5rem) auto 0;
  transform:translateY(16%);
  user-select:none;-webkit-user-drag:none;
}

/* ============================================================
   MOTION — load & scroll (gated .js)
   ============================================================ */
.js .hero__eyebrow{animation:fadeUp .8s var(--ease) .1s both}
.js .hero__logo{animation:logoIn 1.1s var(--ease) .22s both}
.js .hero__bakehouse{animation:trackIn 1.1s var(--ease) .6s both}
@keyframes logoIn{from{opacity:0;transform:translateY(30px) scale(.94) rotate(-2deg)}to{opacity:1;transform:none}}
.js .hero__lead{animation:fadeUp .8s var(--ease) .75s both}
.js .hero__cta{animation:fadeUp .8s var(--ease) .88s both}
.js .hero__float{opacity:0;animation:floatIn .9s var(--ease) both,bob 7s ease-in-out 1.8s infinite alternate}
.js .hero__float--1{animation-delay:.85s,1.8s}
.js .hero__float--2{animation-delay:.7s,1.6s}
.js .hero__float--3{animation-delay:1s,2s}
.js .badge{animation:floatIn .8s var(--ease) 1.15s both}

@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes chIn{from{transform:translateY(108%)}to{transform:none}}
@keyframes trackIn{from{opacity:0;letter-spacing:.9em}to{opacity:1}}
@keyframes floatIn{from{opacity:0;transform:scale(.82) translateY(18px)}to{opacity:1;transform:none}}

.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}

.w{display:inline-block;overflow:hidden;vertical-align:top;
   padding:.02em .06em .1em;margin:-.02em -.06em -.1em}
.w>span{display:inline-block;transform:translateY(115%);transition:transform .65s var(--ease);transition-delay:var(--d,0ms)}
[data-words].in .w>span{transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1023px){
  .grid{grid-template-columns:repeat(2,1fr);gap:2.8rem 1.6rem}
}
@media (max-width:899px){
  .nav__links{display:none}
  .nav__cta{margin-left:auto}
  .hero{min-height:92dvh;padding-top:6.5rem}
  .hero__float--1{left:2%;top:2%}
  .hero__float--2{right:-2%;top:38%}
  .hero__float--3{left:4%;bottom:4%}
  .badge{right:4%;bottom:0}
  .steps__pin{position:static;min-height:0}
  .steps__inner{grid-template-columns:1fr}
  .steps__media{display:none}
  .js .step{opacity:1}
  .step__num{color:var(--pink)}
  .steps__bar{display:none}
}
@media (max-width:639px){
  .hero__float--1{display:none}
  .hero__float--3{display:none}
  .hero__float--2{width:21vw;right:-3%;top:4%}
  .badge{display:none}
  .hero__lead{padding-inline:.5rem}
}
@media (max-width:519px){
  .grid{grid-template-columns:1fr;max-width:24rem;gap:2.6rem}
  .nav{gap:.8rem}
  .btn--big{width:100%}
  .hero__cta{flex-direction:column;align-items:stretch;padding-inline:.4rem}
  .marquee__group span{font-size:.78rem}
  .cta .sticker--ctaseal{top:-2rem;width:72px}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .step{opacity:1;transform:none}
  .js .hero__float{opacity:1}
  .w>span{transform:none}
  .js .statement__kiss{opacity:1;transform:none}
  .marquee__track{animation:none!important}
  .steps__media img{opacity:0}
  .steps__media img.is-active{opacity:1}
}