/* ============================================
   EUDAIMON — mobile-only additions (ivory palette)
   BOOT v2 — 6 peak-Apple layers
     1. Light-leak sweep
     2. Halo inhale → bloom
     3. Parallax glow (3 layers)
     4. Soft pulse burst (gaussian, not ring)
     5. Film grain (35mm warmth, entire run)
     6. Iris-open exit (clip-path circle expands)
   Plus monogram dial for haptic navigation.
   Everything else = scrolling site, untouched.
   ============================================ */

@media (max-width: 768px) {

  :root {
    --eud-gold: #C9A961;
    --eud-gold-soft: rgba(201, 169, 97, 0.14);
    --eud-ivory: #F7F6ED;
    --eud-dark: #2A2622;
    --eud-bone: #5A5550;
    --eud-spring: cubic-bezier(0.34, 1.30, 0.64, 1);
    --eud-apple:  cubic-bezier(0.165, 0.84, 0.44, 1);
    --eud-ease:   cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  /* =====================================================
     BOOT OVERLAY v3 — pure presence + one breath
     Two elements: ivory backdrop + logo.
     Single soft aura breathes once behind the logo at focus.
     Timing is the statement. The hold IS the event.
     ===================================================== */
  #eud-boot {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #F7F6ED;
    overflow: hidden;
    pointer-events: auto;
    will-change: opacity;
    transition: opacity 900ms var(--eud-apple);
  }
  #eud-boot.fast-skip {
    transition: opacity 220ms linear;
  }

  /* Single soft aura — appears with the logo, breathes once at full focus */
  #eud-boot .aura {
    position: absolute;
    top: 50%; left: 50%;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle,
                rgba(201, 169, 97, 0.18) 0%,
                rgba(201, 169, 97, 0.08) 35%,
                transparent 65%);
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0;
    pointer-events: none;
    transition: opacity 1100ms var(--eud-apple) 500ms,
                transform 1300ms var(--eud-apple) 500ms;
  }
  #eud-boot.in .aura {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    animation: eud-aura-breath 2400ms var(--eud-apple) 1500ms 1 both;
  }
  @keyframes eud-aura-breath {
    0%   { transform: translate(-50%, -50%) scale(1.00); opacity: 1.00; }
    45%  { transform: translate(-50%, -50%) scale(1.12); opacity: 0.80; }
    100% { transform: translate(-50%, -50%) scale(1.00); opacity: 1.00; }
  }

  /* The LOGO — blur→focus, then hold ~1.5s, then fade with subtle scale-up */
  #eud-boot .mark {
    position: absolute;
    top: 50%; left: 50%;
    width: 140px; height: 140px;
    object-fit: contain;
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0;
    filter: blur(20px);
    transition: opacity 1000ms var(--eud-apple) 400ms,
                transform 1200ms var(--eud-apple) 400ms,
                filter 1000ms var(--eud-apple) 400ms;
    will-change: opacity, transform, filter;
    z-index: 3;
  }
  #eud-boot.in .mark {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }

  /* EXIT: logo scales up subtly as it fades, aura fades, overlay fades. Wallpaper-fade DNA. */
  #eud-boot.gone .mark {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.05);
    filter: blur(3px);
    transition: opacity 800ms var(--eud-apple),
                transform 900ms var(--eud-apple),
                filter 800ms var(--eud-apple);
  }
  #eud-boot.gone .aura {
    opacity: 0;
    transition: opacity 700ms var(--eud-apple) 60ms;
  }
  #eud-boot.gone {
    opacity: 0;
    transition: opacity 900ms var(--eud-apple) 200ms;
    pointer-events: none;
  }

  /* =====================================================
     MONOGRAM DIAL — thumb-home floating nav (ivory)
     ===================================================== */
  .eud-dial {
    position: fixed;
    bottom: 22px;
    right: 22px;
    width: 54px;
    height: 54px;
    z-index: 900;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(42, 38, 34, 0.12);
    box-shadow: 0 6px 22px rgba(42, 38, 34, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    transform: scale(0.88);
    transition: transform 380ms var(--eud-spring),
                opacity 400ms var(--eud-apple),
                box-shadow 320ms var(--eud-ease),
                border-color 320ms var(--eud-ease);
    animation: eud-dial-breathe 5.2s ease-in-out infinite;
    touch-action: none;
  }
  .eud-dial.visible { opacity: 1; transform: scale(1); }
  .eud-dial img {
    width: 34px; height: 34px;
    object-fit: contain;
    opacity: 0.96;
    pointer-events: none;
  }
  @keyframes eud-dial-breathe {
    0%, 100% { transform: scale(1.000); }
    50%      { transform: scale(1.018); }
  }
  .eud-dial.engaged {
    animation: none;
    transform: scale(1.08);
    border-color: rgba(201, 169, 97, 0.75);
    box-shadow: 0 10px 32px rgba(42, 38, 34, 0.20),
                0 0 0 8px rgba(201, 169, 97, 0.10);
    transition: transform 260ms var(--eud-spring),
                border-color 260ms var(--eud-apple),
                box-shadow 260ms var(--eud-apple);
  }
  /* Graceful return to resting state after engagement ends */
  .eud-dial:not(.engaged) {
    transition: transform 420ms var(--eud-spring),
                border-color 420ms var(--eud-apple),
                box-shadow 420ms var(--eud-apple),
                opacity 400ms var(--eud-apple);
  }

  .eud-menu {
    position: fixed;
    right: 24px;
    bottom: 92px;
    z-index: 899;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 6px;
    pointer-events: none;
  }
  .eud-menu .item {
    display: block;
    padding: 12px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--eud-dark);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(42, 38, 34, 0.08);
    box-shadow: 0 4px 14px rgba(42, 38, 34, 0.10);
    border-radius: 999px;
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transition: opacity 240ms var(--eud-apple),
                transform 320ms var(--eud-spring),
                color 200ms ease,
                background 200ms ease,
                border-color 200ms ease;
    white-space: nowrap;
    /* Items are tappable when menu is open so direct taps work alongside dial drag */
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
  }
  /* When menu is NOT open, items are inert (can't be tapped accidentally) */
  .eud-menu:not(.open) .item { pointer-events: none; }
  .eud-menu.open .item {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .eud-menu.open .item:nth-child(1) { transition-delay: 0ms; }
  .eud-menu.open .item:nth-child(2) { transition-delay: 28ms; }
  .eud-menu.open .item:nth-child(3) { transition-delay: 56ms; }
  .eud-menu.open .item:nth-child(4) { transition-delay: 84ms; }
  .eud-menu.open .item:nth-child(5) { transition-delay: 112ms; }
  .eud-menu.open .item:nth-child(6) { transition-delay: 140ms; }
  .eud-menu.open .item:nth-child(7) { transition-delay: 168ms; }
  .eud-menu .item.active {
    color: var(--eud-ivory);
    background: var(--eud-gold);
    border-color: var(--eud-gold);
    transform: translateY(0) scale(1.04);
  }

  .eud-here {
    position: fixed;
    right: 90px;
    bottom: 36px;
    z-index: 898;
    padding: 6px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--eud-gold);
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(42, 38, 34, 0.08);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms var(--eud-apple);
  }
  .eud-here.visible { opacity: 0.9; }
  .eud-here.hidden  { opacity: 0; }

  .eud-backdrop {
    position: fixed; inset: 0;
    z-index: 895;
    background: rgba(247, 246, 237, 0);
    transition: background 320ms var(--eud-apple);
    pointer-events: none;
  }
  .eud-backdrop.on { background: rgba(42, 38, 34, 0.22); }

  @media (prefers-reduced-motion: reduce) {
    #eud-boot, #eud-boot *, .eud-dial, .eud-menu .item {
      animation: none !important;
      transition: none !important;
    }
  }
}

@media (min-width: 769px) {
  .eud-dial, .eud-menu, .eud-here, .eud-backdrop, #eud-boot { display: none !important; }
}