/* =========================================================
   DABAA MEDIA PRODUCTION — page-specific styles
   Reuses the exact tokens defined in style.css (:root vars,
   fonts, .btn, .eyebrow, section rhythm). Do not redefine
   colors/fonts here — only new layout/components live in
   this file so the base theme stays the single source of truth.
   ========================================================= */

/* ===== MEDIA HERO ===== */
.media-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:130px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 75% 55% at 80% 15%, rgba(138,92,246,0.32), transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 85%, rgba(245,194,99,0.14), transparent 60%),
    var(--void);
}

.media-hero-grid{
  position:relative;
  z-index:2;
  width:100%;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:40px;
  align-items:center;
}
@media(max-width:900px){
  .media-hero-grid{grid-template-columns:1fr;gap:56px;}
}

.media-hero-copy{max-width:560px;}
.media-hero h1{
  font-size:clamp(2.1rem,5.4vw,4rem);
  margin:18px 0 20px;
}
.media-hero h1 span{
  color:var(--gold);
  text-shadow:0 0 40px rgba(245,194,99,0.5);
}
.media-hero .lede{
  font-size:1.05rem;
  max-width:460px;
  color:var(--mist-dim);
  margin-bottom:34px;
}

/* --- camera visual stage --- */
.camera-stage{
  position:relative;
  aspect-ratio:1/1;
  max-width:460px;
  margin:0 auto;
  will-change:transform;
}
.camera-stage svg{width:100%;height:100%;display:block;overflow:visible;}

.lens-ring{
  transform-origin:center;
  transform-box:fill-box;
}
.lens-ring--outer{animation:lens-rotate 22s linear infinite;}
.lens-ring--inner{animation:lens-rotate-rev 16s linear infinite;}
@keyframes lens-rotate{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes lens-rotate-rev{from{transform:rotate(360deg);}to{transform:rotate(0deg);}}

.aperture-blade{
  transform-origin:center;
  transform-box:fill-box;
  animation:aperture-breathe 4.5s ease-in-out infinite;
}
@keyframes aperture-breathe{
  0%,100%{transform:scale(1);}
  50%{transform:scale(0.88);}
}

.rec-dot{animation:rec-pulse 1.6s ease-in-out infinite;}
@keyframes rec-pulse{
  0%,100%{opacity:1;}
  50%{opacity:0.35;}
}

.focus-bracket{
  opacity:0;
  animation:bracket-in 1.1s ease forwards;
}
.focus-bracket--tl{animation-delay:0.15s;}
.focus-bracket--tr{animation-delay:0.28s;}
.focus-bracket--bl{animation-delay:0.41s;}
.focus-bracket--br{animation-delay:0.54s;}
@keyframes bracket-in{
  from{opacity:0;transform:scale(1.14);}
  to{opacity:0.9;transform:scale(1);}
}

.shutter-flash{
  fill:var(--mist);
  opacity:0;
  animation:shutter-flash 5s ease-in-out infinite;
}
@keyframes shutter-flash{
  0%,92%,100%{opacity:0;}
  94%{opacity:0.35;}
  96%{opacity:0;}
}

@media(prefers-reduced-motion:reduce){
  .lens-ring--outer,.lens-ring--inner,.aperture-blade,.rec-dot,.shutter-flash{animation:none;}
  .focus-bracket{opacity:0.9;animation:none;}
}

/* ===== CATEGORIES ===== */
.media-categories{background:var(--void-soft);}

.category-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
@media(max-width:820px){
  .category-grid{grid-template-columns:1fr;}
}

.category-card{
  position:relative;
  min-height:420px;
  border-radius:24px;
  overflow:hidden;
  cursor:pointer;
  border:1px solid var(--hairline);
  background:var(--panel);
  isolation:isolate;
  transition:transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.4s ease, box-shadow 0.4s ease;
}
.category-card:hover,
.category-card:focus-visible{
  transform:translateY(-6px);
  border-color:rgba(216,180,255,0.45);
  box-shadow:0 30px 70px -24px rgba(138,92,246,0.5);
  outline:none;
}

.category-card__media{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
  transition:transform 0.7s cubic-bezier(.2,.8,.2,1);
}
.category-card:hover .category-card__media,
.category-card:focus-visible .category-card__media{
  transform:scale(1.1);
}

/* placeholder gradient stand-in until real thumbnails are wired up via CONFIG.categories[].thumbnailUrl */
.category-card__media--placeholder{
  background:
    radial-gradient(ellipse 90% 70% at 30% 20%, rgba(138,92,246,0.55), transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 90%, rgba(245,194,99,0.25), transparent 60%),
    linear-gradient(160deg,var(--panel),var(--void-soft));
}
.category-card__icon{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
}
.category-card__icon svg{
  width:72px;height:72px;
  stroke:rgba(239,233,251,0.22);
  fill:none;
  stroke-width:1.2;
  transition:transform 0.5s ease, stroke 0.5s ease;
}
.category-card:hover .category-card__icon svg{
  stroke:rgba(216,180,255,0.4);
  transform:scale(1.08);
}

.category-card__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(18,8,33,0) 30%, rgba(18,8,33,0.55) 65%, rgba(18,8,33,0.94) 100%);
  z-index:2;
}

.category-card__content{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:3;
  padding:32px;
}
.category-card__content h3{
  font-size:1.5rem;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:10px;
}
.category-card__content p{
  font-size:0.92rem;
  color:var(--mist-dim);
  max-width:340px;
}
.category-card__play{
  width:52px;height:52px;
  border-radius:50%;
  border:1.5px solid rgba(239,233,251,0.4);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
  background:rgba(18,8,33,0.35);
  backdrop-filter:blur(6px);
  transition:background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.category-card:hover .category-card__play{
  background:var(--gold);
  border-color:var(--gold);
  transform:scale(1.06);
}
.category-card__play svg{
  width:18px;height:18px;
  fill:var(--mist);
  transition:fill 0.3s ease;
  margin-left:2px;
}
.category-card:hover .category-card__play svg{fill:var(--void);}

@media(max-width:600px){
  .category-card{min-height:340px;}
  .category-card__content{padding:22px;}
  .category-card__content h3{font-size:1.25rem;}
}

/* ===== VIDEO MODAL ===== */
.video-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);
  background:rgba(9,4,17,0.92);
  backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.35s ease, visibility 0.35s ease;
}
.video-modal.is-open{opacity:1;visibility:visible;}

.video-modal__frame{
  position:relative;
  width:min(94vw,1200px);
  max-height:88vh;
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  background:#000;
  box-shadow:0 40px 100px -30px rgba(0,0,0,0.7), 0 0 0 1px var(--hairline);
  transform:scale(0.94) translateY(18px);
  transition:transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.video-modal.is-open .video-modal__frame{transform:scale(1) translateY(0);}

@media(max-width:720px){
  .video-modal__frame{
    width:100vw;
    max-height:100vh;
    height:100vh;
    aspect-ratio:auto;
    border-radius:0;
  }
}

.video-modal__video{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:#000;
}

.video-modal__close{
  position:absolute;
  top:18px;right:18px;
  z-index:5;
  width:44px;height:44px;
  border-radius:50%;
  border:1.5px solid rgba(239,233,251,0.35);
  background:rgba(18,8,33,0.55);
  backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background 0.25s ease, transform 0.25s ease;
}
.video-modal__close:hover{background:var(--gold);transform:rotate(90deg);}
.video-modal__close svg{width:18px;height:18px;stroke:var(--mist);transition:stroke 0.25s ease;}
.video-modal__close:hover svg{stroke:var(--void);}

.video-modal__whatsapp{
  position:absolute;
  top:18px;
  left:18px;
  z-index:5;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  border-radius:100px;
  background:var(--gold);
  color:var(--void);
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:0.86rem;
  text-decoration:none;
  box-shadow:0 12px 30px -8px rgba(245,194,99,0.55);
  transition:transform 0.25s ease;
}
.video-modal__whatsapp:hover{transform:translateY(-2px);}
.video-modal__whatsapp svg{width:16px;height:16px;fill:var(--void);}

@media(max-width:600px){
  .video-modal__close{top:calc(env(safe-area-inset-top,0) + 14px);right:14px;width:40px;height:40px;}
  .video-modal__whatsapp{
    top:auto;
    bottom:calc(env(safe-area-inset-bottom,0) + 20px);
    left:50%;
    transform:translateX(-50%);
    white-space:nowrap;
  }
  .video-modal__whatsapp:hover{transform:translateX(-50%) translateY(-2px);}
}

.video-modal__loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--mist-dim);
  font-size:0.85rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  z-index:1;
}

body.modal-lock{overflow:hidden;height:100%;}