@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .reveal-up {
    transition: opacity 1.2s cubic-bezier(0.2, 1, 0.2, 1), transform 1.2s cubic-bezier(0.2, 1, 0.2, 1);
  }
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #000000;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: #000000;
}
::-webkit-scrollbar-thumb {
  background: #333333;
}
::-webkit-scrollbar-thumb:hover {
  background: #A67A53;
}

/* Hero: letter tiles FOTO / STUDIO, revealed one by one on page load.
   Files have a 1px grey frame on the edges, so it is always clipped (inset 1.5%). */
.hero-letter {
  display: block;
  width: auto;
  opacity: 0;
  clip-path: inset(1.5%);
  /* Some files (T, U, D) have fingertips cut by the top edge — fade the top into black
     so there is no hard horizontal cut line. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 1.5%, #000 16%);
  mask-image: linear-gradient(to bottom, transparent 1.5%, #000 16%);
  animation: hero-letter-in 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0ms) both;
}

.hero-byline {
  opacity: 0;
  animation: hero-byline-in 2s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0ms) both;
}

@keyframes hero-letter-in {
  from {
    opacity: 0;
    transform: translateY(18%);
    filter: blur(12px);
    clip-path: inset(100% 1.5% 1.5% 1.5%);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
    clip-path: inset(1.5%);
  }
}

@keyframes hero-byline-in {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-letter,
  .hero-byline {
    opacity: 1;
    animation: none;
  }
}

/* Home intro: scroll-driven camera frames + flash from the lens (public/js/camera-flash.js) */
.camera-flash canvas {
  filter: grayscale(1);
  transition: filter 1.2s ease;
}

.camera-flash.is-flashed canvas {
  filter: grayscale(0);
}

.camera-flash-wash,
.camera-flash-burst {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
}

.camera-flash-wash {
  background: #fffdf8;
  transition: opacity 0.9s ease;
}

.camera-flash-wash.is-on {
  opacity: 1;
  transition: opacity 0.18s ease 0.06s;
}

.camera-flash-burst {
  background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%),
    #fff 0%, #fff 5%, rgba(255, 253, 248, 0.9) 16%, rgba(255, 253, 248, 0) 50%);
  transform-origin: var(--lx, 50%) var(--ly, 50%);
}

.camera-flash-burst.is-firing {
  animation: camera-flash-burst 0.45s ease-out forwards;
}

@keyframes camera-flash-burst {
  0%   { opacity: 0; transform: scale(0.4); }
  15%  { opacity: 1; transform: scale(1.3); }
  100% { opacity: 1; transform: scale(3); }
}

@media (prefers-reduced-motion: reduce) {
  .camera-flash-wash,
  .camera-flash-burst {
    display: none;
  }
}

/* News content from the admin editor (rich_text(), app/Services/HtmlSanitizer.php) */
.rich-text p { margin: 0 0 1.1em; }
.rich-text h2 { font-family: 'Playfair Display', serif; font-size: 1.75em; line-height: 1.2; color: #F2E8DF; margin: 1.4em 0 0.6em; }
.rich-text h3 { font-family: 'Playfair Display', serif; font-size: 1.35em; line-height: 1.3; color: #F2E8DF; margin: 1.2em 0 0.5em; }
.rich-text ul, .rich-text ol { margin: 0 0 1.1em; padding-left: 1.5em; }
.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }
.rich-text li { margin: 0.25em 0; }
.rich-text li::marker { color: #A67A53; }
.rich-text blockquote { margin: 0 0 1.1em; padding: 0.2em 0 0.2em 1.1em; border-left: 2px solid #A67A53; font-style: italic; color: rgba(255, 255, 255, 0.75); }
.rich-text a { color: #A67A53; text-decoration: underline; text-underline-offset: 3px; }
.rich-text a:hover { color: #F2E8DF; }
.rich-text strong { color: #fff; font-weight: 600; }
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }