/* World of Smiles: motion (transitions and animations).
   Everything here is decoration on top of site.css: nothing in this file moves anything's resting position,
   so the desktop layout still matches Wix pixel for pixel once an animation has finished.

   Who sees it:
   - Animations only run when the visitor's device allows motion. Anyone who turned on "Reduce motion"
     (iPhone: Settings > Accessibility > Motion; Mac: System Settings > Accessibility > Display) gets the
     plain site with no movement at all.
   - "Fade in while scrolling" needs the class "motion" on <html>, which a tiny script in the page head adds
     (layout.html). If the scripts never load, nothing is ever hidden.
   - Test robots (our screenshot/compare tools) never get the "motion" class, so their pictures stay exact.

   The list of things that fade in is in assets/js/motion.js (REVEAL). Only things that start BELOW the screen
   fade in (motion.js marks them .rv-wait); whatever you see when a page opens is simply there, so nothing jumps. */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);        /* fast start, soft landing */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);  /* overshoots a little, then settles */
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --rise: 22px;
}
@media (max-width: 999.98px) { :root { --rise: 16px; } }

/* ================= Page-to-page transition =================
   Moving between pages: the header stays perfectly still and the page underneath cross-fades and rises
   a few pixels. (Chrome, Edge, Safari 18.2+; other browsers just change page as usual.) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-group(site-header) { animation-duration: 0s; }
  ::view-transition-old(root) { animation: wos-page-out .15s ease-out both; }
  ::view-transition-new(root) { animation: wos-page-in .3s var(--ease-out) both; }
}
@keyframes wos-page-out { to { opacity: 0; } }
@keyframes wos-page-in { from { opacity: 0; translate: 0 8px; } }

@media (prefers-reduced-motion: no-preference) {
  html.motion { scroll-behavior: smooth; }
}

/* ================= Fade in while scrolling =================
   motion.js adds .rv-wait to items below the screen, .in when one scrolls into view (with a small stagger),
   then .rv-done when it has arrived, which hands it back to its normal styles. */
@media screen and (prefers-reduced-motion: no-preference) {
  .motion .rv-wait:not(.rv-done) {
    opacity: 0;
    translate: 0 var(--rise);
    transition: opacity .5s var(--ease-out), translate .65s var(--ease-out), scale .65s var(--ease-out), rotate .65s var(--ease-out);
    transition-delay: var(--rv-d, 0s);
  }
  /* from the side */
  .motion :where(.h-office:first-child, .h-col.purple :is(img, li), .d-bio:nth-of-type(odd) img, .e-kids .e-text, .e-grown .e-text).rv-wait:not(.rv-done) { translate: calc(var(--rise) * -1.5) 0; }
  .motion :where(.h-office:last-child, .h-col.green :is(img, li), .h-giraffe, .d-bio:nth-of-type(even) img, .e-teens .e-text).rv-wait:not(.rv-done) { translate: calc(var(--rise) * 1.5) 0; }
  /* pop up from slightly smaller */
  .motion :where(.acts .act, .h-dlist li, .d-dlist li, .d-team-list li, .tm-grid li, .e-gallery li, .ptile, .pcard, .pcat,
    .h-expand, .h-follow a, .santa-facts > div, .tm-photo).rv-wait:not(.rv-done) { scale: .94; }
  .motion :where(.h-gmap, .d-banner, .e-video, .guide .w, .santa .w).rv-wait:not(.rv-done) { translate: 0 12px; scale: .98; }
  .motion :where(.h-giraffe).rv-wait:not(.rv-done) { rotate: 4deg; transform-origin: 50% 100%; }
  /* the "SCHEDULE / CONTACT / FORMS" buttons land with a little bounce */
  .motion :where(.acts .act).rv-wait:not(.rv-done) { transition-timing-function: var(--ease-out), var(--ease-spring), var(--ease-spring); }

  .motion .rv-wait.in:not(.rv-done) { opacity: 1; translate: none; scale: none; rotate: none; }
}

/* ================= Home page: the welcome tiles play in (first page of a visit only) ================= */
@media screen and (prefers-reduced-motion: no-preference) {
  .motion.intro .h-tile.purple { animation: wos-from-left .7s var(--ease-out) backwards; }
  .motion.intro .h-tile.yellow { animation: wos-pop .65s var(--ease-spring) .08s backwards; }
  .motion.intro .h-tile.green  { animation: wos-from-right .7s var(--ease-out) backwards; }
  .motion.intro .h-hippo { animation: wos-rise .75s var(--ease-spring) .2s backwards; }
  .motion.intro .h-lion  { animation: wos-rise .75s var(--ease-spring) .28s backwards; }
  .motion.intro .h-welcome { animation: wos-pop .6s var(--ease-spring) .3s backwards; }
  .motion.intro .h-glad > span { display: inline-block; animation: wos-up .55s var(--ease-out) backwards; }
  .motion.intro .h-glad > span:first-child { animation-delay: .45s; }
  .motion.intro .h-glad > span:last-child { animation-delay: .53s; }
  @media (max-width: 999.98px) { .motion.intro .h-glad > span { display: inline; animation-name: wos-fade; } }
}
@keyframes wos-from-left { from { opacity: 0; translate: -40px 0; } }
@keyframes wos-from-right { from { opacity: 0; translate: 40px 0; } }
@keyframes wos-pop { from { opacity: 0; scale: .8; } }
@keyframes wos-rise { from { opacity: 0; translate: 0 28px; scale: .95; } }
@keyframes wos-up { from { opacity: 0; translate: 0 12px; } }
@keyframes wos-fade { from { opacity: 0; } }

/* ================= Header ================= */
.site-header { transition: box-shadow .35s var(--ease-out); }
.scrolled .site-header { box-shadow: 0 4px 16px rgba(0, 0, 0, .22); }

/* hamburger turns into an X when the phone menu is open */
.burger { width: 32px; height: 32px; overflow: visible; }
.burger path { stroke: currentColor; stroke-width: 2; fill: none; transform-box: view-box; transform-origin: 12px 12px;
  transition: transform .4s var(--ease-spring), opacity .2s; }
.menu-btn[aria-expanded="true"] .burger path:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .burger path:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.menu-btn[aria-expanded="true"] .burger path:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (prefers-reduced-motion: no-preference) {
  /* desktop (the menu buttons' own hover lift is in site.css) */
  @media (min-width: 1000px) {
    /* "More" drop-down slides open instead of snapping */
    .menu-sub { display: block; visibility: hidden; opacity: 0; translate: 0 -6px; pointer-events: none;
      transition: opacity .2s var(--ease-out), translate .3s var(--ease-out), visibility 0s linear .3s; }
    .menu-more:hover .menu-sub, .menu-more:focus-within .menu-sub { visibility: visible; opacity: 1; translate: none; pointer-events: auto; transition-delay: 0s; }
    .menu-sub a { transition: background-color .2s; }
  }
  /* phones: menu drops down, items follow one after another */
  @media (max-width: 999.98px) {
    .menu-list { display: block; visibility: hidden; opacity: 0; translate: 0 -10px; clip-path: inset(0 0 100% 0);
      transition: opacity .25s var(--ease-out), translate .35s var(--ease-out), clip-path .4s var(--ease-out), visibility 0s linear .4s; }
    .menu-btn[aria-expanded="true"] + .menu-list { visibility: visible; opacity: 1; translate: none; clip-path: inset(0 0 -24px 0); transition-delay: 0s; }
    .menu-btn[aria-expanded="true"] + .menu-list a { animation: wos-menu-item .45s var(--ease-out) var(--d, 0s) both; }
    .menu-list > li:nth-child(2) > a { --d: .04s; }
    .menu-list > li:nth-child(3) > a { --d: .08s; }
    .menu-list > li:nth-child(4) > a { --d: .12s; }
    .menu-sub li:nth-child(1) a { --d: .16s; }
    .menu-sub li:nth-child(2) a { --d: .2s; }
  }
}
@keyframes wos-menu-item { from { opacity: 0; translate: -14px 0; } }

/* ================= Pop-ups (SCHEDULE, CONTACT, photo gallery) =================
   Grow in from slightly smaller with the page dimming behind; shrink away when closed. */
@media (prefers-reduced-motion: no-preference) {
  [popover] { opacity: 0; scale: .94; translate: 0 14px;
    transition: opacity .22s var(--ease-out), scale .32s var(--ease-out), translate .32s var(--ease-out),
      overlay .32s allow-discrete, display .32s allow-discrete; }
  [popover]:popover-open { opacity: 1; scale: 1; translate: none;
    transition-timing-function: var(--ease-out), var(--ease-spring), var(--ease-spring); }
  @starting-style { [popover]:popover-open { opacity: 0; scale: .94; translate: 0 14px; } }
  [popover]::backdrop { opacity: 0; transition: opacity .3s var(--ease-out), overlay .3s allow-discrete, display .3s allow-discrete; }
  [popover]:popover-open::backdrop { opacity: 1; }
  @starting-style { [popover]:popover-open::backdrop { opacity: 0; } }
  .pop-close svg { transition: rotate .35s var(--ease-spring); }
  .pop-close:hover svg { rotate: 90deg; }
}

/* ================= Pointing at things (mouse/trackpad only) =================
   Only buttons move (Ender, 2026-10-10: "the only things that should move are buttons, new page loads and
   scrolling animations; the logo should not move"). Photos, cards, the logo and the animals stay still;
   links may change color. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* buttons lift */
  :is(.btn, .pop-btn:not(.is-dead), .h-expand, .santa-btn, .notice-btn, .lang-switch) {
    transition: translate .25s var(--ease-out), box-shadow .25s var(--ease-out), filter .2s, background-color .2s; }
  :is(.btn, .pop-btn:not(.is-dead), .h-expand, .santa-btn, .notice-btn):hover { translate: 0 -2px; box-shadow: 0 6px 14px rgba(0, 0, 0, .2); }
  :is(.btn, .pop-btn:not(.is-dead), .h-expand, .santa-btn, .notice-btn, .lang-switch):active { translate: 0 0; scale: .97; box-shadow: none; transition-duration: .08s; }
  .lang-switch:hover { translate: 0 -1px; }

  /* social icon buttons */
  .social a { transition: translate .25s var(--ease-out); }
  .social a:hover { translate: 0 -2px; }

  /* SCHEDULE / CONTACT / FORMS buttons: the icon lifts a little */
  .act-icon { transition: translate .25s var(--ease-out); }
  .act:hover .act-icon { translate: 0 -4px; }
  .act-label { transition: color .2s; }
  .act:hover .act-label { color: var(--teal); }

  /* Home: the Kids and Teens photo circles. The one exception to "photos stay still": Ender liked this one
     (2026-10-10, "subtle enough to just be like, that's cool"). Photo zooms a little inside its ring, the ring lifts. */
  .h-ring img { transition: scale .8s var(--ease-out); }
  .h-office:hover .h-ring img { scale: 1.07; }
  .h-ring { transition: box-shadow .4s var(--ease-out), translate .4s var(--ease-out); }
  .h-office:hover .h-ring { box-shadow: 0 10px 28px rgba(0, 0, 0, .28); translate: 0 -4px; }

  /* links: color only, no movement */
  .h-follow a { transition: color .2s; }
  .h-follow a:hover { color: var(--teal); }
  .tm-grid li a { transition: background-color .3s; }
  .tm-grid li a:hover { background: #fff; }
  .anchors a, .anchors a::after { transition: color .2s, background-color .2s; }
  .anchors a:hover, .anchors a[aria-current] { color: #333; }
  .blog-nav a { transition: color .2s; }

  /* slideshow / gallery arrow buttons */
  .slide-btn { transition: scale .25s var(--ease-out), background-color .2s; }
  .slide-btn:hover { scale: 1.08; background: #8bc77c; }
}

/* ================= Reading bar (blog posts and guides) ================= */
@media (prefers-reduced-motion: no-preference) {
  /* reading bar along the top of blog posts and guides */
  @supports (animation-timeline: scroll()) {
    :is(.page-post, .page-guide) .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
      background: #52b74e; transform-origin: 0 50%; animation: wos-progress linear both; animation-timeline: scroll(root); }
  }
}
@keyframes wos-progress { from { scale: 0 1; } to { scale: 1 1; } }

/* ================= Phones: Call / New patient / Directions bar =================
   Appears at the bottom of the screen once you've scrolled past the header (motion.js adds .show-dock).
   Phones only; desktop never sees it. */
.dock { display: none; }
@media (max-width: 999.98px) {
  .dock { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 8px; position: fixed; left: 10px; right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 45; padding: 7px; background: rgba(0, 138, 205, .96);
    border: 3px dashed #000; border-radius: 22px; box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
    translate: 0 calc(100% + 30px); transition: translate .5s var(--ease-spring); }
  .show-dock .dock { translate: none; }
  .dock a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 4px 2px;
    border-radius: 15px; color: #fff; text-decoration: none; font: 800 13px/1.1 var(--avenir); text-align: center; }
  .dock a.dock-main { background: #52b74e; color: #000; }
  .dock svg { width: 22px; height: 22px; }
  .dock a:active { scale: .95; }
  .site-footer { padding-bottom: 84px; }  /* room so the bar never covers the footer */
  @media (prefers-reduced-motion: reduce) { .dock { transition: none; } }
}
@media print { .dock { display: none !important; } }