@font-face {
  font-family: tommys;
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url('../fonts/7238tommys.woff2') format('woff2'),
       url('../fonts/7238tommys.woff') format('woff');
}

/* Font Awesome 5 Brands (SIL OFL webfont, same file the OceanWP theme served) */
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/fa-brands-400.woff2') format('woff2');
}
.fab {
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400;
  font-style: normal;
  font-size: 34px;
  line-height: 1;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
}
.fa-instagram::before { content: '\f16d'; }
.fa-twitter::before { content: '\f099'; }
.fa-facebook-f::before { content: '\f39e'; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background-color: #000000;
  color: #dddddd;
  font-family: 'Space Mono', monospace;
  font-size: 18px;
}

a {
  color: #910000;
  text-decoration: none;
  cursor: url(../images/cross-cursor.png), pointer;
}
a:hover {
  color: #ff0000;
}

::selection { color: black; background: #910000; }
::-moz-selection { color: black; background: #910000; }

body, a, button { cursor: url(../images/cross-cursor.png), pointer; }

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

.page-wrap {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5% 10%;
}

/* Home page */
.salemtype {
  display: block;
  margin: 0 auto;
  width: 100%;
  padding-top: 5%;
}
.salemtype svg { width: 100%; height: auto; display: block; }
.salemtype .st0 { fill: #910000; }

.social-line {
  font-family: 'Libre Baskerville', serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 10px;
  font-size: 1.5em;
  color: #7e7e7a;
  text-align: center;
  margin-top: 1.75em;
}
@media (max-width: 768px) {
  .social-line { font-size: 1em; letter-spacing: 6px; }
}
.sociallink {
  color: #7e7e7a !important;
  transition: 0.5s;
}
.sociallink:hover {
  color: #ff0000 !important;
  text-shadow: 0 0 5px rgb(145, 0, 0);
}

/* Password gate — WordPress-style form (transparent bordered input, Enter
   button that inverts on hover), contained in a centered box mid-screen. */
#gate-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.password-gate {
  width: 100%;
  max-width: 480px;
  text-align: left;
}
.password-gate p {
  margin: 0 0 1em 0;
  font-size: 18px;
  color: #dddddd;
}
.password-gate label {
  display: block;
  margin-bottom: 3px;
  color: #dddddd;
}
.password-gate input[type="password"] {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px solid #dddddd;
  color: #333333;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 14px;
  margin: 3px 0 15px 0;
  border-radius: 2px;
}
.password-gate button {
  background: transparent;
  border: 1px solid #dddddd;
  color: #dddddd;
  padding: 15px;
  font-family: inherit;
  font-size: 18px;
  border-radius: 2px;
  transition: 0.3s;
  cursor: url(../images/cross-cursor.png), pointer;
}
.password-gate button:hover {
  background: #dddddd;
  color: #000000;
}
.password-gate .gate-error {
  color: #ff0000;
  margin-top: 1em;
  display: none;
}

/* ------------------------------------------------------------------
   Content pages. Two templates exist on the live site:
   1. "linktree" pages (anathema, untilwerot, crucifiction, godnevercame,
      bathaus): full-viewport section with a decorative background image,
      centered artwork, stacked paper-texture link buttons, icon socials.
   2. Plain flow pages (privacy policy, the step pages): normal top-aligned
      scrolling content centered in a 1120px column.
   ------------------------------------------------------------------ */
.lt-page {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  padding-bottom: 60px;
}
.lt-bg {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
}
.lt-bg.cover { background-size: cover; }
.lt-content {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}
.lt-art {
  display: block;
  margin: 0 auto;
}
.lt-art.round { border-radius: 500px; }

/* Paper-texture link buttons (theme's .linktree-button styles, verified live:
   26px libre baskerville, 80px line-height, black text, contain-fit paper
   background that swaps to the red variant on hover, 0.5s transition). */
.lt-buttons { margin-top: 10px; }
.lt-buttons p { margin: 0; height: 80px; line-height: 80px; }
.linktree-button {
  font-size: 26px;
  line-height: 80px;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Libre Baskerville', serif;
  padding: 20px 25px;
  color: #000000 !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: 0.5s;
}
.apple-button { padding-left: 25px; padding-right: 25px; background-image: url('../images/apple-button.png'); }
.apple-button:hover { background-image: url('../images/apple-button-red.png'); }
.pictures { padding-left: 50px; padding-right: 50px; background-image: url('../images/apple-button.png'); }
.pictures:hover { background-image: url('../images/apple-button-red.png'); }
.spotify-button { padding-left: 60px; padding-right: 60px; background-image: url('../images/spotify-button.png'); }
.spotify-button:hover { background-image: url('../images/spotify-button-red.png'); }
.youtube-button { padding-left: 50px; padding-right: 50px; background-image: url('../images/youtube-button.png'); }
.youtube-button:hover { background-image: url('../images/youtube-button-red.png'); }
.press-button { padding-left: 45px; padding-right: 45px; background-image: url('../images/press-button.png'); }
.press-button:hover { background-image: url('../images/press-button-red.png'); }
/* Crucifiction: text-only until hover reveals the paper button */
.cruci-merch-button { padding-left: 80px; padding-right: 80px; }
.cruci-music-video-button { padding-left: 60px; padding-right: 60px; }
.cruci-spotify-button { padding-left: 75px; padding-right: 75px; }
.cruci-apple-music-button { padding-left: 75px; padding-right: 75px; }
.cruci-merch-button:hover, .cruci-music-video-button:hover,
.cruci-spotify-button:hover, .cruci-apple-music-button:hover {
  background-image: url('../images/youtube-button-red.png');
}

/* Icon socials (Font Awesome brands, 34px, #910000) */
.lt-socials { margin-top: 8px; }
.lt-socials a {
  display: inline-block;
  margin: 0 10px;
  color: #910000;
  transition: 0.3s;
}
.lt-socials a:hover { color: #ff0000; }

/* YouTube embed (godnevercame) */
.lt-video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}
.lt-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Plain flow content pages (step pages): centered column, page scrolls */
.flow-page {
  max-width: 1120px;
  margin: 0 auto;
  padding-top: 105px;
  text-align: center;
}
.flow-page img { display: inline-block; max-width: 100%; }
.flow-page audio { margin: 30px auto; display: inline-block; }

/* ------------------------------------------------------------------
   CRT stage: the /a1 section presents as a fixed 1240x900 "old flash
   site" screen centered in the viewport, scaled down to fit smaller
   windows but never blown up past its native size. Nothing inside may
   escape its bounds. The house game (step three) is the one exception —
   it goes true fullscreen.
   ------------------------------------------------------------------ */
.crt-viewport {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}
.crt-stage {
  position: relative;
  width: 1240px;
  height: 900px;
  flex: 0 0 auto;
  overflow: hidden;
  background: #000;
}
/* Scrollable flow content inside the stage (step one/two/four) */
.crt-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: center;
  padding-top: 40px;
  scrollbar-width: thin;
  scrollbar-color: #333 #000;
}
.crt-scroll img { display: inline-block; max-width: 100%; }
.crt-scroll audio { margin: 30px auto; display: inline-block; }

/* Slider Revolution replacement engine.
   Sliders live inside the CRT stage (filling it) or fullscreen for the
   house game, with layers positioned from the stage center using raw
   pixel offsets, exactly as the original Revolution Slider rendered them. */
.svex-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
}
.svex-slider.svex-fullwidth { height: 100%; }
.svex-slider.svex-fullscreen { height: 100vh; }
.svex-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}
.svex-slide.active {
  opacity: 1;
  pointer-events: auto;
}
.svex-slide .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.svex-layer {
  position: absolute;
  font-family: tommys, sans-serif;
  color: #910000;
  text-align: center;
  white-space: nowrap;
}
.svex-layer a { color: inherit; }
.svex-layer.svex-link { cursor: url(../images/cross-cursor.png), pointer; }

/* a1 hub page: background video + portal image behind the slider, per Elementor section settings */
.svex-slider.has-video-bg { background: #000; }
.svex-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.svex-bg-portal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/hell_portal.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
}
.svex-bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
}
.svex-slide .svex-layer,
.svex-slide .bg { z-index: 3; }

/* One-shot layer entrance: 3000ms fade with power4.inOut easing, then hold.
   (Verified against the live slider: layers never loop back out.) */
.svex-fade-in {
  opacity: 0;
  animation: svex-fade-in 3s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes svex-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* One-shot late fade-out (the house game's "Find the tape" text at ~9s) */
.svex-fade-out {
  animation: svex-fade-out 0.3s linear forwards;
}
@keyframes svex-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* "SALEM VEX" tv logo: constant -3deg tilt plus a continuous slow 3D wobble
   (replica of the original rs-loop-wrap rotation loop). */
.svex-wobble .svex-layer-inner {
  transform: rotate(-3deg);
}
.svex-wobble .svex-layer-inner img {
  animation: svex-wobble 6s ease-in-out infinite;
}
@keyframes svex-wobble {
  0%   { transform: rotateZ(-8deg) rotateX(-4deg); }
  50%  { transform: rotateZ(10deg) rotateX(4.5deg); }
  100% { transform: rotateZ(-8deg) rotateX(-4deg); }
}

/* a1 hub step icons: 3D tilt + grayscale/blur on hover, per Revolution Slider hover transform data.
   The tilt lives on .svex-layer-inner (not .svex-layer) because slider.js sets an inline
   `transform: translate(-50%,-50%)` on .svex-layer for centering, and inline styles always
   beat a stylesheet :hover rule on the same element/property — so the rotation must apply
   to a separate inner wrapper instead. */
.svex-layer-inner {
  display: inline-block;
  transform-style: preserve-3d;
}
.step-icon-1:hover .svex-layer-inner { transform: rotateZ(-10deg) rotateX(10deg) rotateY(15deg); }
.step-icon-1:hover .svex-layer-inner img { filter: grayscale(100%) brightness(100%) blur(1px); }
.step-icon-2:hover .svex-layer-inner { transform: rotateZ(10deg) rotateX(-15deg) rotateY(20deg); }
.step-icon-2:hover .svex-layer-inner img { filter: grayscale(100%) brightness(100%) blur(1px); }
.step-icon-3:hover .svex-layer-inner { transform: rotateZ(-5deg) rotateX(-10deg) rotateY(-15deg); }
.step-icon-3:hover .svex-layer-inner img { filter: grayscale(100%) brightness(100%) blur(1px); }
.step-icon-4:hover .svex-layer-inner { transform: rotateZ(-10deg) rotateX(-10deg) rotateY(-10deg); }
.step-icon-4:hover .svex-layer-inner img { filter: grayscale(100%) brightness(100%) blur(1px); }

.svex-hotspot {
  position: absolute;
  cursor: url(../images/cross-cursor.png), pointer;
  background: transparent;
  border: none;
  z-index: 5;
}

.house-game .svex-hotspot { padding: 0; }
/* Arrows and GO BACK appear quickly so navigation is never left waiting on
   the slow scenic fade the other layers use. */
.house-game .svex-hotspot.svex-fade-in { animation-duration: 0.8s; }
/* First-room intro: the scene photo holds back on a black screen while
   "Find the tape" plays through, then fades in as the text fades out. */
.house-game .bg.svex-bg-intro {
  opacity: 0;
  animation: svex-fade-in 2.5s ease 4.5s forwards;
}