/* ══════════════════════════════════════════════
   ITS — CINEMATIC ENHANCEMENTS
   Film grain, depth layers, photo blends,
   pan/zoom/tilt, masks, fades, parallax
   ══════════════════════════════════════════════ */

/* ── Film Grain Overlay ── */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 99990;
  opacity: 0.025;
  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)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  mix-blend-mode: overlay;
}

/* ── Photo + Motion Blends ── */
.blend-screen { mix-blend-mode: screen; }
.blend-overlay { mix-blend-mode: overlay; }
.blend-luminosity { mix-blend-mode: luminosity; }

.hero-bg img {
  filter: brightness(0.6) contrast(1.2) saturate(1.25);
  will-change: transform;
}

/* ── Cinematic Text Shadow ── */
.hero-title {
  text-shadow: 0 4px 60px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.2);
}

/* ── Floating Tech Particles ── */
.tech-particles {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  overflow: hidden;
}
.particle {
  position: absolute;
  width: 3px; height: 3px;
  background: rgba(225,173,1,0.5);
  border-radius: 50%;
  animation: particleFloat 12s var(--cinema) infinite;
  box-shadow: 0 0 6px rgba(225,173,1,0.3);
}
.particle:nth-child(2n) {
  background: rgba(0,71,171,0.5);
  width: 2px; height: 2px;
  animation-duration: 16s;
  animation-delay: -4s;
  box-shadow: 0 0 4px rgba(0,71,171,0.3);
}
.particle:nth-child(3n) {
  width: 4px; height: 4px;
  background: rgba(225,173,1,0.2);
  animation-duration: 20s;
  animation-delay: -7s;
  box-shadow: 0 0 8px rgba(225,173,1,0.15);
}
.particle:nth-child(4n) {
  width: 1px; height: 1px;
  background: var(--white);
  opacity: 0.4;
  animation-duration: 25s;
  animation-delay: -10s;
}
@keyframes particleFloat {
  0%   { transform: translateY(100vh) translateX(0) scale(0); opacity: 0; }
  5%   { opacity: 1; transform: translateY(90vh) translateX(5px) scale(1); }
  50%  { transform: translateY(40vh) translateX(-15px) scale(0.8); opacity: 0.6; }
  90%  { opacity: 0.15; }
  100% { transform: translateY(-60px) translateX(40px) scale(0.3); opacity: 0; }
}

/* ── Animated Image Pan ── */
.img-pan {
  overflow: hidden; border-radius: 16px;
}
.img-pan img {
  animation: imagePan 25s cubic-bezier(0.45,0.05,0.55,0.95) infinite alternate;
  will-change: transform;
}
@keyframes imagePan {
  0%   { transform: scale(1.15) translateX(-3%) translateY(-1%); }
  100% { transform: scale(1.15) translateX(3%) translateY(1%); }
}

/* ── Image Tilt on Hover ── */
.img-tilt {
  perspective: 1200px;
  overflow: hidden; border-radius: 16px;
}
.img-tilt img {
  transition: transform 0.8s var(--cinema);
}
.img-tilt:hover img {
  transform: rotateY(4deg) rotateX(2deg) scale(1.06);
}

/* ── Image Zoom on Scroll ── */
.img-zoom {
  overflow: hidden; border-radius: 16px;
}
.img-zoom img {
  transition: transform 1.2s var(--cinema);
  transform: scale(1.15);
}
.img-zoom.visible img {
  transform: scale(1);
}

/* ── Floating Device Animation ── */
.float-device {
  animation: deviceFloat 7s cubic-bezier(0.45,0.05,0.55,0.95) infinite;
  will-change: transform;
}
@keyframes deviceFloat {
  0%, 100% { transform: translateY(0px) rotateZ(0deg); }
  33% { transform: translateY(-12px) rotateZ(0.5deg); }
  66% { transform: translateY(-8px) rotateZ(-0.3deg); }
}

/* ── Pulsing Glow Behind Elements ── */
.glow-behind {
  position: relative;
}
.glow-behind::after {
  content: '';
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse, rgba(0,71,171,0.1) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
  animation: glowBreathe 6s cubic-bezier(0.45,0.05,0.55,0.95) infinite;
  pointer-events: none;
}
@keyframes glowBreathe {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.2); opacity: 0.6; }
}

/* ── Glass Card Top Gradient Accent ── */
.glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--yellow));
  opacity: 0;
  transition: opacity 0.5s var(--cinema);
  border-radius: 14px 14px 0 0;
}
.glass-card:hover::before {
  opacity: 1;
}

/* ── Stagger Entrance ── */
.stagger-in > * {
  opacity: 0;
  transform: translateY(35px);
  transition: all 0.8s var(--cinema);
}
.stagger-in.visible > *:nth-child(1) { transition-delay: 0.05s; opacity:1; transform:translateY(0); }
.stagger-in.visible > *:nth-child(2) { transition-delay: 0.13s; opacity:1; transform:translateY(0); }
.stagger-in.visible > *:nth-child(3) { transition-delay: 0.21s; opacity:1; transform:translateY(0); }
.stagger-in.visible > *:nth-child(4) { transition-delay: 0.29s; opacity:1; transform:translateY(0); }
.stagger-in.visible > *:nth-child(5) { transition-delay: 0.37s; opacity:1; transform:translateY(0); }
.stagger-in.visible > *:nth-child(6) { transition-delay: 0.45s; opacity:1; transform:translateY(0); }

/* ── Tech Grid for Hero ── */
.tech-grid-overlay {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  background-image:
    linear-gradient(rgba(225,173,1,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(225,173,1,0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridPulse 8s ease-in-out infinite;
}
@keyframes gridPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

/* ── Horizontal Scroll Fade Edges ── */
.hscroll-container {
  -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}

/* ── CTA Banner Shimmer ── */
.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at 30% 50%, rgba(0,71,171,0.08) 0%, transparent 50%);
  animation: ctaShimmer 10s cubic-bezier(0.45,0.05,0.55,0.95) infinite;
}
@keyframes ctaShimmer {
  0%, 100% { transform: translateX(-10%) rotate(0deg); }
  50% { transform: translateX(10%) rotate(1deg); }
}

/* ── Diagonal Section Separator ── */
.section-diag { position: relative; }
.section-diag::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 100%; height: 80px;
  background: var(--section-bg);
  clip-path: polygon(0 60%, 100% 0, 100% 100%, 0 100%);
  z-index: 3;
}
.section-diag-alt::after { background: var(--section-alt); }

/* ── Scan Line Effect ── */
.scan-lines {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(0,0,0,0.015) 2px,
    rgba(0,0,0,0.015) 4px
  );
  animation: scanMove 10s linear infinite;
}
@keyframes scanMove {
  0% { background-position: 0 0; }
  100% { background-position: 0 100px; }
}

/* ── Reveal Variants ── */
.reveal-up {
  opacity: 0;
  transform: translateY(60px) scale(0.97);
  transition: all 1s var(--cinema);
}
.reveal-up.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.zoom-in {
  opacity: 0;
  transform: scale(0.85);
  transition: all 0.9s var(--cinema);
}
.zoom-in.visible {
  opacity: 1;
  transform: scale(1);
}

.slide-left {
  opacity: 0;
  transform: translateX(-80px);
  transition: all 1s var(--cinema);
}
.slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-right {
  opacity: 0;
  transform: translateX(80px);
  transition: all 1s var(--cinema);
}
.slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Reveal with Clip Mask ── */
.reveal-clip {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s var(--cinema);
}
.reveal-clip.visible {
  clip-path: inset(0 0 0 0);
}

/* ── Mask Reveal (wipe from left) ── */
.mask-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s var(--cinema);
}
.mask-reveal.visible {
  clip-path: inset(0 0 0 0);
}

/* ── Glowing Accent Line ── */
.glow-accent { position: relative; }
.glow-accent::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 60px; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--yellow));
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(0,71,171,0.3);
}

/* ── Glow Line (hero decoration) ── */
.glow-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(225,173,1,0.3), transparent);
  z-index: 2;
  pointer-events: none;
  animation: glowLinePulse 4s ease-in-out infinite;
}
@keyframes glowLinePulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

/* ── Nav Active State ── */
.nav-links a.active { color: var(--blue); }
.nav-links a.active::after { width: 100%; }

/* ── Apple-Style Split Title Animation ── */
@keyframes showTopText {
  0% { transform: translate3d(0, 100%, 0); }
  40%, 60% { transform: translate3d(0, 50%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes showBottomText {
  0% { transform: translate3d(0, -100%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.animated-title {
  font-family: var(--heading);
  position: relative;
  width: 100%;
  max-width: 700px;
}
.animated-title > div {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.animated-title > div div {
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  font-weight: 700;
  line-height: 1.15;
  padding: 0.3em 0;
  position: relative;
}
.animated-title > div div span { display: block; }
.animated-title > div.text-top {
  border-bottom: 3px solid var(--yellow);
}
.animated-title > div.text-top div {
  animation: showTopText 1s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  transform: translate(0, 100%);
  color: var(--white);
}
.animated-title > div.text-top div span:first-child {
  color: rgba(255,255,255,0.6);
  font-size: 0.55em;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 500;
}
.animated-title > div.text-bottom { margin-top: 0; }
.animated-title > div.text-bottom div {
  animation: showBottomText 0.5s;
  animation-delay: 1.75s;
  animation-fill-mode: forwards;
  transform: translate(0, -100%);
  color: var(--yellow);
  font-size: clamp(1.8rem, 4.5vw, 3.5rem);
}

/* ── Partner Logos Infinite Scroll ── */
.partner-scroll {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.partner-track {
  display: flex;
  align-items: center;
  gap: 2rem;
  animation: partnerScroll 35s linear infinite;
  width: max-content;
}
.partner-item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  min-width: 140px;
  transition: transform 0.5s var(--cinema);
}
.partner-item:hover {
  transform: translateY(-6px);
}
.partner-item img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  background: var(--white);
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(0,71,171,0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.05);
  transition: all 0.5s var(--cinema);
}
.partner-item:hover img {
  border-color: var(--blue);
  box-shadow: 0 12px 40px rgba(0,71,171,0.15);
}
.partner-item span {
  font-family: var(--heading);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--black);
  text-align: center;
  max-width: 130px;
  line-height: 1.3;
}
@keyframes partnerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Depth Layering System ── */
.depth-bg { z-index: 0; }
.depth-mid { z-index: 1; position: relative; }
.depth-fg { z-index: 2; position: relative; }

/* ── Cinematic Section Fade Masks ── */
.section-fade-top {
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%);
  mask-image: linear-gradient(to bottom, transparent, black 15%);
}
.section-fade-bottom {
  -webkit-mask-image: linear-gradient(to top, transparent, black 15%);
  mask-image: linear-gradient(to top, transparent, black 15%);
}

/* ── Neon Glow for Tech Theme ── */
.neon-blue {
  text-shadow: 0 0 10px rgba(0,71,171,0.4), 0 0 40px rgba(0,71,171,0.15);
}
.neon-yellow {
  text-shadow: 0 0 10px rgba(225,173,1,0.5), 0 0 40px rgba(225,173,1,0.2);
}

/* ── Gradient Border Cards ── */
.gradient-border {
  position: relative;
  border: none;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, var(--blue), var(--yellow));
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s var(--cinema);
}
.gradient-border:hover::before {
  opacity: 1;
}

/* ── Scroll Progress Bar ── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--yellow));
  z-index: 10001;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(0,71,171,0.3);
}

/* ── Responsive Cinematic ── */
@media (max-width: 768px) {
  .animated-title > div div {
    font-size: clamp(1.8rem, 8vw, 3rem);
  }
  .animated-title > div.text-bottom div {
    font-size: clamp(1.5rem, 7vw, 2.5rem);
  }
  .partner-item { min-width: 110px; }
  .partner-item img { width: 85px; height: 85px; padding: 8px; }
  .partner-track { gap: 1.5rem; }
  .partner-item span { font-size: 0.7rem; max-width: 100px; }
  .section-diag::after { height: 40px; }
  body::after { opacity: 0.015; }
}

/* ── Print / Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-up, .zoom-in, .slide-left, .slide-right,
  .reveal-clip, .mask-reveal, .stagger-in > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}