/*
 * Presentation layer: glass, light, depth and motion.
 * Loaded after main.css and only overrides or decorates — layout,
 * accessibility and contract rules stay in main.css untouched.
 * Hidden reveal states are scoped to html.motion-on (set by js/motion.js)
 * AND prefers-reduced-motion: no-preference, so the page stays fully
 * readable without JavaScript and for reduced-motion users.
 */

/* ---------- Base refinements ---------- */

::selection { color: var(--surface-strong); background: var(--accent); }

h1, h2 { letter-spacing: -0.045em; }

.button { border-radius: 0.625rem; }
.language-switch button { transition: color var(--dur-quick) var(--ease-soft), background-color var(--dur-quick) var(--ease-soft); }

/* ---------- Glass header ---------- */

.site-header {
  background: var(--glass-ink);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.08);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.25);
  transition:
    background-color var(--dur-quick) var(--ease-soft),
    border-color var(--dur-quick) var(--ease-soft),
    box-shadow var(--dur-quick) var(--ease-soft);
}
.site-header.is-scrolled {
  background: var(--glass-ink-strong);
  border-color: rgb(127 212 184 / 0.2);
  box-shadow: 0 20px 48px rgb(0 0 0 / 0.35);
}
.site-nav a { transition: color var(--dur-quick) var(--ease-soft); }

/* ---------- Buttons: depth and glow ---------- */

.button {
  transition:
    transform var(--dur-quick) var(--ease-out),
    box-shadow var(--dur-quick) var(--ease-out),
    background-color var(--dur-quick) var(--ease-soft),
    border-color var(--dur-quick) var(--ease-soft),
    color var(--dur-quick) var(--ease-soft);
}
.button-primary, .button-accent {
  background: linear-gradient(180deg, #129471 0%, var(--accent) 58%, #0b6551 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 1px 2px rgb(22 33 28 / 0.2);
}
.button-primary:hover, .button-accent:hover {
  background: linear-gradient(180deg, #17a37d 0%, #0f8266 58%, #0b6551 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), var(--glow-accent);
  transform: translateY(-2px);
}
.button:active { transform: translateY(0) scale(0.99); }
.button-secondary:hover { transform: translateY(-2px); }

/* ---------- Aurora + grain on dark sections ---------- */

.section-dark { position: relative; overflow: clip; }
.section-dark > * { position: relative; z-index: 1; }
.section-dark::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -45%;
  background:
    radial-gradient(38% 30% at 24% 30%, rgb(14 122 95 / 0.4), transparent 68%),
    radial-gradient(30% 26% at 78% 18%, rgb(127 212 184 / 0.14), transparent 70%),
    radial-gradient(34% 30% at 66% 82%, rgb(14 122 95 / 0.26), transparent 72%);
  will-change: transform;
  animation: aurora-drift 32s var(--ease-soft) infinite alternate;
}
.section-dark::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
@keyframes aurora-drift {
  from { transform: translate3d(-3%, -2%, 0) rotate(0deg); }
  to { transform: translate3d(3%, 2%, 0) rotate(4deg); }
}

/* ---------- Hero ---------- */

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 {
    background: linear-gradient(180deg, #ffffff 0%, rgb(255 255 255 / 0.76) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.availability { display: inline-flex; align-items: center; gap: 0.55rem; }
.availability::before {
  content: "";
  flex: none;
  width: 0.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--highlight-on-dark);
  animation: pulse-dot 2.4s var(--ease-soft) infinite;
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgb(127 212 184 / 0.5); }
  70% { box-shadow: 0 0 0 0.55rem rgb(127 212 184 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(127 212 184 / 0); }
}

.hero-chip { background: rgb(127 212 184 / 0.08); }
@keyframes flow-down {
  from { background-position: 0 -100%; }
  to { background-position: 0 100%; }
}

/* ---------- Method timeline ---------- */

.method-timeline::before {
  background: linear-gradient(180deg, transparent, var(--highlight-on-dark), transparent);
  background-size: 100% 200%;
  opacity: 0.45;
  animation: flow-down 3.6s linear infinite;
}
.method-card {
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-color: var(--glass-border-dark);
}

/* ---------- Cards: lift, borders, media depth ---------- */

.value-list li,
.collaboration-models article,
.contact-form,
.work-card {
  transition:
    transform 320ms var(--ease-out),
    box-shadow 320ms var(--ease-out),
    border-color 320ms var(--ease-soft);
}
.work-card { box-shadow: var(--shadow-lift); }
.work-card-media img, .work-card-media video { transition: transform 700ms var(--ease-out); }
.contact-form { border: 1px solid rgb(255 255 255 / 0.6); box-shadow: var(--shadow-deep); }
.contact-form input, .contact-form select, .contact-form textarea {
  border-radius: 0.625rem;
  transition: border-color var(--dur-quick) var(--ease-soft), background-color var(--dur-quick) var(--ease-soft);
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--accent); background: var(--surface-strong); }

.sme-callout {
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  padding-right: clamp(1.25rem, 3vw, 2.5rem);
  background: linear-gradient(135deg, var(--accent-soft) 0%, rgb(231 242 238 / 0) 72%);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

@media (hover: hover) and (pointer: fine) {
  .value-list li:hover, .collaboration-models article:hover {
    border-color: rgb(14 122 95 / 0.35);
    box-shadow: var(--shadow-lift);
    transform: translateY(-5px);
  }
  .collaboration-models article:first-child:hover { border-color: rgb(127 212 184 / 0.5); }
  .work-card:hover { border-color: rgb(14 122 95 / 0.35); box-shadow: var(--shadow-deep); transform: translateY(-5px); }
  .work-card:hover .work-card-media img, .work-card:hover .work-card-media video { transform: scale(1.025); }

  [data-spotlight] { position: relative; }
  [data-spotlight]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgb(14 122 95 / 0.09), transparent 65%);
    opacity: 0;
    transition: opacity 320ms var(--ease-soft);
    pointer-events: none;
  }
  [data-spotlight]:hover::after { opacity: 1; }
  .section-dark [data-spotlight]::after,
  .collaboration-models article:first-child[data-spotlight]::after {
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgb(127 212 184 / 0.1), transparent 65%);
  }
}

/* ---------- Demo tile (live OCR case) ---------- */

.demo-tile {
  background:
    radial-gradient(120% 130% at 18% 16%, rgb(14 122 95 / 0.4), transparent 62%),
    radial-gradient(90% 110% at 85% 90%, rgb(127 212 184 / 0.12), transparent 65%),
    var(--ink);
}
.demo-tile-dot { animation: pulse-dot 2.4s var(--ease-soft) infinite; }
.demo-tile .demo-tile-hint { transition: color var(--dur-quick) var(--ease-soft); }
.demo-tile:hover .demo-tile-hint { color: var(--highlight-on-dark); }
.demo-tile[data-spotlight]::after {
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgb(127 212 184 / 0.12), transparent 65%);
}

/* ---------- Scroll reveals (JS + motion preference gated) ---------- */

@media (prefers-reduced-motion: no-preference) {
  html.motion-on [data-reveal],
  html.motion-on [data-reveal-group] > * {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(7px);
    transition:
      opacity var(--dur-reveal) var(--ease-out),
      transform var(--dur-reveal) var(--ease-out),
      filter var(--dur-reveal) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  html.motion-on [data-reveal="plain"] { filter: none; }
  html.motion-on [data-reveal].is-in,
  html.motion-on [data-reveal-group] > .is-in {
    opacity: 1;
    transform: none;
    filter: none;
  }

  [data-reveal-group] > :nth-child(2) { --reveal-delay: 70ms; }
  [data-reveal-group] > :nth-child(3) { --reveal-delay: 140ms; }
  [data-reveal-group] > :nth-child(4) { --reveal-delay: 210ms; }
  [data-reveal-group] > :nth-child(5) { --reveal-delay: 280ms; }
  [data-reveal-group] > :nth-child(6) { --reveal-delay: 350ms; }
  [data-reveal-group] > :nth-child(7) { --reveal-delay: 420ms; }
  [data-reveal-group] > :nth-child(8) { --reveal-delay: 490ms; }

  h2[data-reveal] { --reveal-delay: 80ms; }
}

/* ---------- Fallbacks ---------- */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header, .site-header.is-scrolled { background: var(--ink); }
  .method-card { background: rgb(37 54 46 / 0.9); }
}

/* ---------- Hero: drifting aurora layers (desynced periods, no repeat) ---------- */

.hero-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-fx::before {
    content: "";
    position: absolute;
    inset: -40%;
    background:
      radial-gradient(32% 28% at 30% 72%, rgb(23 163 125 / 0.26), transparent 70%),
      radial-gradient(22% 20% at 74% 36%, rgb(127 212 184 / 0.12), transparent 72%);
    will-change: transform;
    animation: hero-aurora-a 37s ease-in-out infinite;
  }

  .hero-fx::after {
    content: "";
    position: absolute;
    inset: -40%;
    background:
      radial-gradient(26% 24% at 62% 78%, rgb(14 122 95 / 0.3), transparent 70%),
      radial-gradient(20% 18% at 22% 26%, rgb(127 212 184 / 0.1), transparent 72%);
    will-change: transform;
    animation: hero-aurora-b 26s ease-in-out infinite;
  }
}

@keyframes hero-aurora-a {
  0%   { transform: translate3d(-5%, 3%, 0) rotate(-2deg) scale(1); }
  30%  { transform: translate3d(4%, -2%, 0) rotate(2deg) scale(1.1); }
  55%  { transform: translate3d(-2%, -4%, 0) rotate(-1deg) scale(1.04); }
  80%  { transform: translate3d(3%, 2%, 0) rotate(3deg) scale(1.12); }
  100% { transform: translate3d(-5%, 3%, 0) rotate(-2deg) scale(1); }
}

@keyframes hero-aurora-b {
  0%   { transform: translate3d(4%, -3%, 0) rotate(2deg) scale(1.06); }
  35%  { transform: translate3d(-3%, 4%, 0) rotate(-3deg) scale(1); }
  65%  { transform: translate3d(2%, 1%, 0) rotate(1deg) scale(1.14); }
  100% { transform: translate3d(4%, -3%, 0) rotate(2deg) scale(1.06); }
}