/* Season opener popup — concept #7 First-Snap Cinema */

.hfz-opener {

  position: fixed;

  inset: 0;

  z-index: 1200;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 1rem;

  overflow: hidden;

}

.hfz-opener.is-open {

  display: flex;

}



.hfz-opener__backdrop {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.84);

  backdrop-filter: blur(5px);

}



.hfz-opener__cine {

  position: absolute;

  inset: 0;

  pointer-events: none;

  overflow: hidden;

  z-index: 1;

}

.hfz-opener__letterbox {

  position: absolute;

  left: 0;

  right: 0;

  height: 0;

  background: #000;

  transition: height 0.55s cubic-bezier(0.16, 1, 0.3, 1);

}

.hfz-opener.is-open .hfz-opener__letterbox--top,

.hfz-opener.is-open .hfz-opener__letterbox--bottom {

  height: clamp(28px, 7vh, 64px);

}

.hfz-opener__letterbox--top { top: 0; }

.hfz-opener__letterbox--bottom { bottom: 0; }



.hfz-opener__flash {

  position: absolute;

  inset: 0;

  background: #fff;

  opacity: 0;

}

.hfz-opener.is-opening .hfz-opener__flash {

  animation: hfzOpenerFlash 0.85s ease-out forwards;

}



.hfz-opener__flare {

  position: absolute;

  inset: -30%;

  opacity: 0;

  background:

    radial-gradient(circle at 20% 25%, rgba(255, 205, 0, 0.75) 0%, transparent 22%),

    radial-gradient(circle at 72% 35%, rgba(255, 255, 255, 0.35) 0%, transparent 16%),

    linear-gradient(118deg, transparent 38%, rgba(255, 205, 0, 0.35) 49%, transparent 58%);

  mix-blend-mode: screen;

}

.hfz-opener.is-open .hfz-opener__flare {

  animation: hfzOpenerFlare 2.2s ease-out forwards;

}



.hfz-opener__grain {

  position: absolute;

  inset: -10%;

  opacity: 0;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  background-size: 160px 160px;

  mix-blend-mode: soft-light;

}

.hfz-opener.is-open .hfz-opener__grain {

  opacity: 0.45;

  animation: hfzOpenerGrain 0.4s steps(3) infinite;

}



.hfz-opener__scan {

  position: absolute;

  inset: 0;

  z-index: 2;

  opacity: 0;

  background: repeating-linear-gradient(

    to bottom,

    transparent 0,

    transparent 2px,

    rgba(0, 0, 0, 0.12) 3px,

    rgba(0, 0, 0, 0.12) 4px

  );

}

.hfz-opener.is-open .hfz-opener__scan {

  opacity: 0.35;

}

.hfz-opener.is-open.is-cine-heavy .hfz-opener__scan {

  opacity: 0.55;

}



.hfz-opener__stage {

  position: relative;

  z-index: 5;

  width: min(840px, 100%);

  max-height: min(94vh, 920px);

  overflow: auto;

  background: #0d0e10;

  border: 1px solid rgba(255, 205, 0, 0.35);

  box-shadow:

    0 0 0 1px rgba(255, 205, 0, 0.2),

    0 30px 80px rgba(0, 0, 0, 0.65),

    0 0 80px rgba(255, 205, 0, 0.18);

  animation: hfzOpenerPop 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}

.hfz-opener.is-opening .hfz-opener__stage {

  animation: hfzOpenerPopCine 0.55s cubic-bezier(0.16, 1, 0.3, 1);

}



.hfz-opener__close {

  position: absolute;

  top: 0.65rem;

  right: 0.65rem;

  z-index: 6;

  width: 42px;

  height: 42px;

  border: 1px solid rgba(255, 255, 255, 0.35);

  background: rgba(0, 0, 0, 0.55);

  color: #fff;

  font-size: 1.4rem;

  line-height: 1;

  cursor: pointer;

}

.hfz-opener__close:hover {

  background: #FFCD00;

  color: #0D0E10;

  border-color: #FFCD00;

}



.hfz-opener__media {

  position: relative;

  aspect-ratio: 16 / 9;

  max-height: min(72vh, 570px);

  background: #000;

  overflow: hidden;

}

.hfz-opener__media img,

.hfz-opener__media iframe {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  border: 0;

  object-fit: cover;

  display: block;

}

.hfz-opener__media iframe {

  z-index: 1;

}

.hfz-opener__shine {

  position: absolute;

  inset: 0;

  z-index: 3;

  pointer-events: none;

  background: linear-gradient(105deg, transparent 28%, rgba(255, 205, 0, 0.45) 48%, transparent 64%);

  transform: translateX(-130%);

  opacity: 0.9;

}

.hfz-opener.is-open .hfz-opener__shine {

  animation: hfzOpenerShine 1.15s ease 0.05s both;

}

.hfz-opener__shade {

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background: linear-gradient(180deg, transparent 45%, rgba(8, 8, 10, 0.72) 100%);

}

.hfz-opener__tag {

  position: absolute;

  left: 1rem;

  bottom: 1rem;

  z-index: 4;

  font-family: var(--font-display);

  letter-spacing: 0.2em;

  font-size: 0.8rem;

  color: #FFCD00;

  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);

  pointer-events: none;

  animation: hfzOpenerFadeUp 0.7s ease 0.15s both;

}

.hfz-opener__sound {

  position: absolute;

  left: 50%;

  top: 50%;

  z-index: 5;

  transform: translate(-50%, -50%);

  min-height: 44px;

  padding: 0.7rem 1.15rem;

  border: 1px solid rgba(255, 205, 0, 0.55);

  background: rgba(0, 0, 0, 0.72);

  color: #FFCD00;

  font-family: var(--font-sans);

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  cursor: pointer;

}

.hfz-opener__sound:hover {

  background: #FFCD00;

  color: #0D0E10;

}

.hfz-opener__sound.is-hidden {

  display: none;

}



.hfz-opener__body {

  padding: 1.35rem 1.35rem 1.5rem;

  color: #f4f4f2;

}

.hfz-opener__eyebrow {

  margin: 0 0 0.45rem;

  font-family: var(--font-sans);

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: #FFCD00;

}

.hfz-opener__title {

  margin: 0 0 0.7rem;

  font-family: var(--font-display);

  font-size: clamp(1.9rem, 5vw, 2.55rem);

  line-height: 0.95;

  letter-spacing: 0.02em;

  text-transform: uppercase;

}

.hfz-opener__title em {

  font-style: normal;

  color: #FFCD00;

}

.hfz-opener__text {

  margin: 0 0 1.15rem;

  font-family: var(--font-sans);

  color: rgba(244, 244, 242, 0.78);

  font-size: 0.98rem;

  line-height: 1.55;

}

.hfz-opener__actions {

  display: flex;

  flex-wrap: wrap;

  gap: 0.65rem;

}

.hfz-opener__btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 46px;

  padding: 0.7rem 1.15rem;

  font-family: var(--font-sans);

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  text-decoration: none;

  border: none;

  cursor: pointer;

}

.hfz-opener__btn--gold {

  background: #FFCD00;

  color: #0D0E10;

}

.hfz-opener__btn--gold:hover {

  background: #fff;

}

.hfz-opener__btn--ghost {

  background: transparent;

  color: #fff;

  border: 1px solid rgba(255, 255, 255, 0.35);

}

.hfz-opener__btn--ghost:hover {

  border-color: #FFCD00;

  color: #FFCD00;

}



@keyframes hfzOpenerFlash {

  0% { opacity: 0.95; background: #fff; }

  35% { opacity: 0.55; background: #FFCD00; }

  100% { opacity: 0; }

}

@keyframes hfzOpenerFlare {

  0% { opacity: 0; transform: translateX(-18%) rotate(10deg) scale(1.1); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translateX(22%) rotate(10deg) scale(1.1); }

}

@keyframes hfzOpenerGrain {

  0% { transform: translate(0, 0); }

  50% { transform: translate(-3%, 2%); }

  100% { transform: translate(2%, -2%); }

}

@keyframes hfzOpenerPop {

  from { opacity: 0; transform: translateY(28px) scale(0.92); }

  to { opacity: 1; transform: none; }

}

@keyframes hfzOpenerPopCine {

  from { opacity: 0; transform: translateY(22px) scale(0.94); }

  to { opacity: 1; transform: none; }

}

@keyframes hfzOpenerShine {

  from { transform: translateX(-130%); }

  to { transform: translateX(130%); }

}

@keyframes hfzOpenerFadeUp {

  from { opacity: 0; transform: translateY(10px); }

  to { opacity: 1; transform: none; }

}



@media (max-width: 560px) {

  .hfz-opener__media {

    max-height: min(44vh, 300px);

  }

  .hfz-opener__actions {

    flex-direction: column;

  }

  .hfz-opener__btn {

    width: 100%;

  }

}



@media (prefers-reduced-motion: reduce) {

  .hfz-opener__flash,

  .hfz-opener__flare,

  .hfz-opener__grain,

  .hfz-opener__shine,

  .hfz-opener__tag,

  .hfz-opener__stage {

    animation: none !important;

  }

  .hfz-opener.is-open .hfz-opener__letterbox--top,

  .hfz-opener.is-open .hfz-opener__letterbox--bottom {

    height: 16px;

  }

}