/* Global / Variables */
:root{
  --bg:#000000;
  --fg:#ffffff;
  --muted:#ffffff;
  --accent:#000000;
  --gold:#ffffff;
  --max-width:1200px;
  --container-pad:20px;
  --radius:6px;

  /* cinematic controls */
  --grain-opacity: 0.12; /* slightly stronger film grain for subtle texture */
  --tile-glow: 180px 280px 640px rgba(160,180,255,0.14);
  --portrait-scan-opacity: 0.10;

  /* background engine (deep-liquid palette with a touch of warm lift) */
  --bg-stop-a: #000000;
  --bg-stop-b: #070406; /* slightly lifted mid tone so pure black isn't flat */
  --bg-stop-c: #08101a; /* deep blue-black for cinematic depth */
  --bg-accent-warm: rgba(42,28,18,0.06); /* very subtle warm highlight layer */

  /* slightly stronger glassmorphism over the animated background */
  --card-bg: rgba(255,255,255,0.03);
  --glass-blur: 25px;
  --card-border: rgba(220,220,225,0.12);
  --hover-glow: rgba(160,180,255,0.10);
}

/* animated slow gradient background (60s loop) */
@keyframes bgPulse {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* very slow, subtle drift for soft particles to complement JS animations */
@keyframes particleDrift {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 1; }
  100% { transform: translateY(-100vh) translateX(6px) scale(1.02); opacity: 0; }
}

/* Deep-Liquid gradient animation (60s alternate) */
@keyframes bgDeepLiquid {
  0% { background-position: 0% 40%; }
  100% { background-position: 100% 60%; }
}
/* Layer 0: Ambient bottom-most animated gradient.
   This element sits far below content and drives the primary deep-liquid background. */
#ambient-bg{
  position:fixed;
  inset:0;
  z-index: -30; /* far below everything */
  pointer-events:none;
  background: linear-gradient(120deg, #000000 0%, #08080c 50%, #02040a 100%);
  background-size: 400% 400%;
  animation: bgDeepLiquid 60s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Full-viewport background canvas must sit behind everything so animated particles/flaring are visible beneath UI */
#bg-canvas{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  z-index:-1; /* critical: push canvas behind content */
  pointer-events:none;
}

/* ensure the main document creates a new stacking context above the canvas */
body, main {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

/* keep existing background-engine but push it above ambient and still below atmosphere */
.background-engine {
  position:fixed;
  inset:0;
  z-index: -20;
  pointer-events:none;
  background: transparent; /* ambient handles the deep-liquid gradient now */
  background-size: 400% 400%;
  animation: none;
  box-shadow: inset 0 160px 320px rgba(0,0,0,0.45), inset 0 -100px 180px rgba(0,0,0,0.42);
}

/* Layer 1 & 2 stacking guidance:
   - atmosphere layer (particles + flares) will sit above ambient but below content */
.atmo-layer{
  position:fixed;
  inset:0;
  /* push atmosphere well behind the hero/content so no particles or flares appear above the hero */
  z-index: -20;
  pointer-events:none;
  overflow:hidden;
  mix-blend-mode: normal;
}

/* Lightflares (Layer 2 visual): big soft blobs that react to scroll (JS drives translate) */
.atmo-flare{
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  mix-blend-mode: screen;
  filter: blur(40px) saturate(1.05);
  will-change: transform, opacity;
  opacity:0.18;
  transition: transform 0.5s linear, opacity 10s linear;
}

/* Flare variants as requested */
.atmo-flare.flare-top-left{
  left:-12%;
  top:-8%;
  width:720px;
  height:520px;
  /* neutral dark grey radial flare (no blue) */
  background: radial-gradient(circle at 25% 25%, rgba(20,20,20,0.95), rgba(24,24,24,0.72) 28%, rgba(30,30,30,0.20) 48%, transparent 70%);
  opacity:0.18;
}
.atmo-flare.flare-bottom-right{
  right:-8%;
  bottom:-6%;
  width:640px;
  height:460px;
  /* neutral light grey/silver radial flare */
  background: radial-gradient(circle at 70% 70%, rgba(220,220,220,0.95), rgba(200,200,200,0.6) 28%, rgba(180,180,180,0.18) 48%, transparent 72%);
  opacity:0.14;
}

/* particles container positioning */
.particles-canvas {
  position:absolute;
  inset:0;
  z-index:-9; /* place above ambient/bg but below flares if desired */
  pointer-events:none;
  mix-blend-mode: screen;
  will-change:opacity,transform;
}

/* Stronger visible particle style (Layer 1 particles) */
.particle{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  filter: blur(3px);
  opacity:0.52; /* between 0.4 and 0.6 requested */
  /* dark chrome / graphite core for subtle, low-key dust */
  background: radial-gradient(circle, rgba(70,70,74,1) 0%, rgba(72,72,76,0.92) 12%, rgba(90,90,94,0.6) 30%, rgba(110,110,114,0.28) 58%, rgba(120,120,124,0) 100%);
  pointer-events:none;
  mix-blend-mode: screen;
  transform: translateZ(0);
  animation: particleDrift linear infinite;
  animation-duration: 120s;
  will-change: transform, opacity;
  /* darker, subtler halo so specks read as graphite rather than bright highlights */
  box-shadow: 0 0 8px rgba(40,40,44,0.28);
}

/* Ensure atmosphere components are behind actual content */
main{
  position:relative;
  z-index:40; /* higher than atmo-layer */
}

/* Force glassmorphism stronger: extremely transparent background + top/left highlight edge for cards */
.performance-wrap, .perf-card, .project-card, .about-card, .project-modal-inner {
  /* stronger glass to sit over animated canvas */
  background: rgba(10,10,10,0.4) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}

/* make sure body/content backgrounds are transparent so ambient shows through */
body, .section, .hero, .projects-grid, .performance-wrap {
  background: transparent !important;
}

/* atmosphere layer (fog, flares, particles) sits above the animated background but below all content (texts/images) */
.atmo-layer{
  position:fixed;
  inset:0;
  /* ensure atmosphere stays behind hero and main stacking */
  z-index:-20; /* behind content/hero */
  pointer-events:none;
  overflow:hidden;
  mix-blend-mode: normal;
}

/* volumetric smoke layers that sit in the atmosphere but stay behind UI/content */
.atmo-smoke{
  position:absolute;
  pointer-events:none;
  left:-10%;
  width:120%;
  height:28%;
  background: linear-gradient(180deg, rgba(8,10,12,0.70), rgba(8,10,12,0.30));
  filter: blur(34px) saturate(1.02);
  opacity:0.12;
  transform: translateZ(0);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  border-radius:40%;
}
.atmo-smoke.smoke-1{ top:8%; height:26%; opacity:0.10; }
.atmo-smoke.smoke-2{ top:36%; height:32%; opacity:0.14; }
.atmo-smoke.smoke-3{ top:66%; height:30%; opacity:0.09; }

/* subtle slow drift for smoke */
@keyframes atmoSmokeDrift {
  0% { transform: translateX(0) translateY(0) scale(1); opacity:0.12; }
  50% { transform: translateX(6%) translateY(-6px) scale(1.02); opacity:0.14; }
  100% { transform: translateX(0) translateY(0) scale(1); opacity:0.12; }
}
.atmo-smoke{ animation: atmoSmokeDrift 88s ease-in-out infinite; }

/* soft volumetric fog spanning across the viewport */
.atmo-fog{
  position:absolute;
  left:-10%;
  top:-10%;
  width:120%;
  height:120%;
  pointer-events:none;
  background:
    radial-gradient(40% 30% at 20% 30%, rgba(255,240,220,0.02), transparent 10%),
    radial-gradient(60% 40% at 80% 70%, rgba(200,220,255,0.016), transparent 12%),
    linear-gradient(180deg, rgba(6,8,10,0.18), rgba(0,0,0,0.36));
  filter: blur(46px) saturate(1.05);
  opacity:0.9;
  transform: translateZ(0);
  will-change:transform,opacity;
  mix-blend-mode: screen;
}

/* Lightflares: large, soft radial blobs (dark-blue / silver) */
.atmo-flare{
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(160,180,220,0.10), rgba(120,140,180,0.06) 20%, rgba(80,100,140,0.02) 45%, transparent 60%);
  filter: blur(36px) saturate(1.02);
  mix-blend-mode: screen;
  transform-origin:center center;
  will-change:transform,opacity;
  transition:opacity 8s linear;
  opacity:0.14;
}

/* parallax transform helper - will be driven from JS for subtle scroll parallax */
.atmo-flare[data-parallax]{ transform: translateY(0px); will-change:transform; }

/* large soft light blobs / flares that add scattered light and shafts */
.atmo-flare{
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,240,220,0.22), rgba(255,220,200,0.06) 20%, rgba(255,200,160,0.02) 45%, transparent 60%);
  filter: blur(36px) saturate(1.12);
  mix-blend-mode: screen;
  transform-origin:center center;
  will-change:transform,opacity;
  transition:opacity 8s linear;
  opacity:0.12;
  animation: atmoFlareDrift 92s linear infinite;
}

/* gentle drift for flares so they feel alive */
@keyframes atmoFlareDrift{
  0% { transform: translateY(0px) scale(1) rotate(0deg); }
  50% { transform: translateY(-26px) scale(1.02) rotate(6deg); }
  100% { transform: translateY(0px) scale(1) rotate(0deg); }
}

/* particles live inside the atmosphere layer (kept crisper than fog) */
.particles-canvas {
  position:absolute;
  inset:0;
  /* place particle canvas behind hero/content so particles don't show over the hero */
  z-index:-20;
  pointer-events:none;
  mix-blend-mode: screen;
  opacity:1;
  will-change:opacity,transform;
}

/* particles: bright white dust specks used for ambient depth — made more visible and crisp */
.particle{
  position:absolute;
  /* keep small base size but allow JS inline sizing to vary */
  width:8px;
  height:8px;
  border-radius:50%;
  /* slightly tighter blur so the specks read sharper while retaining soft edges */
  filter: blur(3px);
  /* stronger baseline so particles are clearly visible on dark backgrounds */
  opacity:0.60; /* JS still adjusts per-particle opacity and size */
  /* pure white core with softer falloff for a crisp, luminous bokeh */
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0.88) 18%, rgba(255,255,255,0.48) 38%, rgba(255,255,255,0.12) 62%, rgba(255,255,255,0.00) 100%);
  pointer-events:none;
  mix-blend-mode: screen;
  transform: translateZ(0);
  will-change: transform, opacity;
  /* stronger halo to help particles read at small sizes */
  box-shadow: 0 0 20px rgba(255,255,255,0.10), 0 0 6px rgba(255,255,255,0.06) inset;
}

/* ensure main content stacks above the atmosphere so text and images are never covered by fog/particles/flares */
main{
  position:relative;
  z-index:40; /* higher than .atmo-layer (30) so atmosphere is always behind UI/content */
}

/* Glassmorphism for all cards in analytics and projects: updated to requested spec */
.performance-wrap, .perf-card, .project-card, .about-card, .project-modal-inner {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
}

/* Hover pulse glow for cards */
.perf-card:hover, .project-card:hover, .about-card:hover {
  box-shadow: 0 22px 80px rgba(6,24,70,0.6), 0 6px 28px var(--hover-glow);
  border-color: rgba(255,255,255,0.18);
  transition: box-shadow .28s ease, border-color .18s ease, transform .18s ease;
}

/* tiny pulsing effect on hover */
.perf-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: 8px;
  box-shadow: 0 0 0 rgba(160,180,255,0);
  transition: box-shadow .28s ease;
  z-index: -1;
}
.perf-card:hover::after{ box-shadow: 0 6px 40px rgba(160,180,255,0.06); }

/* ensure analytics grid matches projects grid max width and strict 3-column layout */
.analytics-grid.three-col-dashboard{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
  align-items:start;
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  box-sizing:border-box;
}

/* ensure projects-grid uses same max width variable (already uses container), keep consistent */
.projects-grid{ max-width: var(--max-width); margin-left:auto; margin-right:auto; }

/* Card typography */
.perf-label{ font-family:Inter, sans-serif; font-size:12px; color:rgba(255,255,255,0.62); letter-spacing:0.12em; text-transform:none; margin:0; }
.perf-value{ font-size:32px; color:#fff; font-weight:700; line-height:1; font-family:Oswald, serif; }
.perf-value .perf-suffix{ font-size:14px; margin-left:6px; color:rgba(255,255,255,0.8); font-weight:600; }

/* Evidence button styling */
.evidence-btn{ align-self:flex-start; padding:8px 12px; border-radius:8px; font-size:13px; display:inline-flex; gap:8px; background:transparent; border:1px solid rgba(255,255,255,0.06); color:#fff; }

/* Viral prominent card foot placement: ensure it's at column base visually */
.viral-foot{ margin-top:auto; }

/* make sure perf-card has position relative for pseudo elements */
.perf-card{ position:relative; }

/* particles: graphite, soft bokeh for a muted ambient layer across sections.
   slightly tighter blur and darker halo so particles read as subtle dust rather than bright stars */
.particle{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  /* crisper visual while retaining soft bokeh */
  filter: blur(2px);
  /* adjusted baseline opacity for a darker presence */
  opacity:0.6;
  /* graphite / chrome gradient core */
  background: radial-gradient(circle, rgba(80,80,84,1) 0%, rgba(82,82,86,0.9) 12%, rgba(96,96,100,0.6) 30%, rgba(110,110,114,0.28) 58%, rgba(120,120,124,0) 100%);
  pointer-events:none;
  mix-blend-mode: screen;
  transform: translateZ(0);
  animation: particleDrift linear infinite;
  animation-duration: 120s;
  animation-delay: calc(var(--p-delay, 0ms));
  will-change: transform, opacity;
  /* darker, softer halo to match graphite look */
  box-shadow: 0 0 20px rgba(40,40,44,0.12), 0 0 8px rgba(40,40,44,0.06) inset;
}

/* ensure analytics section uses relative positioning so particles and engine layer behind properly */
.section.analytics{ position:relative; z-index: 10; }

/* Responsive: stack to single column on narrow screens but keep consistent max-width */
@media(max-width:899px){
  .analytics-grid.three-col-dashboard{ grid-template-columns: 1fr; max-width:var(--max-width); padding:0 18px; }
}

/* keep rest of original CSS intact by preserving existing selectors (no other changes below) */

/* animated subtle grain shift to avoid static emptiness on large black areas */
@keyframes grainShift {
  0% { background-position: 0 0, 2px 3px; opacity: var(--grain-opacity); }
  50% { background-position: 1px 1px, 3px 2px; opacity: calc(var(--grain-opacity) * 0.95); }
  100% { background-position: 0 0, 2px 3px; opacity: var(--grain-opacity); }
}

/* Mobile-first typographic scale */
*{box-sizing:border-box}
html, body, #app, main{ height:100%; background: transparent !important; }
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--fg);
  /* ensure page shows the canvas underneath */
  background: transparent !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  -webkit-tap-highlight-color:transparent;
}

/* Skip link */
.skip{position:absolute;left:8px;top:8px;background:#000;color:#fff;padding:8px 12px;border-radius:4px;z-index:1000}

/* Container */
.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:18px;}

/* Header */
.site-header{
  position:sticky;top:0;z-index:60;
  /* set exact black to match logo background */
  background-color:#000;
  border-bottom:1px solid rgba(255,255,255,0.03);
  /* keep slight backdrop for translucency if supported */
  backdrop-filter: blur(2px);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo-link img{height:60px; width:auto; display:block; filter: drop-shadow(0 8px 28px rgba(120,150,255,0.08));}

/* explicit small logo sizing to meet requested 60px height on larger viewports as well */
@media(min-width:900px){
  .logo-link img{height:60px}
}

/* Larger logo on wide screens */
@media(min-width:900px){
  /* Slightly smaller logo on wider screens for a more compact header */
  .logo-link img{height:96px}
}

.nav-list{display:flex;gap:14px;list-style:none;margin:0;padding:0}
.nav-list a{color:#fff;text-decoration:none;font-weight:600;font-size:14px;padding:8px;border-radius:4px;transition:all .18s}
.nav-list a:hover, .nav-list a:focus{outline:0;background:rgba(255,255,255,0.06)}

.nav { background: transparent; } /* nav sits on the black header */

/* Nav toggle (mobile) - animated burger + full-screen drawer */
.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  background:transparent;
  border:0;
  font-size:18px;
  padding:6px;
  color:#fff;
  cursor:pointer;
  position:relative;
}

/* visual burger lines (uses pseudo elements for animation) */
.nav-toggle .burger{
  display:block;
  width:20px;
  height:2px;
  background:linear-gradient(90deg, #fff, rgba(255,255,255,0.9));
  position:relative;
  transition: transform .28s cubic-bezier(.2,.9,.18,1);
}
.nav-toggle .burger::before,
.nav-toggle .burger::after{
  content:'';
  position:absolute;
  left:0;
  width:20px;
  height:2px;
  background:inherit;
  transition: transform .28s cubic-bezier(.2,.9,.18,1), opacity .18s ease;
}
.nav-toggle .burger::before{ top:-6px; }
.nav-toggle .burger::after{ top:6px; }

/* when expanded, morph into X */
.nav-toggle[aria-expanded="true"] .burger{
  transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .burger::before{
  transform: rotate(90deg) translateX(0px);
  top:0;
}
.nav-toggle[aria-expanded="true"] .burger::after{
  opacity:0;
}

/* Mobile drawer styles */
#mobile-drawer{
  position:fixed;
  inset:0;
  z-index:1200;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  pointer-events:none;
  background:rgba(0,0,0,0.0);
  transition: background .36s ease;
}
#mobile-drawer .drawer-inner{
  position:relative;
  width:100%;
  max-width:480px;
  height:100vh;
  background:linear-gradient(180deg, rgba(8,8,10,0.98), rgba(2,2,3,0.98));
  box-shadow: 0 40px 140px rgba(0,0,0,0.9);
  transform: translateY(-6%);
  opacity:0;
  pointer-events:auto;
  transition: transform .42s cubic-bezier(.2,.9,.18,1), opacity .36s ease;
  padding:28px 20px;
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:flex-start;
  justify-content:flex-start;
  border-left: 1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(10px) saturate(120%);
}

/* drawer open state */
#mobile-drawer.open{
  pointer-events:auto;
  background:rgba(0,0,0,0.6);
}
#mobile-drawer.open .drawer-inner{
  transform: translateY(0%);
  opacity:1;
}

/* close button */
.drawer-close{
  background:transparent;
  border:0;
  color:#fff;
  font-size:22px;
  padding:8px;
  align-self:flex-end;
  cursor:pointer;
}

/* nav list inside drawer */
.drawer-list{
  list-style:none;
  padding:0;
  margin:6px 0 0 0;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.drawer-list a{
  color:#fff;
  text-decoration:none;
  font-size:20px;
  font-weight:700;
  padding:10px 6px;
  border-radius:8px;
  display:block;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.drawer-list a:hover,
.drawer-list a:focus{
  transform:translateX(6px);
  background:rgba(255,255,255,0.02);
  outline:0;
}

/* ensure the original nav-list remains visible on desktop but hidden on small viewports when using drawer */
@media(max-width:899px){
  #nav-list{ display:none !important; }
  .nav-toggle{ display:inline-flex; }
}
@media(min-width:900px){
  .nav-toggle{ display:none; }
}

/* HERO */
.hero{
  position:relative;
  /* hero fills the viewport — no oversized 150vh to avoid awkward seams */
  height:100vh;
  min-height:520px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background: transparent !important; /* allow canvas to show through */
}
.hero-mosaic{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:1fr;
  gap:0;
  padding:0;
  pointer-events:none;
  z-index:10;

  /* avoid sub-pixel seam lines by forcing its own compositing layer */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}
.tile{
  position:relative;
  width:100%;
  height:100%;
  border-radius:0;
  overflow:hidden;
  /* enable true 3D stacking so child layers can rotate in depth */
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  will-change:transform,opacity,background-position;
  transition:opacity .28s ease;
  background-repeat:no-repeat;
  background-clip: padding-box;
  border: 0;
  box-shadow: none;
  z-index: 12 !important; /* ensure tiles stay above particle/flair canvas layers */

  /* prevent hairline seams from subpixel rendering by enabling GPU compositing */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

/* subtle image fade when a new layer image is set (prevents flash) */
.tile .layer{
  transition: opacity .48s ease, transform .42s ease, background-position .42s ease;
  will-change:opacity,transform,background-position;
  opacity:0;
}

/* subtle glossy foil/film sheen pseudo-layer to emulate glass/foil reflection */
.hero-mosaic .tile::before{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 0;
  mix-blend-mode: screen;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 6%, rgba(255,255,255,0.00) 18%);
  opacity: 0;
  transform: translateZ(140px) rotateX(8deg);
  transition: opacity .42s ease, transform .42s ease;
  will-change: opacity, transform;
}

/* Each tile has two overlapping layers for crossfade */
.tile .layer{
  position:absolute;inset:0;
  background-repeat:no-repeat;
  /* Use full 400% x 400% canvas so each tile samples the same large image area without stretching */
  background-size:400% 400%;
  /* background-position is set per-tile via inline styles in JS to ensure exact 0 / 33.333333 / 66.666667 / 100% positions */
  background-position: var(--bg-pos, 50% 50%);
  transition: opacity 900ms cubic-bezier(.2,.9,.18,1), transform 900ms cubic-bezier(.2,.9,.18,1);
  transform: scale(1.03);
  will-change:opacity,transform,background-position;
  opacity:0;

  /* allow each layer to receive 3D transforms and keep backfaces hidden */
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.tile .layer.active{opacity:1; transform: scale(1)}

/* Grain overlay: subtle tiled noise to add texture without heavy performance cost */
.grain{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:32;
  mix-blend-mode:overlay;
  opacity:0.07;
  /* layered tiny radial gradients create a noise-like speckle without images/base64 */
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.06) 1px, rgba(255,255,255,0.00) 1.5px),
    radial-gradient(circle, rgba(0,0,0,0.06) 1px, rgba(0,0,0,0.00) 1.5px);
  background-size:3px 3px, 5px 5px;
  background-position: 0 0, 2px 3px;
  transition:opacity .36s ease, transform .9s linear;
  will-change:opacity,transform;
}

/* subtle gray veil to add depth without grain */
.hero-veil{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(22,22,22,0.12), rgba(0,0,0,0.32));
  pointer-events:none;
  z-index:22;
  mix-blend-mode:normal;
  opacity:1;
  transition:opacity .36s ease;
}

/* per-tile reflection layer (pseudo element) */
.tile{
  position:relative;
  overflow:hidden;
}
.tile::after{
  content:'';
  position:absolute;
  left:-30%;
  top:-40%;
  width:160%;
  height:120%;
  background:linear-gradient(120deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 60%, rgba(255,255,255,0.0) 100%);
  transform:translateX(0) rotate(-12deg) scale(1.02);
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity .42s ease, transform .7s ease;
  pointer-events:none;
  will-change:opacity,transform;
}

/* Make horizontal and vertical seams match in thickness and subtlety */
.hero-mosaic .tile{
  border-right:1px solid rgba(0,0,0,0.08);
  border-bottom:1px solid rgba(0,0,0,0.08);
}

/* wipe overlay that moves from bottom to top (used as additional cinematic panel) */
.wipe-overlay{
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:100vh;
  min-height:100vh;
  background:#000000;
  transform:translateY(100%);
  transition:transform .24s linear, opacity .18s linear;
  /* raise above stacked sections so About content on the wipe is never covered by later sticky sections */
  z-index:70;
  pointer-events:none; /* keep container inert for pointer when fully hidden/animating */
  opacity:1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* allow interactive elements inside the wipe (the inner container) to receive pointer events */
.wipe-overlay .wipe-inner {
  pointer-events: auto;
}

/* content inside the wipe (About Me) */
.wipe-inner{width:100%;max-width:var(--max-width);padding:18px} /* match .container horizontal padding for alignment with header */
.wipe-grid{display:flex;gap:4rem;align-items:center;justify-content:space-between} /* uniform 4rem gutter and vertically center columns so left portrait lines up with right collage */
.wipe-inner .section-title{color:var(--fg);font-size:48px;margin:0 0 12px}
.wipe-inner .about-text{
  display:block;
  color:var(--fg);
  font-size:16px;
  line-height:1.6;
  /* tightened to match right collage width for a flush composition */
  max-width:520px;
  margin-bottom:18px;
  /* nudge text slightly down to better align with collage */
  transform: translateY(4px);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:16px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.03);
  /* increased glow + depth behind the text field */
  box-shadow: 0 20px 72px rgba(120,150,255,0.12), 0 6px 24px rgba(0,0,0,0.6);
}

/* Layout: show text beside collage on larger screens, above collage on small screens */
@media(min-width:900px){
  .about-right{ display:flex; flex-direction:column; gap:18px; align-items:flex-start; width:520px; }
  .about-text{ order:0; }
  /* push collage further down so its bottom aligns better with portrait */
  .about-collage{ order:1; width:100%; /* lowered slightly so bottom aligns with the large portrait */ margin-top:84px; }
}
@media(max-width:899px){
  .about-right{ width:100%; }
  .about-text{ width:100%; }
  .about-collage{ width:100%; grid-template-columns:1fr 1fr; margin-top:14px; }
}

/* About two-column cinematic layout */
.about-grid{align-items:stretch}
.about-left{
  flex:1;
  min-width:360px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:12px;
  position:relative; /* create containing block for absolute-positioned title */
  padding-top:46px; /* nudged up 10px so portrait aligns a bit higher with the collage */
}
.about-right{width:520px;display:flex;align-items:center;justify-content:center}

/* cards */
.about-card{width:100%;height:100%;border-radius:10px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,0.04);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .36s cubic-bezier(.2,.9,.2,1), box-shadow .36s}
.about-card img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;transform-origin:center center}
/* Bias portrait crop slightly higher so faces sit in frame more reliably */
.wipe-inner .portrait-img{ object-position:50% 28%; }
.about-card:focus{outline:2px solid rgba(255,255,255,0.06);outline-offset:4px}

/* left portrait dominance */
.about-left .about-card{max-width:720px;max-height:760px;/* stronger projection glow around large portrait */box-shadow:0 30px 110px rgba(120,150,255,0.08), 0 24px 84px rgba(0,0,0,0.66)}
.about-left .about-card img{filter:drop-shadow(0 10px 40px rgba(120,150,255,0.06)) saturate(1.05);opacity:0.96}

/* collage grid on the right */
.about-collage{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:140px;gap:14px;width:100%;margin-top:28px;}
.about-collage .about-card{height:100%;min-height:140px}

/* Click-to-reveal fullscreen overlay */
.about-reveal{
  position:fixed;inset:0;z-index:1400;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.88);backdrop-filter:blur(6px);padding:28px;
}
.about-reveal.active{display:flex}
.about-reveal .reveal-img{
  /* Keep image natural proportions, fit inside viewport without distortion */
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 84vh;
  border-radius:10px;
  /* intensified drop shadow + subtle bluish glow for fullscreen reveals */
  box-shadow:0 40px 140px rgba(6,24,70,0.55), 0 36px 120px rgba(120,150,255,0.06);
  transform-origin:center center;
  transition:transform .42s cubic-bezier(.2,.9,.18,1),opacity .28s;
  object-fit: contain;
  display:block;
  margin:0 auto;
}
.about-reveal .reveal-text{
  position:fixed;right:6vw;top:18vh;max-width:420px;color:#fff;font-size:18px;line-height:1.6;background:linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.42));padding:22px;border-radius:8px;box-shadow:0 18px 60px rgba(0,0,0,0.6)
}
.about-reveal .reveal-caption{display:none}

/* close button */
.about-reveal .reveal-close{position:fixed;right:22px;top:18px;background:transparent;border:0;color:#fff;font-size:28px;padding:12px;cursor:pointer;z-index:1500}
.about-reveal .reveal-close:focus{outline:2px solid rgba(255,255,255,0.08);border-radius:6px}

/* hide the page grain slightly while reveal open to reduce noise on text */
.about-reveal.active ~ .page-grain{opacity:0.03;transition:opacity .28s}

/* accessibility: make sure reveal text stacks on small screens */
@media(max-width:900px){
  .about-right{display:none}
  .about-left .about-card{max-width:100%;max-height:60vh}
  .about-reveal .reveal-text{position:fixed;left:6vw;right:6vw;top:auto;bottom:8vh;max-width:none}
  .about-reveal .reveal-img{max-height:52vh}
}

/* hero content */
.hero::before{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.36));z-index:20;pointer-events:none;
}
.hero-content{position:relative;z-index:40;text-align:center;padding:28px;max-width:1100px;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;transition:opacity .36s ease}
.hero-title{font-family:Playfair Display, serif;font-size:46px;margin:0;letter-spacing:0.04em;color:#fff;text-shadow:0 10px 48px rgba(6,24,70,0.6), 0 6px 28px rgba(120,150,255,0.06)}
.hero-sub{margin-top:10px;color:var(--muted);font-size:16px;max-width:720px;margin-left:auto;margin-right:auto;color:#eee}
.hero-ctas{display:flex;gap:12px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:6px;text-decoration:none;border:1px solid transparent;font-weight:600;cursor:pointer}
.btn-primary{background:#fff;color:#000;border-color:transparent}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.12)}

/* Sections */
/* Stackable sections: each section sticks to top and will cover previous ones while scrolling */
.section{
  padding:56px 0;
  position:sticky;
  top:0;
  height:100vh;
  min-height:100vh;
  display:block;
  background: transparent !important;
  color:#ffffff;
  z-index:0; /* actual z is set via JS to increment in document order */
}
.section-title{font-family:Playfair Display, serif;font-size:28px;margin:0 0 8px}
.lede{color:var(--muted);margin:0 0 18px}

/* Responsive tweaks */
@media(min-width:700px){
  .hero-title{font-size:78px}
  .container{padding:28px}
}

/* Grain overlay across entire page to add subtle film texture */
.page-grain {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1200;
  mix-blend-mode:overlay;
  opacity:var(--grain-opacity);
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.06) 1px, rgba(255,255,255,0.00) 1.5px),
    radial-gradient(circle, rgba(0,0,0,0.06) 1px, rgba(0,0,0,0.00) 1.5px);
  background-size:3px 3px, 5px 5px;
  background-position: 0 0, 2px 3px;
  transition:opacity .36s ease;
  animation: grainShift 6s linear infinite;
}

/* Cinematic glow applied to each visible layer for a soft projected light feel */
.tile .layer.active{
  /* subtle blue-white drop shadow to emulate glow */
  filter: drop-shadow(var(--tile-glow));
}

/* thumbnail / about interactions */
.about-thumbs .about-thumb{ transition: transform .18s ease, box-shadow .18s ease; }
.about-thumbs .about-thumb:hover, .about-thumbs .about-thumb:focus{ transform: translateY(-6px) scale(1.03); box-shadow: 0 10px 30px rgba(0,0,0,0.6); outline:0 }

/* Lightbox accessibility styles fallback for small screens */
@media (max-width:700px){
  #lightbox-figure img{ max-height:70vh }
}

/* Portrait hologram: soft edges, slight transparency and scanline overlay */
.wipe-inner .portrait-wrap{
  position:relative;
  isolation:isolate;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.45);
  border:1px solid rgba(255,255,255,0.04);
  overflow:visible;
  /* nudged further up so the large portrait vertically aligns tightly with the right collage */
  margin-top:-20px;
}

/* title placed left of the bio text, above the left portrait */
.wipe-inner .about-title{
  /* position the title left of the bio text and visually above the large portrait so all elements form one flush composition */
  position:absolute;
  left:0;
  top:-76px; /* moved up slightly more to remain flush with the nudged portrait */
  display:block;
  margin:0;
  font-family:Playfair Display, serif;
  font-size:36px;
  line-height:1.05;
  color:#fff;
  text-shadow:0 6px 22px rgba(0,0,0,0.7);
  z-index:6;
  background:linear-gradient(90deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02));
  padding:8px 12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.03);
  width:fit-content;
  transform:translateY(0);
}

/* remove the old portrait-title selector in favor of the new .about-title */

/* reduce title size on small screens for better fit */
@media(max-width:900px){
  .wipe-inner .portrait-wrap .portrait-title{ font-size:20px; left:12px; top:12px; padding:6px 8px; }
}

/* holographic image treatment */
.wipe-inner .portrait-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.92;
  border-radius:6px;
  filter: drop-shadow(0 6px 24px rgba(120,150,255,0.06)) saturate(1.05);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.95) 6%, rgba(0,0,0,0.95) 94%, rgba(0,0,0,1) 100%);
}

/* subtle scanline overlay on portrait (thin horizontal lines) */
/* Disabled to remove unwanted stripes over the portrait */
.wipe-inner .portrait-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  mix-blend-mode:screen;
  background-image: none;
  background-size: 0 0;
  border-radius:6px;
  opacity:0;
  transform:translateZ(0);
  pointer-events: none;
}

/* soft feather around portrait to feel like a projection */
.wipe-inner .portrait-wrap::before{
  content:"";
  position:absolute;
  left:-8%;
  top:-8%;
  width:116%;
  height:116%;
  border-radius:10px;
  /* deepen the subtle bluish halo behind portrait for a stronger projection feel */
  background: radial-gradient(closest-side, rgba(160,180,255,0.08), rgba(0,0,0,0));
  filter: blur(20px);
  pointer-events:none;
  z-index:-1;
}

/* ensure stacking sections keep sticky behavior and depth */
.section{
  padding:56px 0;
  position:sticky;
  top:0;
  height:100vh;
  min-height:100vh;
  display:block;
  background:#000000;
  color:#ffffff;
  z-index:0; /* actual z is set via JS to increment in document order */
  will-change:transform;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .tile .layer{transition:none !important;transform:none !important}
  .wipe-overlay{transition:none !important}
  .page-grain{display:none}
}

/* Sub-footer / Contact tweaks */
.sub-impressum{
  border-top: none;
  display:block;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  text-align:left;
  opacity:1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  pointer-events:auto;
}

/* ensure particles remain visible behind the sub-footer (no extra background) */
.section.contact, .sub-impressum {
  background: transparent !important;
  position:relative;
  z-index:40; /* keep above canvas/particles but consistent with other sections */
}



/* ensure sections sit on pure black background */
.section .container{color:inherit}

/* bring analytics section slightly higher to feel visually centred like Projects
   and ensure it can slide on top of previous sticky sections when in view */
.section.analytics {
  padding-top:60px;
  /* allow analytics to flow normally so users can scroll to see all Instagram cards */
  position: relative;
  top: auto;
  z-index: 95;
}

/* Give Selected Projects breathing room so it doesn't immediately cover the About-wipe;
   allow the section to expand so users can continue scrolling past Selected Projects while keeping visual spacing. */
.section.projects {
  padding-top:140px;
  padding-bottom:220px;
  /* allow normal document flow so users can scroll further down; layout spacing preserved */
  position: relative;
  top: auto;
  height: auto;
  min-height: 0;
  display: block;
}

/* Make project grid feel more centered and the cards more mid-aligned */
.projects-grid{
  display:grid;
  gap:18px;
  align-items:stretch;
  width:100%;
  margin:8px auto 0;
  justify-content:center; /* center grid content horizontally */
}

/* constrain individual cards so they read as a centered column on wide screens */
.project-card{
  background:#000;
  border:1px solid rgba(255,255,255,0.06); /* fine chrome detail */
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  border-radius:8px;
  transition:transform .24s ease, opacity .24s ease, box-shadow .24s ease;
  cursor:pointer;
  width:100%;
  max-width:460px; /* keep cards narrower to feel centered */
  margin:0 auto;
}

/* Projects grid (cinematic all-black, white text, fine chromed lines) */
.projects-grid{
  display:grid;
  gap:18px;
  align-items:stretch;
  width:100%;
  margin-top:8px;
}

/* Performance wrapper adjusted for strict analytics grid */
.performance-wrap{
  position:relative;
  background:#000;
  padding:22px;
  border-radius:8px;
  margin:0 auto 0;
  overflow:visible;
  border:0.5px solid rgba(255,255,255,0.02);
  max-width:var(--max-width);
  box-sizing:border-box;
}

/* faint background graph (removed watermark for readability) */
.perf-graph-bg{
  position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0; /* disabled background watermark for clarity */
}

/* Three-column minimal dashboard layout adjustments */
.analytics-grid.three-col-dashboard{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px; /* unified 20px gap as requested */
  align-items:start;
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  box-sizing:border-box;
}

/* Column wrapper */
.analytics-col{
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* Column header: logo + title */
.col-head{
  display:flex;
  align-items:center;
  gap:12px;
}
.col-logo{ height:36px; width:auto; display:block; }
.col-logo.small{ height:28px; opacity:0.95; }
.col-title{ font-size:14px; font-weight:600; color:#fff; }

/* Subsection inside a column (used to separate sub‑accounts like InOne) */
.col-subsection{
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed rgba(255,255,255,0.04);
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Slightly smaller title for subsection headers */
.col-subsection .col-title{
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,0.92);
}

/* Cards container in each column */
.col-cards{
  display:flex;
  flex-direction:column;
  gap:20px; /* consistent spacing */
}

/* Uniform perf-card sizing and chrome style */
.perf-card{
  background:transparent;
  border-radius:8px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  border:0.5px solid rgba(220,220,225,0.12); /* fine silver chrome */
  min-height:68px;
  box-sizing:border-box;
  transition:transform .14s ease, box-shadow .14s ease;
}

/* Highlight card variant */
.perf-card.highlight{
  border-color:rgba(255,255,255,0.14);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}

/* Small slate card */
.perf-card.slate{
  background:transparent;
  border-style:dashed;
  border-color:rgba(255,255,255,0.04);
}

/* Typography rules */
.perf-label{ font-family:Inter, sans-serif; font-size:12px; color:rgba(255,255,255,0.62); letter-spacing:0.12em; text-transform:none; margin:0; }
.perf-value{ font-size:28px; color:#fff; font-weight:700; line-height:1; font-family:Oswald, serif; }

/* Keep suffix smaller */
.perf-suffix{ font-size:14px; margin-left:6px; color:rgba(255,255,255,0.8); font-weight:600; }

/* Evidence button */
.evidence-btn{
  align-self:flex-start;
  padding:8px 12px;
  border-radius:8px;
  font-size:13px;
  display:inline-flex;
  gap:8px;
}

/* Production icon (film clap) styling */
.prod-icon{
  font-size:28px;
  opacity:0.9;
  margin-top:6px;
}

/* Explanatory text: aligned to same max width */
.perf-explain{ margin-top:18px; color:rgba(255,255,255,0.72); font-size:14px; max-width:var(--max-width); margin-left:auto; margin-right:auto; padding:8px 6px; box-sizing:border-box; }

/* Responsive: stack columns on small screens */
@media(max-width:899px){
  .analytics-grid.three-col-dashboard{ grid-template-columns: 1fr; }
  .col-head{ gap:8px; }
  .perf-value{ font-size:24px; }
}

/* Small responsive tweaks: collapse to single column on small screens */
@media(max-width:699px){
  .analytics-grid{ grid-template-columns: 1fr; }
  .viral-card{ grid-column: auto !important; }
}
@media(min-width:700px) and (max-width:1099px){
  .analytics-grid{ grid-template-columns: repeat(2,1fr); }
  .viral-card{ grid-column: 1 / -1; }
}
@media(min-width:1100px){
  .analytics-grid{ grid-template-columns: repeat(3,1fr); }
}

/* Channel context row above grid */
.channel-row{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:12px;
  padding:8px 6px;
}
.channel-left{ display:flex; align-items:center; gap:10px; }
.channel-avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:0.5px solid rgba(255,255,255,0.06); box-shadow:0 6px 18px rgba(0,0,0,0.6); }
.channel-copy .channel-line{ font-size:12px; color:rgba(255,255,255,0.66); letter-spacing:0.12em; text-transform:none; }
.channel-copy .channel-name{ font-size:14px; font-weight:700; color:#fff; margin-top:0; }

/* Instagram quick row styling (compact cards under analytics) */
.insta-row{ margin-top:12px; z-index:3; }
.insta-inner{ gap:14px; }
.insta-card{
  display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.04);
  min-width:220px; max-width:360px; color:#fff;
  transition:transform .18s ease, box-shadow .18s ease, background .18s;
}
.insta-card:hover{ transform:translateY(-6px); box-shadow:0 18px 48px rgba(0,0,0,0.6); background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }
.insta-avatar{ width:56px;height:56px;object-fit:cover;border-radius:8px;border:0.5px solid rgba(255,255,255,0.06);box-shadow:0 8px 28px rgba(0,0,0,0.6); }
.insta-copy{ display:flex;flex-direction:column; }
.insta-name{ font-weight:700;font-size:14px;color:#fff; }
.insta-stat{ font-size:13px;color:rgba(255,255,255,0.66); margin-top:2px; }

/* badge on the right */
.channel-badge{
  display:inline-block;
  font-size:12px; padding:6px 10px; border-radius:999px;
  background:transparent; color:#fff; border:0.5px solid rgba(255,255,255,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* Viral card styling: allow it to visually stand out and use provided screenshot as internal background */
.viral-card{
  /* keep chrome frame consistent */
  border:0.5px solid rgba(220,220,225,0.12);
  background-image: url('Screenshot 2026-02-13 190143.webp');
  background-size: cover;
  background-position: center;
  min-height:140px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:8px;
  padding:18px;
  color:#fff;
  /* slightly stronger inner contrast so text remains legible */
  background-repeat:no-repeat;
  position:relative;
  overflow:hidden;
}
/* subtle dark overlay to ensure text contrast over graph */
.viral-card::before{
  content:"";
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.42)); z-index:0;
}
.viral-card > * { position:relative; z-index:2; }

/* ensure the chrome border is applied same as other cards */
.perf-card{ box-shadow:none; }

/* explanatory text under the grid */
.perf-explain{
  margin-top:18px;
  color:rgba(255,255,255,0.7);
  font-family:Inter, sans-serif;
  font-size:14px;
  line-height:1.45;
  max-width:100%;
  padding:8px 6px;
}

/* keep spacing symmetric: channel row, grid gap and explanation share same horizontal alignment with cards */
.performance-wrap{ padding:22px; } /* preserved but ensures internal spacing symmetry */

/* adjust grid templates on larger screens so viral card spans full width under the four columns */
@media(min-width:1100px){
  .perf-grid{ grid-template-columns: repeat(4,1fr); grid-auto-rows: auto; }
  /* make the viral card span all columns to be visually wider and sit below the four stats */
  .viral-card{ grid-column: 1 / -1; }
}
@media(min-width:700px) and (max-width:1099px){
  .perf-grid{ grid-template-columns: repeat(2,1fr); }
  .viral-card{ grid-column: 1 / -1; }
}
@media(max-width:699px){
  .perf-grid{ grid-template-columns: 1fr; }
  .viral-card{ grid-column: auto; }
}
/* Desktop: 4 columns across the full width of the About headline */
@media(min-width:1100px){ .perf-grid{ grid-template-columns:repeat(4,1fr); } }
@media(min-width:700px) and (max-width:1099px){ .perf-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:699px){ .perf-grid{ grid-template-columns:1fr; } }

.perf-card{
  background:transparent;border-radius:8px;padding:18px;display:flex;flex-direction:column;gap:8px;
  border:0.5px solid rgba(220,220,225,0.12); /* thin chrome/silver finishing */
  transition:transform .18s ease, box-shadow .18s ease, background .18s;
  min-height:96px;
}
.perf-card:focus, .perf-card:hover{ transform:translateY(-6px); box-shadow:0 20px 60px rgba(0,0,0,0.6); outline:0; }

.perf-label{ font-family:Inter, sans-serif; font-size:13px; color:rgba(255,255,255,0.66); letter-spacing:0.18em; text-transform:none; }
.perf-sub{ font-family:Inter, sans-serif; font-size:13px; color:rgba(255,255,255,0.48); margin-top:auto; }

.perf-value{ font-size:36px; color:#fff; font-weight:700; line-height:1; letter-spacing:0.01em; }
.perf-value .perf-suffix{ font-size:18px; margin-left:6px; color:rgba(255,255,255,0.8); font-weight:600; }

/* Oswald numbers style */
.oswald{ font-family:Oswald, serif; font-weight:700; }

/* ensure cards read on pure black */
.performance-wrap, .perf-card{ background:transparent; }

/* small responsive tweaks */
@media(min-width:700px){
  .perf-value{ font-size:44px; }
}
@media(min-width:1100px){
  .perf-value{ font-size:48px; }
}
/* responsive columns: 3 / 2 / 1 */
@media(min-width:1100px){ .projects-grid{ grid-template-columns: repeat(3, 1fr); } }
@media(min-width:700px) and (max-width:1099px){ .projects-grid{ grid-template-columns: repeat(2, 1fr); } }
@media(max-width:699px){ .projects-grid{ grid-template-columns: 1fr; } }

.project-card{
  background:#000;
  border:1px solid rgba(255,255,255,0.06); /* fine chrome detail */
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  border-radius:8px;
  transition:transform .24s ease, opacity .24s ease, box-shadow .24s ease;
  cursor:pointer;
}
.project-card:hover, .project-card:focus{ transform:scale(1.02); opacity:0.96; box-shadow:0 18px 54px rgba(0,0,0,0.6); outline:0; }
.project-thumb{
  width:100%;
  aspect-ratio:16/9;
  border-radius:6px;
  overflow:hidden;
  background:linear-gradient(45deg,#111,#222);
  display:block;
  border:1px solid rgba(255,255,255,0.03);
}
.project-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Title & meta */
.project-title{ font-family:Oswald, serif; font-size:20px; margin:0; color:#fff; letter-spacing:0.02em; }
.project-meta{ font-family:Inter, sans-serif; font-size:13px; color:rgba(255,255,255,0.64); margin:0; }

/* Modal styles */
.project-modal{
  position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.92); backdrop-filter:blur(6px);
  padding:28px;
}
.project-modal-inner{
  width:min(980px,96%); max-height:92vh; overflow:auto; border-radius:8px; padding:22px;
  background:linear-gradient(180deg,#060606,#000);
  border:1px solid rgba(255,255,255,0.04);
  box-shadow:0 40px 140px rgba(0,0,0,0.8);
}
.project-modal-close{
  position:absolute; right:28px; top:20px; background:transparent; border:0; color:#fff; font-size:24px; padding:12px; cursor:pointer;
  border-radius:6px;
}
.project-modal-head{ margin-bottom:12px; }
.project-modal-title{ font-family:Oswald, serif; font-size:28px; margin:0; color:#fff; }
.project-modal-meta{ font-family:Inter; font-size:13px; color:rgba(255,255,255,0.58); margin:6px 0 0; }

.project-modal-body{ color:#ddd; font-family:Inter; font-size:15px; line-height:1.6; }
.project-modal-actions{ margin-top:14px; display:flex; gap:12px; align-items:center; }

.project-bts{ margin-top:14px; display:grid; gap:10px; grid-template-columns:repeat(3,1fr); }
@media(max-width:700px){ .project-bts{ grid-template-columns:repeat(3,1fr); } }
.project-bts .bts-item{ width:100%; aspect-ratio:1/1; border-radius:6px; background:linear-gradient(45deg,#111,#222); border:1px solid rgba(255,255,255,0.03); }

/* keep modal invisible by default; JS toggles display and aria-hidden appropriately */
.project-modal[aria-hidden="true"]{ display:none; }

/* ensure navbar sits on pure black */
.site-header{ background-color:#000; }

/* Focus styles */
:focus{outline:2px solid #111;outline-offset:2px}

/* --- overrides & final polish --- */

/* Stronger glassmorphism for cards as requested */
.project-card, .perf-card, .performance-wrap, .about-card, .project-modal-inner {
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  background: rgba(255,255,255,0.02) !important;
}

/* When particles drift behind cards, enforce heavier blur to reinforce depth hierarchy.
   This uses the backdrop-filter above and ensures cards visually soften background elements. */
.project-card{
  background: rgba(255,255,255,0.02) !important;
  border:1px solid rgba(255,255,255,0.04);
  box-shadow: 0 20px 80px rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  backdrop-filter: blur(30px) saturate(150%);
}

/* perf-card separate polish */
.perf-card{
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  backdrop-filter: blur(30px) saturate(150%);
  background: rgba(255,255,255,0.02);
}

/* Keep logo glow subtle and consistent */
.logo-link img{ filter: drop-shadow(0 10px 28px rgba(120,150,255,0.06)); }
/* Adjusted particle chrome: neutral grayscale cores and reduced coloured glow */
.particle{
  opacity:0.60 !important;
  /* remove colored ambient glow; use neutral grayscale halo that reads as subtle white/grey bloom */
  box-shadow:
    0 0 40px rgba(18,18,18,0.85) !important,   /* tighter darker halo */
    0 0 180px rgba(80,80,80,0.10) !important;  /* extended soft outer grey glow */
  /* near-black core with neutral grayscale falloff */
  background: radial-gradient(circle, rgba(10,10,10,1) 0%, rgba(24,24,24,0.96) 12%, rgba(44,44,44,0.60) 30%, rgba(72,72,72,0.20) 58%, rgba(0,0,0,0) 100%) !important;
  filter: blur(2px) !important;
}

/* Ensure flares sit visually behind content and behind the canvas stacking but still rendered (keep them behind UI) */
.atmo-flare{ z-index:-20; } /* push flares well behind hero/content */
.atmo-flare.flare-top-left{ z-index:-20; }
.atmo-flare.flare-bottom-right{ z-index:-20; }

/* --- BTS Gallery specific styles (3D carousel) --- */
.bts-container{ padding-top:12px; padding-bottom:64px; text-align:center; }

/* Slide-over overlays for Services and Contact to behave like the About wipe */
.section-overlay {
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:100vh;
  /* fully opaque black to prevent underlying sections showing through */
  background: #000000;
  z-index:2100; /* above almost everything to ensure it blocks underlying content */
  pointer-events:none;
  transform: translateY(100%);
  transition: transform .28s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* Animated black slide variant used specifically for Services (slides in quickly then out) */
@keyframes blackSlideInOut {
  0% { transform: translateY(-100%); opacity: 1; }
  20% { transform: translateY(0%); opacity: 1; }
  80% { transform: translateY(0%); opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}
.section-overlay.black-slide {
  /* temporary override: make the overlay visible and animate a slide across then away */
  transform: translateY(0%);
  pointer-events: none;
  animation: blackSlideInOut 1000ms cubic-bezier(.2,.9,.18,1) forwards;
}

/* inner content area inside overlay mirrors .container spacing */
.section-overlay .overlay-inner{
  width:100%;
  max-width:var(--max-width);
  padding:28px;
  box-sizing:border-box;
  pointer-events:auto; /* allow interactive elements inside when revealed */
}

/* ensure overlay text sits with same visual language */
.section-overlay h2, .section-overlay p {
  color: #fff;
}

/* Ensure Services and Contact overlays use solid black and sit clearly above content */
.section.services .section-overlay { background: #000000; z-index:2100; }
.section.contact .section-overlay { background: #000000; z-index:2100; }

/* reduced motion fallback: overlays start visible (no motion) */
@media (prefers-reduced-motion: reduce) {
  .section-overlay { transition: none; transform: translateY(0%); pointer-events:auto; }
}

.bts-title{
  font-size:34px;
  margin:0 0 8px;
  color:#fff;
  font-family:Oswald, sans-serif;
  letter-spacing:4px;
  text-align:center;
}

/* description text under headline */
.bts-container .lede{
  color: rgba(255,255,255,0.6);
  font-size:0.9rem;
  margin-top:12px;
  max-width:880px;
  margin-left:auto;
  margin-right:auto;
}

/* carousel wrapper: stronger perspective for real depth + absolute centering */
.bts-gallery{
  width:100%;
  min-height:28vh; /* tighter vertical footprint so carousel doesn't intrude into following section */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start; /* keep carousel positioned directly under the headline */
  perspective:1200px;
  perspective-origin:50% 38%; /* raise perspective origin so ring reads more level beneath the headline */
  position:relative;
  margin: 0 auto 24px;
  -webkit-tap-highlight-color: transparent;
}

/* a centered "anchor" that defines the exact rotational center of the ring
   -> make the carousel absolutely centered so the ring rotates around the exact center axis */
.bts-carousel{
  position:absolute;
  left:50%;
  top:150px; /* raised anchor so the carousel sits more directly under the headline */
  transform:translate(-50%, -40%); /* keep ring visually higher and a bit less pitched down */
  width: 140px;
  height:200px;
  pointer-events: auto;
  will-change: transform;
}

/* inner carousel ring that holds cards in 3D space */
.bts-carousel{
  position:absolute;
  left:50%;
  top:190px; /* tightened anchor to lift the ring and reduce the downward incline */
  transform-style:preserve-3d;
  transform-origin: center center;
  width:110px;
  height:160px;
  transition: transform 420ms cubic-bezier(.2,.9,.18,1);
  will-change:transform;
  touch-action: pan-y;
  pointer-events: auto;
}

/* individual card as 3D face — refined glass styling & reflection */
.bts-card{
  position:absolute;
  left:50%;
  top:50%;
  /* slightly larger cards to read better but still de-emphasized */
  width:120px;
  height:180px;
  transform-origin:center center;
  border-radius:12px;
  overflow:hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  box-shadow: 0 12px 40px rgba(0,0,0,0.82), 0 4px 12px rgba(0,0,0,0.55);
  cursor:grab;
  transition: transform 360ms cubic-bezier(.2,.9,.18,1), box-shadow 300ms, opacity 300ms, filter 300ms;
  display:flex;
  align-items:center;
  justify-content:center;
  will-change:transform,opacity,filter;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  outline: 1px solid rgba(255,255,255,0.06);
}

/* stronger visual emphasis for the front card (keeps it distinct) */
.bts-card.front{
  box-shadow: 0 36px 120px rgba(0,0,0,0.9), 0 10px 40px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.12);
}

/* ensure particles and flares remain behind the carousel anchor */
.bts-gallery .particles-canvas, .bts-gallery .atmo-flare{ z-index: -10; pointer-events:none; }

/* pressed cursor */
.bts-card:active{ cursor:grabbing; }

/* image fills card */
.bts-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform-origin:center center;
  transition: transform 420ms cubic-bezier(.2,.9,.18,1);
  backface-visibility:hidden;
  /* scale down images slightly to keep them visually lighter within the smaller card */
  transform: scale(0.98);
}

/* reflection at bottom (webkit only fallback, subtle) */
.bts-card::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18%;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
  pointer-events: none;
  transform: translateY(6px);
  mix-blend-mode: overlay;
  opacity: 0.8;
}

/* focused/front card */
.bts-card.front{
  opacity: 1 !important;
  filter: none !important;
  /* default front pop uses a compact depth value to match reduced radius */
  transform: translate3d(-50%, -50%, var(--z-front, 420px)) rotateY(var(--rot,0deg)) scale(1.04) !important;
  z-index: 60;
  box-shadow: 0 36px 120px rgba(0,0,0,0.78);
}

/* mid cards */
.bts-card.mid{
  opacity: 0.6;
  filter: blur(0.6px) saturate(0.96);
  z-index: 40;
}

/* back cards de-emphasized */
.bts-card.back{
  opacity: 0.38;
  filter: blur(2px) saturate(0.85);
  z-index: 20;
}

/* removed per-image inline captions; replaced with a dedicated viewer that shows image + side text */
.bts-viewer{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2600;
  background: rgba(0,0,0,0.88);
  gap:28px;
  padding:28px;
  box-sizing:border-box;
  pointer-events:auto;
}
.bts-viewer .viewer-img{
  width: clamp(320px, 58vw, 880px);
  max-height: 84vh;
  object-fit: contain;
  border-radius:10px;
  box-shadow: 0 40px 140px rgba(0,0,0,0.8), 0 12px 48px rgba(120,150,255,0.04);
  border:1px solid rgba(255,255,255,0.04);
  background:#000;
}
.bts-viewer .viewer-side{
  width: clamp(220px, 26vw, 360px);
  max-height: 84vh;
  overflow:auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:8px;
  padding:16px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.04);
  color:#fff;
  font-family:Inter, sans-serif;
  font-size:14px;
  line-height:1.5;
}
.bts-viewer .viewer-side .placeholder{
  color:rgba(255,255,255,0.56);
  font-style:italic;
}
.bts-viewer .viewer-close{
  position:absolute;
  right:20px;
  top:20px;
  z-index:2650;
  background:transparent;
  border:0;
  color:#fff;
  font-size:22px;
  padding:10px;
  cursor:pointer;
  border-radius:8px;
}
.bts-viewer.hidden{ display:none; }

/* compact / small screen: smaller carousel and cards */
@media(max-width:899px){
  /* mobile: keep carousel smaller and avoid overlapping the title */
  .bts-gallery{ height:420px; perspective:1100px; margin-top:8px; }
  .bts-carousel{ height:300px; top:200px; width:160px; }
  .bts-card{ width:120px; height:180px; border-radius:12px; }
  .bts-card.front{ transform: translate3d(-50%, -50%, 280px) scale(1.02) !important; }
}

/* keyboard focus */
.bts-card:focus{ outline:2px solid rgba(255,255,255,0.06); outline-offset:6px; transform: translate3d(-50%,-50%,240px) scale(1.03); }

/* pause auto-rotate when pointer over gallery */
.bts-gallery:hover .bts-carousel { transition: none; }

/* ensure atmosphere layer does not intercept pointer events */
.atmo-layer, .particles-canvas, .atmo-flare, #ambient-bg { pointer-events: none !important; }

/* --- Services / Booking styles --- */
/* Premium cards: chrome finish, lots of white space, thin 0.5px lines */
.premium-row{ margin-top:18px; }
.premium-card{
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  border: 0.5px solid rgba(255,255,255,0.06);
  padding:28px;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
  min-height:240px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.6);
  transition: transform .22s ease, box-shadow .22s ease;
}
.premium-card:focus, .premium-card:hover{ transform:translateY(-6px); box-shadow:0 36px 120px rgba(0,0,0,0.7); outline: none; }
.premium-head{ display:flex;align-items:center;justify-content:space-between;gap:12px; }
.premium-head h3{ margin:0;font-family:Playfair Display, serif;font-size:20px;color:#fff; }
.price{ font-weight:800;font-family:Oswald, serif;font-size:20px;color:#fff; }
.premium-list{ margin:0;padding:0 0 0 18px;color:rgba(255,255,255,0.78); font-size:14px; }
.premium-list li{ margin-bottom:8px; }
.premium-cta{ display:flex;justify-content:flex-start; }

/* Quick booking compact cards — same look but smaller */
.quick-row{ margin-top:6px; }
.quick-card{
  background: rgba(255,255,255,0.018);
  border: 0.5px solid rgba(255,255,255,0.06);
  padding:10px 14px;
  border-radius:10px;
  min-width:180px;
  font-weight:700;
  text-align:center;
  white-space:normal;
  display:inline-flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  justify-content:center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.quick-card:hover, .quick-card:focus{ transform:translateY(-4px); box-shadow:0 18px 48px rgba(0,0,0,0.6); outline: none; }

/* Booking modal styles */
.booking-modal{
  position:fixed;inset:0;z-index:2600;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.86);backdrop-filter:blur(6px);
  padding:18px;pointer-events:auto;
}
.booking-inner{
  width:min(820px,96%); max-height:92vh; overflow:auto; border-radius:10px; padding:22px;
  background: linear-gradient(180deg, rgba(6,6,6,0.98), rgba(0,0,0,0.98));
  border: 0.5px solid rgba(255,255,255,0.06);
  box-shadow:0 40px 140px rgba(0,0,0,0.8);
  display:flex;flex-direction:column;gap:12px;
}
.booking-close{ position:absolute; right:22px; top:18px; background:transparent;border:0;color:#fff;font-size:20px;padding:10px;cursor:pointer; }
.field-label{ font-size:13px;color:rgba(255,255,255,0.66); margin-bottom:6px; display:block; }
#booking-selected{ font-size:16px; color:#fff; }
/* slot chips */
.slot-chip{
  padding:8px 12px;
  border-radius:999px;
  border:0.5px solid rgba(255,255,255,0.06);
  background:transparent;
  color:#fff;
  font-weight:600;
  cursor:pointer;
}
.slot-chip.active, .slot-chip[aria-pressed="true"]{
  background: rgba(255,255,255,0.04);
  box-shadow: 0 10px 36px rgba(0,0,0,0.6), 0 4px 12px rgba(120,150,255,0.04);
}

/* quick-card visual upgrades (highlighted, chromed accents) */
.quick-booking-grid .quick-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:12px;
  padding:18px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.008));
  border: 0.5px solid rgba(255,255,255,0.06);
  box-shadow: 0 18px 54px rgba(0,0,0,0.6);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.quick-booking-grid .quick-card .quick-copy{ text-align:left; }
.quick-booking-grid .quick-card .quick-cta{ display:flex; gap:8px; }
.quick-booking-grid .quick-card:hover{ transform: translateY(-6px); box-shadow:0 36px 120px rgba(0,0,0,0.72); border-color: rgba(255,255,255,0.12); }

/* highlight each quick-card with subtle accent variants */
.quick-booking-grid .quick-card:nth-child(1){ border-color: rgba(255,120,60,0.08); box-shadow: 0 20px 70px rgba(255,120,60,0.03); }
.quick-booking-grid .quick-card:nth-child(2){ border-color: rgba(80,200,140,0.08); box-shadow: 0 20px 70px rgba(80,200,140,0.03); }
.quick-booking-grid .quick-card:nth-child(3){ border-color: rgba(120,140,255,0.08); box-shadow: 0 20px 70px rgba(120,140,255,0.03); }
.quick-booking-grid .quick-card:nth-child(4){ border-color: rgba(240,90,180,0.08); box-shadow: 0 20px 70px rgba(240,90,180,0.03); }

/* expertise radial selector styles */
.expert-wheel{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  padding:10px;
}
.expertise-card{
  padding:10px 12px;
  min-width:140px;
  border-radius:10px;
  background: rgba(255,255,255,0.02);
  border: 0.5px solid rgba(255,255,255,0.06);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition: transform .18s cubic-bezier(.2,.9,.18,1), box-shadow .18s, background .18s;
}
.expertise-card:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 18px 54px rgba(0,0,0,0.6); }
.expertise-card.active{ background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); border-color: rgba(255,255,255,0.12); box-shadow:0 28px 88px rgba(0,0,0,0.72); transform:translateY(-6px) scale(1.03); }

/* inputs inside modal */
#booking-form input[type="text"], #booking-form input[type="email"], #booking-form textarea{
  background: rgba(255,255,255,0.02);
  border: 0.5px solid rgba(255,255,255,0.06);
  color: #fff;
  padding:10px 12px;
  border-radius:8px;
  font-size:14px;
  width:100%;
  box-sizing:border-box;
  backdrop-filter: blur(20px);
}
#booking-form textarea{ resize:vertical; min-height:80px; }

/* disabled button state */
#bk-submit[disabled]{ opacity:0.5; cursor:not-allowed; }

/* responsive */
@media (max-width:899px){
  .premium-row{ grid-template-columns: 1fr; }
  .bts-carousel{ top:240px; }
}

/* --- Hero mosaic: subtle perpetual 3D rotation, mouse parallax & glass shine --- */
/* Per-tile floating rotation (kept very subtle) and reactive parallax */
.hero-mosaic .tile{
  transition: transform .28s ease, opacity .28s ease, box-shadow .28s ease;
  will-change: transform, box-shadow;
  transform-style: preserve-3d;
  perspective: 1400px;
  /* ensure each tile gets its own stacking context for depth */
  isolation: isolate;
  /* add narrow luminous edge */
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 40px rgba(0,0,0,0.6);
}

/* dynamic thin luminous rim separated from the chrome border for stronger catch */
.hero-mosaic .tile::before{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 0;
  mix-blend-mode: screen;
  /* glass sheen base (animated opacity controlled by JS via --sheen) */
  background: linear-gradient(120deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 12%, rgba(255,255,255,0.00) 28%);
  opacity: calc(var(--sheen, 0)*1);
  transform: translateZ(120px) rotateX(6deg);
  transition: opacity .28s ease, transform .5s ease;
  will-change: opacity, transform;
  /* 1px inner luminous edge */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

/* Shine stripe that glides diagonally and can be moved by JS */
.hero-mosaic .tile::after{
  content: '';
  position: absolute;
  left: -40%;
  top: -80%;
  width: 180%;
  height: 260%;
  pointer-events: none;
  background: linear-gradient(120deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.06) 34%,
    rgba(255,255,255,0.12) 44%,
    rgba(255,255,255,0.06) 52%,
    rgba(255,255,255,0.00) 100%);
  transform-origin: center;
  transform: var(--shine-transform, translateX(-20%) rotate(-12deg));
  opacity: var(--shine-opacity, 0);
  filter: blur(6px) saturate(1.05);
  transition: transform .42s cubic-bezier(.2,.9,.18,1), opacity .42s ease;
  mix-blend-mode: screen;
}

/* add a subtle frosted edge using backdrop-filter for tactile glass feel */
.hero-mosaic .tile .layer{
  backdrop-filter: blur(5px) saturate(120%);
  -webkit-backdrop-filter: blur(5px) saturate(120%);
  border-radius:0;
}

/* dynamic shadow driven by JS variables (offset + blur + alpha) */
.hero-mosaic .tile{
  --shadow-x: 0px;
  --shadow-y: 14px;
  --shadow-blur: 34px;
  --shadow-alpha: 0.56;
  box-shadow: calc(var(--shadow-x)) calc(var(--shadow-y)) calc(var(--shadow-blur)) rgba(0,0,0,var(--shadow-alpha));
}

/* state classes to help JS highlight front vs back positions */
.hero-mosaic .tile.is-front{ border-color: rgba(255,255,255,0.18); }

/* reduce intensity on small screens */
@media (max-width:700px){
  .hero-mosaic .tile::after{ filter: blur(5px); }
  .hero-mosaic .tile::before{ background: linear-gradient(120deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 12%, rgba(255,255,255,0.00) 28%); }
}

/* Reduced motion: disable gliding sheen and rotation */
@media (prefers-reduced-motion: reduce){
  .hero-mosaic .tile::after{ transition:none; animation:none; opacity:0; }
  .hero-mosaic .tile::before{ transition:none; opacity:0.06; }
  .hero-mosaic .tile{ transition:none; transform:none; box-shadow:none; }
}