/* =========================================================
   "Module cards" feature scenes (index.html #features)
   ---------------------------------------------------------
   Each feature card opens with a small looping scene that acts
   out the feature: a study card assembling, a question being
   answered, a diagram drawing itself, a quiz running, modules
   being rated and filtered, and a module picked up on another
   device. Scenes are decorative (aria-hidden) and built from
   the site's own tokens, so they follow the light/dark theme.

   Timing: every element in a scene shares its scene's loop
   length and has its own keyframes, so a whole scene builds,
   holds, fades and restarts together. Each animation ends in
   var(--fx-loop), which holds it paused until the card scrolls
   into view (.reveal.in). With reduced motion the animations
   are dropped and each scene shows its finished state, which
   is also every element's base style.
   ========================================================= */
:root {
  --fx-surface: #FFFFFF;
  --fx-line: rgba(14, 42, 45, .12);
  --fx-bar: rgba(14, 42, 45, .09);
  --fx-low: #D9634A; --fx-med: #D6A443; --fx-high: #5CA77A;
}
:root[data-theme="dark"] {
  --fx-surface: #1B2628;
  --fx-line: rgba(241, 234, 218, .14);
  --fx-bar: rgba(241, 234, 218, .11);
  --fx-low: #D96A53; --fx-med: #D9B565; --fx-high: #78B58E;
}

.feat .fx {
  position: relative; height: 158px; margin: -6px -4px 18px;
  border-radius: 12px; background: var(--bg); border: 1px solid var(--fx-line);
  overflow: hidden; display: grid; place-items: center;
  font-family: var(--font-body); color: var(--ink);
}
.feat { --fx-loop: infinite both paused; }
.feat.in { --fx-loop: infinite both running; }
@media (prefers-reduced-motion: reduce) {
  .feat .fx *, .feat .fx *::before { animation: none !important; }
}
.fx-surface {
  background: var(--fx-surface); border: 1px solid var(--fx-line); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(14, 42, 45, .05), 0 6px 16px -6px rgba(14, 42, 45, .14);
}

/* ---------- 1. Rich study cards: a module card fills in ---------- */
.fx-card .mc { position: relative; width: 236px; padding: 10px 12px 11px 17px; overflow: hidden; }
.fx-card .mc::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--pcm); }
.fx-card .mc-top { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; color: var(--text-muted); }
.fx-card .mc-top b { font-weight: 500; color: var(--pcm); }
.fx-card .mc-title { font-family: var(--font-module); font-size: 14.5px; line-height: 1.15; margin: 3px 0 7px; }
.fx-card .mc-rule { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 5px; background: color-mix(in srgb, var(--accent) 13%, transparent); }
.fx-card .mc-rule b { font-family: var(--font-mono); font-size: 7.5px; font-weight: 600; letter-spacing: .1em; color: var(--accent-ink); white-space: nowrap; }
.fx-card .mc-rule i { flex: 1; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 30%, transparent); }
.fx-card .mc-table { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 4px 6px; margin-top: 8px; }
.fx-card .mc-table i { height: 5px; border-radius: 3px; background: var(--fx-bar); }
.fx-card .mc-table i:nth-child(-n+3) { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.fx-card .mc-chips { display: flex; gap: 5px; margin-top: 8px; }
.fx-card .mc-chips span { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .06em; padding: 2px 6px; border-radius: 999px; border: 1px solid var(--fx-line); color: var(--text-muted); white-space: nowrap; }
.fx-card .mc-chips span + span { color: var(--fx-low); border-color: color-mix(in srgb, var(--fx-low) 45%, transparent); }
.fx-card .mc-rule  { animation: fx1-rule 8s ease var(--fx-loop); }
.fx-card .mc-table { animation: fx1-table 8s linear var(--fx-loop); }
.fx-card .mc-chips span:first-child { animation: fx1-chip1 8s ease var(--fx-loop); }
.fx-card .mc-chips span + span { animation: fx1-chip2 8s ease var(--fx-loop); }
@keyframes fx1-rule  { 0%, 5% { opacity: 0; transform: translateY(5px); } 10%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
/* steps(3): the table fills in one row at a time. */
@keyframes fx1-table {
  0%, 14% { opacity: 1; clip-path: inset(0 0 100% 0); animation-timing-function: steps(3, end); }
  30%, 88% { opacity: 1; clip-path: inset(0); }
  94%, 100% { opacity: 0; clip-path: inset(0); }
}
@keyframes fx1-chip1 { 0%, 34% { opacity: 0; transform: scale(.85); } 40%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes fx1-chip2 { 0%, 44% { opacity: 0; transform: scale(.85); } 50%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }

/* ---------- 2. Exam-style questions: a wrong pick, then the right one ---------- */
.fx-q .q { position: relative; width: 236px; }
.fx-q .q-stem { font-family: var(--font-reading); font-size: 13.5px; font-weight: 600; line-height: 1.2; margin-bottom: 7px; }
.fx-q .q-opt { display: flex; align-items: center; gap: 7px; height: 21px; padding: 0 7px; margin-top: 4px; border-radius: 6px; box-shadow: none; font-size: 10.5px; color: var(--ink-2); }
.fx-q .q-opt b { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--fx-line); display: grid; place-items: center; font-family: var(--font-mono); font-size: 7.5px; font-weight: 500; color: var(--text-muted); }
.fx-q .q-opt.wrong { animation: fx2-wrong 8s ease var(--fx-loop); }
.fx-q .q-opt.wrong b { animation: fx2-wrong-b 8s ease var(--fx-loop); }
.fx-q .q-opt.right { animation: fx2-right 8s ease var(--fx-loop); }
.fx-q .q-opt.right b { animation: fx2-right-b 8s ease var(--fx-loop); }
/* Base (finished) state: B marked wrong, C marked right. */
.fx-q .q-opt.wrong { border-color: var(--fx-low); background: color-mix(in srgb, var(--fx-low) 10%, var(--fx-surface)); }
.fx-q .q-opt.wrong b { background: var(--fx-low); border-color: var(--fx-low); color: #fff; }
.fx-q .q-opt.right { border-color: var(--fx-high); background: color-mix(in srgb, var(--fx-high) 12%, var(--fx-surface)); }
.fx-q .q-opt.right b { background: var(--fx-high); border-color: var(--fx-high); color: #fff; }
@keyframes fx2-wrong {
  0%, 26% { border-color: var(--fx-line); background: var(--fx-surface); }
  29%, 88% { border-color: var(--fx-low); background: color-mix(in srgb, var(--fx-low) 10%, var(--fx-surface)); }
  94%, 100% { border-color: var(--fx-line); background: var(--fx-surface); }
}
@keyframes fx2-wrong-b {
  0%, 26% { background: transparent; border-color: var(--fx-line); color: var(--text-muted); }
  29%, 88% { background: var(--fx-low); border-color: var(--fx-low); color: #fff; }
  94%, 100% { background: transparent; border-color: var(--fx-line); color: var(--text-muted); }
}
@keyframes fx2-right {
  0%, 49% { border-color: var(--fx-line); background: var(--fx-surface); }
  52%, 88% { border-color: var(--fx-high); background: color-mix(in srgb, var(--fx-high) 12%, var(--fx-surface)); }
  94%, 100% { border-color: var(--fx-line); background: var(--fx-surface); }
}
@keyframes fx2-right-b {
  0%, 49% { background: transparent; border-color: var(--fx-line); color: var(--text-muted); }
  52%, 88% { background: var(--fx-high); border-color: var(--fx-high); color: #fff; }
  94%, 100% { background: transparent; border-color: var(--fx-line); color: var(--text-muted); }
}
/* Pointer: answer rows are 25px apart, so B's middle sits 58px down the
   question and C's 83px. The tip is 1px into the pointer's box, and it
   presses each answer just past its text. It rests hidden in the finished
   state. */
.fx-q .q-cursor { position: absolute; left: 0; top: 0; width: 13px; height: 16px; opacity: 0; color: var(--ink); animation: fx2-cursor 8s ease-in-out var(--fx-loop); }
.fx-q .q-cursor svg { display: block; width: 100%; height: 100%; }
@keyframes fx2-cursor {
  0%   { opacity: 0; transform: translate(210px, 120px); }
  6%   { opacity: 1; transform: translate(210px, 120px); }
  20%  { opacity: 1; transform: translate(96px, 57px) scale(1); }
  24%  { transform: translate(96px, 57px) scale(.82); }
  28%  { transform: translate(96px, 57px) scale(1); }
  43%  { transform: translate(88px, 82px) scale(1); }
  47%  { transform: translate(88px, 82px) scale(.82); }
  51%  { opacity: 1; transform: translate(88px, 82px) scale(1); }
  64%, 100% { opacity: 0; transform: translate(215px, 118px); }
}

/* ---------- 3. Diagrams: a contract diagram draws itself ---------- */
.fx-dia svg { width: 272px; max-width: 92%; height: auto; overflow: visible; }
.fx-dia .node rect { fill: var(--fx-surface); stroke: var(--fx-line); stroke-width: 1; }
.fx-dia .node.own rect { stroke: var(--accent); stroke-width: 1.4; }
.fx-dia .node text { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; fill: var(--ink); text-anchor: middle; dominant-baseline: middle; }
.fx-dia .ln { fill: none; stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.fx-dia .comm { fill: none; stroke: var(--ink); stroke-opacity: .4; stroke-width: 1.2; stroke-dasharray: 3 4; }
.fx-dia .lbl { font-family: var(--font-mono); font-size: 8px; font-weight: 600; letter-spacing: .08em; fill: var(--accent-ink); }
.fx-dia .lbl.soft { font-weight: 400; fill: var(--text-muted); font-size: 7.5px; }
.fx-dia .node { transform-box: fill-box; transform-origin: center; }
.fx-dia .own  { animation: fx3-own 7s ease var(--fx-loop); }
.fx-dia .arch { animation: fx3-arch 7s ease var(--fx-loop); }
.fx-dia .con  { animation: fx3-con 7s ease var(--fx-loop); }
.fx-dia .ln.a { animation: fx3-lna 7s ease-in-out var(--fx-loop); }
.fx-dia .ln.b { animation: fx3-lnb 7s ease-in-out var(--fx-loop); }
.fx-dia .comm, .fx-dia .lbl.soft { animation: fx3-comm 7s ease var(--fx-loop); }
.fx-dia .lbl:not(.soft) { animation: fx3-lbl 7s ease var(--fx-loop); }
@keyframes fx3-own  { 0%, 2% { opacity: 0; transform: scale(.8); } 9%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes fx3-arch { 0%, 26% { opacity: 0; transform: scale(.8); } 33%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes fx3-con  { 0%, 44% { opacity: 0; transform: scale(.8); } 51%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes fx3-lna  { 0%, 10% { stroke-dashoffset: 1; opacity: 1; } 27%, 90% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes fx3-lnb  { 0%, 28% { stroke-dashoffset: 1; opacity: 1; } 45%, 90% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes fx3-lbl  { 0%, 54% { opacity: 0; } 60%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes fx3-comm { 0%, 63% { opacity: 0; } 70%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* ---------- 4. Section quizzes: timer, progress, answers, score ---------- */
.fx-quiz .qz { width: 238px; padding: 10px 12px 11px; }
.fx-quiz .qz-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em; color: var(--text-muted); }
.fx-quiz .qz-timer { width: 20px; height: 20px; display: block; }
.fx-quiz .qz-timer .trk { fill: none; stroke: var(--fx-bar); stroke-width: 3; }
.fx-quiz .qz-timer .arc { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: .82; transform: rotate(-90deg); transform-origin: center; animation: fx4-timer 8s linear var(--fx-loop); }
.fx-quiz .qz-bar { height: 4px; border-radius: 2px; background: var(--fx-bar); margin: 9px 0 10px; overflow: hidden; }
.fx-quiz .qz-bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; animation: fx4-bar 8s linear var(--fx-loop); }
.fx-quiz .qz-dots { position: relative; }
.fx-quiz .qz-dots .row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.fx-quiz .qz-dots .row i { aspect-ratio: 1; border-radius: 50%; background: var(--fx-bar); }
.fx-quiz .qz-dots .row.on { position: absolute; inset: 0; animation: fx4-dots 8s linear var(--fx-loop); }
.fx-quiz .qz-dots .row.on i { background: var(--fx-high); }
.fx-quiz .qz-dots .row.on i.no { background: var(--fx-low); }
.fx-quiz .qz-score { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; animation: fx4-score 8s ease var(--fx-loop); }
.fx-quiz .qz-score span { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em; color: var(--text-muted); }
.fx-quiz .qz-score b { font-family: var(--font-module); font-weight: 500; font-size: 20px; line-height: 1; }
.fx-quiz .qz-score b small { font-size: 12px; color: var(--text-muted); }
@keyframes fx4-timer { 0%, 4% { stroke-dashoffset: 0; } 76%, 94% { stroke-dashoffset: .82; } 100% { stroke-dashoffset: 0; } }
@keyframes fx4-bar   { 0%, 6% { transform: scaleX(0); } 72%, 92% { transform: scaleX(1); } 98%, 100% { transform: scaleX(0); } }
/* steps(10): one answer dot per step, in time with the bar. */
@keyframes fx4-dots  {
  0%, 6% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(10, end); }
  72%, 92% { clip-path: inset(0 0 0 0); opacity: 1; }
  97%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes fx4-score { 0%, 74% { opacity: 0; transform: translateY(5px); } 80%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

/* ---------- 5. Confidence tracking: rate, filter, sync ---------- */
.fx-conf .cf { width: 252px; }
.fx-conf .cf-bar { display: flex; justify-content: space-between; align-items: center; height: 17px; margin-bottom: 3px; }
.fx-conf .cf-chip { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .1em; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--fx-line); color: var(--text-muted); }
.fx-conf .cf-chip.filter { border-color: var(--fx-low); color: var(--fx-low); background: color-mix(in srgb, var(--fx-low) 10%, transparent); animation: fx5-filter 9s ease var(--fx-loop); }
.fx-conf .cf-chip.sync { border-color: color-mix(in srgb, var(--fx-high) 50%, transparent); color: var(--fx-high); animation: fx5-sync 9s ease var(--fx-loop); }
.fx-conf .cf-row { position: relative; display: flex; align-items: center; gap: 8px; height: 29px; padding: 0 6px 0 13px; margin-top: 5px; overflow: hidden; }
.fx-conf .cf-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--band); }
.fx-conf .cf-row .t { flex: 1; font-size: 10.5px; color: var(--ink-2); white-space: nowrap; }
.fx-conf .seg { position: relative; display: inline-flex; padding: 2px; border-radius: 999px; border: 1px solid var(--fx-line); }
.fx-conf .seg b { position: relative; z-index: 1; width: 18px; height: 15px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 7.5px; font-weight: 500; color: var(--text-muted); }
/* The pill takes its colour from `color`, so one property animates its tint and rim. */
.fx-conf .seg u { position: absolute; top: 2px; left: 2px; width: 18px; height: 15px; box-sizing: border-box; border-radius: 999px; color: var(--pick); background: color-mix(in srgb, currentColor 30%, transparent); border: 1px solid currentColor; transform: translateX(var(--x)); }
.fx-conf .r1 { --band: var(--fx-high); --pick: var(--fx-high); --x: 36px; }
.fx-conf .r2 { --band: var(--fx-low);  --pick: var(--fx-low);  --x: 0px; }
.fx-conf .r3 { --band: var(--fx-med);  --pick: var(--fx-med);  --x: 18px; }
.fx-conf .r1::before { animation: fx5-band1 9s ease var(--fx-loop); }
.fx-conf .r2::before { animation: fx5-band2 9s ease var(--fx-loop); }
.fx-conf .r3::before { animation: fx5-band3 9s ease var(--fx-loop); }
.fx-conf .r1 .seg u { animation: fx5-pick1 9s ease var(--fx-loop); }
.fx-conf .r2 .seg u { animation: fx5-pick2 9s ease var(--fx-loop); }
.fx-conf .r3 .seg u { animation: fx5-pick3 9s ease var(--fx-loop); }
.fx-conf .r1, .fx-conf .r3 { animation: fx5-dim 9s ease var(--fx-loop); }
/* Row 1 shows the control being cycled Low -> Medium -> High. */
@keyframes fx5-pick1 {
  0%, 6% { opacity: 0; transform: translateX(0); color: var(--fx-low); }
  9% { opacity: 1; transform: translateX(0); color: var(--fx-low); }
  14% { transform: translateX(18px); color: var(--fx-med); }
  19%, 88% { opacity: 1; transform: translateX(36px); color: var(--fx-high); }
  94%, 100% { opacity: 0; transform: translateX(36px); color: var(--fx-high); }
}
@keyframes fx5-pick2 { 0%, 27% { opacity: 0; } 31%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes fx5-pick3 { 0%, 39% { opacity: 0; } 43%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes fx5-band1 { 0%, 18% { background: var(--fx-line); } 21%, 88% { background: var(--fx-high); } 94%, 100% { background: var(--fx-line); } }
@keyframes fx5-band2 { 0%, 29% { background: var(--fx-line); } 32%, 88% { background: var(--fx-low); } 94%, 100% { background: var(--fx-line); } }
@keyframes fx5-band3 { 0%, 41% { background: var(--fx-line); } 44%, 88% { background: var(--fx-med); } 94%, 100% { background: var(--fx-line); } }
@keyframes fx5-filter { 0%, 52% { opacity: 0; transform: scale(.85); } 56%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes fx5-dim    { 0%, 55% { opacity: 1; } 59%, 86% { opacity: .32; } 92%, 100% { opacity: 1; } }
@keyframes fx5-sync   { 0%, 64% { opacity: 0; transform: translateY(4px); } 69%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
/* Finished state for reduced motion: rated and filtered to the weak one. */
@media (prefers-reduced-motion: reduce) {
  .fx-conf .r1, .fx-conf .r3 { opacity: .32; }
}

/* ---------- 6. Lunch break: phone to laptop ---------- */
.fx-lunch .ln-wrap { display: flex; align-items: center; gap: 0; }
.fx-lunch .phone { width: 52px; height: 92px; padding: 9px 5px 7px; border-radius: 11px; border: 2px solid color-mix(in srgb, var(--ink) 55%, transparent); background: var(--fx-surface); display: flex; flex-direction: column; gap: 4px; }
.fx-lunch .lap { display: flex; flex-direction: column; align-items: center; }
.fx-lunch .lap .scr { width: 122px; height: 76px; padding: 8px 9px 7px; border-radius: 6px 6px 2px 2px; border: 2px solid color-mix(in srgb, var(--ink) 55%, transparent); background: var(--fx-surface); display: flex; flex-direction: column; gap: 4px; position: relative; }
.fx-lunch .lap .base { width: 150px; height: 6px; border-radius: 0 0 6px 6px; background: color-mix(in srgb, var(--ink) 55%, transparent); }
.fx-lunch .ttl { height: 5px; width: 70%; border-radius: 3px; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.fx-lunch .tx { height: 3px; border-radius: 2px; background: var(--fx-bar); }
.fx-lunch .tx.s { width: 60%; }
.fx-lunch .prog { margin-top: auto; height: 3px; border-radius: 2px; background: var(--fx-bar); overflow: hidden; }
.fx-lunch .prog i { display: block; height: 100%; background: var(--accent); transform-origin: left; }
.fx-lunch .phone .prog i { transform: scaleX(.55); animation: fx6-phone 8s ease-in-out var(--fx-loop); }
.fx-lunch .lap .prog i { transform: scaleX(1); animation: fx6-lap 8s ease-in-out var(--fx-loop); }
.fx-lunch .lap .scr > *:not(.done) { animation: fx6-wake 8s ease var(--fx-loop); }
.fx-lunch .done { position: absolute; right: 7px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--fx-high); color: #fff; display: grid; place-items: center; animation: fx6-done 8s ease var(--fx-loop); }
.fx-lunch .done svg { width: 9px; height: 9px; }
.fx-lunch .hop { position: relative; width: 44px; height: 2px; margin: 0 6px; background-image: linear-gradient(to right, var(--fx-line) 50%, transparent 0); background-size: 6px 2px; }
.fx-lunch .hop i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: 0; animation: fx6-hop 8s ease-in-out var(--fx-loop); }
.fx-lunch .clock { position: absolute; top: 10px; left: 12px; display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .1em; color: var(--text-muted); }
.fx-lunch .clock svg { width: 10px; height: 10px; }
@keyframes fx6-phone { 0%, 4% { transform: scaleX(0); } 36%, 90% { transform: scaleX(.55); } 96%, 100% { transform: scaleX(0); } }
@keyframes fx6-hop   { 0%, 38% { opacity: 0; transform: translateX(0); } 41% { opacity: 1; transform: translateX(0); } 51% { opacity: 1; transform: translateX(36px); } 54%, 100% { opacity: 0; transform: translateX(36px); } }
@keyframes fx6-wake  { 0%, 50% { opacity: .35; } 55%, 90% { opacity: 1; } 96%, 100% { opacity: .35; } }
@keyframes fx6-lap   { 0%, 52% { transform: scaleX(.55); } 80%, 90% { transform: scaleX(1); } 96%, 100% { transform: scaleX(.55); } }
@keyframes fx6-done  { 0%, 80% { opacity: 0; transform: scale(.5); } 85%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }