/*
Theme Name: bsTheme
Theme URI: http://brotsalz.de/
Author: brot & salz
Author URI: http://www.brotsalz.de
Description: brot & salz Theme
Version: 1.0.1
Tested up to: 6.1.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: bstheme
Tags: brot&salz, tailor-made-theme

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

bsTheme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/* * Theme Overwrites
* --------------------------------------------- */
body {
  background: var(--cDark);
}

/* `proximity` (not `mandatory`) so this only ever gently pulls the scroll toward
   whichever element opts in via scroll-snap-align, if it's already close to landing
   there — it doesn't force a stop at every snap point across the page, so scrolling
   everywhere else keeps feeling completely normal. Added specifically for the Scroll
   Video Hero -> Cover Reveal handoff: the hero needs a lot of scroll distance for its
   scrub effect, so mobile users tend to use strong flicks to get through it, and that
   momentum used to carry straight past the (much shorter) next section entirely. */
html {
  scroll-snap-type: y proximity;
}

/* * Fonts
* --------------------------------------------- */
/* outfit-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  src: url('../bsTheme/assets/fonts/outfit/outfit-v15-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* outfit-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  src: url('../bsTheme/assets/fonts/outfit/outfit-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* outfit-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  src: url('../bsTheme/assets/fonts/outfit/outfit-v15-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* outfit-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  src: url('../bsTheme/assets/fonts/outfit/outfit-v15-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* outfit-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  src: url('../bsTheme/assets/fonts/outfit/outfit-v15-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* * Utilities 
* --------------------------------------------- */
.seo_only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
}

/* * CTAs / Buttons
* --------------------------------------------- */
.cta {
  width: fit-content;
}

.no-interaction {
  pointer-events: none;
}

.cta > :is(a, button, div, input) {
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--cDef);
  cursor: pointer;
  transition: 0.3s all ease;
  position: relative;
  padding: 0;
  font-family: var(--family-body);
  font-weight: var(--fw-regular);
  display: flex;
  align-items: center;
}

.cta_corners {
  display: none;
}

/* Default ------------------ */
.cta.default > :is(a, button, div, input) {
  padding: 0.5rem 1.75rem;
  color: var(--cDef);
  transition: 0.3s all ease;
  position: relative;
  font-family: var(--family-alternative);
  /* Figma "Text Button": Outfit Bold 20px, 15% letter-spacing, uppercase — sized down
     ~13% and made responsive (was a flat 20px with zero viewport scaling). Scoped to
     .default (the actual button variant) rather than the base .cta rule above, which
     is also used by .cta.menu (nav links) — those should stay their own style. */
  font-weight: var(--fw-bold);
  font-size: clamp(15px, 1.3vw, 18px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.cta.default .cta_corners {
  display: block;
}

/* Default ------------------ */
.cta.default.transparent > :is(a, button, div, input) {
  padding: 0.65rem 1.75rem 0.5rem 1.75rem;
  background: transparent;
  border: 2px solid var(--cRed);
  color: var(--cDef);
  border-radius: var(--b-radius-lg);
  transition: 0.3s all ease;
}

.cta.default.transparent:hover > :is(a, button, div, input) {
  background: var(--cRed);
}

/* Nav order-CTA ------------------ */
/* Figma "ButtonClassic": gold double-frame (outer border, inner solid fill), same
   treatment as the Merch/Shop/Scroll-Hero CTAs — the nav's order button reuses the plain
   .cta.default.transparent style otherwise, so it's restyled here rather than duplicating
   an extra wrapper element (the header/nav-overlay markup comes from an ACF global
   template, not a theme file, so there's no place to add one). */
#masthead .cta.default.transparent,
#navOverlayContainer .cta.default.transparent {
  border: 2px solid var(--gold, #bc9f63);
  border-radius: 25px 5px 25px 5px;
  padding: 5px;
}

#masthead .cta.default.transparent > :is(a, button, div, input),
#navOverlayContainer .cta.default.transparent > :is(a, button, div, input) {
  background: var(--gold, #bc9f63);
  border: none;
  border-radius: 20px 0 20px 0;
  padding: 1.1rem 1.5rem;
  color: var(--darkblue, #0b0b17);
  /* .header_col_3's own column never actually gets any wider than ~370-390px at any
     desktop width (it's inside a Bootstrap .container-xl, which locks its max-width at
     1140px from the xl breakpoint up and never grows further at xxl+) — without this,
     "Jetzt vorbestellen" wraps to 2 lines at every desktop width, not just narrow ones. */
  white-space: nowrap;
}

#masthead .cta.default.transparent:hover > :is(a, button, div, input),
#navOverlayContainer .cta.default.transparent:hover > :is(a, button, div, input) {
  background: var(--gold, #bc9f63);
  opacity: 0.85;
}

/* Menu ------------------ */
/* Figma "MenuButton": translucent white pill, Outfit Regular 20px, 15% tracking,
   uppercase — replaces the old underline-on-hover nav-link treatment. Sized down and
   made responsive to match the rest of the type scale (was a flat 20px). */
.cta.menu > :is(a, button, div, input) {
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.25);
  border: none;
  border-radius: 100px;
  color: var(--text, var(--cDef));
  font-family: var(--family-body);
  font-weight: var(--fw-regular);
  font-size: clamp(15px, 1.3vw, 18px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: 0.3s background ease;
  /* Without this, these pills wrap their own label onto 2-3 lines the moment their flex
     row (.header_col_1's d-xl-flex wrapper, ~370-390px wide at any desktop size — see
     the nav CTA rule above) runs tight, instead of just... not wrapping, which a nav
     pill never should. */
  white-space: nowrap;
}

/* The gap between "Das neue Buch" and "Newsletter" comes from Bootstrap's .me-lg-5
   utility (3rem/48px) baked into the header's ACF-stored content — reasonable in
   isolation, but combined with the two pills' own width it doesn't fit the ~370-390px
   this row actually has at any desktop width (see the nowrap comment above). Overridden
   here (Bootstrap utilities are !important themselves, so overriding one takes an
   equally-specific !important rule) rather than in the stored content, since .me-lg-5
   is a shared utility class used elsewhere too. */
#masthead .cta.menu.me-lg-5,
#navOverlayContainer .cta.menu.me-lg-5 {
  margin-right: 14px !important;
}

.cta.menu:hover > :is(a, button, div, input) {
  background: rgba(255, 255, 255, 0.35);
}

/* Submit ------------------ */
.cta.submit {
  position: relative;
}

.cta.submit > :is(a, button, div, input) {
  transition: 0.3s all ease;
  background: var(--cDef);
  color: var(--cDark);
  border-radius: var(--b-radius-lg);
  padding: 0.65rem 1.75rem 0.5rem 1.75rem;
}

.cta.submit.deny {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
}

@media (max-width: 576px) {
  .cta.default > :is(a, button, div, input) {
    white-space: nowrap;
  }
}

/* Menu ------------------ */
.cta.hyper > :is(a, button, div, input) {
  padding: 0.15rem 0.75rem;
  background: transparent;
  border: 3px solid var(--cDef);
  color: var(--cRed);
  text-transform: uppercase;
  border-radius: 50px;
  transition: 0.3s all ease;
  font-size: clamp(var(--f-lg-min), var(--f-lg-ideal), var(--f-lg-max));
  height: 100%;
}

.cta.hyper:hover > :is(a, button, div, input) {
  background: var(--cRed);
  color: var(--cDef);
}

@media (max-width: 576px) {
  .cta.hyper > :is(a, button, div, input) {
    padding: 0.15rem 1rem;
  }
}

/* * Site Header
* --------------------------------------------- */
.site__header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  transition: 0.6s all ease;
  background: linear-gradient(
    to bottom,
    rgba(8, 8, 8, 0.75) 0%,
    rgba(8, 8, 8, 0) 100%
  );
}

.menu_logo {
  width: 250px;
  /* Its img is narrower than this figure (a leftover inline width from a past
     block-editor resize) — inline-level elements narrower than their block
     container sit at the start edge by default, reading as left-aligned. */
  text-align: center;
}

/* Nav open */
.navOpen {
  overflow: hidden;
  transition: 0.3s all ease;
}

@media (min-width: 993px) {
  .header_col_1 {
    padding-top: 5px;
  }
}

/* * Burger Button
* --------------------------------------------- */
.menu_burger__button {
  padding: 0;
  border: none;
  background: transparent;
}

.menu_burger__button div {
  /* Figma (node 241:252, "hamburger-menu"): a squared-off bordered box, not the round
     button this used to be — same size/border/icon otherwise, so the open/close
     hamburger-to-X animation below (which only touches the spans) is untouched. */
  border-radius: 4px;
  width: 40px;
  height: 40px;
  border: 2px solid var(--cDef);
  padding: 0.5rem;
  background: transparent;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.menu_burger__button div span {
  width: 20px;
  height: 2px;
  /* Accent color, not the default text color — per explicit feedback (the Figma
     reference itself renders these white, but gold was requested regardless). */
  background: var(--gold, #bc9f63);
  transition: 0.3s all ease;
}

.menu_burger__button div span:nth-of-type(2) {
  margin-block: 0.225rem;
}

.menu_burger__button div span:nth-of-type(3) {
  width: 10px;
}

.menu_burger__button:hover div span:nth-of-type(3) {
  width: 20px;
}

.menu_burger.active .menu_burger__button div span:nth-of-type(1) {
  transform: rotate(45deg);
}

.menu_burger.active .menu_burger__button div span:nth-of-type(2) {
  margin-block: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}

.menu_burger.active .menu_burger__button div span:nth-of-type(3) {
  display: none;
}

@media (max-width: 1200px) {
  .menu_burger {
    transform: translateX(-1.5rem);
  }
}

@media (max-width: 576px) {
  .menu_burger {
    transform: translateX(-2.5rem);
  }
}

/* * Burger Menu
* --------------------------------------------- */
#navOverlayContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  opacity: 0;
  background-color: var(--cDark);
  z-index: -90;
  width: 100%;
  height: 100%;
  transition: 0s opacity ease;
}

.ovNavContainer__wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

#navOverlayContainer.openOverlay {
  transition-delay: 0s;
  opacity: 1;
  z-index: 9;
}

@media (min-width: 993px) {
  #navOverlayContainer {
    display: none;
  }
}

/* * Footer
* --------------------------------------------- */
.line_separator {
  height: 2px !important;
  border: none;
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
  background: var(--cDef);
  opacity: 1;
}

/* Figma footer redesign ------------------ */

/* Newsletter card */
#newsletter {
  border-radius: 50px;
  max-width: 1072px;
  margin: 0 auto;
  padding: 75px 50px;
}

.footer_newsletter__title {
  /* Figma "HeadlineL": Outfit Bold 65px, sized down ~13% across the whole scroll-page
     type scale (was reading a notch too large everywhere).
     px bounds (not rem) — this theme's root font-size is responsive (16px mobile,
     20px desktop via --f-reg), so rem bounds would drift ~25% off Figma on desktop. */
  color: var(--gold, #bc9f63);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(28px, 3.9vw, 56px);
  line-height: 1.15;
}

/* Email input: diagonal corners like the rest of the design system's inputs/buttons */
#newsletter #form_EMAIL {
  border-radius: 25px 0 25px 0;
  height: 67px;
}

/* Custom checkbox fill (Figma shows a flat grey square, not an outlined box) */
#newsletter .checkBoxWrap .checker {
  background: #707070;
  border: none;
}

#newsletter .legalNl {
  font-size: clamp(14px, 1.1vw, 16px);
}

/* Newsletter submit button: same gold double-frame as the rest of the CTAs. The
   shortcode hand-rolls this button (doesn't call [cta]), so there's no extra wrapper
   element to add — style the existing .submit.cta.default directly, same approach as
   the nav order-CTA. */
#newsletter .cta.submit.default {
  border: 2px solid var(--gold, #bc9f63);
  border-radius: 25px 5px 25px 5px;
  padding: 5px;
  background: transparent;
  width: 100%;
  max-width: 635px;
}

#newsletter .cta.submit.default > input {
  background: var(--gold, #bc9f63);
  border-radius: 20px 0 20px 0;
  padding: 1.1rem 2rem;
  color: var(--darkblue, #0b0b17);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: clamp(15px, 1.3vw, 18px);
  width: 100%;
}

#newsletter .cta.submit.default.deny {
  opacity: 0.5;
  pointer-events: none;
}

/* Fitzek wordmark + divider above the social columns */
.footer_wordmark {
  justify-content: center;
  padding: 2rem 0;
}

.footer_wordmark__img {
  max-width: min(90vw, 412px);
  height: auto;
}

.footer_divider {
  max-width: 1620px;
  margin: 0 auto 2rem;
}

/* Social columns: "Folge X hier" label + icon badges (scoped to #colophon so this
   doesn't bleed into other pages reusing the same generic Bootstrap-block/ff-alt.f-sm
   classes, e.g. template-parts/content-referenzen.php). */
#colophon .wp-block-group p.ff-alt.f-sm {
  /* Figma "SublineSmall": Outfit Medium 25px, sized down ~13% to match the rest of the
     scaled-down type scale. */
  color: var(--text, #dddddb);
  text-transform: uppercase;
  font-weight: 500;
  font-size: clamp(16px, 1.7vw, 22px);
}

/* Social icons (size-large) only — the gold circle border is baked into the SVGs
   themselves (facebook/instagram/youtube/tiktok.svg, recolored from the old red),
   so this just sizes them; it must NOT touch .footer_logo (size-full, the Fitzek/
   Droemer wordmark logos), which needs no circular treatment at all. */
#colophon .wp-block-group .wp-block-image.size-large.is-resized img {
  width: 57px !important;
  height: 57px;
}

/* Legal links + copyright row */
#colophon .wp-bootstrap-blocks-row.ff-alt.f-sm p {
  /* Figma legal-links row: Outfit Medium 25px uppercase, sized down ~13% */
  font-size: clamp(14px, 1.6vw, 22px);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text, #dddddb);
}

#colophon .wp-bootstrap-blocks-row.ff-alt.f-sm p a {
  color: var(--text, #dddddb);
}

#colophon .wp-bootstrap-blocks-row.ff-alt.f-sm .fCenter.flex-column.flex-md-row.f-sm p {
  /* Copyright line: Figma "BodySmall" 18px, not the 25px legal-links size above —
     sized down and made responsive to match the rest of the scale. */
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 400;
  text-transform: none;
}

#colophon {
  position: relative;
  z-index: 3;
}

/* Now a child of #colophon (position:relative already set above) instead of a sibling
   guessing at a fixed 100vh — inset:0 makes it track the footer's actual rendered
   height regardless of how much content (newsletter card, social columns, legal row)
   it contains. */
.footer_background__wrapper {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.footer_background__wrapper .footer_background__inner_wrapper {
  position: absolute;
  inset: 0;
}

.footer_background__wrapper .footer_background__inner_wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.footer_cover {
  position: relative;
  z-index: 2;
}

.footer_cover > div {
  position: relative;
  z-index: 3;
}

.portrait_animation__wrapper {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: 1s all ease;
  isolation: isolate; /* creates a new stacking context */
  will-change: transform;
}

#colophon.active .portrait_animation__wrapper {
  top: -300px;
}

.portrait_item {
  width: clamp(200px, 50vw, 1000px);
  margin-inline: auto;
  transform: rotate(0);
  transform-origin: bottom center;
  cursor: pointer;
}

.portrait_item.active {
  z-index: 1; /* Also reinforce during animation */
  animation: wobble 1s ease-in-out infinite;
  pointer-events: none;
}

.portrait_item img {
  z-index: 1 !important;
  width: 100%;
  height: auto;
}

.footer_newsletter_cover,
.footer_newsletter_cover
  :is(img.wp-block-cover__image-background, .wp-block-cover__background) {
  pointer-events: none;
}

.footer_newsletter_cover .wp-block-cover__inner-container {
  pointer-events: all;
}

@keyframes wobble {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  35% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
  60% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@media (max-width: 1800px) {
  #colophon.active .portrait_animation__wrapper {
    top: -250px;
  }
}

@media (max-width: 1400px) {
  #colophon.active .portrait_animation__wrapper {
    top: -225px;
  }
}

@media (max-width: 1200px) {
  #colophon.active .portrait_animation__wrapper {
    top: -185px;
  }
}

@media (max-width: 992px) {
  #colophon.active .portrait_animation__wrapper {
    top: -155px;
  }
}

@media (max-width: 850px) {
  #colophon.active .portrait_animation__wrapper {
    top: -120px;
  }
}

@media (max-width: 768px) {
  #colophon.active .portrait_animation__wrapper {
    top: -90px;
  }
}

@media (max-width: 576px) {
  #colophon.active .portrait_animation__wrapper {
    top: -90px;
  }

  .portrait_item {
    width: clamp(200px, 85vw, 1000px);
  }
}

.footer_logo img {
  height: 2rem;
  width: auto !important;
}

/* * Newsletter
* --------------------------------------------- */
.videoswitch__wrapper {
  position: relative;
  width: 100%;
}

.videoswitch__wrapper video {
  width: 100%;
  max-width: 550px;
}

.videoswitch__seo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
}

.videoswitch__wrapper.left .is-style-secInd {
  text-align: left;
}

/* * Newsletter
* --------------------------------------------- */
#form_EMAIL {
  border: 2px solid var(--cDef);
  border-radius: var(--b-radius-lg);
  padding: 0.5rem 1.5rem;
  color: var(--cDef);
  opacity: 1;
  font-weight: var(--fw-semibold);
}

::placeholder {
  text-decoration: uppercase;
  opacity: 1;
  color: var(--cDef);
  font-weight: var(--fw-semibold);
}

#form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.checkBoxWrap {
  isolation: isolate;
}

.checkBoxWrap input {
  position: absolute;
  opacity: 0 !important;
  cursor: none;
  top: 0;
  z-index: -1;
  pointer-events: none;
}

.checkBoxWrap .checker {
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid var(--cDef);
  border-radius: 4px;
  z-index: 2;
}

.checkBoxWrap .checked {
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
}

.checkBoxWrap .checked svg {
  width: 90%;
  height: auto;
}

.checkBoxWrap.active .checked {
  display: flex;
}

@media (min-width: 577px) {
  #form_EMAIL,
  .dsgvoWrapper {
    width: 500px;
  }
}

@media (max-width: 576px) {
  #form_EMAIL {
    width: 300px;
  }
}

/* * Text Section
* --------------------------------------------- */
.additional_text {
  display: none;
  max-width: 800px;
}

/* * Utility Classes
* --------------------------------------------- */
.z-index-1 {
  z-index: 1;
}

.z-index-2 {
  z-index: 2;
}

.z-index-3 {
  z-index: 3;
}

.z-index--1 {
  z-index: -1;
}

.gradient_dark::before,
.gradient_dark::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 25%;
  left: 0;
}

.gradient_dark::before {
  top: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

.gradient_dark::after {
  bottom: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

.gradient_dark.top_only::after {
  content: '';
  display: none;
}

.gradient_dark.bottom_only::before {
  content: '';
  display: none;
}

@media (max-width: 576px) {
  .mw-tiny {
    max-width: 250px;
  }

  .no-br-mobile br {
    display: none;
  }
}

/* * Intro section
* --------------------------------------------- */
.intro_background_spacer__wrapper {
  /* margin-block: -20%;
  position: relative;
  z-index: 2; */
  margin-top: -27%;
  margin-bottom: -18%;
  position: relative;
  z-index: 2;
}

.intro_background_spacer__wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--cRed);
  z-index: -1;
  filter: brightness(1);
  transition: 0.3s all ease;
}

.epilepsy__consent--given .intro_background_spacer__wrapper::before {
  animation: flicker 3s ease infinite;
  filter: brightness(0.15);
}

@keyframes flicker {
  0% {
    filter: brightness(0.15);
  }
  50% {
    filter: brightness(1.5);
  }
  100% {
    filter: brightness(0.15);
  }
}

.intro_background_spacer__wrapper :is(figure, img) {
  width: 100%;
}

.intro_second_headline br:nth-of-type(2) {
  display: none;
}

@media (max-width: 768px) {
  .book_packshot {
    max-width: 60%;
  }

  .intro_second_headline br:nth-of-type(1) {
    display: none;
  }

  .intro_second_headline br:nth-of-type(2) {
    display: inline;
  }
}

/* * Order Section
* --------------------------------------------- */
.order_headline_group {
  margin-top: -21rem;
}

.order_promotional_image {
  position: relative;
}

.order_promotional_image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 85%
  );
}

.order_promotional_video__wrapper {
  max-width: 850px;
  position: relative;
  isolation: isolate;
  z-index: 1;
}

.order_promotional_video video {
  aspect-ratio: initial !important;
}

.order_promotional_video__wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 10%;
  height: 100%;
  z-index: 3;
  background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, var(--cDark) 85%);
}

.order_promotional_video__wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 10%;
  height: 100%;
  z-index: 3;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--cDark) 85%);
}

.order_promotional_video {
  position: relative;
  width: 100%;
}

.order_promotional_video::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  z-index: 3;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--cDark) 85%);
}

.order_promotional_video::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10%;
  z-index: 3;

  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, var(--cDark) 85%);
}

@media (max-width: 576px) {
  .order_headline_group {
    margin-top: -11rem;
  }

  .order_promotional_image {
    max-width: 300px;
  }
}

/* * Merch Animation
* --------------------------------------------- */
.merch_asset {
  transform: scale(0.75);
  transition: 1s all ease;
}

.merch_section.active .merch_asset {
  transform: scale(1);
}

/* * Consent / Cookies
* --------------------------------------------- */
#change-consent {
  cursor: pointer;
}

/* * YouTube Single
* --------------------------------------------- */
.youtube_embed__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.youtube_embed__wrapper .wp-block-embed {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.youtube_embed__wrapper .wp-block-embed__wrapper {
  border: 3px solid var(--cRed);
  width: 100%;
  max-width: 992px;
  aspect-ratio: 16 / 9;
  border-radius: var(--b-radius-xl);
  overflow: hidden;
}

.youtube_embed__wrapper .wp-block-embed__wrapper iframe {
  width: 100%;
  height: 100%;
}

/* * Leafs
* --------------------------------------------- */
.leaf {
  position: absolute;
  width: 7.5rem;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
}

.leaf img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.leaf.left {
  left: 0;
}

.leaf.right {
  right: 0;
}

.leaf.right.order {
  top: 3rem;
}

.leaf.left.order,
.leaf.right.order {
  transform: translateY(0);
}

@media (max-width: 992px) {
  .leaf {
    opacity: 0.5;
  }
}

.z-index-2 {
  z-index: 2;
}

/* * Password Form
* --------------------------------------------- */
.post-password-form {
  min-height: 550px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding-block: 3rem;
}

.post-password-form p {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  max-width: 550px;
}

.post-password-form input[type='submit'] {
  margin-top: 1.5rem;
  color: var(--cDark);
}

/* * Law
* --------------------------------------------- */
.law strong {
  text-transform: uppercase;
}

/* * Vuetify Iframe
* --------------------------------------------- */
.vue-iframe-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.vue-iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* * Error Messages
* --------------------------------------------- */
#errorMessage .modal-header {
  border: none;
}

#errorMessage .modal-content {
  background: var(--cDark);
  border: 2px solid var(--cRed);
  border-radius: var(--b-radius-xl);
  padding: 2rem;
}

#errorMessage .modal-header .btn-close {
  filter: contrast(0);
}

/* * Social Media Fix
* --------------------------------------------- */
.soMeOnlyTitles {
  display: none;
}

body.socialMediaBrowser .soMeOnlyTitles {
  display: block;
}

body.socialMediaBrowser .videoSwitch {
  display: none !important;
}

.maintenanceCont {
  color: var(--cDef);
}

/* * YouTube
* --------------------------------------------- */
.wp-block-embed iframe,
.wp-block-video video,
.aws_video__wrapper video {
  /* border: 2px solid var(--cRed);
  border-radius: var(--b-radius-xl); */
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

.wp-block-embed.wp-embed-aspect-9-16 iframe,
.wp-block-video video,
.aws_video__wrapper video {
  aspect-ratio: 9 / 16;
}

.phone_mockup__wrapper {
  max-width: 350px;
  position: relative;
}

.phone_mockup {
  margin: 0;
}

.phone_mockup.back {
  position: relative;
}

.phone_mockup.back::before {
  box-shadow: 10px 20px 30px rgba(255, 0, 0, 0.35);
  border-radius: 40px;
  z-index: -1;
  position: absolute;
  content: '';
  top: 1%;
  left: 1%;
  width: 96%;
  height: 97%;
}

.phone_mockup.front {
  position: absolute;
  top: 2.5%;
  left: 49.5%;
  transform: translateX(-50%);
  z-index: 3;
  width: 48%;
}

.phone_mockup__wrapper
  :is(.wp-block-embed, .wp-block-video, .aws_video__wrapper) {
  position: absolute;
  z-index: 2;
  top: 11%;
  left: 49.65%;
  transform: translateX(-50%);
  width: 85%;
  margin: 0;
}

/* * Epilepsy Warning
* --------------------------------------------- */
#epilepsyWarningModal {
  z-index: 2147483646;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--cDark);
}

video.background_video {
  transition: 1s all ease;
}

/* Epilepsy consent gate disabled — this campaign's videos have no epilepsy-risk content.
body:not(.epilepsy__consent--given) video.background_video {
  opacity: 0;
}
*/

.epilepsy_background {
  position: absolute;
  z-index: -1;
  max-width: 1000px;
  max-height: 1000px;
  filter: brightness(0.5);
  transform: scale(1) rotate(0deg);
  transition: 2s all ease;
}

#epilepsyWarningModal.epilepsyModal--closing .epilepsy_background {
  transform: scale(1.4) rotate(-25deg);
}

/* * Preloader
* --------------------------------------------- */
#preloader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--darkblue, #0b0b17);
  z-index: 1060;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
  padding: 0 1.5rem;
}

.preloader__logo {
  width: 220px;
  max-width: 60vw;
  height: auto;
}

.preloader__bar {
  width: 220px;
  max-width: 60vw;
  height: 2px;
  background: rgba(221, 221, 219, 0.15);
  border-radius: 2px;
  overflow: hidden;
}

.preloader__text {
  /* Rotated in/out by js/global.js (PRELOADER_TEXTS) — starts invisible, JS adds
     .is-visible per cycle. Reserves its own line height up front so a shorter/longer
     line swapping in doesn't nudge the bar above it. */
  color: var(--text, #dddddb);
  opacity: 0;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: clamp(11px, 1.1vw, 13px);
  text-align: center;
  min-height: 1.2em;
  transition: opacity .4s ease;
}

.preloader__text.is-visible {
  /* Dezent on purpose — this is ambient flavor text under the real progress
     indicator (the bar), not something that should compete with the logo. */
  opacity: 0.55;
}

.preloader__bar_fill {
  width: 0%;
  height: 100%;
  background: var(--gold, #bc9f63);
  border-radius: 2px;
  /* Real buffering progress drives the width (js/global.js) — this transition just
     smooths out the otherwise slightly jumpy `progress` event updates. */
  transition: width 0.3s ease;
}

/* * Interactivity UI
* --------------------------------------------- */
#interactivity-ui {
  /* Hidden for now on request — only the Sound On/Off button lives in here
     currently. Markup/JS left untouched so this is a one-line revert. */
  display: none;
  position: fixed;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1040;
  transition: 0.3s all ease;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  pointer-events: none;
}

#interactivity-ui.down {
  bottom: 1rem;
}

.ui_button {
  background: var(--cRed);
  border-radius: 50px;
  padding: 10px 35px 5px 35px;
  color: var(--cDark);
  border: none;
  font-family: var(--family-headline);
  position: relative;
  font-size: 16px;
  text-align: left;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
  pointer-events: all;
}

.ui_button.video {
  width: 164px;
}

.ui_button.audio {
  width: 176px;
}

.ui_button__text {
  display: flex;
}

.ui_button__text--status {
  margin-left: 0.25rem;
}

.ui_button__icon {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 25px;
  height: 25px;
  background: var(--cDark);
  border-radius: 50%;
  transition: 0.3s all ease;
  transform: scale(1);
}

.ui_button.on .ui_button__icon {
  left: calc(100% - 29px); /* 100% - icon size - offset */
}

.ui_button:hover .ui_button__icon {
  transform: scale(0.8);
}

/* * Main Price
* --------------------------------------------- */
@media (min-width: 769px) {
  .price_grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .price_grid__item1 {
    grid-column: 1;
    grid-row: 1;
    width: 60%;
    z-index: 1;
  }

  .price_grid__item2 {
    grid-column: 1;
    grid-row: 1;
    width: 50%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-self: end;
  }
}

/* * Audible Section
* --------------------------------------------- */
.audible_section_part_1 {
  margin-bottom: -38% !important;
  position: relative;
  z-index: 2;
}

@media (max-width: 1600px) {
  .audible_section_part_1 {
    margin-bottom: -54% !important;
  }
}

@media (max-width: 1200px) {
  .audible_section_part_1 {
    margin-bottom: -58% !important;
  }
}

@media (max-width: 992px) {
  .audible_section_part_1 {
    margin-bottom: 3rem !important;
  }

  .audible_section_part_2 {
    display: none !important;
  }
}