/* apple-1030.css  DRAFT design layer for the Moon Within app (v2), linked last.
   Design only: no wording, sizes, images, prices or links change here.
   Principles used (Apple design foundations, translated for the web):
   instant press feedback, springs only on touchable parts, one translucent
   material where chrome overlaps content, Hebrew tracking 0, restraint,
   and fallbacks for reduced motion, reduced transparency and more contrast. */

:root {
  /* critically damped spring (damping 1.0, response about 0.35 s), no overshoot */
  --apple-spring: cubic-bezier(.22, 1, .36, 1); /* fallback where linear() is unsupported (Safari before 17.2) */
  --apple-spring-dur: 0.42s;
  --apple-press: 0.97;
  --apple-press-wide: 0.985;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --apple-spring: linear(0, 0.06, 0.187, 0.331, 0.467, 0.585, 0.683, 0.761, 0.822, 0.869, 0.904, 0.93, 0.949, 0.963, 0.974, 0.981, 1); }
}

/* 1. Hebrew type: tracking is always 0, kerning on, no size or leading change.
      Headings balance their lines, paragraphs avoid a lonely last word. */
#moon-within-preview, #moon-within-preview *, #mw-viewer, #mw-viewer * { letter-spacing: 0; }
#moon-within-preview { font-kerning: normal; }
#moon-within-preview :is(h1, h2, h3) { text-wrap: balance; }
#moon-within-preview p { text-wrap: pretty; }
#mw-viewer .mwv-level { font-variant-numeric: tabular-nums; }

/* 2. Instant feedback on touch. Only transform-free properties are touched
      (the individual `scale` property composes with existing transforms). */
#moon-within-preview :is(.mw-action, .mw-topic, .mw-concern, .mw-season, .mw-nav button, .mw-reset,
    .mw-welcome-play, .mw-video-poster, .mw-community-policies button, .mw-daily-controls button),
#mw-viewer :is(button, a.mwv-btn) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: scale var(--apple-spring-dur) var(--apple-spring), filter 0.2s ease-out,
    background-color 0.22s ease-out, color 0.22s ease-out, border-color 0.22s ease-out, box-shadow 0.22s ease-out;
}
#moon-within-preview :is(.mw-action, .mw-topic, .mw-concern, .mw-season, .mw-nav button, .mw-reset,
    .mw-welcome-play, .mw-video-poster, .mw-community-policies button, .mw-daily-controls button):not(:disabled):active,
#mw-viewer :is(button:not(:disabled), a.mwv-btn):active {
  scale: var(--apple-press-el, var(--apple-press));
  filter: brightness(0.94);
  transition-duration: 0.07s, 0.07s, 0s, 0s, 0s, 0s;
}
/* wide rows and cards shrink less (the variable keeps this out of any specificity fight) */
#moon-within-preview :is(.mw-action, .mw-topic) { --apple-press-el: var(--apple-press-wide); }
#moon-within-preview summary { -webkit-tap-highlight-color: transparent; border-radius: 8px; }
#moon-within-preview summary:active { background: color-mix(in srgb, currentColor 9%, transparent); }

/* 3. Material. The sticky tab bar is the one chrome layer that content scrolls under.
      Solid by default; translucent only where backdrop-filter exists.
      Worst case white text on 92 percent teal over a white page is 6.1:1 (AA). */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #moon-within-preview .mw-nav {
    background: rgb(35 92 104 / 0.92);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 6px 18px rgb(32 77 89 / 0.14);
  }
}
/* active tab: soft background change, text stays AA (#204d59 on #f3d86a) */
#moon-within-preview .mw-nav button { transition: scale var(--apple-spring-dur) var(--apple-spring), background-color 0.25s ease-out, color 0.25s ease-out, filter 0.2s ease-out; }

/* 4. Sheets and tabs: spring entrance only. Closing is immediate, so layout never
      depends on a close transition and there is no display animation to break.
      Entering is transform and opacity only. */
#mw-viewer {
  transition: translate var(--apple-spring-dur) var(--apple-spring), opacity 0.2s ease-out;
}
@starting-style {
  #mw-viewer { translate: 0 18px; opacity: 0; }
}
#moon-within-preview section[data-screen] { transition: opacity 0.22s ease-out; }
@starting-style {
  #moon-within-preview section[data-screen] { opacity: 0; }
}

/* 5. Hover only where hover exists (touch never sticks in a hover state). */
@media (hover: none) {
  #moon-within-preview :is(.mw-topic, .mw-season, .mw-action):hover { box-shadow: none; }
}

/* 6. Reduced motion: no springs, no scale, no slide. Opacity and colour still
      respond, and every control still works the same way. */
@media (prefers-reduced-motion: reduce) {
  :root { --apple-spring-dur: 0s; --apple-press: 1; --apple-press-wide: 1; }
  #moon-within-preview *, #mw-viewer, #mw-viewer * {
    transition-duration: 0.01s !important;
  }
  @starting-style {
    #mw-viewer { translate: 0 0; opacity: 0; }
  }
  #moon-within-preview section[data-screen] { transition: opacity 0.15s ease-out !important; }
}

/* 7. Reduced transparency and more contrast: solid surfaces, defined edges. */
@media (prefers-reduced-transparency: reduce) {
  #moon-within-preview .mw-nav { background: #235c68; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  #moon-within-preview .mw-nav { background: #235c68; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: #fff; }
  #moon-within-preview :is(.mw-action, .mw-topic, .mw-concern, .mw-season) { border-color: #204d59; }
}
@media (forced-colors: active) {
  #moon-within-preview .mw-nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
}