/* ============================================================
   KELLER KATA MESTERFODRASZ - design system
   Forras: a jovahagyott 'A hajszalvonal' koncepcio.
   Ezt a fajlt linkeli be minden oldal. Ha itt modositasz,
   az mind az osszes oldalon egyszerre valtozik.
   Elo styleguide: design-system.html
   ============================================================ */

:root {
  --color-brand-primary:   #7E51A8;
  --color-brand-secondary: #4A2C5A;
  --color-brand-accent:    #B896D2;
  --color-brand-bg:        #EFE6F4;
  --color-brand-surface:   #FCFAFD;
  --color-brand-text:      #241826;
  --color-brand-muted:     #6E5A78;
  --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Jost', system-ui, -apple-system, sans-serif;
}
body { background: var(--color-brand-bg); color: var(--color-brand-text); font-family: var(--font-body); }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); }
  

/* ============================================================
   A HAJSZÁLVONAL — egyedi réteg
   1. tipográfiai skála   2. arch-formák   3. SVG-ívek
   4. puha árnyékok       5. reveal        6. reduced motion
   ============================================================ */

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* Szandekos racstores (bleed): a konteneren kivul futo elem levagasa, hogy ne
   keletkezzen vizszintes csuszka. 'clip' es nem 'hidden': a hidden gorgetes-
   konteneert csinalna a szekciobol, ami elrontja a position:sticky-t. */
.bleed-safe { overflow-x: clip; }

/* ---------- 1. tipográfia: egy domináns méret, finom hierarchia ---------- */
.t-display {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(2.85rem, 6.4vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: -0.018em;
}
.t-section {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.6vw, 3.05rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
}
.t-lead {
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.22rem, 2.2vw, 1.62rem);
  line-height: 1.5;
  letter-spacing: 0.002em;
}
.t-card {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.48rem;
  line-height: 1.2;
  letter-spacing: -0.006em;
}
.t-price {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.42rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.t-quote {
  font-family: var(--font-heading);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.9rem, 4.2vw, 2.75rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.t-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  line-height: 1.4;
}
.t-body { font-weight: 300; font-size: 1.0625rem; line-height: 1.78; }
.t-small { font-weight: 300; font-size: 0.9375rem; line-height: 1.7; }
.t-micro { font-weight: 400; font-size: 0.8125rem; line-height: 1.6; }

/* ---------- 2. az arch: félkörös lezárás, a szalontükör formája ---------- */

/* a) a portré fölött: mély, tükör-arányú ív */
.arch-portrait { border-radius: 50% 50% 10px 10px / 33% 33% 1% 1%; }

/* b) fekvő képek teteje: sekélyebb, de tisztán íves lezárás */
.arch-wide  { border-radius: 50% 50% 14px 14px / 27% 27% 2% 2%; }
.arch-wide-sm { border-radius: 50% 50% 12px 12px / 32% 32% 2% 2%; }

/* c) szolgáltatás-kártyák felső éle */
.arch-card { border-radius: 150px 150px 18px 18px; }

/* d) teljes szélességű panelek (invertált szekció, footer) teteje */
.arch-panel { border-radius: 50% 50% 0 0 / 78px 78px 0 0; }

/* e) a CTA-gombok pirula-formája */
.arch-pill { border-radius: 999px; }

@media (max-width: 640px) {
  .arch-card  { border-radius: 96px 96px 14px 14px; }
  .arch-panel { border-radius: 50% 50% 0 0 / 38px 38px 0 0; }
  .arch-wide  { border-radius: 50% 50% 12px 12px / 20% 20% 2% 2%; }
}

/* a portré íves visszhangja: a tükörkeret hajszálvonala */
.arch-echo {
  position: absolute;
  inset: -18px -18px auto -18px;
  height: calc(100% + 18px);
  border: 1px solid var(--color-brand-accent);
  border-bottom: none;
  pointer-events: none;
}
@media (max-width: 640px) { .arch-echo { inset: -11px -11px auto -11px; height: calc(100% + 11px); } }

/* ---------- 3. az SVG-ívek: egy tincs folyamatos vonalrajza ---------- */
.arc-bridge {
  display: block;
  width: 100%;
  height: clamp(86px, 11.5vw, 168px);
  overflow: visible;
}
.arc-bridge path {
  fill: none;
  stroke: var(--color-brand-accent);
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.arc-bridge path.strand-2 { opacity: 0.72; }
.arc-bridge path.strand-3 { opacity: 0.5; }

.arc-cap { display: block; width: 100%; height: clamp(44px, 6vw, 80px); overflow: visible; }
.arc-cap path {
  fill: none; stroke: var(--color-brand-accent); stroke-width: 1;
  vector-effect: non-scaling-stroke; opacity: 0.8;
}

/* apró ív-aláhúzás: szekció-címkék és nav-linkek alatt */
.arc-tick {
  display: block; width: 46px; height: 9px;
  border-bottom: 1px solid var(--color-brand-accent);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

/* ---------- 4. puha árnyékok: a lapok VILÁGOSABBAK a háttérnél ---------- */
.lift {
  background: var(--color-brand-surface);
  box-shadow:
    0 1px 2px rgba(74, 44, 90, 0.035),
    0 10px 24px -10px rgba(74, 44, 90, 0.10),
    0 40px 60px -44px rgba(74, 44, 90, 0.22);
}
.lift-hi {
  background: var(--color-brand-surface);
  box-shadow:
    0 1px 2px rgba(74, 44, 90, 0.04),
    0 18px 40px -14px rgba(74, 44, 90, 0.13),
    0 60px 90px -56px rgba(74, 44, 90, 0.28);
}
.img-soft { box-shadow: 0 22px 50px -24px rgba(36, 24, 38, 0.34); }

.hover-lift { transition: box-shadow 420ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow:
    0 2px 3px rgba(74, 44, 90, 0.045),
    0 22px 46px -14px rgba(74, 44, 90, 0.16),
    0 70px 100px -58px rgba(74, 44, 90, 0.30);
}

/* ---------- gombok ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--font-body); font-weight: 400; font-size: 0.9375rem;
  letter-spacing: 0.03em; padding: 1.05rem 2.1rem; border-radius: 999px;
  transition: background-color 340ms ease-out, color 340ms ease-out,
              border-color 340ms ease-out, box-shadow 340ms ease-out;
}
.btn-primary {
  background: var(--color-brand-primary); color: var(--color-brand-surface);
  box-shadow: 0 2px 4px rgba(74, 44, 90, 0.10), 0 16px 30px -14px rgba(126, 81, 168, 0.55);
}
.btn-primary:hover { background: var(--color-brand-secondary); box-shadow: 0 2px 4px rgba(74, 44, 90, 0.12), 0 22px 38px -16px rgba(74, 44, 90, 0.55); }
.btn-ghost {
  background: transparent; color: var(--color-brand-secondary);
  border: 1px solid rgba(126, 81, 168, 0.42);
}
.btn-ghost:hover { border-color: var(--color-brand-primary); background: rgba(252, 250, 253, 0.75); }
.btn-onviolet {
  background: var(--color-brand-surface); color: var(--color-brand-secondary);
  box-shadow: 0 2px 4px rgba(36, 24, 38, 0.14), 0 18px 34px -16px rgba(36, 24, 38, 0.42);
}
.btn-onviolet:hover { background: var(--color-brand-bg); }

/* Gomb, aminek a felirata a menupontok tipografiajat koveti: verzal, szeles
   betukoz, 500-as suly. A fejlec CTA-jahoz, hogy egy sorban ulon a menuvel.
   A text-indent a betukoz miatti optikai elcsuszast korrigalja: a betukoz az
   utolso betu utan is megjelenik, ezert a szoveg a pirulaban balra csuszna. */
.btn-label {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-indent: 0.09em;
}
@media (max-width: 1023px) {
  /* mobilon szukebb a fejlec, ezert kisebb betukoz */
  .btn-label { letter-spacing: 0.11em; text-indent: 0.055em; }
}

/* szöveg-link finom ív-aláhúzással */
.link-arc { position: relative; display: inline-flex; align-items: baseline; gap: 0.55rem; }
.link-arc::after {
  content: ""; position: absolute; left: 0; right: 1.7rem; bottom: -7px; height: 8px;
  border-bottom: 1px solid var(--color-brand-accent);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transform-origin: left center;
  transition: right 420ms cubic-bezier(0.22, 0.61, 0.36, 1), border-color 300ms ease-out;
}
.link-arc:hover::after { right: 0; border-color: var(--color-brand-primary); }
.link-arc .arw { transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.link-arc:hover .arw { transform: translateX(5px); }

/* ---------- navigáció ---------- */
.nav-shell {
  transition: padding 380ms ease-out, background-color 380ms ease-out, box-shadow 380ms ease-out;
  background: rgba(239, 230, 244, 0);
}
.nav-compact {
  background: rgba(252, 250, 253, 0.9);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 1px 0 rgba(184, 150, 210, 0.4), 0 14px 34px -22px rgba(74, 44, 90, 0.4);
}
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 50%; bottom: -9px;
  width: 0; height: 7px; transform: translateX(-50%);
  border-bottom: 1px solid var(--color-brand-primary);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transition: width 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-link:hover::after, .nav-link:focus-visible::after { width: 100%; }
/* az eppen nyitott oldal menupontja: az iv-alahuzas allandoan latszik */
.nav-link[aria-current="page"]::after { width: 100%; }
.nav-link[aria-current="page"] { color: var(--color-brand-primary); }

#mobile-panel {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 460ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 340ms ease-out;
}
#mobile-panel.open { max-height: 34rem; opacity: 1; }

/* ---------- fókusz ---------- */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-brand-secondary);
  outline-offset: 4px;
  border-radius: 4px;
}
.on-violet a:focus-visible, .on-violet button:focus-visible,
.on-plum a:focus-visible, .on-plum button:focus-visible {
  outline-color: var(--color-brand-surface);
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 90;
  background: var(--color-brand-surface); color: var(--color-brand-secondary);
  padding: 0.75rem 1.4rem; border-radius: 999px; font-size: 0.875rem;
  transition: top 240ms ease-out;
}
.skip-link:focus { top: 1rem; }

/* ---------- hajszálvonal-elválasztó a listákban ---------- */
.row-line + .row-line { border-top: 1px solid rgba(184, 150, 210, 0.45); }
.hair-top { border-top: 1px solid rgba(184, 150, 210, 0.5); }
.hair-box { border: 1px solid rgba(184, 150, 210, 0.6); }
.tint-bg  { background: rgba(239, 230, 244, 0.5); }

/* placeholder-jelölés (telefonszám, hiányzó idézetek, időtartam) */
.ph {
  border: 1px dashed rgba(184, 150, 210, 0.85);
  border-radius: 999px; padding: 0.28rem 0.8rem;
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 500; color: var(--color-brand-muted);
  display: inline-block;
}

/* ---------- 5. reveal: négy különböző típus ---------- */

/* a) rise: szöveg-blokkok emelkedve halványodnak be */
html.js .r-rise { opacity: 0; transform: translateY(26px); }
html.js .r-rise.in { opacity: 1; transform: none; transition: opacity 900ms ease-out, transform 1000ms cubic-bezier(0.22, 0.61, 0.36, 1); }

/* b) unveil: a kép felülről lefelé bomlik ki az ív alól.
      A clip-path a KÉPEN van, nem a konténeren: az IntersectionObserver
      nem tüzel olyan elemre, aminek a saját clip-path-a nullázza a területét. */
html.js .r-unveil > img { clip-path: inset(0 0 100% 0); }
html.js .r-unveil.in > img { clip-path: inset(0 0 0 0); transition: clip-path 1400ms cubic-bezier(0.25, 0.6, 0.28, 1); }

/* c) soften: az invertált szekció élesre húzódik ki a lágyból */
html.js .r-soften { opacity: 0; filter: blur(9px); transform: scale(0.985); }
html.js .r-soften.in { opacity: 1; filter: blur(0); transform: none; transition: opacity 1000ms ease-out, filter 1100ms ease-out, transform 1100ms ease-out; }

/* d) stagger: gyerekelemek lépcsőzetesen */
html.js .r-stagger > * { opacity: 0; transform: translateY(16px); }
html.js .r-stagger.in > * { opacity: 1; transform: none; transition: opacity 780ms ease-out, transform 820ms cubic-bezier(0.22, 0.61, 0.36, 1); }
html.js .r-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
html.js .r-stagger.in > *:nth-child(2) { transition-delay: 110ms; }
html.js .r-stagger.in > *:nth-child(3) { transition-delay: 220ms; }
html.js .r-stagger.in > *:nth-child(4) { transition-delay: 330ms; }
html.js .r-stagger.in > *:nth-child(5) { transition-delay: 440ms; }
html.js .r-stagger.in > *:nth-child(6) { transition-delay: 550ms; }

/* e) hero-belépés: egyszeri, lépcsőzetes */
html.js .h-in { opacity: 0; transform: translateY(20px); }
html.js body.hero-ready .h-in { opacity: 1; transform: none; transition: opacity 1000ms ease-out, transform 1050ms cubic-bezier(0.22, 0.61, 0.36, 1); }
html.js body.hero-ready .h-in:nth-of-type(1) { transition-delay: 60ms; }
html.js .h-d1 { transition-delay: 60ms !important; }
html.js .h-d2 { transition-delay: 200ms !important; }
html.js .h-d3 { transition-delay: 340ms !important; }
html.js .h-d4 { transition-delay: 480ms !important; }
html.js .h-d5 { transition-delay: 620ms !important; }

html.js .h-unveil > img { clip-path: inset(0 0 100% 0); }
html.js body.hero-ready .h-unveil > img { clip-path: inset(0 0 0 0); transition: clip-path 1600ms cubic-bezier(0.25, 0.6, 0.28, 1) 240ms; }

/* ---------- 6. minden mozgás kikapcsolva, végállapot ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  html.js .r-rise, html.js .r-stagger > *, html.js .h-in {
    opacity: 1 !important; transform: none !important;
  }
  html.js .r-unveil > img, html.js .h-unveil > img { clip-path: inset(0 0 0 0) !important; }
  html.js .r-soften { opacity: 1 !important; filter: none !important; transform: none !important; }
  .arc-bridge path, .arc-cap path { stroke-dashoffset: 0 !important; stroke-dasharray: none !important; }
  .hover-lift:hover { transform: none; }
}