/* Professional, refined animations for sections, text, images and backgrounds */
:root{ --anim-ease: cubic-bezier(.22,.9,.28,1); --anim-fast: 420ms; --anim-medium: 760ms; --card-shadow: 0 12px 30px rgba(12,18,28,0.06); }

/* Modern scroll easing variables */
:root{ --scroll-ease: cubic-bezier(.16,.84,.24,1); --progress-height: 3px; }

@keyframes fadeUpOpacity {
  from{ opacity: 0; transform: translateY(18px) translateZ(0) scale(.995); }
  to{ opacity: 1; transform: translateY(0) translateZ(0) scale(1); }
}

@keyframes bgShift{ 0%{ background-position: 0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }

/* Base transition state - elements start slightly down and transparent; JS toggles `is-visible` */
.anim-init{ opacity:0; transform: translateY(18px) scale(.996); transition: opacity var(--anim-medium) var(--anim-ease), transform var(--anim-medium) var(--anim-ease); will-change: transform, opacity; }
.is-visible{ opacity:1; transform: none; }

/* Hero */
.hero{ background: linear-gradient(90deg, rgba(6,22,37,0.00), rgba(6,22,37,0.00)); background-size:200% 200%; animation: bgShift 18s ease-in-out infinite; }
.hero .hero-copy{ transition-delay: 120ms; }
.hero .hero-copy h1, .hero .hero-copy p{ will-change: transform, opacity; }
.hero .hero-portrait{ will-change: transform; transition: transform 520ms var(--anim-ease); }
.hero .hero-portrait img{ display:block; width:100%; height:auto; opacity:0.94; transition: transform 420ms var(--anim-ease), opacity 320ms var(--anim-ease); border-radius: 6px; }
.hero .hero-portrait img:hover{ transform: translateY(-6px) scale(1.008); opacity:0.985; }

/* Section headings and paragraphs */
.section h2, .section p, .split-heading, .about-heading h2{ transition: opacity var(--anim-fast) var(--anim-ease), transform var(--anim-fast) var(--anim-ease); }

/* Principle grid stagger */
.principle-grid article{ transition: opacity 680ms var(--anim-ease), transform 680ms var(--anim-ease); }
.principle-grid article:nth-child(1){ transition-delay: .12s; }
.principle-grid article:nth-child(2){ transition-delay: .22s; }
.principle-grid article:nth-child(3){ transition-delay: .32s; }
.principle-grid article:nth-child(4){ transition-delay: .42s; }

/* Focus image and work grid */
.focus-image img, .work-grid .work-card img, .youtube-grid iframe{ transition: opacity 820ms var(--anim-ease), transform 820ms var(--anim-ease); }
.focus-image img{ transition-delay: .12s; }
.work-grid .work-card:nth-child(1) img{ transition-delay: .08s; }
.work-grid .work-card:nth-child(2) img{ transition-delay: .16s; }
.work-grid .work-card:nth-child(3) img{ transition-delay: .24s; }
.work-grid .work-card:nth-child(4) img{ transition-delay: .32s; }
.work-grid .work-card:nth-child(5) img{ transition-delay: .40s; }
.work-grid .work-card:nth-child(6) img{ transition-delay: .48s; }
.work-grid .work-card:nth-child(7) img{ transition-delay: .56s; }
.work-grid .work-card:nth-child(8) img{ transition-delay: .64s; }
.work-grid .work-card:nth-child(9) img{ transition-delay: .72s; }

/* Card micro-interactions */
.work-card{ transition: transform 360ms var(--anim-ease), box-shadow 360ms var(--anim-ease); transform-origin: center; }
.work-card:hover{ transform: translateY(-8px) translateZ(0); box-shadow: var(--card-shadow); }

/* 3D tilt on pointer devices */
@media (pointer: fine) and (prefers-reduced-motion: no-preference){
  .work-card.tilt{ transition: transform 220ms var(--anim-ease); }
}

/* Footer and misc subtle reveal */
.site-footer, .publication-bridge, .build-paths a{ transition: opacity var(--anim-medium) var(--anim-ease), transform var(--anim-medium) var(--anim-ease); }

/* Utility classes for JS-driven reveal */
.reveal-quick{ transition-duration: 420ms; }
.reveal-slow{ transition-duration: 960ms; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .hero .hero-portrait img{ opacity:1 !important; transform:none !important; }
}

/* Subtle animated background overlays for all sections */
@keyframes bgFloat {
  0%{ transform: translate3d(-6%, -4%, 0) scale(1); opacity:0.06; }
  50%{ transform: translate3d(6%, 4%, 0) scale(1.02); opacity:0.09; }
  100%{ transform: translate3d(-6%, -4%, 0) scale(1); opacity:0.06; }
}

@keyframes bgPan {
  0%{ background-position: 0% 40%; }
  50%{ background-position: 100% 60%; }
  100%{ background-position: 0% 40%; }
}

/* Make every section able to host a slow-moving subtle overlay */
.section{ position: relative; overflow: hidden; }
.section::before{
  content: '';
  position: absolute;
  inset: -10% -20% -10% -20%;
  background: radial-gradient( circle at 10% 20%, rgba(6,120,255,0.04), transparent 12% ), radial-gradient(circle at 80% 70%, rgba(120,200,255,0.02), transparent 14% );
  background-size: 180% 180%;
  mix-blend-mode: overlay;
  pointer-events: none;
  transform: translateZ(0);
  animation: bgFloat 18s ease-in-out infinite, bgPan 26s linear infinite;
  opacity: 0.07;
}

/* Vary the overlay speed/shape across sections for interest */
.section:nth-of-type(2)::before{ animation-duration: 22s, 32s; opacity:0.055; }
.section:nth-of-type(3)::before{ animation-duration: 20s, 24s; opacity:0.065; }
.section:nth-of-type(4)::before{ animation-duration: 26s, 28s; opacity:0.05; }
.section:nth-of-type(5)::before{ animation-duration: 16s, 22s; opacity:0.08; }

/* Stronger hero background treatment */
.hero{ overflow:visible; }
.hero::before{
  content:'';
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(120deg, rgba(6,30,60,0.02), rgba(8,16,30,0.02)), radial-gradient( circle at 10% 20%, rgba(0,120,255,0.03), transparent 14% );
  mix-blend-mode: soft-light; opacity:0.12; transform: translateZ(0);
  animation: bgFloat 20s ease-in-out infinite, bgPan 30s linear infinite;
}

/* Ensure hero content sits above overlays */
.hero .shell{ position: relative; z-index: 2; }

/* Cursor-reveal spotlight image layer */
.hero-spotlight{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  transform: translateZ(0);
  will-change: transform;
  opacity:1;
  transition: opacity 180ms ease;
}

.hero-spotlight.is-hidden{
  opacity:0;
}

.hero-spotlight-svg{ display:block; width:100%; height:100%; }
.hero-spotlight-svg image{ filter: saturate(.97) contrast(1.01) brightness(.99); }

/* reduce radius on small screens */
@media (max-width:900px){ .hero-spotlight-svg image{ filter: saturate(.94) contrast(1.01) brightness(.98); } }


/* Decorative floating accents for hero (subtle dots) */
.hero .hero-accents{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.hero .hero-accents span{ position:absolute; width:6px; height:6px; border-radius:50%; background: rgba(255,255,255,0.04); filter: blur(6px); animation: bgFloat 24s ease-in-out infinite; }

/* Slight movement for shell groups to create parallax feel */
.shell{ transition: transform 520ms var(--anim-ease); }

/* Decorative SVG accents inserted by JS */
.decor-accent{ position:absolute; pointer-events:none; z-index:1; transform-origin:center; will-change: transform, opacity; opacity:0.88; filter: drop-shadow(0 8px 18px rgba(8,12,20,0.08)); }
.decor-accent svg{ display:block; width:100%; height:100%; }
.decor-accent.small{ width:34px; height:34px; opacity:0.7; }
.decor-accent.medium{ width:64px; height:64px; opacity:0.55; }
.decor-accent.large{ width:110px; height:110px; opacity:0.38; }

/* gentle idle float for accents */
.decor-accent.floaty{ animation: bgFloat 14s ease-in-out infinite; }

/* reduce opacity on smaller screens */
@media (max-width:800px){
  .decor-accent{ opacity:0.35; }
}

/* Smooth scrolling */
html{ scroll-behavior: smooth; -webkit-font-smoothing:antialiased; }

/* Scroll progress bar */
#scroll-progress{ position:fixed; left:0; top:0; height:var(--progress-height); background: linear-gradient(90deg,#6fb3ff,#2dd4bf); width:0%; z-index:9999; pointer-events:none; transition: width 120ms var(--scroll-ease); }

/* Scroll-linked animate base state */
.scroll-animate{ will-change: transform, opacity, filter; transition: transform 420ms var(--scroll-ease), opacity 420ms var(--scroll-ease), filter 420ms var(--scroll-ease); }

/* Stronger enter animations when element is centered */
.scroll-animate[data-type="lift"]{ transform-origin:center; }
.scroll-animate[data-type="parallax"]{ will-change: transform; }

/* Example of animated entrance for large images */
.focus-image.revealed img{ transform: translateY(0) scale(1); filter: blur(0); opacity:1; }
.focus-image img{ transform: translateY(18px) scale(.992); filter: blur(2px); opacity:0.94; }

/* Subtle section tilt when in view */
.section.in-view .shell{ transform: translateY(-6px) rotateX(0.3deg); }

/* Card deeper 3D effect when near center */
.work-card.centered{ transform: perspective(900px) translateY(-12px) scale(1.02) rotateX(1deg); box-shadow: 0 26px 60px rgba(8,12,28,0.12); }

/* Video embed subtle parallax */
.youtube-grid iframe{ transform-origin:center; }



/* Heading underline flourish on reveal */
.section h2{ position:relative; }
.section h2::after{ content:''; position:absolute; left:0; bottom:-10px; height:3px; width:0; background:linear-gradient(90deg, rgba(0,120,255,0.9), rgba(80,200,255,0.6)); border-radius:3px; transition: width 680ms var(--anim-ease); }
.section.is-visible h2::after{ width:52%; }

/* Zoom on reveal for images */
.reveal-zoom{ overflow:hidden; }
.reveal-zoom img{ display:block; transform: scale(.986); transition: transform 720ms var(--anim-ease), opacity 720ms var(--anim-ease); }
.reveal-zoom.is-visible img, .reveal-zoom img.is-visible{ transform: scale(1); opacity:1; }

/* CTA ripple */
.button{ position:relative; overflow:hidden; }
.button .ripple{ position:absolute; border-radius:50%; transform: scale(0); background: rgba(255,255,255,0.18); pointer-events:none; width: 16px; height:16px; opacity:0.95; transition: transform 560ms var(--anim-ease), opacity 640ms var(--anim-ease); }
.ripple.animate{ transform: scale(50); opacity:0; }

/* Subtle float for section labels */
.section-label{ display:inline-block; transform-origin:center; transition: transform 1200ms var(--anim-ease); }
.section.is-visible .section-label{ transform: translateY(-3px); }