body { background-color: #131313; color: #e5e2e1; font-family: 'Manrope', sans-serif; }
.font-epilogue { font-family: 'Epilogue', sans-serif; }
.font-manrope { font-family: 'Manrope', sans-serif; }
.cinematic-glassmorphism { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.no-line-philosophy { border: none !important; }
.masonry-grid { column-count: 2; column-gap: 0; }
@media (min-width: 1024px) { .masonry-grid { column-count: 3; column-gap: 2rem; } }
.masonry-item { break-inside: avoid; margin-bottom: 0; }
@media (min-width: 1024px) { .masonry-item { margin-bottom: 2rem; } }

.nav-link.active {
  color: #ffffff !important;
  border-bottom-color: #ffffff !important;
}

/* ============================================================
   HERO SECTION — CINEMATIC RECORDING ANIMATION
   ============================================================ */

/* ----- Film Grain ----- */
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10%       { transform: translate(-2%, -3%); }
  20%       { transform: translate(3%, 1%); }
  30%       { transform: translate(-1%, 4%); }
  40%       { transform: translate(4%, -2%); }
  50%       { transform: translate(-3%, 3%); }
  60%       { transform: translate(2%, -4%); }
  70%       { transform: translate(-4%, 2%); }
  80%       { transform: translate(1%, -1%); }
  90%       { transform: translate(3%, 3%); }
}

.film-grain-overlay {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  opacity: 0.04;
  animation: grain 0.15s steps(1) infinite;
  mix-blend-mode: overlay;
}

/* ----- Scanlines ----- */
.scanlines {
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.18) 2px,
    rgba(0, 0, 0, 0.18) 4px
  );
}

/* ----- Pulse rings (ambient glow) ----- */
@keyframes pulse-expand {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(2.8); opacity: 0; }
}

.pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 1px solid rgba(255, 85, 68, 0.25);
  animation: pulse-expand 4s ease-out infinite;
}

.pulse-ring-1 { animation-delay: 0s; }
.pulse-ring-2 { animation-delay: 1.33s; }
.pulse-ring-3 { animation-delay: 2.66s; }

/* ----- Logo float ----- */
@keyframes logo-float {
  0%, 100% { transform: translateY(0px); filter: drop-shadow(0 0 30px rgba(255, 85, 68, 0.25)); }
  50%       { transform: translateY(-10px); filter: drop-shadow(0 0 50px rgba(255, 85, 68, 0.5)); }
}

.hero-logo {
  animation: logo-float 5s ease-in-out infinite;
}

/* ----- Viewfinder HUD ----- */
.viewfinder {
  inset: 2.5rem;
}

/* Corner brackets */
.vf-corner {
  position: absolute;
  width: 36px;
  height: 36px;
  opacity: 0.7;
}

.vf-tl { top: 0; left: 0;
  border-top: 2px solid #ff5544; border-left: 2px solid #ff5544; }
.vf-tr { top: 0; right: 0;
  border-top: 2px solid #ff5544; border-right: 2px solid #ff5544; }
.vf-bl { bottom: 0; left: 0;
  border-bottom: 2px solid #ff5544; border-left: 2px solid #ff5544; }
.vf-br { bottom: 0; right: 0;
  border-bottom: 2px solid #ff5544; border-right: 2px solid #ff5544; }

/* REC indicator */
@keyframes rec-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.vf-rec {
  position: absolute;
  top: 0;
  left: 52px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff2200;
  animation: rec-blink 1s step-start infinite;
  box-shadow: 0 0 8px rgba(255, 34, 0, 0.8);
}

.vf-rec-text {
  font-family: 'Manrope', monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.25em;
  color: #ff2200;
  opacity: 0.9;
}

/* Timecode */
.vf-timecode {
  position: absolute;
  bottom: 0;
  left: 0;
  font-family: 'Manrope', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: rgba(255, 180, 169, 0.6);
}

/* Frame info (top-right) */
.vf-frameinfo {
  position: absolute;
  top: 0;
  right: 0;
  font-family: 'Manrope', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: rgba(255, 180, 169, 0.5);
}

/* Lens info (bottom-right) */
.vf-lens {
  position: absolute;
  bottom: 0;
  right: 0;
  font-family: 'Manrope', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(255, 180, 169, 0.5);
}

/* Typing Cursor */
@keyframes blink-caret {
  from, to { opacity: 0 }
  50% { opacity: 1 }
}

.typing-cursor {
  animation: blink-caret 0.8s step-end infinite;
}

/* ----- Tagline ----- */
@keyframes tagline-fadein {
  from { opacity: 0; transform: translateY(8px); letter-spacing: 0.4em; }
  to   { opacity: 1; transform: translateY(0);   letter-spacing: 0.25em; }
}

.hero-tagline {
  animation: tagline-fadein 1.6s ease-out forwards;
  opacity: 0;
  animation-delay: 0.5s;
}

/* ----- Scroll Indicator (Arrows) ----- */
@keyframes scroll-fade-in {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes arrow-cascade {
  0%   { opacity: 0; transform: translateY(-10px); }
  50%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(10px); }
}

.scroll-indicator {
  opacity: 0;
  animation: scroll-fade-in 1.2s ease-out forwards;
  animation-delay: 5s;
}

.scroll-indicator span {
  display: block;
  opacity: 0;
  animation: arrow-cascade 2s infinite;
}

.arrow-1 { animation-delay: 6s; }
.arrow-2 { animation-delay: 6.2s; }
.arrow-3 { animation-delay: 6.4s; }

/* ----- Infinite Scroll (Videos) ----- */
@keyframes scroll-infinite {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-scroll {
  display: flex;
  width: max-content;
  animation: scroll-infinite 40s linear infinite;
}

.video-scroll-container:hover .animate-scroll {
  animation-play-state: paused;
}

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }