/* Threshold page styles - PostCSS entry point */

/* Import design tokens first */

/* ================================
   FONT FACE DECLARATIONS
   Single source of truth for all fonts
   Only includes fonts actually used in the codebase
   ================================ */

/* Editorial Old Font Family - Primary serif font
   Licensed weights: Regular (400) and Italic (400) only */

@font-face {
  font-family: 'Editorial Old';
  src: url("/assets/PPEditorialOld-Regular-c30b0927.otf") format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Editorial Old';
  src: url("/assets/PPEditorialOld-Italic-a0b1b148.otf") format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Handwriting Fonts - Used for personal notes, markup annotations */

@font-face {
  font-family: 'Monk Handwriting';
  src: url("/assets/monk-handwriting-36a9cba9.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Handwritten2';
  src: url("/assets/handwritten-2-8e9efa73.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ================================
   COLOR SYSTEM
   Single source of truth for all colors
   ================================ */

:root {
  /* ===== Primitive Colors ===== */

  /* Grayscale */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-50: rgba(255, 255, 255, 0.05);
  --color-gray-100: rgba(255, 255, 255, 0.15);
  --color-gray-200: rgba(0, 0, 0, 0.02);
  --color-gray-300: rgba(0, 0, 0, 0.08);
  --color-gray-400: rgba(0, 0, 0, 0.15);
  --color-gray-500: #666666;
  --color-gray-600: #555555;
  --color-gray-700: #333333;
  --color-gray-800: #1a1a1a;
  --color-gray-900: #0a0a0a;
  --color-gray-muted: #aaaaaa;

  /* Brand Colors */
  --color-ronin-red: rgb(188, 0, 45);     /* Primary red for markups, accents */
  --color-accent-purple: #7B68B8;         /* Interactive purple */

  /* ===== Semantic Tokens (Dark Theme Default) ===== */

  /* Backgrounds */
  --color-bg-primary: var(--color-black);
  --color-bg-secondary: var(--color-white);
  --color-bg-tertiary: var(--color-gray-800);
  --color-bg-overlay: var(--color-gray-50);
  --color-bg-subtle: var(--color-gray-200);

  /* Text */
  --color-text-primary: var(--color-white);
  --color-text-secondary: var(--color-black);
  --color-text-muted: var(--color-gray-muted);
  --color-text-inverse: var(--color-black);

  /* Interactive */
  --color-accent: var(--color-accent-purple);
  --color-accent-hover: var(--color-accent-purple);

  /* Feedback */
  --color-error: var(--color-ronin-red);
  --color-markup: var(--color-ronin-red);

  /* Borders */
  --color-border: var(--color-white);
  --color-border-muted: rgba(255, 255, 255, 0.3);
  --color-border-subtle: rgba(0, 0, 0, 0.1);

  /* Buttons */
  --color-button-default: var(--color-white);
  --color-button-text: var(--color-black);
  --color-button-hover: var(--color-accent-purple);
  --color-button-hover-text: var(--color-white);
}

/* ===== Light Theme Override ===== */

.light-theme {
  /* Backgrounds */
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-black);
  --color-bg-tertiary: rgba(0, 0, 0, 0.03);

  /* Text */
  --color-text-primary: var(--color-black);
  --color-text-secondary: var(--color-white);
  --color-text-muted: var(--color-gray-600);
  --color-text-inverse: var(--color-white);

  /* Borders */
  --color-border: var(--color-black);
  --color-border-muted: rgba(0, 0, 0, 0.3);

  /* Buttons */
  --color-button-default: var(--color-black);
  --color-button-text: var(--color-white);
}

/* ================================
   TYPOGRAPHY SYSTEM
   Font families, type scale, line heights, letter spacing
   ================================ */

:root {
  /* ===== Font Families ===== */

  --font-editorial: 'Editorial Old', Georgia, serif;
  --font-handwriting-monk: 'Monk Handwriting', cursive;
  --font-handwriting: 'Handwritten2', cursive;
  --font-signifier: 'Signifier', Georgia, serif;
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ===== Type Scale (fluid, mobile-first) ===== */

  /* Small text */
  --text-xs: clamp(12px, 1.5vw, 14px);
  --text-sm: clamp(14px, 1.8vw, 16px);

  /* Body text */
  --text-base: clamp(16px, 2vw, 18px);
  --text-md: clamp(16px, 2vw, 19px);

  /* Emphasized text */
  --text-lg: clamp(20px, 2.5vw, 24px);
  --text-xl: clamp(24px, 3vw, 28px);

  /* Headings */
  --text-2xl: clamp(26px, min(7vw, 6vh), 28px);
  --text-3xl: clamp(32px, 4vw, 42px);
  --text-4xl: clamp(42px, 6vw, 64px);

  /* Handwriting (typically larger) */
  --text-handwriting-sm: clamp(18px, 2.2vw, 22px);
  --text-handwriting-base: clamp(22px, 2.8vw, 28px);
  --text-handwriting-md: clamp(23px, 2.9vw, 27px);
  --text-handwriting-lg: clamp(26px, 3.2vw, 36px);

  /* ===== Line Heights ===== */

  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;
  --leading-loose: 2.1;

  /* ===== Letter Spacing ===== */

  --tracking-tighter: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.5px;
  --tracking-widest: 2px;

  /* ===== Font Weights ===== */

  --font-ultralight: 200;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 900;
}

/* ===== Mobile Overrides ===== */

@media (max-width: 768px) {
  :root {
    --text-2xl: clamp(22px, min(6vw, 5vh), 24px);
  }
}

/* ================================
   SPACING SYSTEM
   Spacing scale, layout dimensions
   ================================ */

:root {
  /* ===== Spacing Scale (fluid, mobile-first) ===== */

  /* Micro spacing */
  --space-xs: clamp(4px, 0.5vh, 6px);
  --space-sm: clamp(8px, 1vh, 12px);

  /* Standard spacing */
  --space-md: clamp(12px, 1.5vh, 16px);
  --space-lg: clamp(16px, 2vh, 20px);
  --space-xl: clamp(20px, 2.5vh, 24px);

  /* Section spacing */
  --space-2xl: clamp(24px, 3vh, 32px);
  --space-3xl: clamp(32px, 4vh, 40px);
  --space-4xl: clamp(40px, 5vh, 48px);
  --space-5xl: clamp(48px, 6vh, 64px);
  --space-6xl: clamp(64px, 8vh, 80px);
  --space-7xl: clamp(80px, 10vh, 120px);

  /* Paragraph & section gaps */
  --gap-para: clamp(24px, 2.8vh, 32px);
  --gap-section: clamp(32px, 4vh, 40px);
  --gap-large: clamp(60px, 8vh, 80px);

  /* ===== Layout Dimensions ===== */

  /* Gutters (horizontal padding) */
  --gutter: clamp(20px, 3vw, 40px);
  --gutter-lg: clamp(32px, 5vw, 120px);

  /* Content widths */
  --content-width: 650px;
  --content-width-narrative: 700px;
  --content-width-wide: 900px;
  --content-width-max: 950px;

  /* Component sizes */
  --button-padding-x: clamp(24px, 2.5vw, 32px);
  --button-padding-y: clamp(16px, 2vh, 20px);

  --input-padding-x: clamp(10px, 1.2vh, 14px);
  --input-padding-y: clamp(10px, 1.2vh, 14px);

  /* Border radius */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: clamp(6px, 1vw, 8px);
  --radius-xl: clamp(12px, 2vw, 16px);
}

/* ================================
   ANIMATION SYSTEM
   Timing functions, durations, shared keyframes
   ================================ */

:root {
  /* ===== Timing Functions ===== */

  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ===== Durations ===== */

  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 400ms;
  --duration-slower: 800ms;
  --duration-slowest: 1200ms;
}

/* ===== Shared Keyframes ===== */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDownFromTop {
  from {
    transform: translateY(-100vh);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes stampDown {
  0% {
    transform: translateY(-20px) scale(1.2);
    opacity: 0;
  }
  50% {
    transform: translateY(5px) scale(0.95);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes dissolveToStardust {
  0% {
    opacity: 1;
    filter: blur(0px);
  }
  50% {
    /* Hold fully visible for first half */
    opacity: 1;
    filter: blur(0px);
  }
  75% {
    /* Begin texture - partial fade with blur emerging */
    opacity: 0.6;
    filter: blur(2px);
  }
  100% {
    /* Stardust texture - faded but visible, textured blur */
    opacity: 0.3;
    filter: blur(6px);
  }
}

/* Import threshold styles */

/* ================================
   THRESHOLD EXPERIENCE
   Entry point with logo zoom and book transition
   ================================ */

/*
 * Design tokens are loaded globally via application.css
 * This file contains only threshold-specific styles and fonts
 */

/* ===== Threshold-Specific Fonts ===== */

/* Handwriting 2 Font - for "Turn the page" hint and other UI elements */

@font-face {
  font-family: 'Handwriting 2';
  src: url("/assets/handwritten-2-8e9efa73.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* ===== Base Styles ===== */

/* Hide global copyright */

body > .copyright {
  display: none !important;
}

/* White background - starts white, JS will change to black after zoom */

html {
  background: #ffffff;
}

body {
  background: #ffffff;
  --bg-color: #ffffff;
  --text-color: #000000;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.threshold-entry {
  min-height: 100vh;
  width: 100vw;
  background: #ffffff;
  color: #000000;
  position: relative;
  z-index: 2;
}

/* ===== Launch Screen ===== */

.launch-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  z-index: 10;
  transition: opacity 800ms ease;
  /* mix-blend-mode: multiply; - REMOVED: blocks clicks on mobile */
}

.launch-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.5vh, 8px);
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity 600ms ease;
  padding-top: clamp(40px, 6vh, 60px);
}

/* Scale down content proportionally on short viewports */

@media (max-height: 600px) {
  .launch-content {
    transform: scale(0.85);
    transform-origin: center center;
  }
}

@media (max-height: 500px) {
  .launch-content {
    transform: scale(0.7);
    transform-origin: center center;
  }
}

@media (max-height: 400px) {
  .launch-content {
    transform: scale(0.6);
    transform-origin: center center;
  }
}

.launch-content.visible {
  opacity: 1;
}

.logo-container {
  position: relative;
  /* Visual size: same as before (240px) for layout */
  width: 240px;
  height: 200.49px; /* 240 × (2596/3108) */
  line-height: 0;
  overflow: visible;
  transition: transform 800ms cubic-bezier(0.4, 0.0, 0.2, 1);

  /* Safari: Ensure GPU acceleration for container transform */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  cursor: pointer;

  /* Ensure entire container is clickable */
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.logo-container.zoom {
  /* Transform calculated dynamically by JavaScript based on viewport */
  transition: transform 800ms cubic-bezier(0.4, 0.0, 0.2, 1);
  z-index: 10;
}

/* Safari: Disable most animations to prevent UI lag, but keep zoom */

.safari-no-animation .logo-container {
  /* Allow zoom transition on Safari - it's a simple scale transform */
}

.safari-no-animation .logo-container.zoom {
  /* Keep zoom animation - it's performant and essential for UX */
  transition: transform 600ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Icon and book - align bottoms, exactly as original */

.logo-icon,
.logo-book {
  margin: 0;
  padding: 0;
  display: block;
  position: absolute;
  bottom: 0; /* Both align to container bottom - CRITICAL for zoom math */
  pointer-events: none; /* Allow clicks to pass through to container */
}

.logo-icon {
  width: 240px;
  height: 200.49px;
  left: 0;
  filter: brightness(0);
  mix-blend-mode: multiply;
}

.logo-book {
  width: 119px;
  height: 145.76px;
  left: 50%;
  margin-left: -59.5px; /* Half width for centering */
  filter: brightness(0) invert(1);
  opacity: 1;
  visibility: visible;
  mix-blend-mode: multiply;
}

/* Fade out text during zoom */

.launch-content.zooming .launch-brand,
.launch-content.zooming .launch-pronunciation,
.launch-content.zooming .launch-tagline,
.launch-content.zooming .launch-enter-hint,
.launch-content.zooming .tap-to-start {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0ms, visibility 0ms;
}

.launch-brand {
  font-family: 'Editorial Old', Georgia, serif;
  font-size: clamp(40px, 4.5vw, 56px);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 1px;
  color: #000000;
  margin-top: clamp(40px, 6vh, 70px);
  font-feature-settings: "liga" 1, "calt" 1;
  mix-blend-mode: multiply;
}

.launch-pronunciation {
  font-family: 'Editorial Old', Georgia, serif;
  font-size: clamp(14px, 1.8vw, 18px);
  font-weight: 400;
  font-style: normal;
  color: #666666;
  margin-top: 0;
  letter-spacing: 0.5px;
  mix-blend-mode: multiply;
}

.launch-tagline {
  font-family: 'Editorial Old', Georgia, serif;
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 400;
  font-style: normal;
  color: #000000;
  text-align: center;
  font-feature-settings: "liga" 1, "calt" 1;
  mix-blend-mode: multiply;
  transition: all 600ms ease;
}

.launch-enter-hint {
  font-family: var(--font-handwriting), cursive;
  margin-top: clamp(32px, 5vh, 48px);
  font-size: 33px;
  font-weight: 400;
  color: #666666;
  letter-spacing: 0;
  text-transform: lowercase;
  opacity: 0.85;
  animation: softPulseEnter 2s ease-in-out infinite;
  mix-blend-mode: multiply;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: opacity 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  /* Ensure clickable on mobile */
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

/* Mobile: Change text to indicate swipe option */

@media (max-width: 768px) {
  .launch-enter-hint span {
    font-size: 28px;
  }
}

.launch-enter-hint:hover {
  opacity: 1;
}

.enter-arrow {
  width: 35px;
  height: 35px;
  pointer-events: none; /* Let clicks pass through to parent */
}

.tap-to-start {
  font-family: 'Monk Handwriting', cursive;
  font-size: 22px;
  font-weight: 400;
  color: #666666;
  letter-spacing: 0;
  text-transform: lowercase;
  margin-top: clamp(16px, 2vh, 24px);
  opacity: 0.85;
  animation: softPulseEnter 2s ease-in-out infinite;
  mix-blend-mode: multiply;
}

/* ===== Page Footer ===== */

/* Launch screen footer - fixed at bottom, visible initially */

.launch-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  transition: opacity 300ms ease;
}

.launch-footer .page-footer {
  position: relative;
  bottom: auto;
}

/* Footer on threshold page - fixed to bottom */

.threshold-entry-body .page-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
}

/* ===== Typography System ===== */

/* Typography tokens are imported from the design system via threshold.postcss.css */

/* Using: --text-2xl, --text-lg, --text-sm */

/* ===== Opening Stage ===== */

.opening-stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms ease, transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden; /* Completely remove from interaction when hidden */
}

/* Ensure children also don't block clicks when stage is hidden */

.opening-stage > * {
  pointer-events: none;
}

/* Re-enable when visible */

.opening-stage.visible > * {
  pointer-events: auto;
}

/* Desktop: Padding based on book size (950px max-width) */

.opening-stage .desktop-only {
  /* Top padding: book top (25px) + percentage of book height for content position */
  padding: clamp(200px, calc(25px + min(100vw - 50px, 950px) * 0.20), 250px) clamp(40px, 6vw, 80px) 20px;
}

/* Mobile: Start much higher on screen */

@media (max-width: 768px) {
  .opening-stage {
    padding-top: clamp(140px, 16vh, 200px);
    padding-left: clamp(40px, 6vw, 80px);
    padding-right: clamp(40px, 6vw, 80px);
    padding-bottom: clamp(40px, 6vh, 60px);
  }
}

.opening-stage.visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible; /* Make it interactive when visible */
}

.opening-stage.slide-down {
  transform: translateY(100vh);
}

.opening-content-wrapper {
  max-width: 680px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Desktop: Constrain width */

@media (min-width: 769px) {
  .opening-content-wrapper {
    max-width: 750px;
  }
}

/* Opening Stage Content */

.intro-group {
  margin-bottom: clamp(48px, 6vh, 64px);
}

.belief-group {
  margin-top: 0;
}

/* Desktop: Scrollable content sections */

@media (min-width: 769px) {
  .desktop-only .belief-group,
  .desktop-only .name-input-section {
    /* Max-height: extend to footer with minimal gap */
    /* viewport - top padding - bottom stage padding - footer text height */
    max-height: calc(100vh - clamp(200px, calc(25px + min(100vw - 50px, 950px) * 0.20), 250px) - 20px - 30px);
    overflow-y: auto;
    overflow-x: hidden;
    /* Add top padding so text starts below gradient fade zone */
    padding-top: 50px;
    /* Add bottom padding for breathing room */
    padding-bottom: 40px;

    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  /* Minimal footer padding on threshold page to maximize content space */
  .threshold-entry-body .page-footer {
    padding: 0 clamp(12px, 2vw, 20px) 12px;
  }

  .desktop-only .belief-group::-webkit-scrollbar,
  .desktop-only .name-input-section::-webkit-scrollbar {
    display: none;
  }

  /* Apply gradient mask when content is scrollable - fade top and bottom */
  .desktop-only .belief-group.scrollable,
  .desktop-only .name-input-section.scrollable {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%);
  }
}

p.opening-title,
.opening-title {
  font-family: var(--font-editorial);
  font-size: var(--text-2xl);
  line-height: 1.2;
  margin-bottom: clamp(4px, 0.5vh, 6px);
  font-weight: 400;
  font-style: normal;
  color: #000000;
  mix-blend-mode: multiply;
}

.name-input-section .opening-title {
  margin: 0;
}

/* Mobile: Tighter spacing between paragraphs */

@media (max-width: 768px) {
  .scrollable-content .opening-title {
    margin-bottom: 8px;
  }

  .scrollable-content .opening-title br {
    display: none;
  }

  .scrollable-content .opening-title + br {
    display: none;
  }
}

/* Swipe indicator arrow - anchored just above footer (mobile only) */

.swipe-indicator {
  position: fixed;
  bottom: 80px; /* Higher above footer */
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: none; /* Hidden by default (desktop) */
  justify-content: center;
  align-items: center;
  animation: softBounce 2s ease-in-out infinite;
}

/* Show only on mobile */

@media (max-width: 768px) {
  .swipe-indicator {
    display: flex;
  }
}

.swipe-arrow {
  width: 40px;
  height: 24px;
}

@keyframes softBounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateX(-50%) translateY(8px);
    opacity: 0.85;
  }
}

.handwritten-name {
  font-family: var(--font-editorial);
  font-size: calc(var(--text-2xl) * 1.1);
}

.opening-body {
  font-size: var(--text-lg);
  line-height: 1.6;
  margin-bottom: clamp(4px, 0.5vh, 6px);
  font-weight: 400;
  color: #000000;
}

.opening-body .emphasis {
  font-weight: 500;
}

/* Continue Hint */

.continue-hint {
  font-family: var(--font-handwriting), cursive;
  margin-top: clamp(48px, 8vh, 64px);
  font-size: 33px;
  font-weight: 400;
  color: #666666;
  letter-spacing: 0;
  text-transform: lowercase;
  opacity: 0.85;
  animation: softPulseEnter 2s ease-in-out infinite;
  mix-blend-mode: multiply;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.continue-hint:hover {
  opacity: 1;
}

/* Mobile tap hint for returning users - must come after .continue-hint */

.desktop-only.continue-hint {
  /* Desktop "Turn the page" hint */
}

.mobile-tap-hint.continue-hint {
  display: none; /* Hidden on desktop */
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .mobile-tap-hint.continue-hint {
    display: flex !important; /* Visible on mobile, keep flex for centering */
  }
}

.continue-arrow {
  width: 50px;
  height: 30px;
  display: inline-block;
}

/* Section transitions */

.belief-group,
.name-input-section,
.password-input-section {
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}

.belief-group.active,
.name-input-section.active,
.password-input-section.active {
  opacity: 1;
  pointer-events: auto;
}

/* Name input section */

.name-input-section,
.password-input-section {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 4vh, 48px);
  /* Visibility controlled by opacity/pointer-events from .active class (line 515-520) */
}

.inline-name-input {
  font-family: var(--font-handwriting-monk), cursive;
  font-size: calc(var(--text-2xl) * 1.2);
  font-weight: 400;
  color: #000000;
  background: transparent;
  border: none;
  border-bottom: 3px dotted rgba(0, 0, 0, 0.5);
  padding: 2px 12px 8px 12px;
  width: 100%;
  max-width: 500px;
  text-align: center;
  transition: all 200ms ease;
  mix-blend-mode: multiply;
  outline: none;
  text-transform: capitalize;
}

.inline-name-input::-moz-placeholder {
  color: rgba(0, 0, 0, 0.25);
  font-weight: 400;
  letter-spacing: 0.15em;
}

.inline-name-input::placeholder {
  color: rgba(0, 0, 0, 0.25);
  font-weight: 400;
  letter-spacing: 0.15em;
}

.inline-name-input:focus {
  border-bottom: 3px dotted rgba(0, 0, 0, 0.7);
}

.password-hint {
  font-family: var(--font-handwriting), cursive;
  font-size: 18px;
  color: #666666;
  opacity: 0.7;
  margin-top: -20px;
}

/* ===== Animations ===== */

@keyframes softPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0.3; }
}

@keyframes softPulseEnter {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.5; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.shake {
  animation: shake 0.6s;
}

/* ===== Safari: Disable All Animations ===== */

/* Prevents UI lag on Safari by disabling all transitions and animations */

/* But keep content visible with instant opacity changes */

.safari-no-animation .launch-content {
  transition: none !important;
}

.safari-no-animation .launch-screen {
  transition: none !important;
}

.safari-no-animation .opening-stage {
  transition: none !important;
}

.safari-no-animation .pillar-left,
.safari-no-animation .pillar-right {
  transition: none !important;
}

.safari-no-animation .bar-top-left,
.safari-no-animation .bar-top-right {
  transition: none !important;
}

.safari-no-animation .final-background {
  transition: none !important;
}

.safari-no-animation .book-visual {
  transition: none !important;
}

.safari-no-animation .launch-enter-hint,
.safari-no-animation .continue-hint {
  animation: none !important;
}

.safari-no-animation .content-panel {
  transition: none !important;
}

.safari-no-animation .belief-group,
.safari-no-animation .name-input-section,
.safari-no-animation .profile-selection-section {
  transition: none !important;
}

/* Safari: Ensure invitation content is visible without transitions */

.safari-no-animation .invitation-stage,
.safari-no-animation .narrative-content,
.safari-no-animation .shokuna-header,
.safari-no-animation .invitation-header {
  transition: none !important;
}

/* Safari: Force invitation stage to be visible when active (no fade delays) */

.safari-no-animation .invitation-stage.visible {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Safari: Ensure threshold-book-wrapper is visible when shown */

.safari-no-animation .threshold-book-wrapper {
  visibility: visible !important;
  /* opacity is controlled by JS to sync with logo hide */
  /* No background - the SVG provides the white book shape */
}

/* Threshold book - when moved from logo container to scroll wrapper */

.threshold-book {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Safari: Force letter-logo to be visible with filter fallback */

.safari-no-animation .letter-logo img {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ===== Arch Pillars ===== */

.arch-pillars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 15; /* Above everything to be visible */
}

.pillar-left,
.pillar-right {
  position: absolute;
  background: #000000;
  width: 0; /* Start at 0, will be set dynamically */
  height: 0;
  top: 0;
  /* Transition is set in JS controller to avoid duplication */
  will-change: height;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.pillar-left {
  left: 0;
}

.pillar-right {
  right: 0;
}

.pillar-left.extended,
.pillar-right.extended {
  /* Height is set dynamically via inline styles - no CSS override */
}

/* ===== Horizontal Bars ===== */

.horizontal-bars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 15; /* Same as pillars */
}

.bar-top-left,
.bar-top-right {
  position: absolute;
  background: #000000;
  width: 0; /* Start at 0, will be set dynamically */
  height: 0;
  /* Transition is set in JS controller to match pillar animation */
  will-change: width;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.bar-top-left {
  left: 0;
}

.bar-top-right {
  right: 0;
}

.bar-top-left.extended,
.bar-top-right.extended {
  /* Width is set dynamically via inline styles - no CSS override */
}

/* ===== Book Visual ===== */

/* Hidden on threshold page - we use .logo-book inside logo-container instead */

/* This element is kept for potential use on invitation page */

.book-visual {
  position: fixed;
  top: 25px;
  left: 50%;
  width: calc(min(100vw - 50px, 1000px));
  height: auto;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  opacity: 0; /* Hidden - not used on threshold, logo-book is used instead */
  transition: opacity 400ms ease, transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

.book-visual.revealed {
  opacity: 1;
}

.book-visual.slide-down {
  transform: translateX(-50%) translateY(100vh);
}

/* Desktop: constrained book width to prevent content overflow */

@media (min-width: 769px) {
  .book-visual {
    width: calc(min(100vw - 50px, 950px));
    max-width: 950px;
  }
}

.book-page {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0) invert(1); /* Make it white */
  mix-blend-mode: multiply;

  /* Safari: Force crisp SVG scaling during transform */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  shape-rendering: geometricPrecision;

  will-change: filter, transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.book-extension {
  position: absolute;
  top: calc(100% - 2px); /* Slight overlap to prevent rendering gap */
  left: 0;
  width: 100%;
  height: 100vh;
  background: #ffffff;
  pointer-events: none;
}

/* Final black background - appears after transition completes */

.final-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #000000;
  z-index: 5; /* Below opening content (20), above everything else */
  opacity: 0;
  /* No transition - snaps instantly when visible */
}

.final-background.visible {
  opacity: 1;
}

/* ===== Mobile/Desktop Display Control ===== */

.mobile-only {
  display: none;
}

.desktop-only {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block;
  }

  .desktop-only {
    display: none;
  }
}

/* ===== Mobile Scroll Container ===== */

.scrollable-content {
  width: 100%;
  max-width: 680px;
  height: calc(100vh - clamp(180px, calc(20vh + 6vw), 320px) - clamp(40px, 6vh, 60px));

  /* Mobile: Scroll behavior */
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;

  /* Gradient fade at top for smooth clipping */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40px, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 40px, black 100%);

  /* Hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Desktop: No scroll, panels stack and fade */

@media (min-width: 769px) {
  .scrollable-content {
    overflow: visible;
    scroll-snap-type: none;
    height: auto;
    /* Remove gradient mask on desktop */
    -webkit-mask-image: none;
    mask-image: none;
    /* Create positioning context for absolute panels */
    position: relative;
    /* Remove padding - panels will manage their own spacing */
    padding: 0;
  }
}

.scrollable-content::-webkit-scrollbar {
  display: none;
}

.content-panel {
  /* Mobile: Carousel slide behavior */
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(20px, 3vh, 40px) clamp(20px, 4vw, 40px);
  text-align: center;
  position: relative;
}

/* Mobile: Hide panels that aren't ready yet (prevents scrolling to blank panels) */

@media (max-width: 768px) {
  .content-panel:not(:first-child):not(.visible):not(:has(.name-input-section)):not(:has(.profile-selection-section.active)) {
    display: none;
  }
}

/* Desktop: Panels stack, hidden by default */

@media (min-width: 769px) {
  .content-panel {
    scroll-snap-align: none;
    min-height: auto;
    /* Stack panels on top of each other */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    /* Limit height and enable scrolling */
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    /* Each panel manages its own padding to position below book */
    /* Book top (25px) + percentage of book height + additional offset */
    padding-top: clamp(250px, calc(25px + min(100vw - 50px, 950px) * 0.30), 350px);
    padding-left: clamp(40px, 6vw, 80px);
    padding-right: clamp(40px, 6vw, 80px);
    padding-bottom: 40px;
    /* Always display: flex on desktop, use opacity + visibility to hide */
    display: flex;
    opacity: 0;
    visibility: hidden;
    /* Only show after opening-stage is visible (prevents glitches during zoom) */
    pointer-events: none;
    transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0ms 600ms;
    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .content-panel::-webkit-scrollbar {
    display: none;
  }

  /* Apply gradient mask when content is scrollable - fade top and bottom */
  .content-panel.scrollable {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%);
  }

  /* Only make panels interactive when opening-stage is visible */
  .opening-stage.visible .content-panel.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0ms 0ms;
    /* Active panel should be on top */
    z-index: 1;
  }
}

/* Content within panels */

.content-panel .belief-group,
.content-panel .name-input-section {
  width: 100%;
  max-width: 500px;
}

/* Profile selection panel should use full width - no horizontal padding (mobile only) */

@media (max-width: 768px) {
  .content-panel:has(.profile-selection-section) {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Desktop hint - only show on desktop */

.desktop-hint {
  display: none;
}

@media (min-width: 769px) {
  .desktop-hint {
    display: block;
  }
}

/* Swipe indicator - only show on mobile */

@media (min-width: 769px) {
  .swipe-indicator {
    display: none !important;
  }
}

/* Second slide starts hidden, fades in when swiped to */

.content-panel:nth-child(2) {
  opacity: 0;
  transition: opacity 500ms ease;
}

.content-panel:nth-child(2).visible {
  opacity: 1;
}

/* Desktop: Show sections when parent panel is active AND opening-stage is visible */

@media (min-width: 769px) {
  .opening-stage.visible .content-panel.active .belief-group,
  .opening-stage.visible .content-panel.active .name-input-section,
  .opening-stage.visible .content-panel.active .profile-selection-section {
    opacity: 1;
    display: flex !important;
    pointer-events: auto;
    flex-direction: column;
    align-items: center;
  }
}

/* Mobile: no click hints, sections always visible */

@media (max-width: 768px) {
  .scrollable-content .belief-group,
  .scrollable-content .name-input-section {
    opacity: 1 !important;
    display: flex !important;
    pointer-events: auto !important;
    flex-direction: column;
    align-items: center;
    gap: clamp(32px, 4vh, 48px);
  }

  /* Hide continue hint on mobile until second slide is visible (but not mobile-tap-hint for returning users) */
  .scrollable-content .continue-hint:not(.mobile-tap-hint) {
    display: none !important;
  }

  .scrollable-content .content-panel:nth-child(2).visible .continue-hint:not(.mobile-tap-hint) {
    display: flex !important;
  }
}

/* ===== Responsive Styles ===== */

/* Tablet styles - mid-range viewports */

@media (min-width: 769px) and (max-width: 1200px) {
  .logo-container {
    width: 260px;
    height: 217.20px; /* 260 × (2596/3108) */
  }

  .logo-icon {
    width: 260px;
    height: 217.20px;
  }

  .logo-book {
    width: 128.91px; /* 260 / 2.017 - exact ratio */
    height: 157.85px; /* 128.91 × (1885/1539) */
    margin-left: -64.46px; /* Half of width to center */
    bottom: 0;
  }
}

/* Mobile styles */

@media (max-width: 768px) {
  html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  /* Allow scrolling once invitation is revealed */
  html.scrolling-enabled,
  html.scrolling-enabled body {
    overflow: visible;
    overflow-x: hidden;
    height: auto;
    min-height: 100%;
  }

  html.scrolling-enabled .threshold-entry {
    overflow: visible;
    height: auto;
    min-height: 100vh;
  }

  .threshold-entry {
    padding: 0 15px;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .launch-screen {
    padding: 0 15px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .launch-content {
    max-width: 100%;
    width: auto;
  }

  .logo-container {
    width: 200px;
    height: 167.05px; /* 200 × (2596/3108) */
  }

  .logo-icon {
    width: 200px;
    height: 167.05px;
  }

  .logo-book {
    width: 99.16px; /* 200 / 2.017 - exact ratio */
    height: 121.42px; /* 99.16 × (1885/1539) */
    margin-left: -49.58px; /* Half of width to center */
    bottom: 0; /* Bottom-aligned */
  }

  .launch-brand {
    font-size: 48px;
  }

  .launch-tagline {
    font-size: 22px;
    max-width: 100%;
  }

  .tap-to-start {
    font-size: 12px;
  }

  .opening-content-wrapper {
    max-width: 85%;
    text-align: center;
    align-items: center;
  }
}

/* ===== Profile Selection ===== */

.profile-selection-section {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3vh, 24px);
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1);
  /* No padding - parent panel handles spacing */
  padding: 0;
  max-width: 800px;
  margin: 0 auto;
}

.profile-selection-section.active {
  opacity: 1;
}

.pleasure-greeting {
  margin-bottom: clamp(4px, 1vh, 8px);
}

.profile-question {
  margin-bottom: clamp(24px, 4vh, 32px);
  font-family: var(--font-editorial);
}

.profile-options {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 600px;
}

.profile-option {
  padding: clamp(20px, 3.5vh, 28px) 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.5vh, 12px);
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-label {
  font-family: var(--font-editorial);
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 400;
  line-height: 1.4;
  color: #333333;
  display: inline-block;
  letter-spacing: -0.01em;
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.profile-option:hover .profile-label {
  opacity: 0.5;
}

.profile-indicators {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: transparent;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.indicator.filled {
  background: rgba(0, 0, 0, 0.65);
  border-color: rgba(0, 0, 0, 0.65);
}

.profile-divider {
  width: 60%;
  max-width: 300px;
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0 auto;
  position: relative;
}

.profile-divider::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
}

/* Mobile: Profile panel in carousel */

@media (max-width: 768px) {
  .content-panel {
    min-width: 100%;
    scroll-snap-align: start;
  }

  .profile-selection-section {
    padding: clamp(50px, 7vh, 80px) clamp(30px, 6vw, 40px);
  }

  .profile-label {
    font-size: clamp(20px, 4.5vw, 24px);
  }
}

/* Reduce paragraph spacing in scroll reveal section */

.scroll-reveal .narrative-story p {
  margin-bottom: 2em;
}