:root{
  --bg: #15130f;
  --panel: #121219;
  --text: #e9e9f1;
  --muted: #a3a3b2;
  --line: #1f2030;
  --accent: #8a3cef;
  --accent-2: #04a2bb;
  --glow: #f6905c;
  --glow-2: #bb0404;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root{
    --bg: #f6f7fb;
    --panel: #ffffff;
    --text: #12131a;
    --muted: #57596b;
    --line: #e9eaf3;
    --accent: #6d28d9;
    --accent-2: #0891b2;
  }
}
*{box-sizing:border-box}
html{height:auto;   
  background-color: var(--bg);                 /* fallback color */
  background-image: url("images/whitesands.jpg");/* your photo path */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;                /* image stays still */
}
  

/* NEW: fixed overlay for gradients (never scrolls, no seams) */
.bg-gradients{
  position: fixed;
  inset: 0;
  pointer-events: none;         /* never blocks clicks */
  z-index: 0;                   /* behind content, in front of photo */
  background:
    radial-gradient(1000px 1300px at 80% -10%, rgba(119,72,226,.15), transparent 60%) no-repeat,
    radial-gradient(1000px 2000px at -10% 20%, rgba(34,211,238,.12), transparent 60%) no-repeat,
    radial-gradient(800px 1000px at 50% 10%, rgba(155,75,22,.05), transparent 40%) no-repeat;
  /* lock to the viewport to avoid parallax jitter */
  background-attachment: fixed, fixed, fixed;
  /* GPU-friendly to prevent hairline seams */
  transform: translateZ(0);
}

/* Body: no background painting (lets the photo + gradients show through) */
body{
  min-height: 10dvh; overflow: auto; 
  position: relative;
  background: transparent;
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.3; letter-spacing:.1px;
  margin:0;
}

/* Ensure your header/content sit above the gradient layer */
header{ z-index: 1000; }
  
a{color:inherit; text-decoration:none}
img, video{max-width:100%; display:block}
.container{width:min(972px, 92%); margin-inline:auto}

/* Header */
header{position:fixed; top:0; left:0; right:0; z-index:50; backdrop-filter: blur(12px); min-height: 20px; display:flex; padding-bottom: 14px; box-sizing: border-box; 
  
    /* 2) Soft fade at the bottom using a mask */
  /* Safari/WebKit */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 100%);
  
  /* Other browsers */
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);

  background: linear-gradient(to bottom, rgba(6,6,15,.95) 0%, rgba(11,11,15,.3) 70% , rgba(11,11,15,0) 100% ) ; border-bottom: 0px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:14px; letter-spacing:-0.7px; white-space: nowrap; 
}
.brand{display:flex; align-items: baseline; gap:12px}

/* Generic active style (works for any <a>) */
a[aria-current="page"] {
  color: #fad14e;
  text-shadow: 0 0 9px var(--glow), 0 0 11px var(--glow-2);
}

/* Optional: override specifically for the brand text, both structures */
a.brand[aria-current="page"] .brand__name,      /* when <a class="brand">… */


/* Brand link when active (index.html) */
.brand a[aria-current="page"] .brand__name {
  color: #fad14e; /* gold */
  text-shadow: 0 0 3px #e5c354, 0 0 14px #b8860b;
}

/* Brand link hover (always purple, no glow) */
.brand a:hover .brand__name {
  color: #9c27b0;
  text-shadow: none;
}

.brand__logo{width:28px; height:28px; border-radius:8px; background: conic-gradient(from 180deg at 50% 50%, var(--accent), var(--accent-2), var(--accent)); box-shadow:0 0 0 2px rgba(255,255,255,.06) inset}
.brand__name{font-weight:700; font-size: 2.4rem; color:#fad14e ; margin-top: -5px; letter-spacing:-1.5px}
.brand__name:hover { color: #9c27b0; transition: color 0.3s ease; }
.brand__tagline {
  font-size: 1.3rem; 
  transform: translateY(1.1px); 
  font-weight: 6; 
  color: #5555; 
  opacity:0.8; 
  letter-spacing:-2px;  
}
nav ul{display:flex; gap:32px; list-style:none; padding:0; margin: 0; transform: translateY(5px); }
.nav-director:hover { color: #ff1e1e; }
.nav-editor:hover { color: #0e9914; }
.nav-camera:hover { color: #0040ff; }
.nav-contact:hover { color: #ed6c00; }
.nav-imdb:hover { color: #fad14e; }
.nav-insta:hover { color: #ee10ae; }
.nav-linkedin:hover { color: #2196f3; }
.nav-imdb i{
  font-size: 1.3em;
  line-height: 1;
  margin-right: 2px;
  margin-left: 4px;
  transform: translateY(-1px);
  text-shadow: 0.1px 0 currentColor, 0.1px 0 currentColor;
}
.nav-insta i,
.nav-linkedin i {
  font-size: 1.3em;
  line-height: 1;
  transform: translateY(-1px);

  margin-right: 3px;

}

/* index active glow */
.nav-index[aria-current="page"] {
  color: #fad14e;
  text-shadow: 0 0 8px #ff4d4d, 0 0 14px #ff0000;
}


/* Director active glow */
.nav-director[aria-current="page"] {
  color: #ff4d4d;
  text-shadow: 0 0 8px #ff4d4d, 0 0 14px #ff0000;
}

/* Editor active glow */
.nav-editor[aria-current="page"] {
  color: #1ecf1e;
  text-shadow: 0 0 8px #1ecf1e, 0 0 14px #0e9914;
}

/* Camera active glow */
.nav-camera[aria-current="page"] {
  color: #4d79ff;
  text-shadow: 0 0 8px #4d79ff, 0 0 14px #0040ff;
}

/* Contact active glow */
.nav-contact[aria-current="page"] {
  color: #ff9933;
  text-shadow: 0 0 8px #ff9933, 0 0 14px #ed6c00;
}

/* IMDb active glow */
.nav-imdb[aria-current="page"] {
  color: #fad14e;
  text-shadow: 0 0 8px #fad14e, 0 0 14px #b8860b;
}

/* Insta active glow */
.nav-insta[aria-current="page"] {
  color: #ee10ae;
  text-shadow: 0 0 8px #ee10ae, 0 0 14px #9c27b0;
}

/* LinkedIn active glow */
.nav-linkedin[aria-current="page"] {
  color: #2196f3;
  text-shadow: 0 0 8px #2196f3, 0 0 14px #1565c0;
}

/* Store active glow */
.nav__cta[aria-current="page"] {
  background: linear-gradient(135deg, #ffd54f, #ff9800);
  color: #000;
  box-shadow: 0 0 10px #ffd54f, 0 0 20px #ff9800;
}


nav a { display: inline-flex; align-items: center; line-height:1; font-size: 1.1rem; border-radius:10px; font-weight:650; transition: color 0.3s ease; color:var(--muted)}
nav a[aria-current="page"]  {
    color: #ffc1c1;
    text-shadow: 0 0 9px var(--glow), 0 0 11px var(--glow-2);

}
nav a:hover{color:var(--glow); }
.nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-1px);
  padding: 4px 10px;
  line-height: 1;
  font-weight: 700;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
}
.nav__cta:hover {
  background: linear-gradient(135deg, #cf05ab, #1d00d7); transition: color 0.3s ease;
  color: #e1d16a;
}
.cta-text {
  display: inline-block;
  transform: translateY(-1px);
}
.menu-btn{display:none; border:1px solid var(--line); background:transparent; color:var(--text); padding:8px 10px; border-radius:10px}

@media (max-width: 972px){
  nav ul{display:flex; white-space: nowrap;
}
  .menu-btn{display:none}
  .mobile-panel{display:none; position:absolute; top:58px; left:0; right:0; background:var(--panel); border-bottom:1px solid var(--line)}
  .mobile-panel a{display:block; padding:14px 6vw; color:var(--muted)}
  .mobile-panel a:hover{background:rgba(255,255,255,.04); color:var(--text)}
}
.mobile-panel a i {
  margin-right: 6px;
  font-size: 0.9rem;
}





/* Hero */
.hero{position:relative; padding:96px 0 56px}
.hero__kicker{color:var(--muted); font-size:.95rem; letter-spacing:.3px}
.hero__title{font-family: "Playfair Display", serif; font-weight:700; font-size: clamp(36px, 6vw, 72px); line-height:1.05; margin:6px 0 14px}
.hero__subtitle{color:var(--muted); font-size: clamp(16px, 2.4vw, 20px); max-width: 70ch}
.hero__actions{display:flex; gap:12px; margin-top:22px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; border:1px solid var(--line); color:var(--text)}
.btn--primary{background:linear-gradient(135deg, var(--accent), var(--accent-2)); border:none; font-weight:700}

/* Sections */
.section{padding:56px 0}
.section__head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px}
.section__title{font-size: clamp(20px, 3vw, 28px); font-weight:800}
.section__desc{color:var(--muted)}
.video-wrap{position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:#000; box-shadow:var(--shadow)}
.video-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* Filters + Grid */
.filters{display:flex; gap:8px; flex-wrap:wrap}
.chip{padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:var(--muted); cursor:pointer; user-select:none}
.chip[aria-pressed="true"], .chip:hover{background:rgba(255,255,255,.05); color:var(--text)}
.grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border:1px solid var(--line); border-radius:16px; overflow:hidden; position:relative; box-shadow:var(--shadow)}
.card__thumb{position:relative; aspect-ratio:16/9; overflow:hidden}
.card__thumb img{width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition: transform .5s ease}
.card:hover .card__thumb img{transform:scale(1.08)}
.card__body{padding:14px}
.card__eyebrow{color:var(--muted); font-size:.85rem}
.card__title{font-weight:700; margin-top:4px}
.card__meta{display:flex; gap:10px; color:var(--muted); font-size:.85rem}

/* About */
.about{display:grid; grid-template-columns: 1.2fr .8fr; gap:26px}
@media (max-width:900px){.about{grid-template-columns:1fr;}}
.about__panel{background:var(--panel); border:1px solid var(--line); padding:22px; border-radius:16px}

/* Contact */
form{display:grid; gap:12px}
input, textarea{width:100%; background:#0e0e14; color:var(--text); border:1px solid var(--line); border-radius:12px; padding:12px}
textarea{min-height:120px; resize:vertical}

/* Footer */
footer{ padding:26px 0; margin-top:40px; color:var(--muted); color:#414141;}
.social{display:flex; gap:12px}
.social a{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px}


/* Animations */
.fade-in{opacity:0; transform:translateY(8px); animation:fade .7s ease forwards;}
.fade-in.delay-1{animation-delay:.1s}
.fade-in.delay-2{animation-delay:.2s}
.fade-in.delay-3{animation-delay:.3s}
@keyframes fade{to{opacity:1; transform:none}}



/* Nuke focus ring on all lightbox triggers and anything inside the lightbox */
a.lightbox-trigger,
a.lightbox-trigger:focus,
a.lightbox-trigger:focus-visible,
#lb-backdrop *:focus,
#lb-backdrop *:focus-visible,
#lb-close:focus,
#lb-close:focus-visible,
#lb-modal iframe:focus,
#lb-modal video:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Also kill mobile tap highlight on triggers */
a.lightbox-trigger {
  -webkit-tap-highlight-color: transparent;
}


/* ===== iOS / mobile Safari header offset fix ===== */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 900px) {

    /* Make header participate in layout on iOS */
    header {
      position: sticky !important;
      top: 0;
      z-index: 1000;

      /* disable blur/mask (Safari + fixed = offset bug) */
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      -webkit-mask-image: none !important;
      mask-image: none !important;
      background: rgba(6,6,15,0.92) !important;
    }

    /* No padding-top needed because header is in flow */
    body { padding-top: 0 !important; }

    /* Prevent scroll anchoring jumps */
    html, body { overflow-anchor: none; }

    /* Prevent fixed backgrounds from triggering the same bug */
    html { background-attachment: scroll !important; }
  }
}