/* ============================================================
   cinematic.css — Premium reveal, parallax, motion-blur & life
   Loaded LAST so it can layer on top of styles.css safely.
   All rules are additive; nothing here removes existing styles.
   ============================================================ */

/* ---------- Smooth scroll (richer than the browser default) ----------
   NOTE: smooth-scroll.js owns scroll motion (macOS-style momentum +
   eased anchor jumps). CSS scroll-behavior is intentionally NOT set
   here — when both are on, the per-frame window.scrollTo() calls from
   the JS engine each trigger their own native smooth animation, and
   the two compete, producing a visible up/down bounce on every nav
   click. Keep scroll-padding-top for anchor offset fallback only. */
html {
  scroll-padding-top: 90px;
}
@media (max-width: 768px) {
  html { scroll-padding-top: 70px; }
}

/* Custom scrollbar — feels alive */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255,140,32,0.45), rgba(255,140,32,0.15));
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(255,170,80,0.7), rgba(255,140,32,0.35));
  background-clip: padding-box;
}

/* ---------- Scroll progress bar (top of page) ---------- */
.cine-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2.5px;
  width: 0%;
  background: linear-gradient(90deg, #ff8c20, #ffaa50 50%, #ff6a00);
  box-shadow: 0 0 12px rgba(255,140,32,0.65), 0 0 24px rgba(255,140,32,0.35);
  z-index: 99999;
  pointer-events: none;
  transition: width 0.08s linear, opacity 0.3s ease;
  will-change: width;
}

/* ---------- Cursor-following ambient glow ---------- */
.cine-cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,140,32,0.10), rgba(255,140,32,0.04) 40%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%) translate3d(var(--mx, -1000px), var(--my, -1000px), 0);
  transition: opacity 0.4s ease, width 0.3s ease, height 0.3s ease;
  mix-blend-mode: screen;
  opacity: 0;
  will-change: transform;
}
body[data-theme="dark"] .cine-cursor-glow { opacity: 0.9; }
body[data-theme="light"] .cine-cursor-glow {
  background: radial-gradient(circle, rgba(255,140,32,0.07), rgba(255,140,32,0.02) 40%, transparent 70%);
  opacity: 0.7;
}
@media (hover: none) { .cine-cursor-glow { display: none !important; } }

/* ---------- Scroll-reveal base (existing API kept) ---------- */
[data-scroll-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  filter: blur(6px);
  will-change: transform, opacity, filter;
}
[data-scroll-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  /* Animation has completed — release the GPU layer so it doesn't sit on
     the compositor during every subsequent scroll. */
  will-change: auto;
}

/* Auto-tagged variants the JS engine adds at runtime */
.cine-reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.985);
  filter: blur(8px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity, filter;
}
.cine-reveal.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  will-change: auto;
}

.cine-reveal-left  { transform: translateX(-40px) translateY(0); }
.cine-reveal-right { transform: translateX(40px)  translateY(0); }
.cine-reveal-left.is-in,
.cine-reveal-right.is-in { transform: translateX(0) translateY(0); }

/* Staggered children — applied by JS as inline --delay */
.cine-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(6px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s),
    filter 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
  will-change: transform, opacity, filter;
}
.cine-stagger.is-in > * {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  will-change: auto;
}

/* ---------- Text reveal — letter-by-letter shimmer ---------- */
.cine-text-reveal {
  display: inline-block;
  position: relative;
}
.cine-text-reveal .cine-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em) rotateX(-65deg);
  transform-origin: 50% 100%;
  filter: blur(8px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--char-delay, 0s),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--char-delay, 0s),
    filter 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--char-delay, 0s);
  white-space: pre;
  will-change: transform, opacity, filter;
}
.cine-text-reveal.is-in .cine-char {
  opacity: 1;
  transform: translateY(0) rotateX(0);
  filter: blur(0);
  will-change: auto;
}

/* Hero headline — shimmer sweep after reveal */
.hero-line.is-in::after,
.hero-heading .cine-text-reveal.is-in::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,170,80,0.35) 50%, transparent 70%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
  animation: cineShimmer 2.4s ease-out 0.3s 1 forwards;
}
@keyframes cineShimmer {
  0%   { background-position: 200% 0;  opacity: 0; }
  20%  { opacity: 1; }
  100% { background-position: -80% 0;  opacity: 0; }
}

/* ---------- Motion blur on scroll (DISABLED) ----------
   This rule used to apply a per-frame filter:blur to the hero orb, hero
   particles, every parallax node, and every project/article/node-graph
   image while the body had .cine-scrolling. Under the new momentum
   engine (smooth-scroll.js), the scroll event fires ~60 times/sec for
   the full duration of every inertia decay — so the blur stayed
   continuously applied to dozens of large GPU-composited elements,
   each restarting its 180ms filter transition every frame. Net effect:
   ~24 FPS on the main page.
   The visual is a nice-to-have; the FPS is mandatory. Effect removed.
   The matching JS (initScrollBlur in cinematic.js) is also gated off
   when the momentum engine is present, so the variable below stays at
   its default 0px and nothing animates. */

/* Section transitions — subtle blur fade at edges */
section {
  transition: filter 0.5s ease-out;
}

/* ---------- Parallax tag (JS adds transform via translate3d) ---------- */
[data-cine-parallax] {
  will-change: transform;
  transition: transform 0.05s linear;
}

/* ---------- Magnetic buttons & links ---------- */
.cine-magnet {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.cine-magnet:hover {
  box-shadow: 0 12px 36px -10px rgba(255,140,32,0.45);
}

/* ---------- Satisfying ripple click effect ----------
   NOTE: position:relative is intentionally NOT declared here. The ripple
   span inside needs a non-static positioning context, but that context is
   established by `cinematic.js` (initClicks) which writes `position:
   relative` inline ONLY when the element's computed position is `static`.
   If we declared position:relative as part of this class, it would
   override the absolute/fixed/sticky positioning of any element that
   already manages its own placement — e.g. `.ccarousel-nav` (the country-
   section arrow buttons) which are `position: absolute; top: 50%;
   transform: translateY(-50%)` to sit centered over the rail. The class
   would have promoted them back into flex flow and made them jump to a
   higher position on every click, permanently. */
.cine-ripple-host {
  overflow: hidden;
  isolation: isolate;
}
.cine-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,180,90,0.55), rgba(255,140,32,0.25) 40%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  animation: cineRipple 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  z-index: 0;
  mix-blend-mode: screen;
}
@keyframes cineRipple {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0.95; }
  100% { transform: translate(-50%, -50%) scale(3.6); opacity: 0; }
}

/* Click pulse — quick squish-bounce on any interactive element */
.cine-clicked {
  animation: cineClickBounce 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cineClickBounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.94); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Whole-page flash when triggering a major nav jump */
.cine-flash::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%),
    rgba(255,140,32,0.18), transparent 40%);
  pointer-events: none;
  z-index: 9998;
  animation: cineFlash 0.55s ease-out forwards;
}
@keyframes cineFlash {
  0%   { opacity: 0; transform: scale(0.6); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4); }
}

/* ---------- Tilt cards (3D on hover) ---------- */
.cine-tilt {
  transform-style: preserve-3d;
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
  will-change: transform;
}
.cine-tilt-inner {
  transform: translateZ(0);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.cine-tilt:hover {
  box-shadow:
    0 22px 60px -22px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,140,32,0.12);
}

/* Card sheen on hover */
.cine-sheen {
  position: relative;
  overflow: hidden;
}
.cine-sheen::before {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,0.06) 45%,
    rgba(255,170,80,0.18) 50%,
    rgba(255,255,255,0.06) 55%,
    transparent 100%);
  transform: skewX(-18deg);
  transition: left 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 2;
}
.cine-sheen:hover::before { left: 130%; }

/* ---------- Count-up numbers — stat lift on entry ---------- */
.hero-stat-num.cine-counting,
.stat-number.cine-counting,
.nd-stat-num.cine-counting,
.gf-stat-num.cine-counting {
  display: inline-block;
  background: linear-gradient(180deg, var(--accent-light, #ffaa50), var(--accent, #ff8c20));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: cineNumPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cineNumPop {
  0%   { transform: scale(0.6) translateY(8px); opacity: 0; filter: blur(4px); }
  100% { transform: scale(1)   translateY(0);   opacity: 1; filter: blur(0); }
}

/* ---------- Nav link underline grow on hover ---------- */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 4px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent, #ff8c20), transparent);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 2px;
  pointer-events: none;
}
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

/* Logo glow on hover */
.nav-logo:hover .logo-name,
.nav-logo:hover .logo-surname {
  text-shadow: 0 0 18px rgba(255,140,32,0.6);
  transition: text-shadow 0.4s ease;
}
.logo-name, .logo-surname { transition: text-shadow 0.4s ease; }

/* ---------- Hero badge pulse-on-hover ---------- */
.hero-badge { transition: transform 0.4s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); }
.hero-badge:hover { transform: translateY(-2px) scale(1.04); }

/* ---------- Buttons: hero & CTA — interactive feel ---------- */
.hero-btn, .btn-get-in-touch, .nav-link-cv {
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.35s ease,
    background 0.3s ease;
}
.hero-btn:hover { transform: translateY(-3px) scale(1.02); }
.hero-btn:active { transform: translateY(0) scale(0.97); }
.btn-get-in-touch:active { transform: scale(0.96); }
.nav-link-cv:hover { transform: translateY(-2px); }

/* ---------- Floating AI orb — gentle breathing ---------- */
.kg-ai-fab,
#kgAiFab,
.floating-ai,
.fai-launcher {
  animation: cineBreath 4.5s ease-in-out infinite;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}
@keyframes cineBreath {
  0%, 100% { box-shadow: 0 12px 32px -8px rgba(255,140,32,0.5), 0 0 0 0 rgba(255,140,32,0.4); }
  50%      { box-shadow: 0 18px 44px -8px rgba(255,140,32,0.65), 0 0 0 12px rgba(255,140,32,0); }
}
.kg-ai-fab:hover,
#kgAiFab:hover,
.floating-ai:hover,
.fai-launcher:hover { transform: scale(1.08) rotate(-3deg); }

/* ---------- Section anchor entry — extra polish ---------- */
section[id] {
  scroll-margin-top: 80px;
}

/* ---------- Card hover lift (generic — applied via JS to common cards) ---------- */
.cine-lift {
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s ease,
    border-color 0.45s ease;
  will-change: transform;
}
.cine-lift:hover {
  transform: translateY(-6px);
  box-shadow:
    0 28px 60px -20px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,140,32,0.18);
}

/* ---------- Smooth page-load fade (very first paint) ----------
   Note: blur removed from page-in animation; it was leaving the body
   stuck in a blurred state on slow paints / animation-restarts and
   caused popup content to render as ghost layers. Opacity fade only. */
body {
  animation: cinePageIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cinePageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Theme toggle — extra spin */
.theme-toggle { transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease; }
.theme-toggle:hover { transform: rotate(20deg) scale(1.1); }
.theme-toggle.cine-flip { transform: rotate(360deg) scale(1.15); }

/* ---------- Accessibility — respect reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .cine-cursor-glow,
  .cine-scroll-progress { display: none !important; }
  [data-scroll-reveal], .cine-reveal, .cine-stagger > *, .cine-text-reveal .cine-char {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ============================================================
   POPUP / MODAL OVERRIDES — force-reveal everything inside
   any open popup or modal so the motion-blur engine never
   leaves content stuck in its opacity:0 / filter:blur initial
   state. This is the single source of truth that fixes the
   "ghost / transparent / blurred content" bug.
   ============================================================ */

/* Popup containers themselves must never be blurred or hidden */
.expand-overlay.active,
.expand-overlay.is-open,
.country-modal.active,
.country-modal.is-open,
.country-modal.show,
#countryModal.active,
#countryModal.is-open,
#countryModal.show,
#expandOverlay.active,
#expandOverlay.is-open,
#ndNodeInfo.active,
#ndNodeInfo.visible,
#ndNodeInfo:not([hidden]),
.modal.active,
.modal.is-open,
.modal.show,
.notion-modal.active,
.notion-modal.is-open,
.kg-modal.active,
.kg-modal.is-open,
.kg-deeplink-modal.active {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* Every descendant of an active popup must render fully — no
   matter what cinematic class the auto-tagger applied to it. */
.expand-overlay.active *,
.expand-overlay.is-open *,
.country-modal.active *,
.country-modal.is-open *,
.country-modal.show *,
#countryModal.active *,
#countryModal.is-open *,
#countryModal.show *,
#expandOverlay.active *,
#expandOverlay.is-open *,
#ndNodeInfo.active *,
#ndNodeInfo.visible *,
.modal.active *,
.modal.is-open *,
.modal.show *,
.notion-modal.active *,
.notion-modal.is-open *,
.kg-modal.active *,
.kg-modal.is-open * {
  opacity: 1 !important;
  filter: none !important;
}

/* Reset the transform-driven reveal states inside popups too
   (more specific selector targets the reveal classes only so
   we don't clobber hover/tilt transforms on other elements). */
.expand-overlay.active .cine-reveal,
.expand-overlay.active .cine-stagger > *,
.expand-overlay.active [data-scroll-reveal],
.expand-overlay.is-open .cine-reveal,
.expand-overlay.is-open .cine-stagger > *,
.expand-overlay.is-open [data-scroll-reveal],
.country-modal.active .cine-reveal,
.country-modal.active .cine-stagger > *,
.country-modal.active [data-scroll-reveal],
.country-modal.is-open .cine-reveal,
.country-modal.is-open .cine-stagger > *,
.country-modal.is-open [data-scroll-reveal],
.country-modal.show .cine-reveal,
.country-modal.show .cine-stagger > *,
.country-modal.show [data-scroll-reveal],
#countryModal.active .cine-reveal,
#countryModal.active .cine-stagger > *,
#countryModal.active [data-scroll-reveal],
#countryModal.is-open .cine-reveal,
#countryModal.is-open .cine-stagger > *,
#countryModal.is-open [data-scroll-reveal],
#expandOverlay.active .cine-reveal,
#expandOverlay.active .cine-stagger > *,
#expandOverlay.active [data-scroll-reveal],
#expandOverlay.is-open .cine-reveal,
#expandOverlay.is-open .cine-stagger > *,
#expandOverlay.is-open [data-scroll-reveal],
#ndNodeInfo.active .cine-reveal,
#ndNodeInfo.active .cine-stagger > *,
#ndNodeInfo.active [data-scroll-reveal],
#ndNodeInfo.visible .cine-reveal,
#ndNodeInfo.visible .cine-stagger > *,
#ndNodeInfo.visible [data-scroll-reveal],
.modal.active .cine-reveal,
.modal.active .cine-stagger > *,
.modal.active [data-scroll-reveal],
.modal.is-open .cine-reveal,
.modal.is-open .cine-stagger > *,
.modal.is-open [data-scroll-reveal],
.modal.show .cine-reveal,
.modal.show .cine-stagger > *,
.modal.show [data-scroll-reveal],
.notion-modal.active .cine-reveal,
.notion-modal.active .cine-stagger > *,
.notion-modal.active [data-scroll-reveal],
.notion-modal.is-open .cine-reveal,
.notion-modal.is-open .cine-stagger > *,
.notion-modal.is-open [data-scroll-reveal],
.kg-modal.active .cine-reveal,
.kg-modal.active .cine-stagger > *,
.kg-modal.active [data-scroll-reveal],
.kg-modal.is-open .cine-reveal,
.kg-modal.is-open .cine-stagger > *,
.kg-modal.is-open [data-scroll-reveal] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Letter-by-letter text reveal inside popups must also be solid */
.expand-overlay.active .cine-text-reveal .cine-char,
.expand-overlay.is-open .cine-text-reveal .cine-char,
.country-modal.active .cine-text-reveal .cine-char,
.country-modal.is-open .cine-text-reveal .cine-char,
.country-modal.show .cine-text-reveal .cine-char,
#countryModal.active .cine-text-reveal .cine-char,
#countryModal.is-open .cine-text-reveal .cine-char,
#expandOverlay.active .cine-text-reveal .cine-char,
#expandOverlay.is-open .cine-text-reveal .cine-char,
#ndNodeInfo.active .cine-text-reveal .cine-char,
#ndNodeInfo.visible .cine-text-reveal .cine-char,
.modal.active .cine-text-reveal .cine-char,
.modal.is-open .cine-text-reveal .cine-char,
.notion-modal.active .cine-text-reveal .cine-char,
.notion-modal.is-open .cine-text-reveal .cine-char,
.kg-modal.active .cine-text-reveal .cine-char,
.kg-modal.is-open .cine-text-reveal .cine-char {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Modal-open scroll-blur overrides removed — the scroll-blur effect
   they guarded against has itself been removed (see "Motion blur on
   scroll (DISABLED)" above). */

/* Belt & suspenders: an explicit force-reveal class the JS can
   stamp on any element to make it 100% visible regardless of
   what cinematic state it's in. */
.cine-force-reveal,
.cine-force-reveal * {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}