/* ==========================================================================
   AI Driven Media — Main Stylesheet
   ========================================================================== */

/* ------------------------------ */
/* Variables & Global Resets      */
/* ------------------------------ */
:root{
  --bg:#0b0c10;
  --card:#121317;
  --text:#e5e7eb;
  --muted:#a1a1aa;
  --accent:#60a5fa;
  --accent-2:#a78bfa;
  --gold:#FFC857;

  /* Uniform media card height (you can tweak this) */
  --media-h: 320px;
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

html{
  /* ✅ Smooth scroll between sections */
  scroll-behavior:smooth;
}

body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

/* ------------------------------ */
/* Layout Helpers                 */
/* ------------------------------ */
.container{ max-width:1100px; margin:0 auto; padding:0 20px; }
.grid{ display:grid; gap:24px; }
.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .cols-3{ grid-template-columns:1fr; } }

/* ------------------------------ */
/* Header / Navigation            */
/* ------------------------------ */
.header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(180%) blur(12px);
  background:rgba(18,19,23,0.8);
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}

.nav .brand{
  display:flex; align-items:center; gap:12px;
}

.nav .brand img.logo{
  height:32px !important; width:32px !important; object-fit:contain; position:static !important;
}

.nav .links{ display:flex; align-items:center; gap:12px; }

.nav a{
  color:var(--text); text-decoration:none; margin:0 12px; opacity:.9; font-size:.95rem;
}
.nav a:hover{ opacity:1; color:var(--accent); }

#mobile-toggle{ display:none; }

@media (max-width:900px){
  .nav .links{ display:none; }
  .nav .links.open{
    display:flex; flex-direction:column; position:absolute; top:70px; left:0; width:100%;
    background:var(--card); padding:20px;
  }
  #mobile-toggle{ display:inline-block; }
}

/* ------------------------------ */
/* Buttons                        */
/* ------------------------------ */
.button{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff; border:0; padding:14px 28px; border-radius:999px; cursor:pointer;
  font-weight:600; text-decoration:none; transition:transform .2s;
}
.button.secondary{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); }
.button:hover{ transform:translateY(-2px); }

/* ------------------------------ */
/* Hero with Globe                */
/* ------------------------------ */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  /* Photo hero (PNG) */
  background:url('/assets/images/hero.png') center/cover no-repeat;
}

#globe-canvas{ position:absolute; inset:0; z-index:1; pointer-events:none; }
#globe-canvas canvas{ display:block; width:100% !important; height:100% !important; }

/* Golden bleed overlay (set by globe.js) */
#glow-overlay{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:0; transition:opacity .35s ease;
  background:
    radial-gradient(340px 200px at var(--glow-x,50%) var(--glow-y,50%), rgba(255,200,87,.28), transparent 65%),
    radial-gradient(520px 300px at var(--glow-x,50%) var(--glow-y,50%), rgba(255,200,87,.12), transparent 70%);
}

.hero .content{ position:relative; z-index:3; text-align:center; padding:0 20px; }
.hero h1{ font-size:clamp(2.5rem,5vw,4.5rem); margin:0; letter-spacing:-.02em; line-height:1.1; }
.gradient-text{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hero p{ color:var(--muted); font-size:clamp(1rem,2.5vw,1.25rem); max-width:700px; margin:20px auto; }
.hero .cta{ margin-top:18px; display:inline-flex; gap:12px; }

/* ------------------------------ */
/* Generic Sections / Cards       */
/* ------------------------------ */
.section{ padding:80px 0; }

.card{
  background:var(--card); border:1px solid rgba(255,255,255,0.06);
  border-radius:14px; padding:30px; transition:border-color .3s;
}
.card:hover{ border-color:var(--accent); }

/* ------------------------------ */
/* Feature Sections (Homepage)    */
/* ------------------------------ */
.feature-section{
  padding:90px 0;
  /* ✅ Section enter animation */
  opacity:0; transform:translateY(40px);
  transition:transform .8s ease, opacity .8s ease;
}
.feature-section.in{ opacity:1; transform:none; }

.feature-grid{
  display:grid; gap:28px; grid-template-columns:repeat(12,1fr); align-items:center;
}
.feature-text{ grid-column:span 5; }
.feature-media{ grid-column:span 7; }
@media (max-width:980px){
  .feature-text, .feature-media{ grid-column:1 / -1; }
}

/* ------------------------------ */
/* Media Cards — Forced sizing    */
/* ------------------------------ */
/* Frame styling */
.media-card{
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  overflow:hidden; position:relative;
  box-shadow:0 10px 40px rgba(0,0,0,0.25);
  will-change:transform, opacity;

  /* ✅ Uniform height (force-resize) */
  height:var(--media-h);
}

/* Accent wash */
.media-card::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(600px 180px at 30% 10%, rgba(255,166,0,0.12), transparent 60%);
  pointer-events:none;
}

/* Aspect helpers (preserved for layout, but height wins) */
.ar-16x9{ aspect-ratio:16 / 9; }
.ar-4x3 { aspect-ratio: 4 / 3; }
.ar-1x1 { aspect-ratio: 1 / 1; }

/* ✅ Force image to fill frame without distortion */
.media-card > img,
.media-card > video{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* ------------------------------ */
/* Scroll FX (used by scrollfx.js)*/
/* ------------------------------ */
.fx{
  opacity:0; transform:translateY(28px) scale(0.98);
  transition:transform .8s ease, opacity .8s ease;
}
.fx.in{ opacity:1; transform:none; }

.fx-zoom-in    { transform:scale(0.92); }
.fx-zoom-in.in { transform:scale(1); }

.fx-zoom-out    { transform:scale(1.06); }
.fx-zoom-out.in { transform:scale(1); }

.fx-dolly-in      { transform:translateZ(0) scale(0.90) translateY(20px); }
.fx-dolly-in.in   { transform:translateZ(0) scale(1)    translateY(0); }

.fx-dolly-out     { transform:translateZ(0) scale(1.10) translateY(20px); }
.fx-dolly-out.in  { transform:translateZ(0) scale(1)    translateY(0); }

/* ------------------------------ */
/* Portfolio Gallery Grid         */
/* ------------------------------ */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:16px;
}
.gallery-grid img{
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  display:block;
}

/* ------------------------------ */
/* Footer                         */
/* ------------------------------ */
.footer{
  padding:40px 0; color:var(--muted);
  border-top:1px solid rgba(255,255,255,0.06);
  text-align:center;
}

/* ------------------------------ */
/* Legacy Reveal (main.js)        */
/* ------------------------------ */
.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.visible{ opacity:1; transform:translateY(0); }

/* ------------------------------ */
/* Reduced Motion                 */
/* ------------------------------ */
@media (prefers-reduced-motion: reduce){
  .fx, .fx.in,
  .fx-zoom-in, .fx-zoom-in.in,
  .fx-zoom-out, .fx-zoom-out.in,
  .fx-dolly-in, .fx-dolly-in.in,
  .fx-dolly-out, .fx-dolly-out.in,
  .feature-section, .feature-section.in{
    transition:none !important;
  }
}