/* ===========================================================
   Fabri Gráfica Digital — bespoke styles
   Custom utility classes that aren't expressible as plain
   Tailwind utilities, plus design tokens (CSS variables).
   =========================================================== */

:root {
  --radius: .875rem;

  --background: oklch(100% 0 0);
  --foreground: oklch(25% 0 0);
  --card: oklch(100% 0 0);
  --card-foreground: oklch(25% 0 0);

  --primary: oklch(66.5% .098 190);
  --primary-dark: oklch(50.5% .083 189);
  --primary-foreground: oklch(100% 0 0);

  --secondary: oklch(97.2% .002 247);
  --secondary-foreground: oklch(25% 0 0);

  --muted: oklch(97.2% .002 247);
  --muted-foreground: oklch(52% .01 250);

  --accent: oklch(95.5% .02 190);
  --accent-foreground: oklch(32% .06 190);

  --border: oklch(91.8% .005 250);
  --input: oklch(91.8% .005 250);
  --ring: oklch(66.5% .098 190);

  --brand-cyan: oklch(54.5% .176 255);
  --brand-magenta: oklch(56.5% .222 358);
  --brand-yellow: oklch(84.5% .17 89);
  --brand-graphite: oklch(25% 0 0);
  --brand-graphite-soft: oklch(32% .004 250);

  --gradient-brand: linear-gradient(135deg, var(--primary-dark), var(--primary) 55%, var(--brand-cyan));
  --gradient-cmyk: linear-gradient(90deg, var(--brand-cyan) 0%, var(--brand-magenta) 33%, var(--brand-yellow) 66%, var(--primary) 100%);

  --shadow-soft: 0 1px 2px oklch(25% 0 0/.06), 0 12px 30px -18px oklch(25% 0 0/.35);
  --shadow-lift: 0 18px 45px -22px oklch(25% 0 0/.45);
}

html {
  scroll-behavior: smooth;
}

section[id] {
  scroll-margin-top: 96px;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
}

h1, h2 { font-weight: 700; }
h3 { font-weight: 600; }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: .75rem 1.25rem;
  border-radius: 0 0 .5rem 0;
  font-weight: 600;
  font-size: .875rem;
}
.skip-link:focus {
  left: 0;
}

/* Container */
.section-shell {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* Card surface */
.card-surface {
  background: var(--card);
  border-radius: 22px;
  border: 0.8px solid var(--border);
  box-shadow: var(--shadow-soft);
}

/* CMYK gradient bar / frame */
.cmyk-bar {
  background: var(--gradient-cmyk);
}

/* Fine grain dot texture overlay */
.grain-dots {
  background-image: radial-gradient(oklch(0.25 0 0 / 0.08) 1px, transparent 1px);
  background-size: 15px 15px;
}

/* Gradient text */
.text-gradient-brand {
  background: var(--gradient-brand);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* Instagram's own brand gradient, used only for the footer Instagram link */
.text-gradient-instagram {
  background: linear-gradient(135deg, #833ab4, #e1306c 50%, #fcaf45);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* Scroll-reveal animation */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.16,.8,.28,1), transform .7s cubic-bezier(.16,.8,.28,1);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
[data-reveal="left"] {
  transform: translateX(-20px);
}
[data-reveal="left"].is-visible {
  transform: none;
}
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }
[data-reveal-delay="5"] { transition-delay: .4s; }
[data-reveal-delay="6"] { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}

/* Header scroll state */
header.is-scrolled {
  background-color: color-mix(in oklch, var(--background) 92%, transparent);
  box-shadow: 0 1px 0 var(--border), 0 10px 30px -20px oklch(25% 0 0 / .3);
}

/* Mobile nav panel */
#mobile-nav {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .3s ease;
}
#mobile-nav.is-open {
  max-height: 640px;
  opacity: 1;
}

/* FAQ accordion panel */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.faq-panel > div {
  overflow: hidden;
}
.faq-item.is-open .faq-panel {
  grid-template-rows: 1fr;
}
.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
}
.faq-chevron {
  transition: transform .3s ease;
}

/* Catalog tab panels */
.catalog-panel[hidden] { display: none; }

/* Service card hover reveal */
.service-overlay {
  opacity: 0;
  transition: opacity .3s ease;
}
.service-card:hover .service-overlay,
.service-card:focus-within .service-overlay {
  opacity: 1;
}

/* Hero background glow blobs — kept subtle, non-distracting.
   A slow ambient drift gives the hero a bit more tech/motion energy
   without being flashy; respects prefers-reduced-motion below. */
.hero-glow {
  filter: blur(70px);
  animation: hero-glow-drift 14s ease-in-out infinite;
}
.hero-glow:nth-of-type(2) { animation-duration: 18s; animation-delay: -4s; }
.hero-glow:nth-of-type(3) { animation-duration: 16s; animation-delay: -9s; }

@keyframes hero-glow-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(2%, -3%) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-glow { animation: none; }
}

/* Hero — wider shell so the photo column has real room on large screens */
.hero-shell {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* Hero grain texture — light dots on the dark hero background */
.hero-grain {
  background-image: radial-gradient(oklch(100% 0 0 / 0.05) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* Hero photo frame — height is driven by viewport height (not a fixed
   aspect ratio) so the full portrait photo always fits without cropping;
   object-contain inside does the rest. Width is capped by the wrapper. */
.hero-photo-frame {
  height: clamp(300px, 74vh, 780px);
  width: 100%;
}
/* Below lg the hero stacks to one column (text, then photo) — the photo
   doesn't need to claim as much height there since it no longer shares
   the row with the text block. */
@media (max-width: 1023px) {
  .hero-photo-frame {
    height: clamp(260px, 40vh, 440px);
  }
}
@media (max-width: 640px) {
  .hero-photo-frame {
    height: clamp(220px, 30vh, 320px);
  }
}

/* Compact feature chips (replaces the old 2x2 checklist) */
.hero-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .4rem .85rem;
  font-size: .75rem;
  font-weight: 500;
  color: oklch(100% 0 0 / .78);
  background: oklch(100% 0 0 / .06);
  border: 1px solid oklch(100% 0 0 / .12);
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.hero-chip:hover {
  background: oklch(100% 0 0 / .1);
  border-color: oklch(100% 0 0 / .22);
  color: oklch(100% 0 0 / .95);
}

/* Small CMYK "registration mark" accent — echoes print-industry crop
   marks, kept tiny and low-opacity in a corner, away from the content */
.hero-registration {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-reg-line {
  display: block;
  height: 3px;
  width: 46px;
  border-radius: 2px;
}
.hero-reg-line:nth-child(2) { width: 30px; margin-left: 16px; }
.hero-reg-line:nth-child(3) { width: 38px; margin-left: 8px; }

/* Hero badge — slow, looping light sweep across the rounded pill,
   like a reflection passing over glass. Pauses between sweeps. */
.hero-badge-shine {
  position: relative;
  overflow: hidden;
  animation: badge-pulse-glow 2.6s ease-in-out infinite;
}
@keyframes badge-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 oklch(66.5% .098 190 / .45); }
  50% { box-shadow: 0 0 0 7px oklch(66.5% .098 190 / 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-badge-shine { animation: none; }
}
.hero-badge-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, oklch(100% 0 0 / .32), transparent);
  transform: skewX(-20deg);
  animation: badge-shine-sweep 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes badge-shine-sweep {
  0% { left: -60%; }
  45%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-badge-shine::after { animation: none; display: none; }
}

/* Button shine sweep on hover — quick, subtle, premium */
.btn-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, oklch(100% 0 0 / .35) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .6s ease;
  pointer-events: none;
}
.btn-shine:hover::after {
  transform: translateX(130%);
}

/* Subtle 3D tilt on the hero photo, driven by --tilt-x/--tilt-y set in
   script.js from pointer position. Desktop-only, matches the glow gate. */
@media (hover: hover) and (pointer: fine) {
  [data-tilt] {
    transition: transform .35s ease;
    transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
  }
}

/* Utility: hide scrollbar for horizontally scrollable pill rows on mobile */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Footer logo — white frame, ~0.5cm border, light and deliberate (not a heavy box) */
.footer-logo-frame {
  display: inline-flex;
  background: var(--background);
  padding: 0.5cm;
  border-radius: 1.25rem;
  box-shadow: 0 1px 2px oklch(25% 0 0 / .08), 0 10px 24px -16px oklch(25% 0 0 / .3);
}

/* Material card — subtle hover state on the whole card + its name */
.material-card {
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.material-card:hover {
  border-color: oklch(66.5% .098 190 / .4);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
.material-card h3 {
  transition: color .3s ease;
}
.material-card:hover h3 {
  color: var(--primary-dark);
}

/* "Sobre" section tag cards (Impressão digital, Gráfica rápida, ...) */
.sobre-tag {
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.sobre-tag:hover {
  border-color: oklch(66.5% .098 190 / .4);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
.sobre-tag span:first-child {
  transition: background-color .3s ease, color .3s ease;
}
.sobre-tag:hover span:first-child {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

/* Material tag pills — subtle "active" microinteraction on hover */
.material-tags li {
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.material-tags li:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
  box-shadow: 0 0 0 1px oklch(66.5% .098 190 / .25), 0 6px 16px -10px oklch(66.5% .098 190 / .5);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------
   Interactive cursor-light effect — premium, subtle, desktop only.
   A radial highlight follows the pointer via --gx/--gy custom
   properties (set in script.js). Skipped entirely on touch/coarse
   pointers so nothing depends on hover for mobile users.
   --------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  /* Logo: soft brand-colored halo glowing around it, cursor-aware */
  .logo-glow {
    position: relative;
    isolation: isolate;
  }
  .logo-glow::before {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 999px;
    background: radial-gradient(140px circle at var(--gx, 50%) var(--gy, 50%), oklch(66.5% .098 190 / .38), transparent 70%);
    filter: blur(8px);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
    z-index: -1;
  }
  .logo-glow:hover::before,
  .logo-glow:focus-within::before {
    opacity: 1;
  }

  /* Hero spotlight — a soft brand-colored glow that follows the cursor
     across the whole first screen. Sits above the background decoration
     but below the content (z-10), and never intercepts clicks. */
  .hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(560px circle at var(--gx, 50%) var(--gy, 50%), oklch(66.5% .098 190 / .16), oklch(56.5% .222 358 / .07) 42%, transparent 68%);
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
  }
  .hero-section:hover::before,
  .hero-section:focus-within::before {
    opacity: 1;
  }

  /* Photos: soft light sweep across the surface + a barely-there lift */
  .glow-image {
    position: relative;
  }
  .glow-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 50%), oklch(100% 0 0 / .16), transparent 60%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
    mix-blend-mode: overlay;
  }
  .glow-image:hover::after,
  .glow-image:focus-within::after {
    opacity: 1;
  }
  .glow-image img {
    transition: transform .45s ease;
  }
  .glow-image:hover img {
    transform: scale(1.01);
  }
}