/* ==========================================================================
   1. Global CSS Reset & Setup
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #eae7e2;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}

/* ==========================================================================
   2. Main Canvas & Layout Containers
   ========================================================================== */
.limo-canvas {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.intro-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30vw;
  /* Scales the text container box relative to screen size */
  max-width: 420px;
  min-width: 280px;
  /* Prevents text box from getting too narrow */
  text-align: center;
  line-height: 1;
  color: #1b263d;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  /* Controls the vertical space between the heading and subline - adjust to taste */
}

/* Main heading text ("LIMO.LAND") - sized independently of the container
   so it can scale separately from the smaller hover-instruction subtext */
.intro-text p {
  font-family: "kodai-latin", sans-serif;
  /* TODO: confirm exact name/weight in Adobe Fonts kit CSS */
  font-size: clamp(150px, 12vw, 320px);
  /* Floor and ceiling keep it balanced against the surrounding character artwork and prevent the old hard cliff at the 1600px breakpoint */
  /* Fluid typography text size scales with screen size */
  line-height: 1;
}

/* Trademark symbol next to the "LIMO.LAND" heading */
.trademark {
  font-family: "Courier Prime", monospace;
  font-weight: 400;
  font-size: clamp(14px, 1vw, 28px);
  /* Matches the heading's floor/ceiling approach so it stays proportionate instead of vanishing at small sizes */
  /* Slightly smaller than the subline (1.25vw) */
  vertical-align: baseline;
  /* Sits on the baseline rather than raised like a superscript */
  margin-left: -0.2em;
  /* Keeps it close to the wording */
}

/* NEW: Style rules for your instruction line */
.hover-instruction {
  font-family: "Courier Prime", monospace;
  /* Simple typewriter-style font */
  font-weight: 400;
  margin-top: -1vw;
  /* Pulls subline closer to heading, offsetting font leading - adjust to taste */
  font-size: clamp(20px, 1.25vw, 28px);
  /* Bounds raised to stay visually balanced against the surrounding character artwork; ceiling still keeps it from outgrowing the box and wrapping */
  /* Slightly smaller than main text for hierarchy */
  color: #1b263d;
  font-style: normal;
  /* Makes it instantly recognizable as a helper/instruction hint */
  letter-spacing: 0.03em;
}

/* ==========================================================================
   3. Core Layering Rules (Structural Isolation Fix)
   ========================================================================== */
.character-container {
  position: absolute;
  z-index: 0;
  /* Forces every character to create its own stacking context uniformly, so overlapping hover zones stack by DOM order (not by which one happens to use "transform") */
}

/* The invisible mouse interactive pane MUST block everything else */
.hover-trigger-zone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  cursor: pointer;
}

/* The wrapper that safely bundles the visuals below the mouse tracker */
.graphic-layers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Base image scaling properties */
.graphic-layers img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Visual Opacity Defaults */
.static-img {
  z-index: 3;
  opacity: 1;
}

.gif-img {
  z-index: 2;
  opacity: 0;
}

.extra-overlay-img {
  z-index: 4;
  opacity: 0;
}

/* ==========================================================================
   4. Fluid Scattered Coordinates (Responsive Layout Rules)
   ========================================================================== */

/* 
   By sizing items in 'vw' (Viewport Width), 15vw means exactly 
   "15% of the total screen width". This makes the items auto-shrink 
   on smaller screens and expand beautifully on larger ones.
*/

.ch1 {
  top: 10%;
  left: 12%;
  width: 20vw;
  height: 20vw;
  min-width: 300px;
  /* Safeguard: ensures art doesn't shrink into nothing */
  min-height: 300px;
}

.character-container.ch2 {
  z-index: 1; /* Wins hover priority over ch5's larger box wherever the two overlap, since ch2's box is tightly matched to its actual visible art */
}

.ch2 {
  top: 7%;
  left: 57%;
  width: 3.2vw;
  height: 5.4vw;
  /* Matches window-static.png's actual aspect ratio (200x337) so the hover zone doesn't extend into blank letterboxed space */
  min-width: 133px;
  min-height: 225px;
}

.ch4 {
  bottom: 12%;
  left: 30%;
  transform: translateX(-50%);
  width: 11vw;
  height: 11vw;
  min-width: 550px;
  min-height: 228px;
}

.ch5 {
  top: 16%;
  left: 80%;
  transform: translateX(-50%);
  width: 12.1vw;
  height: 5.02vw;
  min-width: 600px;
  min-height: 600px;
}

/* Mobile-only nudge to scroll to the sign-up section - hidden by default so
   it doesn't sit in the middle of the desktop absolute-positioned layout */
.scroll-prompt {
  display: none;
}

/* Desktop-only clickable prompt, bottom-centre of the canvas, that smooth-scrolls
   down to the sign-up section - unlike .intro-text this needs pointer-events
   re-enabled since it must actually be clickable */
.desktop-scroll-prompt {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Courier Prime", monospace;
  font-size: 15px;
  color: #1b263d;
  text-decoration: none;
  letter-spacing: 0.03em;
  opacity: 0.7;
  pointer-events: auto;
  z-index: 10;
}

.desktop-scroll-prompt:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ==========================================================================
   5. Cursor Ripple Trail Effect
   ========================================================================== */

.cursor-ripple {
  position: fixed;
  /* Keeps it aligned relative to the screen view frame */
  top: 0;
  left: 0;
  width: 30px;
  /* The tiny starting diameter */
  height: 30px;
  background-color: rgba(101, 101, 101, 0.1);
  /* Solid dark gray with 40% in */
  /*background-color: transparent; /* No backfill color */
  /*border: 1.5px solid rgba(26, 26, 26, 0.45); /* Soft, clear dark gray line */
  border-radius: 50%;
  /* Makes it a perfect circle */
  pointer-events: none;
  /* Crucial: ensures the dots never block your character hovers! */
  z-index: 9999;
  /* Forces the trail to sit on top of everything else on screen */
  transform: translate(-50%, -50%);
  /* Centers the expanding circle directly on your cursor tip */

  /* 
     This creates the expanding and fading transition.
     0.6s is how long the ripple takes to completely vanish.
     ease-out means it bursts fast at first and slows down near the end.
  */
  transition: width 0.60s ease-out, height 0.60s ease-out, opacity 0.60s ease-out;
  opacity: 1;
}

/* The expanding, vanishing destination state added by JavaScript */
.cursor-ripple.expand {
  width: 120px;
  /* The final size the ring expands out to */
  height: 120px;
  opacity: 0;
  /* Completely fades away */
}


/* ==========================================================================
   6. Mobile Optimization (The Layout & Interaction Fix)
   ========================================================================== */
@media (max-width: 768px),
(hover: none) {

  /* Orderly vertical layout flow */
  .limo-canvas {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    padding: 20px 20px 50px;
    gap: 40px;
    overflow-y: auto;
  }

  /* Testing mobile with just ch1 visible - ch2, ch4, ch5 hidden for now.
     Needs the .character-container prefix for higher specificity - both rules are
     !important and equal specificity ties go to source order, and .character-container's
     display:block !important rule below would otherwise win by appearing later */
  .character-container.ch2,
  .character-container.ch4,
  .character-container.ch5 {
    display: none !important;
  }

  /* ch1 auto-plays its animation on a loop on mobile instead of waiting for a
     tap - !important needed since script.js's touch handlers set these via
     inline style, which would otherwise win over a plain CSS rule */
  .ch1 .static-img {
    opacity: 0 !important;
  }

  .ch1 .gif-img {
    opacity: 1 !important;
  }

  .desktop-scroll-prompt {
    display: none;
  }

  .scroll-prompt {
    display: block;
    font-family: "Courier Prime", monospace;
    font-size: 15px;
    color: #1b263d;
    text-align: center;
    opacity: 0.7;
    margin-top: 40px;
  }

  .intro-text {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 450px;
    margin-bottom: 10px;
  }

  .intro-text p {
    font-size: 150px !important;
  }

  .hover-instruction {
    font-size: 18px !important;
  }

  .trademark {
    font-size: 12px !important;
  }

  /* Forced absolute stacking context for EACH isolated mobile grid item block */
  .character-container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    transform: none !important;
    width: 160px !important;
    height: 160px !important;
    display: block !important;
  }

  /* 
     THE ULTIMATE MOBILE TRICK:
     We force the invisible hit zone to use z-index: 999 and explicitly 
     assign an invisible background color. Without background-color, 
     iOS Safari considers the element 'hollow' and lets taps bypass it.
  */
  .hover-trigger-zone {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999 !important;
    /* Floats above everything else */
    background-color: rgba(0, 0, 0, 0) !important;
    /* Invisible but physically solid to fingers */
    cursor: pointer !important;

    /* Tells Safari to process finger taps instantly without wait delays */
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
  }

  .graphic-layers {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    /* Safely tucked underneath the trigger zone */
  }
}

/* ==========================================================================
   7. Sign-up Section (below the main canvas)
   ========================================================================== */
.signup-section {
  background-color: #1b263d;
  padding: 120px 24px;
}

.signup-content {
  max-width: 640px;
  margin: 0 auto;
}

.signup-headline {
  font-family: "Courier Prime", monospace;
  font-weight: 700;
  font-size: clamp(24px, 4vw, 24px);
  line-height: 1.2;
  color: #eae7e2;
  margin-bottom: 32px;
}

.signup-body {
  font-family: "Courier Prime", monospace;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.6;
  color: #eae7e2;
  margin-bottom: 24px;
}

.signup-fineprint {
  font-family: "Courier Prime", monospace;
  font-size: 15px;
  line-height: 1.5;
  color: #eae7e2;
  opacity: 0.7;
  margin-top: 20px;
}

/* Overrides for Mailchimp's own embed stylesheet, so the form reverses out
   correctly against the dark background instead of Mailchimp's default
   white-box styling */
#mc_embed_signup {
  background: transparent !important;
  clear: left;
  font-family: "Courier Prime", monospace;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

#mc_embed_signup .indicates-required {
  color: #eae7e2;
  font-family: "Courier Prime", monospace;
  display: block;
  text-align: left;
  margin-bottom: 16px;
}

#mc_embed_signup label {
  color: #eae7e2;
  font-family: "Courier Prime", monospace;
  margin-bottom: 8px;
}

#mc_embed_signup .mc-field-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#mc_embed_signup input[type="email"] {
  background: transparent;
  border: 1px solid #eae7e2;
  color: #eae7e2;
  font-family: "Courier Prime", monospace;
  font-size: 16px;
  padding: 12px 16px;
  width: 100%;
  max-width: 400px;
  border-radius: 0;
}

#mc_embed_signup input[type="email"]::placeholder {
  color: rgba(234, 231, 226, 0.6);
}

#mc_embed_signup .signup-submit-row {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

#mc_embed_signup input.button {
  -webkit-appearance: none;
  appearance: none;
  background-color: #eae7e2;
  color: #1b263d;
  font-family: "Courier Prime", monospace;
  font-weight: 700;
  font-size: 20px;
  height: auto;
  /* Mailchimp's own stylesheet sets a fixed height:32px, which clipped this larger text */
  line-height: 1.3;
  border: none;
  padding: 16px 40px;
  border-radius: 0;
  cursor: pointer;
}

#mc_embed_signup input.button:hover {
  background-color: #d8d4cc; /* Mailchimp's own stylesheet sets background-color:#222 on hover, which clashed with our dark text - overriding explicitly rather than relying on opacity alone */
  color: #1b263d;
  opacity: 0.85;
}

#mc_embed_signup .response {
  color: #eae7e2;
  font-family: "Courier Prime", monospace;
}

#mc_embed_signup #mce-success-response {
  color: #eae7e2; /* Mailchimp's own stylesheet sets color:#529214 (green) here specifically, which beats the .response rule above on specificity */
}

@media (max-width: 768px) {
  .signup-section {
    padding: 60px 20px;
  }
}