/* Detail page colour and motion (templates/portal/detail.html). Loaded in base.html late_head, after the
   generated dark theme, so rules are written as ":root .detail-page …" to sit level with those twins.
   The page takes its colour from .t-* tokens on .detail-page (activity type, grant, resource).
   Motion follows motion.js: nothing waits to appear, nothing loops forever, all of it stops for
   prefers-reduced-motion or the .reduceMotion switch. */

/* ---------- hero ---------- */
:root .detail-page .detail-heading{position:relative;isolation:isolate;overflow:hidden;max-width:none;margin:0 0 1.6rem;padding:1.6rem 1.9rem 1.5rem;border-radius:1.6rem;
  background:radial-gradient(40rem 17rem at 100% 0%,color-mix(in srgb,var(--t) 26%,transparent),transparent 72%),
             radial-gradient(28rem 15rem at -5% 115%,color-mix(in srgb,var(--t) 14%,transparent),transparent 70%),
             var(--surface);
  box-shadow:0 1px 2px rgb(0 0 0 / .04),0 18px 40px -28px color-mix(in srgb,var(--t) 60%,transparent),0 0 0 1px color-mix(in srgb,var(--t) 14%,transparent)}
/* a soft light that follows the pointer (detail-fx.js sets --mx / --my) */
:root .detail-page [data-glow]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(18rem 18rem at var(--mx,70%) var(--my,20%),color-mix(in srgb,var(--c,var(--t)) 20%,transparent),transparent 70%)}
:root .detail-page [data-glow]:hover::before{opacity:1}
/* two blurred colour orbs drift into place once */
:root .detail-page .detail-heading::after{content:"";position:absolute;z-index:-2;top:-4.5rem;right:-3rem;width:15rem;height:15rem;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 35%,color-mix(in srgb,var(--t) 45%,transparent),transparent 65%);filter:blur(6px);opacity:.55}
:root .detail-page .detail-heading h1{margin:.6rem 0 .5rem;letter-spacing:-.01em}
:root .detail-page .detail-heading>p{max-width:52rem}
:root .detail-page .detail-heading .source-times{margin-top:.9rem}
:root .detail-page .detail-heading .source-times span{padding:.15rem .6rem;border-radius:999px;background:color-mix(in srgb,var(--ink) 5%,transparent)}
/* the status badge gets a live dot */
:root .detail-page .meta-line .badge[class*=status-]{display:inline-flex;align-items:center;gap:.35rem}
:root .detail-page .meta-line .badge[class*=status-]::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:currentColor}

/* ---------- cover ---------- */
:root .detail-page .detail-cover{box-shadow:0 20px 44px -30px color-mix(in srgb,var(--t) 70%,#000)}
:root .detail-page .detail-cover img{transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
:root .detail-page .detail-cover:hover img{transform:scale(1.025)}

/* ---------- 學生可以自行報名 ---------- */
:root .detail-page .family-note-box{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--t) 24%,transparent);border-left:4px solid var(--t);
  background:linear-gradient(135deg,color-mix(in srgb,var(--t) 15%,var(--surface)),var(--surface) 72%)}
:root .detail-page .family-note-box h2{display:flex;align-items:center;gap:.5rem;color:var(--ink)}
:root .detail-page .family-note-box h2 svg{width:1.9rem;height:1.9rem;padding:.38rem;border-radius:.6rem;background:var(--t);color:#fff}
:root[data-theme=dark] .detail-page .family-note-box h2 svg{color:#16171a}

/* ---------- 重點一覽 ---------- */
:root .detail-page .detail-summary h2,:root .detail-page .session-table h2{display:flex;align-items:center;gap:.55rem}
:root .detail-page .detail-summary h2 svg{width:2rem;height:2rem;padding:.42rem;border-radius:.65rem;color:#fff;
  background:linear-gradient(135deg,var(--t),color-mix(in srgb,var(--t) 55%,#7c3aed))}
:root[data-theme=dark] .detail-page .detail-summary h2 svg{color:#16171a}
.fact-date{--c:var(--t)}.fact-place{--c:#0ea5e9}.fact-who{--c:#10b981}.fact-fee{--c:#f59e0b}.fact-entry{--c:#8b5cf6}
.fact-lang{--c:#ec4899}.fact-subject{--c:#6366f1}.fact-login{--c:#64748b}.fact-time{--c:#f97316}.fact-level{--c:#14b8a6}
:root .detail-page .fact-tile{isolation:isolate;overflow:hidden;border:1px solid color-mix(in srgb,var(--c) 20%,transparent);
  background:linear-gradient(155deg,color-mix(in srgb,var(--c) 13%,transparent),color-mix(in srgb,var(--c) 3%,transparent) 70%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
:root .detail-page .fact-tile:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 40%,transparent);
  box-shadow:0 14px 28px -18px color-mix(in srgb,var(--c) 75%,transparent)}
:root .detail-page .fact-icon{background:color-mix(in srgb,var(--c) 18%,var(--surface));color:var(--c);box-shadow:none;
  transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
:root[data-theme=dark] .detail-page .fact-icon{color:color-mix(in srgb,var(--c) 72%,#fff)}
:root .detail-page .fact-tile:hover .fact-icon{transform:rotate(-8deg) scale(1.1)}
:root .detail-page .fact-tile small{color:color-mix(in srgb,var(--c) 55%,var(--muted))}
.fact-countdown{display:inline-flex;align-items:center;gap:.35rem;margin-top:.2rem;font-size:.76rem;font-weight:700;color:var(--muted)}
.fact-countdown::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:currentColor}
.fact-countdown.is-soon{color:#d97706}.fact-countdown.is-urgent{color:#dc2626}
:root[data-theme=dark] .fact-countdown.is-soon{color:#fbbf24}:root[data-theme=dark] .fact-countdown.is-urgent{color:#f87171}
:root .detail-page .fact-notes>div{padding-left:.9rem;border-left:3px solid color-mix(in srgb,var(--t) 40%,transparent)}

/* ---------- headings, sections, sessions ---------- */
:root .detail-page .article-section h2::before,:root .detail-page .source-block h2::before{content:"";display:inline-block;width:.32rem;height:1.05em;margin-right:.55rem;border-radius:99px;vertical-align:-.12em;
  background:linear-gradient(var(--t),color-mix(in srgb,var(--t) 30%,transparent))}
:root .detail-page .source-block h2 svg{display:none}
:root .detail-page .editorial-section{border-color:color-mix(in srgb,var(--t) 22%,transparent);background:color-mix(in srgb,var(--t) 6%,var(--surface))}
:root .detail-page .session-day h3 time{padding:.12rem .65rem;border-radius:999px;background:color-mix(in srgb,var(--t) 15%,transparent);color:var(--t)}
:root .detail-page .session-day li{transition:background-color .2s}
:root .detail-page .session-day li:hover{background:color-mix(in srgb,var(--t) 6%,transparent)}

/* ---------- side panel ---------- */
/* the official link wears the page colour (overrides the glass button tokens in shader-fx.css) */
:root:not(.sfx-off) body .detail-page .action-panel>.button.primary{--g-top:color-mix(in srgb,var(--t) 72%,#fff);--g-bottom:var(--t);--g-edge:rgb(255 255 255 / .5);
  --g-rim:color-mix(in srgb,var(--t) 60%,#000 12%);--g-drop:color-mix(in srgb,var(--t) 55%,transparent);--g-sheen:rgb(255 255 255 / .45);color:#fff}
:root[data-theme=dark]:not(.sfx-off) body .detail-page .action-panel>.button.primary{--g-top:color-mix(in srgb,var(--t) 85%,#fff);--g-bottom:var(--t);color:#141518}
:root .detail-page .date-event{border-left-color:color-mix(in srgb,var(--t) 32%,var(--line))}
:root .detail-page .date-event::before{background:color-mix(in srgb,var(--ink) 30%,transparent);border-color:var(--surface)}
:root .detail-page .date-event.phase-upcoming::before,:root .detail-page .date-event.phase-today::before{background:var(--t);box-shadow:0 0 0 4px color-mix(in srgb,var(--t) 22%,transparent)}
:root .detail-page .date-event.phase-ongoing::before{background:#22c55e;box-shadow:0 0 0 4px rgb(34 197 94 / .22)}

/* ---------- motion ---------- */
@media screen and (prefers-reduced-motion:no-preference){
  /* the hero settles in at once, top to bottom */
  :root:not(.reduceMotion) .detail-page .detail-heading{animation:d-fade .5s ease backwards}
  :root:not(.reduceMotion) .detail-page .detail-heading>*{animation:d-rise .55s cubic-bezier(.2,.8,.2,1) backwards}
  :root:not(.reduceMotion) .detail-page .detail-heading>:nth-child(2){animation-delay:.06s}
  :root:not(.reduceMotion) .detail-page .detail-heading>:nth-child(3){animation-delay:.12s}
  :root:not(.reduceMotion) .detail-page .detail-heading>:nth-child(4){animation-delay:.18s}
  :root:not(.reduceMotion) .detail-page .detail-heading::after{animation:d-orb 1.6s cubic-bezier(.2,.8,.2,1) backwards}
  :root:not(.reduceMotion) .detail-page .meta-line .badge.status-open::before,
  :root:not(.reduceMotion) .detail-page .meta-line .badge.status-today::before{animation:d-ping 1.4s ease-out 3}
  :root:not(.reduceMotion) .detail-page .detail-cover{animation:d-cover .85s cubic-bezier(.2,.8,.2,1) backwards}
  /* cards pop in one after another when their section arrives */
  :root:not(.reduceMotion) .detail-page .detail-summary.is-in .fact-tile{animation:d-pop .5s cubic-bezier(.3,1.25,.5,1) backwards}
  :root:not(.reduceMotion) .detail-page .detail-summary.is-in .fact-tile:nth-child(2){animation-delay:.06s}
  :root:not(.reduceMotion) .detail-page .detail-summary.is-in .fact-tile:nth-child(3){animation-delay:.12s}
  :root:not(.reduceMotion) .detail-page .detail-summary.is-in .fact-tile:nth-child(4){animation-delay:.18s}
  :root:not(.reduceMotion) .detail-page .detail-summary.is-in .fact-tile:nth-child(5){animation-delay:.24s}
  :root:not(.reduceMotion) .detail-page .detail-summary.is-in .fact-tile:nth-child(n+6){animation-delay:.3s}
  :root:not(.reduceMotion) .detail-page .fact-countdown.is-urgent::before{animation:d-ping 1.4s ease-out 3}
  /* the timeline in the side panel draws downwards */
  :root:not(.reduceMotion) .detail-page .date-event{animation:d-slide .5s cubic-bezier(.2,.8,.2,1) backwards}
  :root:not(.reduceMotion) .detail-page .date-event:nth-of-type(2){animation-delay:.08s}
  :root:not(.reduceMotion) .detail-page .date-event:nth-of-type(3){animation-delay:.16s}
  :root:not(.reduceMotion) .detail-page .date-event:nth-of-type(n+4){animation-delay:.24s}
  /* sections below the fold rise as they scroll into view (detail-fx.js marks them) */
  :root:not(.reduceMotion) .detail-page .will-reveal{opacity:0;transform:translateY(18px)}
  :root:not(.reduceMotion) .detail-page .will-reveal.is-in{opacity:1;transform:none;transition:opacity .55s ease,transform .65s cubic-bezier(.2,.8,.2,1)}
}
@keyframes d-rise{from{opacity:0;transform:translateY(10px)}}
@keyframes d-fade{from{opacity:0}}
@keyframes d-pop{from{opacity:0;transform:translateY(8px) scale(.94)}}
@keyframes d-slide{from{opacity:0;transform:translateX(-8px)}}
@keyframes d-cover{from{opacity:.3;clip-path:inset(3% 3% round 1.6rem);transform:scale(1.025)}}
@keyframes d-orb{from{opacity:0;transform:translate(3rem,-2rem) scale(.7)}}
@keyframes d-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 65%,transparent)}80%,100%{box-shadow:0 0 0 .5rem transparent}}
@media print{.detail-page .will-reveal{opacity:1!important;transform:none!important}.detail-page .detail-heading{background:none;box-shadow:none;padding:0}.detail-page .detail-heading::after{display:none}}
@media(max-width:720px){:root .detail-page .detail-heading{padding:1.15rem 1.1rem 1.1rem;border-radius:1.2rem}:root .detail-page .detail-heading::after{width:10rem;height:10rem}}