/*
 * HexPro Cinematic Hero Shell
 * One visual source of truth for: Cinema single, Collection child hero,
 * Home cinema slider, Archive Manager heroes and Hex Lists heroes.
 * Content/layout stays with each module; frame/effects/curve/ambience live here.
 */
.hex-cinematic-shell{
  --hex-cinematic-top:0px;
  --hex-cinematic-width:100%;
  --hex-cinematic-max-width:120rem;
  --hex-cinematic-radius:28px;
  --hex-cinematic-accent:#fcd535;
  --hex-cinematic-bg:#050505;
  /* Frame shade is shared by default; slider contexts can provide a lighter
   * variant without replacing/removing the layer itself. */
  --hex-cinematic-frame-shade:
    linear-gradient(180deg,#0000 60%,#00000002 63.33%,#00000008 66.67%,#00000013 70%,#0002 73.33%,#00000035 76.67%,#0000004d 80%,#00000064 83.33%,#0007 86.67%,#00000086 90%,#00000091 93.33%,#00000097 96.67%,#0009 100%),
    linear-gradient(-55deg,#000 6.28%,#0009 31.1%,#0000 48.12%);
  --hex-cinematic-frame-shade-z:1;
  position:relative;
  isolation:isolate;
  overflow:visible;
}

.hex-cinematic-frame{
  position:relative;
  width:var(--hex-cinematic-width);
  max-width:var(--hex-cinematic-max-width);
  min-height:18.75rem;
  margin:0 auto;
  overflow:hidden;
  border-radius:var(--hex-cinematic-radius);
  background:var(--hex-cinematic-bg);
}
.hex-cinematic-frame::before{
  content:"";
  position:absolute;
  inset:0;
  padding:2px;
  border-radius:var(--hex-cinematic-radius);
  background:radial-gradient(at top left,#ffffff26 25%,transparent 70%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  z-index:100;
  pointer-events:none;
}
.hex-cinematic-frame::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--hex-cinematic-radius);
  pointer-events:none;
  z-index:var(--hex-cinematic-frame-shade-z,1);
  padding:2px;
  background:var(--hex-cinematic-frame-shade);
}

.hex-cinematic-effects,
.hex-cinematic-ambient-glow,
.hex-cinematic-curve-wrap{
  position:absolute;
  top:var(--hex-cinematic-top);
  left:50%;
  width:var(--hex-cinematic-width);
  max-width:var(--hex-cinematic-max-width);
  min-height:18.75rem;
  aspect-ratio:16 / 9;
  transform:translateX(-50%);
  pointer-events:none;
}
.hex-cinematic-effects{z-index:0;overflow:visible}
.hex-cinematic-effects__radials{
  position:absolute;
  z-index:1;
  top:0;
  bottom:0;
  left:50%;
  width:160rem;
  max-width:none;
  transform:translateX(-50%);
  overflow:visible;
  background:
    radial-gradient(11% 50% at 17% 50%,#73500a61 0%,#fcd5351a 42%,transparent 100%),
    radial-gradient(11% 50% at 83% 50%,#73500a61 0%,#fcd5351a 42%,transparent 100%);
}
.hex-cinematic-effects__line{
  position:absolute;
  top:28px;
  bottom:28px;
  left:calc(50% - .25rem);
  z-index:2;
  width:120.5rem;
  max-width:calc(100% + .5rem);
  transform:translate(calc(-50% + .25rem),0);
  overflow:visible;
  background:linear-gradient(0deg,transparent 0%,#fcd535b0 50%,transparent 100%);
}
.hex-cinematic-ambient-glow{z-index:1;overflow:visible}
.hex-cinematic-ambient-glow::before{
  content:"";
  position:absolute;
  left:50%;
  top:calc(100% - 2.15rem);
  width:min(58%,60rem);
  height:8.25rem;
  transform:translateX(-50%);
  background:radial-gradient(ellipse 80% 48% at 50% 0%,#fcd53529 0%,#fcd53513 42%,#fcd53506 68%,transparent 94%);
  filter:blur(12px);
  opacity:.82;
}
.hex-cinematic-curve-wrap{
  z-index:4;
  overflow:visible;
  border-radius:var(--hex-cinematic-radius);
  background:transparent;
}
.hex-cinematic-curve{position:absolute;inset:0;overflow:visible;background:transparent}
.hex-cinematic-curve::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  background:linear-gradient(to right,transparent 7%,#3a28044d 16%,#a6740d9e 34%,#fcd535f5 50%,#a6740d9e 66%,#3a28044d 84%,transparent 93%);
  -webkit-mask-image:radial-gradient(102% 10% at 50% 102%,transparent 49.45%,#000 50.15%,#000 52.25%,transparent 53.05%);
  mask-image:radial-gradient(102% 10% at 50% 102%,transparent 49.45%,#000 50.15%,#000 52.25%,transparent 53.05%);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

/* Shared blur treatment for static and slider ambient artwork. */
.hex-cinematic-ambient-layer{
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  filter:blur(32px);
  transform:scale(1.1);
}

/* Static hero page ambience. */
.hex-cinematic-ambient-bg{
  position:fixed;
  top:0;
  right:0;
  left:0;
  z-index:-1;
  width:100%;
  height:120vh;
  object-fit:cover;
  opacity:.15;
  -webkit-mask-image:linear-gradient(180deg,#d9d9d9 78.62%,#73737300 100%);
  mask-image:linear-gradient(180deg,#d9d9d9 78.62%,#73737300 100%);
  transition:background-image .2s ease-in-out;
  pointer-events:none;
}
body.dark-mode .hex-cinematic-ambient-bg{display:none}

@media all and (min-width:600px){
  .hex-cinematic-frame,
  .hex-cinematic-effects,
  .hex-cinematic-ambient-glow,
  .hex-cinematic-curve-wrap{min-height:26.875rem}
}
@media all and (min-width:960px){
  .hex-cinematic-frame,
  .hex-cinematic-effects,
  .hex-cinematic-ambient-glow,
  .hex-cinematic-curve-wrap{min-height:35.375rem}
}
@media all and (min-width:1280px){
  .hex-cinematic-frame,
  .hex-cinematic-effects,
  .hex-cinematic-ambient-glow,
  .hex-cinematic-curve-wrap{min-height:53.75rem}
}

/* Keep the exact responsive geometry of the established Cinema single hero. */
@supports (aspect-ratio:16/9){
  .hex-cinematic-frame,
  .hex-cinematic-effects,
  .hex-cinematic-ambient-glow,
  .hex-cinematic-curve-wrap{min-height:initial;aspect-ratio:16/9}

  @media (max-width:1920px){
    .hex-cinematic-frame,
    .hex-cinematic-effects,
    .hex-cinematic-ambient-glow,
    .hex-cinematic-curve-wrap{width:95%}
  }
  @media all and (min-width:1920px){
    .hex-cinematic-frame,
    .hex-cinematic-effects,
    .hex-cinematic-ambient-glow,
    .hex-cinematic-curve-wrap{aspect-ratio:2.12}
  }
  @media all and (min-width:1280px){
    .hex-cinematic-frame,
    .hex-cinematic-effects,
    .hex-cinematic-ambient-glow,
    .hex-cinematic-curve-wrap{min-height:53.75rem;aspect-ratio:2.09}
    .hex-cinematic-frame{
      -webkit-mask-image:radial-gradient(103% 12% at 50% 102%,transparent 50%,white 51%);
      mask-image:radial-gradient(103% 12% at 50% 102%,transparent 50%,white 51%);
    }
    .hex-cinematic-curve::before{
      -webkit-mask-image:radial-gradient(103% 12% at 50% 102%,transparent 49.45%,#000 50.1%,#000 51.25%,transparent 52%);
      mask-image:radial-gradient(103% 12% at 50% 102%,transparent 49.45%,#000 50.1%,#000 51.25%,transparent 52%);
    }
  }
  @media all and (min-width:960px){
    .hex-cinematic-frame,
    .hex-cinematic-effects,
    .hex-cinematic-ambient-glow,
    .hex-cinematic-curve-wrap{min-height:35.375rem;aspect-ratio:2.08}
    .hex-cinematic-frame{
      -webkit-mask-image:radial-gradient(103% 11% at 50% 102%,transparent 50%,white 51%);
      mask-image:radial-gradient(103% 11% at 50% 102%,transparent 50%,white 51%);
    }
    .hex-cinematic-curve::before{
      -webkit-mask-image:radial-gradient(103% 11% at 50% 102%,transparent 49.45%,#000 50.1%,#000 51.25%,transparent 52.1%);
      mask-image:radial-gradient(103% 11% at 50% 102%,transparent 49.45%,#000 50.1%,#000 51.25%,transparent 52.1%);
    }
  }
  @media all and (min-width:600px){
    .hex-cinematic-frame,
    .hex-cinematic-effects,
    .hex-cinematic-ambient-glow,
    .hex-cinematic-curve-wrap{min-height:26.875rem}
    .hex-cinematic-frame{
      -webkit-mask-image:radial-gradient(103% 10.5% at 50% 102%,transparent 50%,white 52%);
      mask-image:radial-gradient(103% 10.5% at 50% 102%,transparent 50%,white 52%);
    }
    .hex-cinematic-curve::before{
      -webkit-mask-image:radial-gradient(103% 10.5% at 50% 102%,transparent 49.45%,#000 50.15%,#000 52.2%,transparent 53%);
      mask-image:radial-gradient(103% 10.5% at 50% 102%,transparent 49.45%,#000 50.15%,#000 52.2%,transparent 53%);
    }
  }
}

@media all and (max-width:1279px) and (min-width:769px){
  .hex-cinematic-effects__radials{
    width:132rem;
    background:
      radial-gradient(11% 56% at 17% 50%,#73500a4d 0%,#fcd53511 42%,transparent 100%),
      radial-gradient(11% 56% at 83% 50%,#73500a4d 0%,#fcd53511 42%,transparent 100%);
  }
}

/*
 * Shared mobile-poster scaffold for static cinematic heroes.
 * Both Cinema single and Collection child use this exact geometry on phones.
 * Module CSS only decides which artwork/logo/details are placed inside it.
 */
@media (max-width:768px){
  .hex-cinematic-shell--mobile-poster .hc-hero-backdrop{display:none!important}
  .hex-cinematic-shell--mobile-poster .hc-layout-container{
    display:flex!important;
    flex-direction:column;
    gap:0!important;
    padding:0 0 10px!important;
    align-items:stretch;
    background:#000;
  }
  .hex-cinematic-shell--mobile-poster .hc-poster-box{
    order:1;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    aspect-ratio:2 / 3;
    border-radius:0!important;
    border:none!important;
    box-shadow:none!important;
    margin:-100px 0 0!important;
    overflow:hidden;
    z-index:1;
  }
  .hex-cinematic-shell--mobile-poster .hc-mobile-gradient{
    display:block;
    position:absolute;
    right:0;
    bottom:-1px;
    left:0;
    height:60%;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(to top,#000 5%,#000000b0 55%,transparent 100%);
  }
}

@media (max-width:768px){
  .hex-cinematic-shell--responsive-flat .hex-cinematic-effects,
  .hex-cinematic-shell--responsive-flat .hex-cinematic-ambient-glow,
  .hex-cinematic-shell--responsive-flat .hex-cinematic-curve-wrap{display:none}

  .hex-cinematic-shell--responsive-flat .hex-cinematic-frame{
    width:100%;
    max-width:100%;
    min-height:auto;
    aspect-ratio:auto;
    margin:0;
    border-radius:0;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .hex-cinematic-shell--responsive-flat .hex-cinematic-frame::before,
  .hex-cinematic-shell--responsive-flat .hex-cinematic-frame::after{display:none}
}