/**
 * FAROL — Editorial effects
 *
 * Reserved for premium visual treatments only.
 * Keep structural layout, typography, spacing and responsive rules
 * in styles.css.
 */

/* ==========================================================================
   Editorial textures
   ========================================================================== */

/**
 * Usage:
 *
 * <section class="editorial-texture texture-blue">...</section>
 *
 * The base class creates two non-interactive texture layers:
 *   1. broad, non-repeating paper variation and vignette;
 *   2. one full-cover SVG grain field.
 *
 * No texture is animated, tiled or fetched from the network.
 */

.editorial-texture {
  --editorial-base: #f6f4ef;
  --editorial-ink: #16191d;
  --editorial-glow: rgba(255, 255, 255, 0.2);
  --editorial-shadow: rgba(18, 20, 24, 0.12);
  --editorial-warmth: rgba(179, 32, 32, 0.04);
  --editorial-paper-opacity: 0.42;
  --editorial-grain-opacity: 0.025;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--editorial-base);
  background-image:
    radial-gradient(
      ellipse at 18% 12%,
      var(--editorial-glow) 0%,
      transparent 48%
    ),
    radial-gradient(
      ellipse at 82% 88%,
      var(--editorial-shadow) 0%,
      transparent 56%
    ),
    linear-gradient(
      132deg,
      var(--editorial-warmth) 0%,
      transparent 38%,
      var(--editorial-shadow) 100%
    );
  color: var(--editorial-ink);
}

.editorial-texture::before,
.editorial-texture::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  content: "";
}

.editorial-texture > * {
  position: relative;
  z-index: 1;
}

.editorial-texture::before {
  background-image:
    radial-gradient(
      ellipse at 28% 24%,
      rgba(255, 255, 255, 0.11),
      transparent 44%
    ),
    radial-gradient(
      ellipse at 72% 68%,
      rgba(0, 0, 0, 0.055),
      transparent 52%
    ),
    linear-gradient(
      104deg,
      rgba(255, 255, 255, 0.035),
      transparent 33%,
      rgba(0, 0, 0, 0.025)
    );
  background-repeat: no-repeat;
  background-size: cover;
  opacity: var(--editorial-paper-opacity);
  mix-blend-mode: soft-light;
}

.editorial-texture::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 900 900' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' seed='17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.55'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: var(--editorial-grain-opacity);
  mix-blend-mode: soft-light;
}

/* Azul Farol — deep, calm and architectural. */

.texture-blue {
  --editorial-base: #2f3c74;
  --editorial-ink: #ffffff;
  --editorial-glow: rgba(203, 218, 236, 0.06);
  --editorial-shadow: rgba(7, 12, 37, 0.08);
  --editorial-warmth: transparent;
  --editorial-paper-opacity: 0.12;
  --editorial-grain-opacity: 0.1;
}

/* The tour's broad paper layer drifts gently with viewport progress. */
.tour.editorial-texture::before {
  inset: -8%;
  transform: translate3d(0, var(--tour-texture-y, 0), 0);
  will-change: transform;
}

/* Off White Paper — warm, tactile and gallery-like. */

.texture-paper {
  --editorial-base: #f6f4ef;
  --editorial-ink: #16191d;
  --editorial-glow: rgba(255, 255, 255, 0.58);
  --editorial-shadow: rgba(88, 77, 61, 0.09);
  --editorial-warmth: rgba(175, 139, 98, 0.055);
  --editorial-paper-opacity: 0.5;
  --editorial-grain-opacity: 0.02;
}

/* Terracota Editorial — warm, restrained and hospitality-led. */

.texture-terracotta {
  --editorial-base: #9f4d3f;
  --editorial-ink: #fffaf4;
  --editorial-glow: rgba(255, 220, 194, 0.14);
  --editorial-shadow: rgba(54, 19, 15, 0.2);
  --editorial-warmth: rgba(128, 42, 31, 0.12);
  --editorial-paper-opacity: 0.38;
  --editorial-grain-opacity: 0.19;
}

/* Dark Editorial — near-black, cinematic and quietly dimensional. */

.texture-dark {
  --editorial-base: #17191c;
  --editorial-ink: #f6f4ef;
  --editorial-glow: rgba(203, 218, 236, 0.1);
  --editorial-shadow: rgba(0, 0, 0, 0.34);
  --editorial-warmth: rgba(179, 32, 32, 0.02);
  --editorial-paper-opacity: 0.26;
  --editorial-grain-opacity: 0.026;
}

/* ==========================================================================
   Film grain
   ========================================================================== */

/* Grain is provided by .editorial-texture::after. */

/*
 * Services add three independent atmospheric layers. Their transforms are
 * driven by section scroll progress in script.js.
 */

.services-horizontal__atmosphere {
  position:absolute;
  z-index:0;
  inset:0;
  overflow:hidden;
  pointer-events:none
}

.services-horizontal__atmosphere > i {
  position:absolute;
  inset:-8%;
  display:block;
  pointer-events:none;
  will-change:transform
}

.services-grain-fine {
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='fine'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' seed='31'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fine)'/%3E%3C/svg%3E");
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  opacity:.11;
  mix-blend-mode:soft-light;
  transform:translate3d(var(--grain-fine-x,0),var(--grain-fine-y,0),0)
}

.services-grain-organic {
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='organic'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='2' seed='9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23organic)'/%3E%3C/svg%3E");
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  opacity:.1;
  filter:blur(35px);
  mix-blend-mode:overlay;
  transform:translate3d(var(--grain-organic-x,0),var(--grain-organic-y,0),0) scale(1.06)
}

.services-light {
  background:
    radial-gradient(circle at 24% 32%,rgba(203,218,236,.18),transparent 38%),
    radial-gradient(circle at 78% 68%,rgba(179,32,32,.07),transparent 34%);
  opacity:.34;
  filter:blur(28px);
  mix-blend-mode:soft-light;
  transform:translate3d(var(--services-light-x,0),var(--services-light-y,0),0) scale(1.08)
}

@media (max-width: 639px) {
  .services-grain-fine {
    opacity:.07;
    transform:none
  }

  .services-grain-organic {
    display:none
  }

  .services-light {
    opacity:.2;
    transform:none
  }
}

/* ==========================================================================
   Overlays
   ========================================================================== */

/* Tonal overlays are controlled by each texture variation's custom properties. */

/* ==========================================================================
   Blur and depth
   ========================================================================== */

/* Future atmospheric blur and depth treatments. */

/* ==========================================================================
   Masks and crops
   ========================================================================== */

/* Future image masks, reveals and editorial crops. */

/* ==========================================================================
   Premium hover effects
   ========================================================================== */

:root {
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-editorial-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-editorial-fast: 480ms;
  --duration-editorial: 720ms;
  --duration-editorial-slow: 1100ms;
}

/*
 * Photography outside the project gallery begins almost imperceptibly soft.
 * Hover restores full focus while introducing a restrained sense of depth.
 */

.feature-image img,
.tour-visual img {
  transform: none;
  translate: 0 var(--parallax-y, 0);
  scale: 1.012;
  will-change: translate;
  transition:
    filter var(--duration-editorial) var(--ease-editorial),
    scale var(--duration-editorial-slow) var(--ease-editorial),
    opacity var(--duration-editorial) ease;
}

.feature-image img {
  filter: blur(0.7px) saturate(0.96);
}

.tour-visual img {
  filter: brightness(0.65) saturate(0.55) blur(0.7px);
}

.feature-image:hover img {
  transform: none;
  filter: blur(0) saturate(1);
  scale: 1.03;
}

.tour:hover .tour-visual img {
  filter: brightness(0.68) saturate(0.62) blur(0);
  scale: 1.025;
}

/*
 * The project gallery keeps its signature reverse-focus interaction:
 * the full photograph softens while the internal crop remains sharp.
 */

.project-card {
  transition:
    border-radius var(--duration-editorial) var(--ease-editorial),
    box-shadow var(--duration-editorial) var(--ease-editorial);
}

.project-card:hover,
.project-card:focus-visible,
.project-card.is-active {
  box-shadow: 0 24px 70px rgba(17, 20, 29, 0.12);
}

.project-card-focus {
  box-shadow:
    0 18px 50px rgba(6, 9, 18, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.text-link,
.contact-link,
.form-submit {
  transition:
    color var(--duration-editorial-fast) var(--ease-editorial),
    border-color var(--duration-editorial-fast) var(--ease-editorial),
    opacity var(--duration-editorial-fast) var(--ease-editorial);
}

.text-link:hover,
.contact-link:hover,
.form-submit:hover {
  opacity: 0.72;
}

/* ==========================================================================
   Microinteractions
   ========================================================================== */

/*
 * Scroll reveals use opacity, a short vertical journey and minimal optical
 * softness. The transition runs only once through the existing observer.
 */

.reveal {
  filter: blur(3px);
  transition:
    opacity var(--duration-editorial-slow) var(--ease-editorial),
    transform var(--duration-editorial-slow) var(--ease-editorial),
    filter var(--duration-editorial-slow) var(--ease-editorial);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.visible {
  filter: blur(0);
}

/*
 * Secondary text treatment for the horizontal services track. The track's
 * translate3d remains the primary movement; this only refines legibility as
 * each panel approaches the viewport center.
 */

.service-slide .service-content {
  opacity: 0.48;
  filter: blur(2px);
  transform: translateX(20px);
  transition:
    opacity 780ms var(--ease-editorial),
    filter 780ms var(--ease-editorial),
    transform 780ms var(--ease-editorial);
}

.service-slide.is-current .service-content {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

@media (max-width: 639px), (prefers-reduced-motion: reduce) {
  .service-slide .service-content {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

.scroll-cue i {
  transform-origin: top;
  animation: editorial-scroll-line 2.8s var(--ease-editorial-soft) infinite;
}

@keyframes editorial-scroll-line {
  0%,
  100% {
    opacity: 0.35;
    transform: scaleY(0.62);
  }

  48% {
    opacity: 0.9;
    transform: scaleY(1);
  }
}

video {
  transition:
    opacity var(--duration-editorial) ease,
    filter var(--duration-editorial-slow) var(--ease-editorial);
}

/* ==========================================================================
   Special backgrounds
   ========================================================================== */

/* Section-specific combinations may be composed here in future iterations. */

/* ==========================================================================
   Accessibility and reduced motion
   ========================================================================== */

@media (forced-colors: active) {
  .editorial-texture::before,
  .editorial-texture::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tour.editorial-texture::before {
    transform: none;
    will-change: auto;
  }

  .feature-image img,
  .tour-visual img {
    translate: none;
    scale: 1;
    will-change: auto;
  }

  .scroll-cue i {
    animation: none;
  }

  .reveal {
    filter: none;
    transition: none;
  }

  .services-grain-fine,
  .services-grain-organic,
  .services-light {
    transform: none;
    will-change: auto;
  }

}

@media print {
  .editorial-texture::before,
  .editorial-texture::after {
    display: none;
  }
}