/* ============================================================
   Manual Layout Calibration
   ------------------------------------------------------------
   Edit only the variables in :root to fine-tune key visual
   positions. Default values preserve the existing site layout:
   x/y = 0px, scale = 1, rotation = 0deg.

   These controls are intentionally additive. They do not change
   fonts, colors, animation timing, spacing, or layout rules.
   ============================================================ */

:root {
  /* Main landing section/background */
  --landing-page-x: 0px;
  --landing-page-y: 0px;
  --landing-page-scale: 1;
  --landing-page-rotation: 0deg;

  /* Landing: "You are entering" */
  --entering-text-x: 0px;
  --entering-text-y: 0px;
  --entering-text-scale: 1;
  --entering-text-rotation: 0deg;

  /* Landing: "The Game of Coherence" */
  --landing-title-x: 0px;
  --landing-title-y: 0px;
  --landing-title-scale: 1;
  --landing-title-rotation: 0deg;

  /* Landing: "Universe" */
  --universe-text-x: 0px;
  --universe-text-y: 0px;
  --universe-text-scale: 1;
  --universe-text-rotation: 0deg;

  /* Landing: Enter link/button text */
  --enter-text-x: 0px;
  --enter-text-y: 0px;
  --enter-text-scale: 1;
  --enter-text-rotation: 0deg;

  /* Landing: Enter arrow/control */
  --enter-arrow-x: 0px;
  --enter-arrow-y: 0px;
  --enter-arrow-scale: 1;
  --enter-arrow-rotation: 0deg;

  /* Home/welcome visual group */
  --welcome-group-x: 0px;
  --welcome-group-y: 0px;
  --welcome-group-scale: 1;
  --welcome-group-rotation: 0deg;

  /* Home: "Welcome to" */
  --welcome-text-x: 0px;
  --welcome-text-y: 0px;
  --welcome-text-scale: 1;
  --welcome-text-rotation: 0deg;

  /* Home: "The Game of Coherence" */
  --welcome-title-x: 0px;
  --welcome-title-y: 0px;
  --welcome-title-scale: 1;
  --welcome-title-rotation: 0deg;

  /* Home: "Universe" */
  --welcome-universe-text-x: 0px;
  --welcome-universe-text-y: 0px;
  --welcome-universe-text-scale: 1;
  --welcome-universe-text-rotation: 0deg;

  /* Home/music: Play button text */
  --play-text-x: 0px;
  --play-text-y: 0px;
  --play-text-scale: 1;
  --play-text-rotation: 0deg;

  /* Home/music: Play arrow/control */
  --play-arrow-x: 0px;
  --play-arrow-y: 0px;
  --play-arrow-scale: 1;
  --play-arrow-rotation: 0deg;

  /* Header brand on the app shell */
  --site-brand-x: 0px;
  --site-brand-y: 0px;
  --site-brand-scale: 1;
  --site-brand-rotation: 0deg;

  /* Main navigation group */
  --main-nav-x: 0px;
  --main-nav-y: 0px;
  --main-nav-scale: 1;
  --main-nav-rotation: 0deg;

  /* Back arrow used on inner pages */
  --back-arrow-x: 0px;
  --back-arrow-y: 0px;
  --back-arrow-scale: 1;
  --back-arrow-rotation: 0deg;

  /* Books, Novels, Music: Coming Soon back arrow */
  --coming-soon-back-arrow-x: 0px;
  --coming-soon-back-arrow-y: 0px;
  --coming-soon-back-arrow-scale: 1;
  --coming-soon-back-arrow-rotation: 0deg;

  /* Players back arrow position, preserved from the previous correct state */
  --players-back-arrow-x: 2px;
  --players-back-arrow-y: 0px;
  --players-back-arrow-scale: 1;
  --players-back-arrow-rotation: 0deg;

  /* BACK ARROW CALIBRATION START */
  /* Books page back arrow position */
  --books-back-arrow-x: 0px;
  --books-back-arrow-y: 0px;

  /* Novels page back arrow position */
  --novels-back-arrow-x: 0px;
  --novels-back-arrow-y: 0px;

  /* Music page back arrow position */
  --music-back-arrow-x: 0px;
  --music-back-arrow-y: 0px;
  /* BACK ARROW CALIBRATION END */

  /* Global radio/player control */
  --radio-player-x: 0px;
  --radio-player-y: 0px;
  --radio-player-scale: 1;
  --radio-player-rotation: 0deg;

  /* Founder Gate modal/dialog */
  --founder-gate-modal-x: 0px;
  --founder-gate-modal-y: 0px;
  --founder-gate-modal-scale: 1;
  --founder-gate-modal-rotation: 0deg;

  /* Founder Gate title */
  --founder-gate-title-x: 0px;
  --founder-gate-title-y: 0px;
  --founder-gate-title-scale: 1;
  --founder-gate-title-rotation: 0deg;

  /* Founder Gate first field row */
  --founder-gate-first-field-x: 0px;
  --founder-gate-first-field-y: 0px;
  --founder-gate-first-field-scale: 1;
  --founder-gate-first-field-rotation: 0deg;

  /* Founder Gate first field arrow */
  --founder-gate-first-arrow-x: 0px;
  --founder-gate-first-arrow-y: 0px;
  --founder-gate-first-arrow-scale: 1;
  --founder-gate-first-arrow-rotation: 0deg;

  /* Founder Gate second field row */
  --founder-gate-second-field-x: 0px;
  --founder-gate-second-field-y: 0px;
  --founder-gate-second-field-scale: 1;
  --founder-gate-second-field-rotation: 0deg;

  /* Founder Gate second field arrow */
  --founder-gate-second-arrow-x: 0px;
  --founder-gate-second-arrow-y: 0px;
  --founder-gate-second-arrow-scale: 1;
  --founder-gate-second-arrow-rotation: 0deg;

  /* Founder Gate info button */
  --founder-gate-info-button-x: 0px;
  --founder-gate-info-button-y: 0px;
  --founder-gate-info-button-scale: 1;
  --founder-gate-info-button-rotation: 0deg;

  /* Founder Gate close button */
  --founder-gate-close-button-x: 0px;
  --founder-gate-close-button-y: 0px;
  --founder-gate-close-button-scale: 1;
  --founder-gate-close-button-rotation: 0deg;
}

/* Main landing visual alignment */
.landing {
  transform:
    translate(var(--landing-page-x), var(--landing-page-y))
    scale(var(--landing-page-scale))
    rotate(var(--landing-page-rotation));
}

/* Keep the original landing animation active while allowing manual offsets. */
@keyframes zoomIn {
  from {
    transform:
      translate(var(--landing-page-x), var(--landing-page-y))
      scale(calc(0.3 * var(--landing-page-scale)))
      rotate(var(--landing-page-rotation));
    opacity: 0;
  }
  to {
    transform:
      translate(var(--landing-page-x), var(--landing-page-y))
      scale(var(--landing-page-scale))
      rotate(var(--landing-page-rotation));
    opacity: 1;
  }
}

.landing .small-title {
  transform:
    translate(var(--entering-text-x), var(--entering-text-y))
    scale(var(--entering-text-scale))
    rotate(var(--entering-text-rotation));
}

.landing h1 {
  transform:
    translate(var(--landing-title-x), var(--landing-title-y))
    scale(var(--landing-title-scale))
    rotate(var(--landing-title-rotation));
}

.landing .subtitle {
  transform:
    translate(var(--universe-text-x), var(--universe-text-y))
    scale(var(--universe-text-scale))
    rotate(var(--universe-text-rotation));
}

.landing .enter-button {
  transform:
    translate(var(--enter-text-x), var(--enter-text-y))
    scale(var(--enter-text-scale))
    rotate(var(--enter-text-rotation));
}

/* The Enter arrow/control uses the same element as the Enter text today. */
.landing .enter-button::after {
  transform:
    translate(var(--enter-arrow-x), var(--enter-arrow-y))
    scale(var(--enter-arrow-scale))
    rotate(var(--enter-arrow-rotation));
}

/* Home/welcome visual alignment */
.welcome {
  transform:
    translate(var(--welcome-group-x), var(--welcome-group-y))
    scale(var(--welcome-group-scale))
    rotate(var(--welcome-group-rotation));
}

.home .welcome .small-title {
  transform:
    translate(var(--welcome-text-x), var(--welcome-text-y))
    scale(var(--welcome-text-scale))
    rotate(var(--welcome-text-rotation));
}

.home .welcome h1 {
  transform:
    translate(var(--welcome-title-x), var(--welcome-title-y))
    scale(var(--welcome-title-scale))
    rotate(var(--welcome-title-rotation));
}

.home .welcome .subtitle {
  transform:
    translate(var(--welcome-universe-text-x), var(--welcome-universe-text-y))
    scale(var(--welcome-universe-text-scale))
    rotate(var(--welcome-universe-text-rotation));
}

.home .welcome .enter-button,
.music-play-button {
  transform:
    translate(var(--play-text-x), var(--play-text-y))
    scale(var(--play-text-scale))
    rotate(var(--play-text-rotation));
}

/* The Play arrow/control uses the same element as the Play text today. */
.home .welcome .enter-button::after,
.music-play-button::after {
  transform:
    translate(var(--play-arrow-x), var(--play-arrow-y))
    scale(var(--play-arrow-scale))
    rotate(var(--play-arrow-rotation));
}

/* App shell and navigation alignment */
.persistent-site-brand,
.site-title {
  transform:
    translate(var(--site-brand-x), var(--site-brand-y))
    scale(var(--site-brand-scale))
    rotate(var(--site-brand-rotation));
}

nav {
  transform:
    translate(var(--main-nav-x), var(--main-nav-y))
    scale(var(--main-nav-scale))
    rotate(var(--main-nav-rotation));
}

.back-arrow {
  transform:
    translate(var(--back-arrow-x), var(--back-arrow-y))
    scale(var(--back-arrow-scale))
    rotate(var(--back-arrow-rotation));
}

/* Preserve the existing Players arrow position without using a global offset. */
.players-page > .back-arrow {
  transform:
    translate(var(--players-back-arrow-x), var(--players-back-arrow-y))
    scale(var(--players-back-arrow-scale))
    rotate(var(--players-back-arrow-rotation));
}

/* Preserve the existing centered arrow transform on coming-soon pages. */
.coming-soon > .back-arrow {
  transform:
    translateY(-50%)
    translate(var(--coming-soon-back-arrow-x), var(--coming-soon-back-arrow-y))
    scale(var(--coming-soon-back-arrow-scale))
    rotate(var(--coming-soon-back-arrow-rotation));
}

/* BACK ARROW CALIBRATION START */
/* Page-specific back arrow offsets for visual calibration. */
.page-books.coming-soon > .back-arrow {
  transform:
    translateY(-50%)
    translate(var(--books-back-arrow-x), var(--books-back-arrow-y))
    scale(var(--coming-soon-back-arrow-scale))
    rotate(var(--coming-soon-back-arrow-rotation));
}

.page-novels.coming-soon > .back-arrow {
  transform:
    translateY(-50%)
    translate(var(--novels-back-arrow-x), var(--novels-back-arrow-y))
    scale(var(--coming-soon-back-arrow-scale))
    rotate(var(--coming-soon-back-arrow-rotation));
}

.page-music.coming-soon > .back-arrow {
  transform:
    translateY(-50%)
    translate(var(--music-back-arrow-x), var(--music-back-arrow-y))
    scale(var(--coming-soon-back-arrow-scale))
    rotate(var(--coming-soon-back-arrow-rotation));
}
/* BACK ARROW CALIBRATION END */

.global-radio {
  transform:
    translate(var(--radio-player-x), var(--radio-player-y))
    scale(var(--radio-player-scale))
    rotate(var(--radio-player-rotation));
}

/* Founder Gate manual alignment */
.founder-gate-dialog {
  transform:
    translate(var(--founder-gate-modal-x), var(--founder-gate-modal-y))
    scale(var(--founder-gate-modal-scale))
    rotate(var(--founder-gate-modal-rotation));
}

.founder-gate-title {
  transform:
    translate(var(--founder-gate-title-x), var(--founder-gate-title-y))
    scale(var(--founder-gate-title-scale))
    rotate(var(--founder-gate-title-rotation));
}

.founder-gate-form .founder-gate-input-row {
  transform:
    translate(var(--founder-gate-first-field-x), var(--founder-gate-first-field-y))
    scale(var(--founder-gate-first-field-scale))
    rotate(var(--founder-gate-first-field-rotation));
}

.founder-gate-form .founder-gate-submit {
  transform:
    translate(var(--founder-gate-first-arrow-x), var(--founder-gate-first-arrow-y))
    scale(var(--founder-gate-first-arrow-scale))
    rotate(var(--founder-gate-first-arrow-rotation));
}

.founder-gate-reveal .founder-gate-input-row {
  transform:
    translate(var(--founder-gate-second-field-x), var(--founder-gate-second-field-y))
    scale(var(--founder-gate-second-field-scale))
    rotate(var(--founder-gate-second-field-rotation));
}

.founder-gate-reveal .founder-gate-submit {
  transform:
    translate(var(--founder-gate-second-arrow-x), var(--founder-gate-second-arrow-y))
    scale(var(--founder-gate-second-arrow-scale))
    rotate(var(--founder-gate-second-arrow-rotation));
}

.founder-gate-info-button {
  transform:
    translate(var(--founder-gate-info-button-x), var(--founder-gate-info-button-y))
    scale(var(--founder-gate-info-button-scale))
    rotate(var(--founder-gate-info-button-rotation));
}

.founder-gate-close {
  transform:
    translate(var(--founder-gate-close-button-x), var(--founder-gate-close-button-y))
    scale(var(--founder-gate-close-button-scale))
    rotate(var(--founder-gate-close-button-rotation));
}