/* Sparkler design tokens — dark, single theme.
   Source: docs/landing-page-design/design/tokens.css (design handoff). */

:root {
  color-scheme: dark;

  /* Colour */
  --color-bg: #110D18;
  --gradient-page: linear-gradient(180deg, #110D18 0%, #1A1022 22%, #120D1A 45%, #1C1124 70%, #0E0A13 100%);
  --color-text: #F7F0E4;
  --color-text-secondary: #C9BFB1;
  --color-text-muted: #BDB2A4;
  --color-text-subtle: #A99E90;
  --color-text-label: #D8CEC0;
  --color-placeholder: #8E8494;
  --color-accent: #F2B03D;
  --color-accent-soft: #FFE3A3;
  --color-on-accent: #1A1206;
  --color-surface: rgba(28, 22, 36, 0.72);
  --color-surface-solid: #1C1624;
  --color-surface-raised: #251E2F;
  --color-surface-inset: #120E19;
  --color-surface-deep: rgba(10, 7, 14, 0.8);
  --color-surface-glass-light: rgba(247, 240, 228, 0.06);
  --color-surface-featured: rgba(43, 32, 19, 0.82);
  --color-surface-highlight: #2B2013;
  --color-avatar: #3A2E45;
  --color-border: rgba(247, 240, 228, 0.10);
  --color-border-glass: rgba(247, 240, 228, 0.14);
  --color-border-strong: rgba(247, 240, 228, 0.22);

  /* Type */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'Hanken Grotesk', 'Helvetica Neue', sans-serif;

  /* Fluid type: phone value → desktop value between 390px and 1440px viewports */
  --text-h1: clamp(54px, 39.9px + 3.62vw, 92px);
  --text-h1-hu: clamp(46px, 33.5px + 3.36vw, 84px);
  --text-subhead: clamp(28px, 23.5px + 1.14vw, 40px);
  --text-h2: clamp(44px, 36.6px + 1.9vw, 64px);
  --text-h2-closing: clamp(52px, 38.6px + 3.43vw, 88px);
  --text-step-number: clamp(44px, 39.5px + 1.14vw, 56px);
  --text-price: clamp(40px, 34.1px + 1.52vw, 56px);
  --text-quote: clamp(30px, 25.5px + 1.14vw, 42px);
  --text-card-title: clamp(20px, 19.3px + 0.19vw, 22px);
  --text-lead: clamp(18px, 16.9px + 0.29vw, 21px);
  --text-body: clamp(17px, 16.3px + 0.19vw, 19px);
  --text-body-small: clamp(15px, 14.6px + 0.1vw, 16px);
  --text-note: clamp(14px, 13.6px + 0.1vw, 15px);
  --text-eyebrow: clamp(13px, 12.3px + 0.19vw, 15px);
  --text-caption: clamp(12px, 11.3px + 0.19vw, 14px);

  --leading-display: 0.98;
  --leading-heading: 1.02;
  --leading-body: 1.6;
  --leading-lead: 1.55;
  --tracking-display: -0.02em;
  --tracking-heading: -0.015em;
  --tracking-eyebrow: 0.14em;
  --tracking-caption: 0.08em;

  /* Space */
  --gutter: clamp(20px, 5.6vw, 80px);
  --section-y: clamp(72px, 8.3vw, 120px);
  --gap-header-grid: clamp(32px, 3.9vw, 56px);
  --gap-two-col: clamp(32px, 5.6vw, 80px);
  --gap-cards: clamp(14px, 1.7vw, 24px);
  --gap-features: clamp(28px, 3.3vw, 48px);
  --card-padding: clamp(24px, 2.2vw, 32px);
  --card-padding-lg: clamp(24px, 2.8vw, 40px);

  /* Radius */
  --radius-pill: 999px;
  --radius-input: 12px;
  --radius-row: 14px;
  --radius-tile: clamp(12px, 1.1vw, 16px);
  --radius-card: clamp(20px, 1.5vw, 22px);
  --radius-pricing: clamp(22px, 1.8vw, 26px);
  --radius-panel: clamp(24px, 2.1vw, 30px);

  /* Effects */
  --shadow-panel-glow: 0 40px 120px -40px rgba(242, 176, 61, 0.35);
  --shadow-featured-glow: 0 30px 90px -30px rgba(242, 176, 61, 0.45);
  --shadow-tile-glow: 0 0 40px rgba(242, 176, 61, 0.35);
  --shadow-spark-dot: 0 0 12px 4px rgba(242, 176, 61, 0.6);
  --shadow-auth-panel: 0 40px 120px -40px rgba(0, 0, 0, 0.6);
  --filter-icon-glow: drop-shadow(0 0 24px rgba(242, 176, 61, 0.7));
  --blur-glass: 12px;
  --blur-glass-strong: 16px;

  /* Controls */
  --target-min: 44px;
  --button-height-lg: 54px;
  --button-height: 50px;
  --input-height: 50px;

  /* Motion */
  --dur-twinkle: 3.4s;
  --dur-drift-a: 52s;
  --dur-drift-b: 64s;
  --ease-reveal: cubic-bezier(.16, .8, .24, 1);
}

html { background: var(--color-bg); }
body {
  margin: 0;
  background: var(--gradient-page);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-text); text-decoration: none; }
a:hover { color: var(--color-accent-soft); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
input::placeholder { color: var(--color-placeholder); }

@keyframes sparkler-twinkle { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
@keyframes sparkler-drift-a { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(160px, -120px) scale(1.18); } 100% { transform: translate(-120px, 80px) scale(.92); } }
@keyframes sparkler-drift-b { 0% { transform: translate(0, 0) scale(1.05); } 50% { transform: translate(-180px, 100px) scale(.9); } 100% { transform: translate(100px, -140px) scale(1.12); } }
@keyframes sparkler-rise { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 80% { opacity: .9; } 100% { transform: translate(40px, -320px); opacity: 0; } }
@keyframes sparkler-header-arrive { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.site-header { animation: sparkler-header-arrive .6s var(--ease-reveal) both; }

@media (prefers-reduced-motion: reduce) {
  .bg-layer .blob, .bg-layer .spark, .tile-dot { animation: none !important; }
  .site-header { animation: none; }
}

/* ---------- Smooth cross-page navigation (HU ⇄ EN) ---------- */
/* Native cross-document View Transitions: supporting browsers get a soft
   crossfade instead of the default hard swap; others just navigate as
   before, so this is purely progressive enhancement. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .45s;
  animation-timing-function: var(--ease-reveal);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}
body.motion-paused .bg-layer .blob,
body.motion-paused .bg-layer .spark,
body.motion-paused .tile-dot {
  animation-play-state: paused;
}