/* Scroll-reveal and micro-interaction styles.
   Replaces motion/react (Reveal, RevealGrid, DealsReveal, DealGrid, word reveals,
   values rows, "why" cards, counters) and framer-motion/animejs on the contact page.
   Hidden "before" states only apply when JavaScript is running (html.js), so the
   page is fully readable without JS and under prefers-reduced-motion. */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* absolutely-positioned cover image (fill-style) */
.img-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: transparent;
}

/* --- Reveal (single block) ------------------------------------------------ */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 0.46s var(--ease-out) var(--reveal-delay, 0s),
    transform 0.46s var(--ease-out) var(--reveal-delay, 0s);
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* --- Reveal (grid items, short capped stagger) ----------------------------- */
.js [data-reveal-item] {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.995);
  transition:
    opacity var(--reveal-duration, 0.42s) var(--ease-out) var(--reveal-delay, 0s),
    transform var(--reveal-duration, 0.42s) var(--ease-out) var(--reveal-delay, 0s);
}

.js [data-reveal-item].is-revealed {
  opacity: 1;
  transform: none;
}

/* --- About: eyebrow row, word reveals, story rule -------------------------- */
.js [data-reveal-row] {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}

.js [data-reveal-row].is-revealed {
  opacity: 1;
  transform: none;
}

.js [data-words] .about-story__word {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity 0.6s var(--ease-out) var(--d, 0s),
    transform 0.6s var(--ease-out) var(--d, 0s);
}

.js [data-words='story'] .about-story__word {
  transform: translate3d(0, 12px, 0);
  transition-duration: 0.46s;
}

.js [data-words].is-revealed .about-story__word {
  opacity: 1;
  transform: none;
}

.js [data-rule] {
  transform: scaleX(0);
  transition: transform 0.8s var(--ease-out);
}

.js [data-rule].is-revealed {
  transform: scaleX(1);
}

/* --- About: values manifesto rows ---------------------------------------- */
.js [data-values-row] [data-v] {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 0.32s var(--ease-out) var(--d, 0s),
    transform 0.32s var(--ease-out) var(--d, 0s);
}

.js [data-values-row] [data-v-rule] {
  transform: scaleX(0);
  transition: transform 0.38s var(--ease-out) var(--d, 0s);
}

.js [data-values-row].is-revealed [data-v] {
  opacity: 1;
  transform: none;
}

.js [data-values-row].is-revealed [data-v-rule] {
  transform: scaleX(1);
}

.values-manifesto__row h3 {
  transition: transform 0.28s var(--ease-out);
}

.values-manifesto__rule span {
  transition: transform 0.32s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .values-manifesto__row:hover h3 {
    transform: translate3d(4px, 0, 0);
  }

  .values-manifesto__row:hover .values-manifesto__rule span {
    transform: scaleX(1.45);
  }
}

/* --- Home: "Neden Söğütlü Gross?" cards ------------------------------------ */
.why-sogutlu-gross__card {
  transition: transform 0.28s var(--ease-out);
}

.why-sogutlu-gross__icon {
  transition: transform 0.28s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .why-sogutlu-gross__card.is-revealed:hover,
  html:not(.js) .why-sogutlu-gross__card:hover {
    transform: translate3d(0, -3px, 0);
  }

  .why-sogutlu-gross__icon:hover {
    transform: translate3d(2px, -2px, 0);
  }
}

.js .why-sogutlu-gross__card[data-reveal-item] {
  --reveal-duration: 0.48s;
}

/* --- Home hero: hidden "before" state for the GSAP entrance ----------------- */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.motion-failed) [data-hero-enter] {
    opacity: 0;
  }
}

/* Author [hidden] must win over component display rules */
[hidden] {
  display: none !important;
}

/* --- Contact: ambient backdrop (CSS replacement for the animejs loop) -------- */
@keyframes contact-hero-backdrop__drift {
  from {
    transform: translate3d(-4%, -6%, 0) scale(1);
  }

  to {
    transform: translate3d(6%, 5%, 0) scale(1.08);
  }
}

.contact-hero-backdrop__blob {
  animation: contact-hero-backdrop__drift 9s ease-in-out infinite alternate;
}

.contact-hero-backdrop__blob:nth-child(2) {
  animation-duration: 10.4s;
}

.contact-hero-backdrop__blob:nth-child(3) {
  animation-duration: 11.8s;
}

/* Contact channel links: hover/tap lift (replaces framer-motion whileHover/whileTap) */
a.iletisim-page__channelValue {
  transition: transform 0.2s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  a.iletisim-page__channelValue:hover {
    transform: translate3d(0, -3px, 0);
  }
}

a.iletisim-page__channelValue:active {
  transform: none;
}

/* --- Loading / error states for API-driven regions ------------------------- */
.api-state {
  border: 1px dashed #d4d4d8;
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  color: #52525b;
  text-align: center;
}

[data-state='error'] .api-state {
  border-color: #fca5a5;
  color: #991b1b;
}

/* --- Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal-item],
  .js [data-reveal-row],
  .js [data-words] .about-story__word,
  .js [data-rule],
  .js [data-values-row] [data-v],
  .js [data-values-row] [data-v-rule] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .contact-hero-backdrop__blob {
    animation: none;
  }

  .why-sogutlu-gross__card,
  .why-sogutlu-gross__icon,
  a.iletisim-page__channelValue,
  .values-manifesto__row h3,
  .values-manifesto__rule span {
    transition: none;
  }
}