/* AI Budapest Hand-drawn Annotations · Components */
/*
  Inline annotációk + margó-jegyzetek + diagram konténerek.
  Portolva a hyperframes/references/css-patterns.md alapján, kiegészítve.
  Minden annotáció animálható: alapból "rejtett", a [data-anim] attribútum
  + .anim-in class kombináció triggereli a megjelenést.
*/

/* ============================================================
   COMMON UTILS
   ============================================================ */

.hd-wrap {
  position: relative;
  display: inline-block;
}

/* Anim alap-state — mielőtt scrollra "anim-in" osztályt kap */
[data-anim] { will-change: transform, opacity; }

/* ============================================================
   1. CIRCLE (kézzel rajzolt kör egy szó köré)
   Két variáns: CSS-only (gyors) + Rough.js SVG (élethűbb)
   ============================================================ */

.hd-circle {
  position: relative;
  display: inline-block;
  padding: 0 0.15em;
  z-index: 0;
}

.hd-circle::before {
  content: "";
  position: absolute;
  top: -8%;
  left: -10%;
  width: 120%;
  height: 116%;
  border: 2.5px solid var(--ink, #1a1a1a);
  border-radius: 50%;
  transform: rotate(-3deg) scale(0);
  transform-origin: center;
  pointer-events: none;
  z-index: -1;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hd-circle.anim-in::before {
  transform: rotate(-3deg) scale(1);
}

/* Variánsok */
.hd-circle.tight::before  { width: 110%; left: -5%;  top: -4%; height: 108%; }
.hd-circle.loose::before  { width: 132%; left: -16%; top: -14%; height: 128%; }
.hd-circle.ellipse::before{ border-radius: 50% / 60%; width: 130%; left: -15%; }
.hd-circle.rotated::before{ transform: rotate(2deg) scale(0); }
.hd-circle.rotated.anim-in::before { transform: rotate(2deg) scale(1); }
.hd-circle.purple::before { border-color: var(--ink-purple); }
.hd-circle.orange::before { border-color: var(--ink-orange); }

/* Rough.js mount point — JS rajzolja bele a hand-drawn ellipszist */
.hd-circle-rough {
  position: relative;
  display: inline-block;
  padding: 0 0.2em;
}
.hd-circle-rough > svg {
  position: absolute;
  inset: -10% -10%;
  width: 120%;
  height: 120%;
  pointer-events: none;
  overflow: visible;
}

/* ============================================================
   2. UNDERLINE (hullámos / dupla / sketchy)
   ============================================================ */

.hd-underline {
  position: relative;
  display: inline-block;
}
.hd-underline > svg.hd-underline-svg {
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -8px;
  width: calc(100% + 4px);
  height: 14px;
  pointer-events: none;
  overflow: visible;
}
.hd-underline > svg.hd-underline-svg path {
  fill: none;
  stroke: var(--ink, #1a1a1a);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Inline-block CSS-only variáns (ha JS nélkül kell) */
.hd-underline-static {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 7 Q 25 2 50 7 T 100 7 T 150 7 T 198 7' fill='none' stroke='%231a1a1a' stroke-width='2.2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 8px;
  padding-bottom: 6px;
}

/* Kettős húzás (Attio "underline twice" stílus) */
.hd-underline-double > svg.hd-underline-svg {
  height: 18px;
  bottom: -10px;
}

/* ============================================================
   3. STRIKEOUT (cross-hatch)
   ============================================================ */

.hd-strikeout {
  position: relative;
  display: inline-block;
}
.hd-strikeout > .hd-strike-line {
  position: absolute;
  display: block;
  top: 50%;
  left: -4px;
  right: -4px;
  height: 2px;
  background: var(--ink, #1a1a1a);
  transform-origin: left center;
  transform: scaleX(0) rotate(-3deg);
  transition: transform 0.4s ease-out;
}
.hd-strikeout > .hd-strike-line.bwd {
  transform: scaleX(0) rotate(3deg);
  transition-delay: 0.15s;
}
.hd-strikeout.anim-in > .hd-strike-line { transform: scaleX(1) rotate(-3deg); }
.hd-strikeout.anim-in > .hd-strike-line.bwd { transform: scaleX(1) rotate(3deg); }

/* ============================================================
   4. HIGHLIGHT (marker sweep háttér)
   Több élénk variáns. Az alapérték telítettebb mint az Atlas
   (0.55 opacity), hogy ténylegesen "megfogja" a szöveget.
   ============================================================ */

.hd-highlight {
  position: relative;
  display: inline-block;
  z-index: 0;
  /* Saját stacking context, hogy a ::before z-index:-1 ne kerüljön
     a body bg alá (különösen sötét háttérnél, ahol a marker eltűnne). */
  isolation: isolate;
}
.hd-highlight::before {
  content: "";
  position: absolute;
  inset: 8% -4px 0 -4px;
  background: var(--hd-highlight-color, #FFE94D); /* élénk sárga, marker stílus */
  opacity: var(--hd-highlight-opacity, 0.55);
  transform: scaleX(0) skewX(-3deg);
  transform-origin: left center;
  border-radius: 2px;
  z-index: -1;
  transition: transform 0.55s cubic-bezier(0.5, 0, 0.3, 1);
  /* enyhe blur a marker-szerű szélért */
  filter: blur(0.3px);
}
.hd-highlight.anim-in::before { transform: scaleX(1) skewX(-3deg); }

/* Színváltozatok — minden marker-friendly opacity */
.hd-highlight.yellow      { --hd-highlight-color: #FFE94D; --hd-highlight-opacity: 0.55; }
.hd-highlight.yellow-soft { --hd-highlight-color: #FDD835; --hd-highlight-opacity: 0.35; } /* Atlas-stílus, halványabb */
.hd-highlight.green       { --hd-highlight-color: #B7F397; --hd-highlight-opacity: 0.65; } /* élénk lime-zöld */
.hd-highlight.green-deep  { --hd-highlight-color: #5BD46C; --hd-highlight-opacity: 0.45; }
.hd-highlight.pink        { --hd-highlight-color: #FF8FB1; --hd-highlight-opacity: 0.50; }
.hd-highlight.pink-vivid  { --hd-highlight-color: #FF4D8B; --hd-highlight-opacity: 0.40; }
.hd-highlight.purple      { --hd-highlight-color: #B591FF; --hd-highlight-opacity: 0.50; } /* élénkebb mint a brand lila */
.hd-highlight.purple-soft { --hd-highlight-color: #C9B0FF; --hd-highlight-opacity: 0.45; }
.hd-highlight.orange      { --hd-highlight-color: #FFB347; --hd-highlight-opacity: 0.55; }
.hd-highlight.orange-vivid{ --hd-highlight-color: #FA7E00; --hd-highlight-opacity: 0.40; }
.hd-highlight.blue        { --hd-highlight-color: #93D1FF; --hd-highlight-opacity: 0.55; }
.hd-highlight.cyan        { --hd-highlight-color: #74EFF7; --hd-highlight-opacity: 0.55; }
.hd-highlight.peach       { --hd-highlight-color: #FFC9A8; --hd-highlight-opacity: 0.65; }

/* ============================================================
   5. BRACKETS (margó-zárójel paragrafus mellett)
   Két variáns: ::before (CSS-only) + külső div Rough.js-szel
   ============================================================ */

.hd-bracket-right {
  position: relative;
  padding-right: 1.2rem;
}
.hd-bracket-right > svg.hd-bracket-svg {
  position: absolute;
  top: 0;
  right: -1rem;
  width: 24px;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.hd-bracket-right > svg path {
  fill: none;
  stroke: var(--ink, #1a1a1a);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hd-bracket-left {
  position: relative;
  padding-left: 1.2rem;
}
.hd-bracket-left > svg.hd-bracket-svg {
  position: absolute;
  top: 0;
  left: -1rem;
  width: 24px;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.hd-bracket-left > svg path {
  fill: none;
  stroke: var(--ink, #1a1a1a);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   6. MARGIN NOTES (kézírásos jegyzet a paragrafus mellett)
   ============================================================ */

.margin-note {
  font-family: 'Caveat', 'Kalam', cursive;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--ink-blue, #2563eb);
  position: absolute;
  max-width: 200px;
  z-index: 5;
}
.margin-note.right {
  right: -240px;
  top: 0;
  transform: rotate(1.5deg);
}
.margin-note.left {
  left: -240px;
  top: 0;
  transform: rotate(-1.5deg);
  text-align: right;
}

/* Kombinált variáns: bracket + jegyzet együtt — a jegyzet kicsit
   beljebb csúszik, hogy a bracket-nek hely maradjon, és vertikálisan
   középre zárva lóg a bracket mellett. */
.margin-note.right.with-bracket {
  right: -250px;
  top: 50%;
  transform: rotate(1.5deg) translateY(-50%);
}
.margin-note.left.with-bracket {
  left: -250px;
  top: 50%;
  transform: rotate(-1.5deg) translateY(-50%);
}
.margin-note.right.with-bracket[data-anim="fade-slide"] {
  transform: rotate(1.5deg) translateY(calc(-50% + 15px));
}
.margin-note.right.with-bracket[data-anim="fade-slide"].anim-in {
  transform: rotate(1.5deg) translateY(-50%);
}
.margin-note.left.with-bracket[data-anim="fade-slide"] {
  transform: rotate(-1.5deg) translateY(calc(-50% + 15px));
}
.margin-note.left.with-bracket[data-anim="fade-slide"].anim-in {
  transform: rotate(-1.5deg) translateY(-50%);
}
.margin-note.below {
  position: relative;
  display: inline-block;
  margin-top: 1rem;
  transform: rotate(-1deg);
}
.margin-note.ink-black { color: var(--ink); }
.margin-note.ink-purple { color: var(--ink-purple); }

/* Kicsi rotáció-variánsok az organikus érzetért */
.margin-note.tilt-up   { transform: rotate(-2.5deg); }
.margin-note.tilt-down { transform: rotate(2.5deg); }

/* Animáció: bekúszás scrollra */
.margin-note[data-anim="fade-slide"] {
  opacity: 0;
  transform: rotate(1.5deg) translateY(15px);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.margin-note.left[data-anim="fade-slide"] {
  transform: rotate(-1.5deg) translateY(15px);
}
.margin-note.anim-in {
  opacity: 1;
}
.margin-note[data-anim="fade-slide"].anim-in {
  transform: rotate(1.5deg) translateY(0);
}
.margin-note.left[data-anim="fade-slide"].anim-in {
  transform: rotate(-1.5deg) translateY(0);
}

/* Margó-jegyzet container — paragrafus köré (relative parent) */
.margin-note-container {
  position: relative;
}

/* ============================================================
   7. DIAGRAM CONTAINERS
   Rough.js mount points
   ============================================================ */

.hd-cycle, .hd-curve, .hd-flow, .hd-quadrant {
  position: relative;
  width: 100%;
  margin: 2rem auto;
}
.hd-cycle > svg, .hd-curve > svg, .hd-flow > svg, .hd-quadrant > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hd-cycle    { aspect-ratio: 16 / 10; max-width: 680px; }
.hd-curve    { aspect-ratio: 16 / 9;  max-width: 720px; }
.hd-flow     { aspect-ratio: 16 / 5;  max-width: 900px; }
.hd-quadrant { aspect-ratio: 1 / 1;   max-width: 560px; }

/* Phase 2: új diagram konténerek */
.hd-matrix   { aspect-ratio: 1 / 1;   max-width: 580px; }
.hd-journey  { aspect-ratio: 16 / 5;  max-width: 920px; }
.hd-pyramid  { aspect-ratio: 5 / 4;   max-width: 580px; }
.hd-layered  { aspect-ratio: 5 / 3;   max-width: 700px; }
.hd-venn     { aspect-ratio: 5 / 4;   max-width: 580px; }

.hd-matrix > svg, .hd-journey > svg, .hd-pyramid > svg,
.hd-layered > svg, .hd-venn > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hd-matrix text, .hd-journey text, .hd-pyramid text,
.hd-layered text, .hd-venn text {
  font-family: 'Caveat', cursive;
  fill: var(--ink, #1a1a1a);
}

/* Diagram szöveg-feliratok (kézírás) */
.hd-cycle text, .hd-curve text, .hd-flow text, .hd-quadrant text {
  font-family: 'Caveat', cursive;
  font-weight: 500;
  fill: var(--ink, #1a1a1a);
  font-size: 24px;
}
.hd-curve .axis-label,
.hd-quadrant .axis-label {
  font-family: 'Caveat', cursive;
  font-size: 20px;
  fill: var(--ink-soft, #2a2a2a);
}
.hd-cycle .node-label {
  font-size: 22px;
}

/* Draw-on animáció a diagramok stroke-jaira */
.hd-cycle path, .hd-curve path, .hd-flow path, .hd-quadrant path,
.hd-cycle ellipse, .hd-cycle circle, .hd-quadrant line {
  /* Az inicializációt JS végzi (getTotalLength) */
}

[data-anim="draw-on"] {
  /* JS állítja be a stroke-dasharray + stroke-dashoffset értékeket */
}

/* ============================================================
   8. ARROW (görbés vagy egyenes nyíl 2 elem közt)
   ============================================================ */

.hd-arrow-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.hd-arrow-svg path {
  fill: none;
  stroke: var(--ink, #1a1a1a);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   9. TYPOGRAPHY HELPERS — szöveg-keret a paper-en
   ============================================================ */

.article {
  max-width: 720px;
  margin: 0 auto;
  padding: 4rem 2rem;
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink, #1a1a1a);
}
.article h1, .article h2, .article h3 {
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 2.5rem;
  margin-bottom: 0.8rem;
}
.article h1 { font-size: 2.2rem; line-height: 1.15; }
.article h2 { font-size: 1.5rem; line-height: 1.25; }
.article p  { margin-bottom: 1.2rem; }

.article-wide {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px minmax(0, 720px) 220px;
  gap: 24px;
}
.article-wide .article-body { grid-column: 2; }
.article-wide .margin-col-left  { grid-column: 1; }
.article-wide .margin-col-right { grid-column: 3; }

/* Reszponzív: szűk viewporton a margó-col összecsukódik */
@media (max-width: 900px) {
  .article-wide {
    /* minmax(0,1fr), nem 1fr: engedi a sávot min-content alá zsugorodni,
       különben egy .hd-scroll min-width-es gyereke kitolná a rácsot a
       viewport fölé (vízszintes lap-görgetés). */
    grid-template-columns: minmax(0, 1fr);
  }
  .article-wide .margin-col-left,
  .article-wide .margin-col-right { display: none; }
  /* A törzs desktopon a 2. sávban ül (grid-column:2); mobilon az egyetlen
     sávba kell tenni és min-width:0-t adni, különben a grid-item a
     min-content-jére (pl. egy 560px-es .hd-scroll gyerek) hízik és túlnyúlik. */
  .article-wide .article-body {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .margin-note.right, .margin-note.left {
    position: relative;
    right: auto; left: auto;
    display: block;
    margin: 0.5rem 0 1.5rem;
    max-width: 100%;
  }
}

/* ============================================================
   10. GLOBAL FADE-IN base
   ============================================================ */

[data-anim="fade-in"] {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
[data-anim="fade-in"].anim-in { opacity: 1; }

[data-anim="slide-up"] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
[data-anim="slide-up"].anim-in { opacity: 1; transform: translateY(0); }

/* draw-on alap (path-ekre) */
[data-anim="draw-on"] {
  /* stroke-dasharray + stroke-dashoffset JS-ből beállítva */
}

/* ============================================================
   11. RESPONSIVE — tablet (≤900px) and mobile (≤480px)
   A skill alapból desktop-first lett tervezve. Ezek a szabályok
   biztosítják, hogy a hand-drawn komponensek mobilon is használhatók
   legyenek: arányosított diagram-aspectek, kisebb fontok, inline
   margó-jegyzetek, redukált padding.
   ============================================================ */

/* Tablet — 481-900px */
@media (max-width: 900px) {
  /* Margó-jegyzet mindenhol inline blokkba kerül */
  .margin-note,
  .margin-note.right,
  .margin-note.left,
  .margin-note.right.with-bracket,
  .margin-note.left.with-bracket {
    position: relative;
    right: auto; left: auto; top: auto;
    display: block;
    margin: 0.6rem 0 1.4rem;
    max-width: 100%;
    font-size: 1.2rem;
    transform: rotate(-1deg);
  }
  .margin-note.right.with-bracket[data-anim="fade-slide"],
  .margin-note.left.with-bracket[data-anim="fade-slide"] {
    transform: rotate(-1deg) translateY(15px);
  }
  .margin-note.right.with-bracket[data-anim="fade-slide"].anim-in,
  .margin-note.left.with-bracket[data-anim="fade-slide"].anim-in {
    transform: rotate(-1deg) translateY(0);
  }

  /* Diagram konténerek — kisebb max-width és arányosabb aspect.
     A max-width !important felülírja a sablonokban gyakori inline max-width-et. */
  .hd-cycle    { aspect-ratio: 4 / 3;  max-width: 100% !important; }
  .hd-curve    { aspect-ratio: 4 / 3;  max-width: 100% !important; }
  .hd-flow     { aspect-ratio: 4 / 3;  max-width: 100% !important; }
  .hd-quadrant { aspect-ratio: 1 / 1;  max-width: 100% !important; }
  .hd-matrix   { aspect-ratio: 1 / 1;  max-width: 100% !important; }
  .hd-journey  { aspect-ratio: 16 / 7; max-width: 100% !important; }
  .hd-pyramid  { aspect-ratio: 4 / 3;  max-width: 100% !important; }
  .hd-layered  { aspect-ratio: 5 / 4;  max-width: 100% !important; }
  .hd-venn     { aspect-ratio: 4 / 3;  max-width: 100% !important; }

  /* Diagram-szövegek kisebb fontnál */
  .hd-cycle text, .hd-curve text, .hd-flow text, .hd-quadrant text {
    font-size: 18px;
  }
  .hd-cycle .node-label { font-size: 16px; }
  .hd-curve .axis-label,
  .hd-quadrant .axis-label { font-size: 16px; }

  /* Article wide — már csak egy oszlop */
  .article {
    padding: 3rem 1.5rem;
    font-size: 17px;
  }
  .article h1 { font-size: 1.9rem; }
  .article h2 { font-size: 1.35rem; }
}

/* Mobile — ≤480px */
@media (max-width: 480px) {
  .margin-note,
  .margin-note.right,
  .margin-note.left,
  .margin-note.right.with-bracket,
  .margin-note.left.with-bracket {
    font-size: 1.05rem;
    line-height: 1.3;
    margin: 0.5rem 0 1.2rem;
  }

  /* Diagrammok mobil: négyzetesebb aspect, hogy a szövegnek legyen helye.
     !important szükséges, mert a generált HTML-ek gyakran inline style-lal
     felülírják az aspect-ratio-t (pl. style="aspect-ratio: 16/4"). */
  .hd-cycle    { aspect-ratio: 1 / 1 !important; max-width: 100% !important; }
  .hd-curve    { aspect-ratio: 1 / 1 !important; max-width: 100% !important; }
  .hd-flow     { aspect-ratio: 1 / 1 !important; max-width: 100% !important; }
  .hd-journey  { aspect-ratio: 3 / 4 !important; max-width: 100% !important; }   /* vertikális — több hely a step-feliratoknak */
  .hd-pyramid  { aspect-ratio: 1 / 1 !important; max-width: 100% !important; }
  .hd-layered  { aspect-ratio: 4 / 5 !important; max-width: 100% !important; }
  .hd-venn     { aspect-ratio: 1 / 1 !important; max-width: 100% !important; }
  .hd-matrix   { aspect-ratio: 1 / 1 !important; max-width: 100% !important; }

  /* Diagram-szövegek mobilon még kisebb */
  .hd-cycle text, .hd-curve text, .hd-flow text, .hd-quadrant text,
  .hd-matrix text, .hd-journey text, .hd-pyramid text,
  .hd-layered text, .hd-venn text {
    font-size: 14px;
  }
  .hd-cycle .node-label { font-size: 13px; }
  .hd-curve .axis-label,
  .hd-quadrant .axis-label { font-size: 13px; }

  /* Article szuper-kompakt */
  .article {
    padding: 2rem 1.1rem;
    font-size: 16px;
    line-height: 1.65;
  }
  .article h1 { font-size: 1.7rem; }
  .article h2 { font-size: 1.25rem; }

  /* Bracket — kisebb padding, hogy ne lógjon ki */
  .hd-bracket-right { padding-right: 0.8rem; }
  .hd-bracket-left  { padding-left: 0.8rem; }
  .hd-bracket-right > svg.hd-bracket-svg { right: -0.6rem; width: 16px; }
  .hd-bracket-left  > svg.hd-bracket-svg { left: -0.6rem;  width: 16px; }
}