/* ═══════════════════════════════════════════════════════════════════
   YOU CREATE YOU · Global Refinement Layer
   Additive elevation — loaded before page styles so pages can always
   override. Nothing here redesigns or conflicts with existing CSS.
═══════════════════════════════════════════════════════════════════ */

/* ── 1. TEXT RENDERING ──────────────────────────────────────────────
   Single highest-impact change. Cormorant Garamond and DM Mono render
   with subpixel smoothing by default on macOS/Windows — grayscale AA
   makes them look sharper, lighter, and more premium.               */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

/* ── 2. PAGE ENTRANCE ───────────────────────────────────────────────
   Every page arrives as a breath rather than a snap.
   Opacity-only (no transform) so fixed overlays are unaffected.     */
body {
  animation: ycyPageIn 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ycyPageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 3. PAGE EXIT ───────────────────────────────────────────────────
   Applied by ycy-transitions.js on internal link navigation.        */
html.ycy-exit body {
  animation: ycyPageOut 0.26s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
@keyframes ycyPageOut {
  to { opacity: 0; }
}

/* ── 4. SELECTION COLOR ─────────────────────────────────────────────
   Replaces the system blue/grey selection with the app's purple.    */
::selection      { background: rgba(200, 138, 255, 0.22); color: #f2eeff; }
::-moz-selection { background: rgba(200, 138, 255, 0.22); color: #f2eeff; }

/* ── 5. SCROLLBAR ───────────────────────────────────────────────────
   Ultra-thin, on-brand. Consistent across all pages.                */
::-webkit-scrollbar         { width: 3px; height: 3px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   {
  background: rgba(200, 138, 255, 0.18);
  border-radius: 2px;
  transition: background 0.3s;
}
::-webkit-scrollbar-thumb:hover { background: rgba(200, 138, 255, 0.38); }

/* ── 6. TAP QUALITY ─────────────────────────────────────────────────
   Removes the iOS/Android blue highlight flash on tap.
   Critical for home-screen PWA — the flash feels broken.            */
a, button, [role="button"], input, label, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

/* ── 7. LANDSCAPE LOCK ──────────────────────────────────────────────
   Pure CSS portrait lock — no JS, no injected divs.
   body::before covers the entire screen in landscape on mobile.
   z-index: 2147483647 = maximum possible, beats everything.          */
@media screen and (orientation: landscape) and (max-height: 600px) {
  body::before {
    content: 'Please rotate back to portrait';
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    background: #07050f;
    color: rgba(200, 138, 255, 0.75);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    line-height: 1.7;
  }
}
button, a {
  touch-action: manipulation;
}

/* ── 7. FOCUS RING ──────────────────────────────────────────────────
   Sacred minimal focus indicator for keyboard/accessibility.
   Only shows for keyboard nav (not mouse clicks).                    */
:focus-visible {
  outline: 1px solid rgba(200, 138, 255, 0.5);
  outline-offset: 3px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* ── 8. EASING TOKENS ───────────────────────────────────────────────
   Available for use in any page's transitions via var().
   --ease-out: gentle deceleration (most natural for UI motion)
   --ease-spring: slight overshoot (for confirms, completions)        */
:root {
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── 9. IMAGE QUALITY ───────────────────────────────────────────────*/
img { display: block; max-width: 100%; }

/* ── 10. CURSOR CONSISTENCY ─────────────────────────────────────────
   Some pages use inline elements as buttons — ensure pointer always. */
[onclick]:not(input):not(textarea) { cursor: pointer; }

/* ── 11. MOBILE READABILITY ─────────────────────────────────────────
   iPhone users reported text too small to read without zooming.
   - Bumps all sub-12px text up to a legible minimum
   - Boosts low-opacity purple labels so they're visible on OLED screens
   - Does NOT change layout or spacing — only improves legibility.      */
@media (max-width: 480px) {
  /* Prevent iOS from shrinking fonts in landscape */
  html { -webkit-text-size-adjust: 100%; }

  /* Lift the floor: anything smaller than 12px becomes 12px on mobile.
     Uses a CSS filter on font-size via min() — targets DM Mono labels. */
  [style*="font-size: 8px"],
  [style*="font-size:8px"],
  [style*="font-size: 9px"],
  [style*="font-size:9px"],
  [style*="font-size: 10px"],
  [style*="font-size:10px"] {
    font-size: 12px !important;
  }

  /* Boost the most common low-contrast purple labels */
  [style*="color: rgba(200,138,255,0.4)"],
  [style*="color:rgba(200,138,255,0.4)"],
  [style*="color: rgba(200,138,255,0.45)"],
  [style*="color: rgba(200,138,255,0.5)"],
  [style*="color:rgba(200,138,255,0.5)"],
  [style*="color: rgba(200,138,255,0.55)"],
  [style*="color:rgba(200,138,255,0.55)"] {
    color: rgba(200,138,255,0.85) !important;
  }
}

/* ── 12. UNIFIED BUTTON STYLE ────────────────────────────────────────
   All action buttons get pill shape + breathing purple glow,
   matching the sacred ripple-trigger-btn aesthetic.                 */
@keyframes btnGlow {
  0%,100% { box-shadow: 0 0 12px rgba(160,80,255,0.18), 0 0 28px rgba(160,80,255,0.07); }
  50%      { box-shadow: 0 0 22px rgba(200,100,255,0.38), 0 0 48px rgba(160,60,255,0.16); }
}
.btn,
.btn-record,
.completion-return-btn,
.ew-journey-btn {
  border-radius: 40px !important;
  animation: btnGlow 4s ease-in-out infinite !important;
}
.btn-primary {
  border-color: rgba(200,138,255,0.45) !important;
}
.btn:hover,
.btn-record:hover,
.completion-return-btn:hover,
.ew-journey-btn:hover {
  box-shadow: 0 0 32px rgba(200,138,255,0.4) !important;
  animation: none !important;
}
.btn:disabled,
button:disabled {
  animation: none !important;
  box-shadow: none !important;
}