/* SAITIVA v23 — premium visual & mouse interaction pass */

:root {
  --saitiva-iris-a: rgba(200,243,74,.23);
  --saitiva-iris-b: rgba(116,211,255,.14);
  --saitiva-iris-c: rgba(255,148,205,.12);
  --saitiva-iris-d: rgba(255,222,117,.12);
}

html { scroll-behavior: smooth; }
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---- Iridescent mouse aura ---- */
.saitiva-iridescent-field {
  position: fixed;
  z-index: 2;
  left: 0;
  top: 0;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-500px,-500px,0);
  will-change: transform, opacity;
  transition: opacity .22s ease;
  background:
    radial-gradient(circle at 31% 32%, var(--saitiva-iris-a) 0 13%, transparent 42%),
    radial-gradient(circle at 69% 32%, var(--saitiva-iris-b) 0 12%, transparent 39%),
    radial-gradient(circle at 36% 70%, var(--saitiva-iris-c) 0 11%, transparent 39%),
    radial-gradient(circle at 68% 69%, var(--saitiva-iris-d) 0 11%, transparent 38%);
  filter: blur(22px) saturate(1.28);
  mix-blend-mode: multiply;
}
body.saitiva-iris-active .saitiva-iridescent-field { opacity: .72; }
body.saitiva-iris-dark .saitiva-iridescent-field { opacity: .28; mix-blend-mode: screen; }
/* supersede the older green pointer halo */
.saitiva-pointer-field { display:none!important; }

/* ---- Background depth: quiet, not decorative noise ---- */
.hero,
.photography-proof,
.price-section,
.cms-section,
.process-section,
.featured-case-proof,
.work-all,
.case-story,
.phx-intro,
.phx-data-section {
  position: relative;
  isolation: isolate;
}
.hero::before,
.photography-proof::before,
.cms-section::before,
.featured-case-proof::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(650px 300px at 12% 18%, rgba(200,243,74,.045), transparent 70%),
    radial-gradient(500px 260px at 86% 34%, rgba(112,193,229,.035), transparent 72%);
}
.photography-proof::after,
.featured-case-proof::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.42;
  background-image: radial-gradient(rgba(32,36,31,.09) .55px, transparent .55px);
  background-size: 15px 15px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

/* ---- Typography polish ---- */
.hero-copy h1,
.section-heading h2,
.photo-proof-heading h2,
.featured-case-copy h2,
.case-intro h1,
.phx-intro h1,
.cta h2,
.scope-section h2,
.care-section h2 {
  text-wrap: balance;
}
p,
.case-lead,
.heading-aside,
.photo-proof-intro p,
.value-promise-mission>p {
  text-wrap: pretty;
}

/* ---- Logo: AI becomes the living part of the wordmark ---- */
.wordmark-ai {
  display:inline-block;
  transform-origin:center;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, background .22s ease;
}
.brand-name:hover .wordmark-ai,
.hero-wordmark:hover .wordmark-ai {
  transform: translateY(-1px) rotate(-2deg) scale(1.08);
  box-shadow: 0 8px 24px rgba(111,143,46,.19)!important;
}
@media (hover:hover) and (pointer:fine) {
  .case-back:hover svg,
  .phx-back:hover svg { transform: translateX(-4px) rotate(180deg); }
  .header-contact:hover,
  .button:hover { box-shadow: 0 12px 32px rgba(31,39,24,.10); }
}
@media (hover:hover) and (pointer:fine) {
}

/* ---- 350€ badge: larger perceived presence + tactile depth ---- */
.hero-price {
  rotate: -1.15deg;
  transform-origin: 50% 56%;
  transition: box-shadow .28s ease, filter .28s ease, rotate .28s ease;
  will-change: transform;
}
.hero-price::before {
  content:"";
  position:absolute;
  inset:10px;
  border-radius:18px;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.36);
  opacity:.42;
}
@media (hover:hover) and (pointer:fine) {
  .hero-price:hover {
    box-shadow: 0 34px 88px rgba(111,143,46,.22)!important;
    filter:saturate(1.04);
    rotate:-.35deg;
  }
}

/* ---- Project cards: depth, zoom, subtle reveal ---- */
.project-card,
.hero-project,
.featured-map-image,
.case-screen,
.cms-stage,
.photo-proof-frame {
  transition: box-shadow .34s cubic-bezier(.2,.8,.2,1), border-color .28s ease, filter .28s ease;
}
.project-card .project-visual,
.hero-project,
.featured-map-image,
.case-screen { overflow:hidden; }
.project-card .project-visual img,
.hero-project img,
.featured-map-image img,
.case-screen img {
  transition: transform .7s cubic-bezier(.18,.82,.18,1), filter .35s ease;
}
@media (hover:hover) and (pointer:fine) {
  .project-card:hover,
  .hero-project:hover,
  .featured-map-image:hover,
  .case-screen:hover {
    box-shadow:0 26px 72px rgba(26,33,22,.13)!important;
  }
  .project-card:hover .project-visual img,
  .hero-project:hover img,
  .featured-map-image:hover img,
  .case-screen:hover img {
    transform:scale(1.035);
    filter:saturate(1.035) contrast(1.015);
  }
}

/* ---- Featured Phoenix: make it read as the flagship case ---- */
.featured-case-proof {
  border-top:1px solid rgba(70,79,62,.12);
  border-bottom:1px solid rgba(70,79,62,.12);
}
.featured-case-proof .eyebrow::before,
.phx-intro .eyebrow::before {
  content:"";
  display:inline-block;
  width:24px;
  height:2px;
  margin-right:10px;
  vertical-align:middle;
  background:var(--lime);
  border-radius:99px;
}
.featured-map-image {
  border-radius:18px;
  box-shadow:0 22px 62px rgba(14,20,12,.17);
}
.featured-map-image>span {
  backdrop-filter: blur(9px);
  background:rgba(237,241,228,.86)!important;
}

/* ---- CMS gets a subtle glass/studio feel ---- */
.cms-stage {
  border-radius:20px;
  overflow:hidden;
  box-shadow: 0 20px 65px rgba(30,37,27,.08);
}
.cms-editor,
.cms-preview {
  position:relative;
}
.cms-editor::before,
.cms-preview::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.15), transparent 38%);
  opacity:.5;
}

/* ---- Process / FAQ / content blocks feel responsive without becoming cards ---- */
.process-step,
.faq-item,
.care-points>*,
.features-grid article {
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease, background-color .25s ease;
}
@media (hover:hover) and (pointer:fine) {
  .process-step:hover,
  .care-points>*:hover,
  .features-grid article:hover { transform:translateY(-4px); }
  .faq-item:hover { border-color:rgba(111,143,46,.35); }
}

/* ---- Scroll reveal: JS adds the ready state only after boot ---- */
.saitiva-reveal-ready {
  opacity:0;
  translate:0 20px;
  filter:blur(2.5px);
  transition:
    opacity .68s cubic-bezier(.2,.8,.2,1) var(--saitiva-reveal-delay,0ms),
    translate .68s cubic-bezier(.2,.8,.2,1) var(--saitiva-reveal-delay,0ms),
    filter .68s ease var(--saitiva-reveal-delay,0ms);
}
.saitiva-reveal-ready.saitiva-inview {
  opacity:1;
  translate:0 0;
  filter:blur(0);
}

/* ---- Click ripple ---- */
.saitiva-click-ripple {
  position:fixed;
  z-index:9996;
  width:14px;
  height:14px;
  border:1.5px solid rgba(111,143,46,.75);
  border-radius:50%;
  pointer-events:none;
  translate:-50% -50%;
  animation:saitiva-ripple .62s cubic-bezier(.12,.65,.25,1) forwards;
}
@keyframes saitiva-ripple {
  from { opacity:.8; scale:.6; }
  to { opacity:0; scale:5.2; }
}

/* ---- Desktop hover lens / proximity feel ---- */
.saitiva-tilt-target {
  transform: perspective(900px) rotateX(var(--saitiva-tilt-x,0deg)) rotateY(var(--saitiva-tilt-y,0deg));
  transform-style:preserve-3d;
}
.saitiva-tilt-target > * { transform-style:preserve-3d; }

/* Keep UI calm on touch and for accessibility */
@media (max-width:700px) {
  .hero-price { rotate:-.6deg; }
  .saitiva-iridescent-field { display:none!important; }
  .saitiva-reveal-ready { translate:0 11px; filter:none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .saitiva-iridescent-field,
  .saitiva-click-ripple { display:none!important; }
  .saitiva-reveal-ready,
  .saitiva-reveal-ready.saitiva-inview {
    opacity:1!important;
    translate:none!important;
    filter:none!important;
    transition:none!important;
  }
  .saitiva-tilt-target { transform:none!important; }
  .wordmark-ai,
  .project-card .project-visual img,
  .hero-project img,
  .featured-map-image img,
  .case-screen img { transition:none!important; }
}


/* v26 — Firefox-safe price badge interaction.
   Do not combine individual translate/scale/rotate with 3D transform on this card. */
.hero-price,
.hero-price[data-saitiva-proximity="1"],
.hero-price.saitiva-tilt-target {
  translate: none !important;
  scale: none !important;
  rotate: none !important;
  transform: rotate(-1.15deg) translateZ(0) !important;
  transform-style: flat !important;
  backface-visibility: visible !important;
  isolation: isolate;
}
.hero-price > * {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  backface-visibility: visible !important;
}
@media (hover:hover) and (pointer:fine) {
  .hero-price:hover {
    transform: rotate(-.35deg) translateY(-6px) scale(1.025) !important;
    box-shadow: 0 34px 88px rgba(111,143,46,.22) !important;
    filter: saturate(1.04);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-price,
  .hero-price:hover {
    transform: none !important;
  }
}