/* ===================================================================
   DANNY GHOSEN — STYLE.CSS
   Paleta: negro carbón + dorado editorial + textura granulada
=================================================================== */

:root{
  --black:        #050505;
  --black-soft:   #0c0c0c;
  --charcoal:     #161616;
  --gold:         #d9a93a;
  --gold-bright:  #f5c542;
  --gold-deep:    #9c7a1f;
  --white:        #f4f1ea;
  --grey:         #8a8a8a;

  --font-display: 'Anton', 'Oswald', sans-serif;
  --font-body:    'Oswald', sans-serif;

  --section-pad-y: clamp(64px, 10vw, 120px);
  --container-w: 1240px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

::selection{ background:var(--gold); color:var(--black); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* film-grain texture overlay across whole site */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===================== LOADER ===================== */
.page-loader{
  position:fixed; inset:0; z-index:10000;
  background:var(--black);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.page-loader.is-hidden{ opacity:0; visibility:hidden; }
.loader-mark{
  font-family:var(--font-display);
  font-size:2rem;
  color:var(--gold);
  letter-spacing:.1em;
  animation:pulseLoader 1.1s ease-in-out infinite;
}
@keyframes pulseLoader{
  0%,100%{ opacity:.3; transform:scale(.92); }
  50%{ opacity:1; transform:scale(1); }
}

/* ===================== UTILITY ===================== */
.gold-title{
  font-family:var(--font-display);
  text-align:center;
  font-size:clamp(2.4rem, 6vw, 4.2rem);
  letter-spacing:.04em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:clamp(32px,6vw,56px);
}
.gradient-title{
  background:linear-gradient(180deg, var(--gold-bright) 0%, var(--gold-deep) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 6px 18px rgba(217,169,58,.18));
}

.reveal-on-scroll{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  will-change:opacity, transform;
}
.reveal-on-scroll.in-view{
  opacity:1;
  transform:translateY(0);
}

/* stagger children that opt in */
.reveal-stagger > *{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-stagger.in-view > *{ opacity:1; transform:translateY(0); }

/* ===================== HEADER / NAV ===================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:18px clamp(20px,4vw,56px);
  display:flex; align-items:center;
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.scrolled{
  background:rgba(5,5,5,.88);
  backdrop-filter:blur(10px);
  padding:10px clamp(20px,4vw,56px);
  box-shadow:0 4px 24px rgba(0,0,0,.4);
}

.nav-inner{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  max-width:1440px; margin:0 auto;
}

/* nav entrance animation, staggered by --d custom property */
.nav-anim{
  opacity:0;
  transform:translateY(-14px);
  animation:navDrop .6s var(--ease) forwards;
  animation-delay:calc(var(--d, 0) * 80ms + .15s);
}
@keyframes navDrop{
  to{ opacity:1; transform:translateY(0); }
}

.nav-logo img{ height:58px; transition:height .4s var(--ease); }
.site-header.scrolled .nav-logo img{ height:44px; }

.nav-links{
  display:flex; align-items:center; gap:clamp(16px,2.4vw,34px);
}
.nav-link{
  font-family:var(--font-body);
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold);
  position:relative;
  padding:6px 2px;
  display:flex; align-items:center; gap:5px;
  transition:color .3s;
}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--gold-bright);
  transition:width .3s var(--ease);
}
.nav-link:hover{ color:var(--gold-bright); }
.nav-link:hover::after{ width:100%; }

.nav-dropdown{ position:relative; }
.nav-dropdown-trigger svg{ transition:transform .3s var(--ease); }
.nav-dropdown:hover .nav-dropdown-trigger svg{ transform:rotate(180deg); }

.nav-dropdown-menu{
  position:absolute; top:calc(100% + 18px); left:50%;
  transform:translate(-50%,8px);
  min-width:240px;
  background:rgba(10,10,10,.97);
  border:1px solid rgba(217,169,58,.25);
  border-radius:4px;
  padding:8px;
  opacity:0; visibility:hidden;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.nav-dropdown:hover .nav-dropdown-menu{
  opacity:1; visibility:visible; transform:translate(-50%,0);
}
.nav-dropdown-menu a{
  display:block;
  font-size:.78rem; letter-spacing:.04em;
  color:var(--white);
  padding:9px 14px;
  border-radius:3px;
  transition:background .2s, color .2s, padding-left .2s;
}
.nav-dropdown-menu a:hover{
  background:rgba(217,169,58,.12);
  color:var(--gold-bright);
  padding-left:18px;
}

.nav-socials{ display:flex; gap:14px; }
.social-dot{
  width:48px; height:48px; border-radius:50%;
  background:var(--black-soft);
  border:1px solid rgba(217,169,58,.25);
  display:flex; align-items:center; justify-content:center;
  color:var(--white);
  transition:background .3s, color .3s, transform .3s var(--ease);
}
.social-dot:hover{ background:var(--gold); color:var(--black); transform:translateY(-3px); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  width:30px; padding:6px;
}
.nav-toggle span{
  width:100%; height:2px; background:var(--gold);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ===================== HERO ===================== */
.hero{
  position:relative;
  height:100vh; min-height:450px;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:-12% -8% -12% -8%;
  background-size:cover; background-position:center 18%;
  will-change:transform;
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.05) 65%, rgba(0,0,0,.55) 100%);
}

.scroll-indicator{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:2;
  width:1px; height:46px;
  background:rgba(217,169,58,.3);
  overflow:hidden;
}
.scroll-indicator span{
  position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--gold-bright);
  animation:scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{ top:-100%; }
  60%{ top:100%; }
  100%{ top:100%; }
}

/* ===================== BIO ===================== */
.bio-section{
  position:relative;
  padding:var(--section-pad-y) clamp(20px,5vw,80px);
  overflow:hidden;
}
.bio-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.bio-overlay{
  position:absolute; inset:0;
  background:rgba(4,4,4,.86);
}

.bio-inner{
  position:relative; z-index:1;
  max-width:var(--container-w); margin:0 auto;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:clamp(32px,5vw,64px);
  align-items:center;
}

.bio-image-col{ position:relative; }
.bio-image-col img{
  width:100%;
  filter:grayscale(.15) contrast(1.05);
  border:0px solid rgba(217,169,58,.18);
}

.bio-tabs{
  display:flex; gap:28px;
  border-bottom:1px solid rgba(217,169,58,.2);
  margin-bottom:24px;
}
.bio-tab{
  font-size:.85rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600;
  color:var(--grey);
  padding-bottom:12px;
  position:relative;
  transition:color .3s;
}
.bio-tab::after{
  content:""; position:absolute; left:0; bottom:-1px;
  width:0; height:2px; background:var(--gold);
  transition:width .3s var(--ease);
}
.bio-tab.active{ color:var(--gold); }
.bio-tab.active::after{ width:100%; }

.bio-panel p{
  color:rgba(244,241,234,.9);
  font-size:clamp(1.05rem, 1.4vw, 1.22rem);
  line-height:1.75;
  margin-bottom:20px;
}
.bio-panel p:last-child{ margin-bottom:0; }

/* ===================== VIDEO (full-bleed background, autoplay loop) ===================== */
.video-section{
  background:var(--black);
  width:100%;
}
.video-bg-wrap{
  position:relative;
  width:100%;
  height:100vh;
  min-height:560px;
  overflow:hidden;
  background:var(--black);
}
.video-bg-iframe{
  position:absolute;
  top:50%; left:50%;
  /* oversize so the 16:9 video always fully covers the wrap — no black bars, edges get cropped instead */
  width:177.78vh;     /* 16/9 * 100vh */
  height:56.25vw;     /* 9/16 * 100vw */
  min-width:100%;
  min-height:100%;
  transform:translate(-50%,-50%);
  border:0;
  pointer-events:none;
}

/* ===================== PROGRAMMAS ===================== */
.programmas-section{
  padding:var(--section-pad-y) clamp(20px,5vw,80px);
  background:var(--black);
}

.programmas-stage{
  position:relative;
  max-width:var(--container-w); margin:0 auto;
  overflow:hidden;
  border:0px solid rgba(217,169,58,.18);
  margin-bottom:18px;
}
.programmas-stage .stage-bg{
  position:relative; display:block;
  width:100%; height:auto;
}

.programmas-thumbs{
  max-width:var(--container-w); margin:0 auto;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}
.thumb{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  border:2px solid transparent;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.thumb img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease), filter .4s var(--ease);
  filter:brightness(.7);
}
.thumb span{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.85) 70%);
  color:var(--white);
  font-size:.68rem; letter-spacing:.03em; font-weight:500;
  padding:18px 8px 8px;
  opacity:0; transform:translateY(8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.thumb:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(0,0,0,.45); }
.thumb:hover img{ transform:scale(1.08); filter:brightness(.9); }
.thumb:hover span{ opacity:1; transform:translateY(0); }
.thumb.active{ border-color:var(--gold); }
.thumb:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }

/* ===================== INSTAGRAM ===================== */
.instagram-section{
  padding:var(--section-pad-y) clamp(20px,5vw,80px);
  background:var(--black);
  text-align:center;
}
.section-banner{
  display:block;
  max-width:min(100%, 480px);
  height:auto;
  margin:0 auto clamp(28px,5vw,48px);
}
.instagram-grid{
  max-width:var(--container-w); margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.instagram-post-slot{
  min-height:340px;
  background:var(--charcoal);
  border:1px solid rgba(217,169,58,.15);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
/* Instagram's own embed script renders an iframe inside the blockquote —
   force it to respect the slot width instead of Instagram's default fixed width */
.instagram-post-slot iframe{
  width:100% !important;
  max-width:100% !important;
}
.instagram-post-slot blockquote.instagram-media{
  margin:0 !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}
 
.instagram-follow{
  display:inline-block;
  margin-top:32px;
  font-size:.85rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold);
  border:1px solid var(--gold);
  padding:12px 28px;
  transition:background .3s, color .3s, transform .3s var(--ease);
}
.instagram-follow:hover{ background:var(--gold); color:var(--black); transform:translateY(-2px); }

/* ===================== MEDIA ===================== */
.media-section{
  padding:var(--section-pad-y) clamp(20px,5vw,80px);
  background:var(--black);
}
.media-subsection{ max-width:var(--container-w); margin:0 auto; margin-bottom:64px; }
.media-subsection:last-child{ margin-bottom:0; }

.media-subtitle{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2.6vw,1.9rem);
  color:var(--gold-bright);
  letter-spacing:.03em;
  text-transform:uppercase;
  display:flex; align-items:center; gap:12px;
  margin-bottom:22px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(217,169,58,.18);
}
.media-icon{ font-size:1.2rem; }

.media-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.media-card{
  background:var(--charcoal);
  border:1px solid rgba(217,169,58,.12);
  display:grid;
  grid-template-rows:200px auto 1fr;
  overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
  position:relative;
}
.media-card:hover{
  transform:translateY(-6px);
  border-color:var(--gold);
  box-shadow:0 18px 36px rgba(0,0,0,.45);
}
.media-card-img{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
  transition:transform .5s var(--ease), filter .4s var(--ease);
  filter:brightness(.85);
}
.media-card:hover .media-card-img{ transform:scale(1.05); filter:brightness(1); }
.media-tag{
  position:absolute;
  top:10px; left:10px;
  background:var(--gold);
  color:var(--black);
  font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  padding:4px 9px;
  z-index:1;
}
.media-card p{
  padding:14px 14px 16px;
  font-size:.82rem;
  color:rgba(244,241,234,.85);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}








.load-more-btn{
  display:block;
  margin:28px auto 0;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color:var(--black);
  background:var(--gold);
  padding:12px 34px;
  transition:background .3s, transform .3s var(--ease);
}
.load-more-btn:hover{ background:var(--gold-bright); transform:translateY(-2px); }
.load-more-btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

/* ===================== CONTACT ===================== */
.contact-section{
  padding:var(--section-pad-y) clamp(20px,5vw,80px) calc(var(--section-pad-y) + 20px);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(217,169,58,.06), transparent 60%),
    var(--black);
}
.contact-form{
  max-width:560px; margin:0 auto;
}
.field-group{ margin-bottom:20px; }
.field-group label{
  display:block;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:8px;
}
.field-group input,
.field-group textarea{
  width:100%;
  background:var(--white);
  color:#111;
  border:1px solid transparent;
  padding:12px 14px;
  font-family:var(--font-body);
  font-size:.95rem;
  transition:box-shadow .25s, border-color .25s;
  resize:vertical;
}
.field-group input:focus,
.field-group textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(217,169,58,.25);
}
.hidden-field{ position:absolute; left:-9999px; }

.submit-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gold);
  color:var(--black);
  font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  padding:13px 36px;
  transition:background .3s, transform .3s var(--ease);
}
.submit-btn:hover{ background:var(--gold-bright); transform:translateY(-2px); }
.submit-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

.form-status{
  margin-top:14px;
  font-size:.85rem;
  min-height:1.2em;
}
.form-status.success{ color:#7fd99a; }
.form-status.error{ color:#e58b8b; }

/* ===================== FOOTER ===================== */
.site-footer{
  padding:28px 20px;
  text-align:center;
  font-size:.78rem;
  color:rgba(244,241,234,.4);
  border-top:1px solid rgba(217,169,58,.1);
}

.back-to-top{
  position:fixed; right:20px; bottom:20px; z-index:500;
  width:42px; height:42px;
  background:var(--gold);
  color:var(--black);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .3s;
}
.back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--gold-bright); }

/* ===================================================================
   RESPONSIVE
=================================================================== */
@media (max-width:1024px){
  .bio-inner{ grid-template-columns:1fr; }
  .media-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  align-items:stretch;
}
  .programmas-thumbs{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:780px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:fixed; top:0; right:0;
    height:100vh; width:min(78vw,320px);
    background:rgba(5,5,5,.98);
    flex-direction:column; align-items:flex-start;
    padding:100px 28px 40px;
    transform:translateX(100%);
    transition:transform .4s var(--ease);
    gap:22px;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-dropdown{ width:100%; }
  .nav-dropdown-menu{
    position:static; transform:none; opacity:1; visibility:visible;
    display:none; margin-top:10px; min-width:0; border:none; background:none; padding:0 0 0 10px;
  }
  .nav-dropdown.open .nav-dropdown-menu{ display:block; }
  .nav-socials{ display:none; }

  .programmas-thumbs{ grid-template-columns:repeat(2,1fr); }
  .media-grid{ grid-template-columns:1fr; }
}