/*!
 * motion.css - restrained scroll / hover motion for the Daegu branch homepage.
 * Pairs with /_dg/motion.js. Transforms and opacity only; no colour, font, size or spacing changes.
 *
 * Safety model
 *  - Everything that hides content lives under `html.dg-motion`, a class motion.js adds
 *    (and removes again on any failure). Without JS, or if the script bails, the page is the original.
 *  - Everything is inside `prefers-reduced-motion: no-preference`; reduce -> no rule here applies.
 *  - Reveal classes are removed by the script once an element has settled, so the site's own
 *    hover/transition rules are never permanently overridden.
 */

@media (prefers-reduced-motion: no-preference) {

  html.dg-motion {
    --dg-ease: cubic-bezier(.2, .7, .2, 1);
    --dg-rise: 22px;            /* desktop */
  }
  /* Mobile pages are laid out on a 750px-wide canvas (viewport width=750), so distances double. */
  html.dg-motion.dg-m { --dg-rise: 40px; }

  /* ------------------------------------------------------------ scroll reveal */
  html.dg-motion body .dg-reveal {
    opacity: 0;
    transform: translate3d(0, var(--dg-rise), 0);
    transition:
      opacity 560ms var(--dg-ease) var(--dg-d, 0ms),
      transform 560ms var(--dg-ease) var(--dg-d, 0ms);
  }
  html.dg-motion body .dg-reveal.dg-in { opacity: 1; transform: none; }
  html.dg-motion body .dg-reveal.dg-now { transition: none; }
  /* display:inline elements cannot be transformed: fade only. */
  html.dg-motion body .dg-reveal.dg-fade { transform: none; }

  /* ----------------------------------------------------------- image fade-in */
  html.dg-motion body img.dg-img { opacity: 0; }
  html.dg-motion body img.dg-img.dg-img-in { opacity: 1; transition: opacity 480ms ease-out; }

  /* ---------------------------------------------- attention cue (CTA, soft ring) */
  /* The ring is a pseudo-element: out of flow, so it can never move layout. */
  html.dg-motion .dg-cue-host { position: relative; }
  html.dg-motion .dg-cue-host::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    box-sizing: border-box;
    border: 2px solid var(--dg-ring, rgba(22, 177, 118, .55));
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transform: scale(1);
  }
  html.dg-motion .bottom-btn a.dg-cue-host { --dg-ring: rgba(254, 176, 21, .75); }
  html.dg-motion .dg-cue-host.dg-cue-on::after { animation: dg-ring 1500ms cubic-bezier(.2, .6, .3, 1) 1; }
  @keyframes dg-ring {
    0%   { opacity: 0;   transform: scale(1); }
    18%  { opacity: .9; }
    100% { opacity: 0;   transform: scale(1.09, 1.28); }
  }

  /* ------------------------------------------------ hover feedback (mouse only) */
  @media (hover: hover) and (pointer: fine) {

    /* Buttons / links without a transition of their own. */
    html.dg-motion .b-hero-btn,
    html.dg-motion .pc-br-btn,
    html.dg-motion .pc-qi-btn,
    html.dg-motion .all-wrap .class-wrap .inq-box ul li a,
    html.dg-motion #sub .sub-vis ul li a,
    html.dg-motion .menu-category-list .menu-category-item,
    html.dg-motion .main-shorts-feed .feed-item,
    html.dg-motion .pc-br-teachers > .pc-br-teacher,
    html.dg-motion #sb-gallery > li {
      transition: transform 180ms var(--dg-ease), box-shadow 180ms var(--dg-ease);
    }
    html.dg-motion .b-hero-btn:hover,
    html.dg-motion .pc-br-btn:hover,
    html.dg-motion .pc-qi-btn:hover,
    html.dg-motion .all-wrap .class-wrap .inq-box ul li a:hover,
    html.dg-motion #sub .sub-vis ul li a:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(15, 23, 41, .12);
    }
    html.dg-motion .menu-category-list .menu-category-item:hover,
    html.dg-motion .main-shorts-feed .feed-item:hover,
    html.dg-motion .pc-br-teachers > .pc-br-teacher:hover,
    html.dg-motion #sb-gallery > li:hover {
      transform: translateY(-3px);
    }
    html.dg-motion .b-hero-btn:active,
    html.dg-motion .pc-br-btn:active,
    html.dg-motion .pc-qi-btn:active,
    html.dg-motion .all-wrap .class-wrap .inq-box ul li a:active,
    html.dg-motion #sub .sub-vis ul li a:active {
      transform: translateY(0) scale(.985);
      box-shadow: 0 2px 6px rgba(15, 23, 41, .10);
      transition-duration: 80ms;
    }

    /* Cards that already transition a colour: keep that, add transform + shadow. */
    html.dg-motion .nb-track-card { transition: background .15s ease, transform 180ms var(--dg-ease), box-shadow 180ms var(--dg-ease); }
    html.dg-motion .nb-course-card { transition: border-color .15s ease, transform 180ms var(--dg-ease), box-shadow 180ms var(--dg-ease); }
    html.dg-motion .nb-track-card:hover,
    html.dg-motion .nb-course-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 24px rgba(15, 23, 41, .08);
    }
    html.dg-motion .nb-track-card:active,
    html.dg-motion .nb-course-card:active { transform: translateY(0) scale(.99); transition-duration: .15s, 80ms, 80ms; }

    /* Curriculum / gallery thumbnails: slow zoom inside their existing overflow:hidden frame. */
    html.dg-motion .curriThumbBox .imgBox img { transition: transform 420ms var(--dg-ease); }
    html.dg-motion .curriculumRe .boxInner:hover .imgBox img { transform: scale(1.04); }
    html.dg-motion .main-shorts-thumb img { transition: transform 420ms var(--dg-ease); }
    html.dg-motion .feed-item:hover .main-shorts-thumb img { transform: scale(1.03); }
  }

  /* --------------------------------------------- press feedback (touch screens) */
  @media (hover: none) {
    html.dg-motion .b-hero-btn,
    html.dg-motion .nb-list-item,
    html.dg-motion .b-cat-item,
    html.dg-motion a.b-qi-btn,
    html.dg-motion .bottom-btn a {
      transition: transform 120ms var(--dg-ease);
    }
    html.dg-motion .b-hero-btn:active,
    html.dg-motion .nb-list-item:active,
    html.dg-motion .b-cat-item:active,
    html.dg-motion a.b-qi-btn:active,
    html.dg-motion .bottom-btn a:active { transform: scale(.98); }
  }
}

/* Printing / saving as PDF: show everything. */
@media print {
  html.dg-motion body .dg-reveal,
  html.dg-motion body img.dg-img { opacity: 1 !important; transform: none !important; transition: none !important; }
}