/* =========================================
   ZARAGOZA — CONSOLIDATED SITE STYLES
   ========================================= */

:root {
  /* GLOBAL TEXT */
  --default-text-color: #000000;
  --body-size: clamp(16px, 2vw, 20px);

  /* HEADER */
  --menu-height: clamp(54px, 7vw, 66px);
  --menu-background: linear-gradient(90deg, #f5f1e8, #e8ded2, #f3eadc);
  --menu-border: rgba(35, 30, 25, 0.18);
  /* LOGO SIZING — EDIT HERE
     SVG canvas: 792 x 612
     Actual BLACK artwork: ~460 x 275
     White SVG artwork is removed in the SVG file itself.
  */
  --startup-logo-width: clamp(300px, 78vw, 760px);
  --startup-logo-height: clamp(230px, 58vh, 590px);

  /*
    Make the actual BLACK drawing nearly fill the menu height.
    Because the black drawing only uses ~44.93% of the SVG canvas height,
    the SVG element itself must be ~2.225x taller than the desired visible logo.
  */
  --header-logo-visible-height: calc(var(--menu-height) - 4px);
  --header-logo-box-height: calc(var(--header-logo-visible-height) * 2.2255);
  --header-logo-box-width: calc(var(--header-logo-visible-height) * 2.880);
  --hamburger-width: 32px;
  --hamburger-thickness: 3px;
  --hamburger-gap: 7px;
  --submenu-font-size: clamp(22px, 3vw, 30px);
  --background-blur-strength: 10px;

  /* BLOCK 1 */
  --title-size: clamp(42px, 8vw, 90px);
  --title-color: #000000;
  --title-spacing: 0px;
  --subtitle-size: clamp(18px, 3vw, 28px);
  --subtitle-color: #000000;
  --subtitle-spacing: 0px;
  --subtitle-indent: 0.5px;
  --block-1-bottom-gap: clamp(100px, 15vh, 190px);

  /* BLOCK 2 */
  --slideshow-background: linear-gradient(
    135deg,
    rgba(132, 61, 42, 0.25),
    rgba(166, 96, 55, 0.21) 48%,
    rgba(188, 130, 73, 0.17)
  );
  --slideshow-border: rgba(119, 72, 48, 0.22);
  --slideshow-inset-highlight: rgba(255, 246, 236, 0.24);
  --slideshow-shadow-color: rgba(76, 42, 28, 0.16);
  --slideshow-blur: 18px;
  --slideshow-radius: 24px;
  --slideshow-side-margin: clamp(6px, 2vw, 24px);
  /* svh stays fixed while mobile browser controls expand/collapse. */
  --slideshow-height: clamp(520px, 78svh, 900px);
  --slideshow-padding-vertical: 48px;
  --slideshow-padding-horizontal: 24px;
  --slideshow-row-gap: 24px;
  --slideshow-picture-gap: 12px;
  --media-aspect-ratio: 1 / 1;
  --media-radius: 10px;
  --media-feather: 1px;
  --media-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
  --media-shadow-safe-space: 10px;
  /* Actual on-screen travel rates. JavaScript converts each row's measured
     loop width into a duration, so different row lengths do not equalize them. */
  --row-1-pixels-per-second: 31;
  --row-2-pixels-per-second: 23;
  --row-3-pixels-per-second: 41;
  --block-2-bottom-gap: clamp(58px, 8vh, 105px);

  /* BLOCK 3 */
  --block-3-side-padding: clamp(18px, 5vw, 72px);
  --block-3-top-gap: clamp(48px, 7vh, 90px);
  --block-3-bottom-gap: clamp(58px, 8vh, 105px);
  --electric-art-width: 112vw;
  --electric-art-max-width: 1500px;
  --electric-art-x: 50%;
  --electric-art-y: 50%;
  --electric-white: #ffffff;
  --electric-blue: #4da6ff;
  --electric-yellow: #ffd84d;
  --electric-orange: #ff9d2e;
  --electric-core-width: 1.8;
  --electric-glow-width: 6;
  --electric-trail-width: 1.2;
  --electric-trail-opacity: 0.30;
  --electric-glow-blur: 5px;
  --electric-loop-time: 4.8s;
  --block-3-subtitle-size: clamp(26px, 4vw, 44px);
  --block-3-subtitle-color: #000000;
  --block-3-subtitle-weight: bold;
  --block-3-subtitle-spacing: 0px;
  --block-3-body-size: var(--body-size);
  --block-3-body-color: #000000;
  --block-3-body-weight: normal;
  --block-3-body-spacing: 0px;
  --block-3-text-gap: 12px;
  --block-3-text-rise: 96px;
  --block-3-text-speed: 650ms;
  --block-3-body-delay: 160ms;

  /* BLOCK 4 */
  --contact-title-size: var(--subtitle-size);
  --contact-title-color: #000000;
  --contact-email-size: var(--body-size);
  --contact-email-color: #69bff8;
  --contact-left-position: 25%;
  --contact-gap: 10px;
  --slot-emoji-size: var(--body-size);
  --slot-row-gap: clamp(24px, 5vw, 56px);
  --slot-window-width: 1.7em;
  --slot-window-height: 1.65em;
  --slot-win-color: rgba(255, 72, 18, 0.72);
  --slot-win-blur: 10px;
  --slot-win-scale: 1.12;
  --slot-win-speed: 620ms;

  /* BLOCK 5 */
  --footer-background: rgba(112, 82, 62, 0.50);
  --footer-text-color: #ffd84d;
  --footer-text-size: var(--body-size);
  --footer-height: clamp(72px, 10vh, 110px);
  --footer-side-padding: clamp(18px, 4vw, 56px);
}

/* =========================================
   GLOBAL
   ========================================= */

* { box-sizing: border-box; }

html {
  width: 100%;
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  background: #ffffff;
  color: var(--default-text-color);
  font-family: "Times New Roman", Times, serif;
}

/* =========================================
   HOME BACKGROUND PRINTS
   One cached SVG is reused as faint decoration.
   JavaScript keeps Block 3 completely clear.
   ========================================= */

#background-print-layer {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.background-print {
  position: absolute;
  width: var(--print-width);
  height: auto;
  display: block;
  opacity: 0;
  transform:
    translate(-50%, -50%)
    rotate(var(--print-rotation))
    scaleX(var(--print-flip, 1));
  transform-origin: center;
  transition: opacity 650ms cubic-bezier(.22,.61,.36,1);
}

#website-content,
#site-footer {
  position: relative;
  z-index: 1;
}

.background-print-light {
  opacity: 0.075;
}

html[data-theme="dark"] .background-print-light {
  opacity: 0;
}

html[data-theme="dark"] .background-print-dark {
  opacity: 0.075;
}

button,
a { font-family: "Times New Roman", Times, serif; }

#website-content { width: 100%; }

/* =========================================
   STARTUP LOGO / HEADER
   ========================================= */

#site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  overflow: hidden;
  z-index: 10000;
  transition:
    height 700ms cubic-bezier(.22,.61,.36,1),
    padding-top 700ms cubic-bezier(.22,.61,.36,1),
    background 500ms ease,
    transform 350ms ease;
}

#site-header.loaded {
  height: calc(var(--menu-height) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: var(--menu-background);
  border-bottom: 1px solid var(--menu-border);
}

#site-header.hidden { transform: translateY(-110%); }
#site-header.menu-open { transform: translateY(0); }

.header-logo-link {
  position: absolute;
  left: 50%;
  top: 50vh;
  top: 50dvh;
  width: var(--startup-logo-width);
  height: var(--startup-logo-height);
  display: grid;
  place-items: center;
  flex: none;
  margin: 0;
  transform: translate(-50%, -50%);
  line-height: 0;
  cursor: pointer;
  z-index: 1;
  transition:
    top 700ms cubic-bezier(.22,.61,.36,1),
    width 700ms cubic-bezier(.22,.61,.36,1),
    height 700ms cubic-bezier(.22,.61,.36,1);
}

#site-header.loaded .header-logo-link,
#site-header.loaded.hidden .header-logo-link,
#site-header.loaded.menu-open .header-logo-link {
  left: 50%;
  top: calc(env(safe-area-inset-top) + var(--menu-height) / 2);
  width: calc(var(--menu-height) * 1.65787);
  height: calc(var(--menu-height) * 0.99764);
  aspect-ratio: 467 / 281;
  margin: 0;
  transform: translate(-50%, -50%);
}

#site-header .header-logo-link .site-logo-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}

#site-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;

  transition: opacity 560ms cubic-bezier(.22,.61,.36,1);
}

#site-header.loaded #site-logo {
  width: 100%;
  height: 100%;

  /*
    The black artwork is slightly below the SVG canvas center,
    so lift it a touch for optical centering in the menu.
  */
  transform: none;
}

/* HAMBURGER */

#menu-toggle {
  position: absolute;
  left: clamp(12px, 3vw, 28px);
  top: calc(env(safe-area-inset-top) + var(--menu-height) / 2);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--hamburger-gap);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

#site-header.loaded #menu-toggle {
  opacity: 1;
  pointer-events: auto;
}

#menu-toggle span {
  display: block;
  width: var(--hamburger-width);
  height: var(--hamburger-thickness);
  background: #050505;
  border-radius: 2px;
  transition: transform 300ms ease, opacity 200ms ease;
}

#menu-toggle.open span:nth-child(1) {
  transform: translateY(calc(var(--hamburger-gap) + var(--hamburger-thickness))) rotate(45deg);
}

#menu-toggle.open span:nth-child(2) { opacity: 0; }

#menu-toggle.open span:nth-child(3) {
  transform: translateY(calc(-1 * (var(--hamburger-gap) + var(--hamburger-thickness)))) rotate(-45deg);
}

/* SUBMENU */

#submenu {
  position: fixed;
  top: calc(var(--menu-height) + env(safe-area-inset-top));
  left: 0;
  width: 100%;
  padding: 26px 20px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.10);
  transform: translateY(-120%);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: transform 350ms ease, opacity 250ms ease;
}

#submenu.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

#submenu a {
  color: var(--default-text-color);
  text-decoration: none;
  font-size: var(--submenu-font-size);
  font-weight: bold;
  text-align: center;
}

#background-blur {
  position: fixed;
  inset: 0;
  backdrop-filter: blur(var(--background-blur-strength));
  -webkit-backdrop-filter: blur(var(--background-blur-strength));
  background: rgba(255,255,255,0.15);
  opacity: 0;
  pointer-events: none;
  z-index: 9000;
  transition: opacity 250ms ease;
}

#background-blur.active {
  opacity: 1;
  pointer-events: auto;
}

/* =========================================
   BLOCK 1 — FULL-SCREEN TITLE
   ========================================= */

#home {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin-bottom: var(--block-1-bottom-gap);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.title-block {
  width: min(100%, 1100px);
  margin: 0 auto;
  text-align: center;

  opacity: 0;
  transform: translate3d(0, 30px, 0);

  transition:
    opacity 720ms cubic-bezier(.22, .72, .24, 1),
    transform 880ms cubic-bezier(.22, .72, .24, 1);

  will-change: opacity, transform;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.title-block.block-1-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.title-block.block-1-passed {
  opacity: 0;
  transform: translate3d(0, 110px, 0);
}

.main-title {
  margin: 0;
  color: var(--title-color);
  font-size: var(--title-size);
  font-weight: bold;
  letter-spacing: var(--title-spacing);
  line-height: 1;
  text-align: center;
}

.main-subtitle {
  margin-top: var(--subtitle-indent);
  margin-bottom: 0;
  color: var(--subtitle-color);
  font-size: var(--subtitle-size);
  font-weight: normal;
  letter-spacing: var(--subtitle-spacing);
  line-height: 1.2;
  text-align: center;
}

/* =========================================
   BLOCK 2 — SLIDESHOW
   ========================================= */

#slideshow-block {
  width: 100%;
  padding: clamp(36px, 6vh, 70px) 0 var(--block-2-bottom-gap);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.5vw, 26px);
}

#slideshow-box {
  width: calc(100% - (var(--slideshow-side-margin) * 2));
  height: clamp(520px, 78vh, 900px);
  height: var(--slideshow-locked-height, var(--slideshow-height));
  padding: var(--slideshow-padding-vertical) var(--slideshow-padding-horizontal);
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: var(--slideshow-row-gap);
  overflow: hidden;
  border-radius: var(--slideshow-radius);
  background: var(--slideshow-background);
  border: 1px solid var(--slideshow-border);
  box-shadow:
    inset 0 1px 0 var(--slideshow-inset-highlight),
    inset 0 -10px 24px rgba(91, 52, 33, 0.035),
    0 14px 34px var(--slideshow-shadow-color);
  backdrop-filter: blur(var(--slideshow-blur));
  -webkit-backdrop-filter: blur(var(--slideshow-blur));
  contain: layout paint;
  opacity: 1;
  visibility: visible;
}

#slideshow-box.slideshow-ready {
  opacity: 1;
  visibility: visible;
}

.picture-row {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;

  padding-top: var(--media-shadow-safe-space);
  padding-bottom: var(--media-shadow-safe-space);

  display: flex;
  align-items: center;
}

.picture-track {
  height: calc(
    100% - (var(--media-shadow-safe-space) * 2)
  );

  width: max-content;
  min-width: max-content;

  display: flex;
  flex-wrap: nowrap;
  align-items: center;

  gap: 0;

  will-change: transform;
}

.picture-track-set {
  height: 100%;
  width: max-content;
  min-width: max-content;

  display: flex;
  flex-wrap: nowrap;
  align-items: center;

  gap: var(--slideshow-picture-gap);

  flex: 0 0 auto;

  padding-right: var(--slideshow-picture-gap);
}

/* Create the animation only after JavaScript has measured the exact cycle.
   Starting it with the old 0px fallback caused the visible opening snap. */
#slideshow-box.slideshow-ready .row-1 .picture-track { animation: slideshow-left var(--row-duration, 30s) linear infinite; }
#slideshow-box.slideshow-ready .row-2 .picture-track { animation: slideshow-right var(--row-duration, 40s) linear infinite; }
#slideshow-box.slideshow-ready .row-3 .picture-track { animation: slideshow-left var(--row-duration, 24s) linear infinite; }

.media-frame {
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: var(--media-aspect-ratio);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow);
}

.media-frame img,
.media-frame video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
  filter: none;
}

@keyframes slideshow-left {
  from { transform: translateX(0); }
  to {
    transform:
      translateX(calc(-1 * var(--loop-distance, 0px)));
  }
}

@keyframes slideshow-right {
  from {
    transform:
      translateX(calc(-1 * var(--loop-distance, 0px)));
  }
  to { transform: translateX(0); }
}

.slideshow-more-link {
  display: block;
  width: fit-content;
  margin: 0 auto;
  color: var(--default-text-color);
  font-size: var(--body-size);
  font-weight: bold;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 200ms ease, transform 200ms ease;
}

.slideshow-more-link:hover,
.slideshow-more-link:focus-visible {
  opacity: 0.65;
  transform: translateX(2px);
}

/* =========================================
   BLOCK 3 — TEXT + ELECTRIC SVG
   ========================================= */

#block-3 {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin-top: var(--block-3-top-gap);
  margin-bottom: var(--block-3-bottom-gap);
  padding: 0 var(--block-3-side-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

#electric-art {
  position: absolute;
  left: var(--electric-art-x);
  top: var(--electric-art-y);
  width: min(var(--electric-art-width), var(--electric-art-max-width));
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

#electric-art svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

#electric-art .electric-source {
  fill: none !important;
  stroke: none !important;
  opacity: 0 !important;
}

#electric-art .electric-breadcrumb,
#electric-art .electric-trail,
#electric-art .electric-glow,
#electric-art .electric-core,
#electric-art .electric-warm {
  fill: none !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

#electric-art .electric-breadcrumb {
  stroke: rgba(64, 139, 215, 0.20) !important;
  stroke-width: calc(var(--electric-trail-width) * 0.72);
  opacity: 0;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 1.5px rgba(77, 166, 255, 0.22));
  animation: electric-breadcrumb-cycle var(--electric-loop-time) linear infinite;
}

@keyframes electric-breadcrumb-cycle {
  0% {
    opacity: 0;
    stroke-dashoffset: 100;
  }

  3% {
    opacity: 0.72;
  }

  60% {
    opacity: 0.72;
    stroke-dashoffset: 0;
  }

  74% {
    opacity: 0.72;
    stroke-dashoffset: 0;
  }

  88% {
    opacity: 0;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 100;
  }
}

#electric-art .electric-trail {
  stroke: var(--electric-blue) !important;
  stroke-width: var(--electric-trail-width);
  opacity: 0;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 2px rgba(77,166,255,0.55));
  animation: electric-trail-cycle var(--electric-loop-time) linear infinite;
}

#electric-art .electric-glow {
  stroke: var(--electric-blue) !important;
  stroke-width: var(--electric-glow-width);
  opacity: 0;

  stroke-dasharray: 7 93;
  stroke-dashoffset: 100;

  filter:
    blur(var(--electric-glow-blur))
    drop-shadow(0 0 10px var(--electric-blue));

  animation:
    electric-run-cycle
    var(--electric-loop-time)
    linear
    infinite;
}

#electric-art .electric-core {
  stroke: var(--electric-white) !important;
  stroke-width: var(--electric-core-width);
  opacity: 0;
  stroke-dasharray: 4 96;
  stroke-dashoffset: 100;
  filter:
    drop-shadow(0 0 2px var(--electric-white))
    drop-shadow(0 0 6px var(--electric-yellow));
  animation: electric-run-cycle var(--electric-loop-time) linear infinite;
}

#electric-art .electric-warm {
  stroke: var(--electric-yellow) !important;
  stroke-width: calc(var(--electric-core-width) * 1.3);
  opacity: 0;
  stroke-dasharray: 3 97;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 7px var(--electric-orange));
  animation: electric-warm-cycle var(--electric-loop-time) linear infinite;
}


@keyframes electric-run-cycle {
  0% {
    opacity: 0;
    stroke-dashoffset: 100;
  }

  2% {
    opacity: 1;
  }

  60% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  64% {
    opacity: 0.18;
    stroke-dashoffset: 0;
  }

  67%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes electric-trail-cycle {
  0% {
    opacity: 0;
    stroke-dashoffset: 100;
  }

  3% {
    opacity: var(--electric-trail-opacity);
  }

  60% {
    opacity: var(--electric-trail-opacity);
    stroke-dashoffset: 0;
  }

  74% {
    opacity: var(--electric-trail-opacity);
    stroke-dashoffset: 0;
  }

  86% {
    opacity: 0;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 100;
  }
}

@keyframes electric-warm-cycle {
  0% {
    opacity: 0;
    stroke-dashoffset: 100;
  }

  8% {
    opacity: 0.85;
    stroke: var(--electric-yellow) !important;
  }

  15% {
    opacity: 0.10;
  }

  24% {
    opacity: 0.80;
    stroke: var(--electric-orange) !important;
  }

  34% {
    opacity: 0.08;
  }

  46% {
    opacity: 0.70;
    stroke: var(--electric-yellow) !important;
  }

  56% {
    opacity: 0.10;
  }

  61% {
    opacity: 0;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

/* Mobile Block 3 uses dedicated SVG layers defined in the phone media query. */
#electric-art .mobile-electric-breadcrumb,
#electric-art .mobile-electric-tail,
#electric-art .mobile-electric-lead-halo,
#electric-art .mobile-electric-lead-core {
  display: none;
  fill: none !important;
  opacity: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

@keyframes mobile-electric-trace {
  0%, 5% {
    opacity: 0;
    stroke-dashoffset: 100;
  }
  7% {
    opacity: 1;
    stroke-dashoffset: 100;
  }
  50% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  53%, 100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes mobile-electric-tail-trace {
  0%, 8% {
    opacity: 0;
    stroke-dashoffset: 100;
  }
  10% {
    opacity: 0.92;
    stroke-dashoffset: 100;
  }
  52% {
    opacity: 0.92;
    stroke-dashoffset: 0;
  }
  57%, 100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes mobile-electric-art-reveal {
  0%, 6% {
    opacity: 0;
    stroke-dashoffset: 100;
  }
  9% {
    opacity: 0.12;
    stroke-dashoffset: 100;
  }
  50% {
    opacity: 0.62;
    stroke-dashoffset: 0;
  }
  72% {
    opacity: 0.62;
    stroke-dashoffset: 0;
  }
  88%, 100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes mobile-electric-flicker {
  0%, 100% { stroke-width: 1.35; }
  45% { stroke-width: 1.75; }
  52% { stroke-width: 1.20; }
}

.block-3-copy {
  position: relative;
  z-index: 2;
  width: min(90vw, 760px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.block-3-subtitle,
.block-3-body {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  opacity: 0;
  transform: translateY(var(--block-3-text-rise));
  transition:
    opacity var(--block-3-text-speed) ease,
    transform var(--block-3-text-speed) ease;
}

.block-3-subtitle {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--block-3-subtitle-color);
  font-size: var(--block-3-subtitle-size);
  font-weight: var(--block-3-subtitle-weight);
  letter-spacing: var(--block-3-subtitle-spacing);
  line-height: 1.1;
}

.block-3-body {
  margin-top: var(--block-3-text-gap);
  margin-bottom: 0;
  color: var(--block-3-body-color);
  font-size: var(--block-3-body-size);
  font-weight: var(--block-3-body-weight);
  letter-spacing: var(--block-3-body-spacing);
  line-height: 1.45;
  transition-delay: var(--block-3-body-delay);
}

#block-3.block-visible .block-3-subtitle,
#block-3.block-visible .block-3-body {
  opacity: 1;
  transform: translateY(0);
}

#block-3.block-passed .block-3-subtitle,
#block-3.block-passed .block-3-body {
  opacity: 0;
  transform: translateY(calc(-1 * var(--block-3-text-rise)));
  transition-delay: 0ms;
}

/* =========================================
   BLOCK 4 — CONTACT + SLOT MACHINE
   ========================================= */

#contact.contact-block {
  width: 100%;
  min-height: clamp(360px, 58dvh, 620px);
  padding: clamp(70px, 10vh, 120px) clamp(18px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(34px, 7vh, 70px);
  overflow: hidden;
}

.contact-copy {
  width: 100%;
  margin: 0 auto;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--contact-gap);
  text-align: center;
}

.contact-title {
  margin: 0;
  color: var(--contact-title-color);
  font-size: var(--contact-title-size);
  font-weight: bold;
  line-height: 1.05;
  text-align: center;
}

.contact-email {
  color: var(--contact-email-color);
  font-size: var(--contact-email-size);
  font-weight: normal;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-align: center;
}

.slot-row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--slot-row-gap);
  font-size: var(--slot-emoji-size);
  pointer-events: none;
}

.slot-window {
  position: relative;
  width: var(--slot-window-width);
  height: var(--slot-window-height);
  flex: 0 0 var(--slot-window-width);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.25) 2px, #000 5px, #000 calc(100% - 5px), rgba(0,0,0,.25) calc(100% - 2px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.25) 2px, #000 5px, #000 calc(100% - 5px), rgba(0,0,0,.25) calc(100% - 2px), transparent 100%);
}

.slot-symbol {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  will-change: transform, opacity, filter;
}

.slot-window.slot-spinning .slot-symbol {
  animation: slot-drop 400ms linear infinite;
}

@keyframes slot-drop {
  0% { transform: translate(-50%, -145%); opacity: .1; }
  25% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(-50%, 55%); opacity: .1; }
}

.slot-window.slot-stopped .slot-symbol {
  animation: none;
  transform: translate(-50%, -50%);
  opacity: 1;
}

.slot-row.slot-win .slot-window {
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
  animation: slot-heartbeat var(--slot-win-speed) ease-in-out 2;
}

@keyframes slot-heartbeat {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(255,0,0,0));
  }
  45% {
    transform: scale(var(--slot-win-scale));
    filter:
      drop-shadow(0 0 var(--slot-win-blur) var(--slot-win-color))
      drop-shadow(0 0 calc(var(--slot-win-blur) * 1.7) rgba(255,145,35,.34));
  }
  62% {
    transform: scale(1.03);
    filter: drop-shadow(0 0 5px rgba(255,91,24,.38));
  }
}

/* Mobile win: a visible two-beat pop, not only a color flash. */
@keyframes slot-mobile-win-pulse {
  0%, 10%, 100% {
    transform: translate(-50%, -50%) scale(1);
    filter: drop-shadow(0 0 0 rgba(255, 72, 18, 0));
  }

  28% {
    transform: translate(-50%, -50%) translateY(-0.16em) scale(1.22);
    filter:
      drop-shadow(0 0 10px rgba(255, 72, 18, 0.72))
      drop-shadow(0 0 18px rgba(255, 151, 42, 0.42));
  }

  46% {
    transform: translate(-50%, -50%) translateY(-0.015em) scale(1.02);
    filter: drop-shadow(0 0 4px rgba(255, 91, 24, 0.30));
  }

  67% {
    transform: translate(-50%, -50%) translateY(-0.10em) scale(1.16);
    filter:
      drop-shadow(0 0 8px rgba(255, 72, 18, 0.62))
      drop-shadow(0 0 15px rgba(255, 151, 42, 0.36));
  }

  86% {
    transform: translate(-50%, -50%) scale(1);
    filter: drop-shadow(0 0 2px rgba(255, 91, 24, 0.20));
  }
}

/* =========================================
   BLOCK 5 — FOOTER
   ========================================= */

#site-footer {
  width: 100%;
  min-height: var(--footer-height);
  padding: 18px var(--footer-side-padding);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: var(--footer-background);
}

.footer-text {
  margin: 0;
  color: var(--footer-text-color);
  font-family: "Courier New", Courier, monospace;
  font-size: var(--footer-text-size);
  font-weight: normal;
  line-height: 1.2;
  text-align: left;
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 600px) {
  :root {
    --menu-height: 56px;
    --startup-logo-width: min(84vw, 430px);
    --startup-logo-height: min(52vh, 360px);
    --slideshow-padding-vertical: 36px;
    --slideshow-padding-horizontal: 14px;
    --slideshow-row-gap: 18px;
    --slideshow-picture-gap: 10px;
    --slideshow-radius: 20px;
    --electric-art-width: 122vw;
    --contact-left-position: 12%;
    --slot-row-gap: clamp(16px, 6vw, 30px);
  }

  #home {
    min-height: 100svh;
    margin-bottom: clamp(80px, 13vh, 130px);
  }

  #slideshow-block {
    padding-bottom: clamp(58px, 8vh, 88px);
  }

  #block-3 {
    min-height: 100svh;
    margin-top: clamp(48px, 7vh, 76px);
    margin-bottom: clamp(20px, 3vh, 34px);
  }

  /* Disable the original desktop/tablet artwork animation on phones. */
  #electric-art .electric-breadcrumb,
  #electric-art .electric-trail,
  #electric-art .electric-glow,
  #electric-art .electric-core,
  #electric-art .electric-warm {
    display: none;
    animation: none;
  }

  #electric-art .mobile-electric-breadcrumb,
  #electric-art .mobile-electric-tail,
  #electric-art .mobile-electric-lead-halo,
  #electric-art .mobile-electric-lead-core {
    display: inline;
    stroke-dashoffset: 100;
  }

  #electric-art .mobile-electric-breadcrumb {
    stroke: #8fd3ff !important;
    stroke-width: 1.05;
    stroke-dasharray: 100;
    filter:
      drop-shadow(0 0 2px rgba(143, 211, 255, 0.72))
      drop-shadow(0 0 5px rgba(92, 179, 255, 0.34));
  }

  #electric-art .mobile-electric-tail {
    stroke: #ffc83d !important;
    stroke-width: 2.15;
    stroke-dasharray: 13 87;
    filter:
      drop-shadow(0 0 3px rgba(255, 204, 61, 0.95))
      drop-shadow(0 0 7px rgba(255, 125, 28, 0.72));
  }

  #electric-art .mobile-electric-lead-halo {
    stroke: #53adff !important;
    stroke-width: 5.4;
    stroke-dasharray: 2.4 97.6;
    filter:
      blur(2.8px)
      drop-shadow(0 0 7px rgba(83, 173, 255, 0.98))
      drop-shadow(0 0 12px rgba(158, 220, 255, 0.76));
  }

  #electric-art .mobile-electric-lead-core {
    stroke: #f5fcff !important;
    stroke-width: 1.35;
    stroke-dasharray: 1.7 98.3;
    filter:
      drop-shadow(0 0 2px #ffffff)
      drop-shadow(0 0 5px #62b9ff);
  }

  #electric-art.mobile-electric-active .mobile-electric-breadcrumb {
    animation: mobile-electric-art-reveal 8s linear infinite;
  }

  #electric-art.mobile-electric-active .mobile-electric-tail {
    animation: mobile-electric-tail-trace 8s linear infinite;
  }

  #electric-art.mobile-electric-active .mobile-electric-lead-halo {
    animation: mobile-electric-trace 8s linear infinite;
  }

  #electric-art.mobile-electric-active .mobile-electric-lead-core {
    animation:
      mobile-electric-trace 8s linear infinite,
      mobile-electric-flicker 260ms steps(2, end) infinite;
  }

  .contact-copy { width: 100%; }
  #contact.contact-block {
    min-height: clamp(320px, 50svh, 500px);
    padding-top: clamp(28px, 4vh, 46px);
    padding-bottom: clamp(56px, 8vh, 88px);
  }

  .slot-row.slot-win .slot-window {
    transform-origin: center;
    animation: none;
  }

  .slot-row.slot-win .slot-symbol {
    transform-origin: center;
    animation: slot-mobile-win-pulse 1750ms cubic-bezier(.22,.72,.24,1) both;
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  :root {
    --menu-height: 62px;
    --startup-logo-width: min(72vw, 580px);
    --startup-logo-height: min(54vh, 450px);
  }
}

@media (min-width: 1400px) {
  :root {
    --menu-height: 66px;
    --startup-logo-width: min(58vw, 760px);
    --startup-logo-height: min(58vh, 590px);
    --slideshow-side-margin: 30px;
    --electric-art-width: 105vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  #site-header,
  #submenu,
  #menu-toggle span,
  #background-blur,
  .title-block,
  .block-3-subtitle,
  .block-3-body {
    transition: none !important;
  }

  .picture-track,
  .slot-window.slot-spinning .slot-symbol,
  .slot-row.slot-win .slot-window {
    animation: none !important;
  }
}

/* Preserve the requested mobile jackpot pulse even when other motion is reduced. */
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .slot-row.slot-win .slot-window {
    animation: none !important;
  }

  .slot-row.slot-win .slot-symbol {
    animation: slot-mobile-win-pulse 1750ms cubic-bezier(.22,.72,.24,1) both !important;
  }
}


/* =========================================
   BLOCK 3 — staggered text alignment
   ========================================= */

.block-3-copy {
  width: min(92vw, 1100px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.block-3-subtitle {
  align-self: flex-start;
  text-align: left;
}

.block-3-body {
  align-self: flex-end;
  text-align: right;
}