/* ═══════════════════════════════════
   Calm motion layer for malacarne.com (portfolio, AI Literacy lexicon and course)
   Nothing moves on its own: transitions only answer the visitor's actions,
   they are short and small. prefers-reduced-motion or the "calm mode"
   toggle (html[data-calm]) turn them off completely.
   ═══════════════════════════════════ */

/* ─── Page transitions (same-origin navigations): a short, plain crossfade ─── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fx-fade-out 0.18s ease both; }
::view-transition-new(root) { animation: fx-fade-in 0.25s ease both; }
@keyframes fx-fade-out { to { opacity: 0; } }
@keyframes fx-fade-in { from { opacity: 0; } }

/* Theme switch: the new theme spreads from the toggle button */
html.fx-vt-theme::view-transition-old(root) { animation: none; }
html.fx-vt-theme::view-transition-new(root) { animation: fx-circle 0.5s cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes fx-circle {
    from { clip-path: circle(0 at var(--fx-x, 50%) var(--fx-y, 0)); }
    to { clip-path: circle(150vmax at var(--fx-x, 50%) var(--fx-y, 0)); }
}
html.fx-vt-lang::view-transition-old(root) { animation: fx-fade-out 0.12s ease both; }
html.fx-vt-lang::view-transition-new(root) { animation: fx-fade-in 0.2s ease both; }

/* ─── Shared keyframes ─── */
@keyframes fx-up { from { opacity: 0; transform: translateY(6px); } }
@keyframes fx-pop { from { opacity: 0; transform: scale(0.97); } }
@keyframes fx-ok { 0% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.35); } 100% { box-shadow: 0 0 0 8px rgba(45, 212, 191, 0); } }
@keyframes fx-nudge { 30% { transform: translateX(-3px); } 70% { transform: translateX(3px); } }

/* ─── Scroll progress ─── */
.fx-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 200;
    pointer-events: none;
    transform-origin: 0 50%;
    transform: scaleX(var(--fx-progress, 0));
    background: #5eead4;
    opacity: 0.7;
}
[data-theme="light"] .fx-progress { background: #0f9b8e; }

/* ─── Click feedback canvas ─── */
.fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 95; pointer-events: none; }

/* ─── No browser tap flash on phones ───
   Mobile browsers paint a blue/grey box over tapped links and buttons.
   Turn it off everywhere (the property is inherited) and give touch a gentle press state instead. */
html, body { -webkit-tap-highlight-color: transparent; }
:where(a, button, [role="button"], input, select, textarea, label, summary, dialog *) { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
    :is(.channel, .project-card, .term-card, .module-card, .service-card, .mc-cta-opt, .lexikon-chips a, .related button,
        .nav-links a, .mobile-menu a, .footer-links a, .hero-social a, .text-link, nav a, #module-list a, .nav-lexicon):active {
        opacity: 0.85;
    }
}

/* ─── Buttons: a gentle press, clear focus ─── */
.btn, .mc-cta-btn, .chip, .theme-toggle, .icon-btn, .lang-toggle, .viz-replay, .ef-switch button, .lang-switch button { transition-property: transform, box-shadow, background-color, border-color, color, opacity, scale; }
.btn:active, .mc-cta-btn:active, .chip:active, .theme-toggle:active, .icon-btn:active, .lang-toggle:active, .viz-replay:active, .ef-switch button:active, .lang-switch button:active { scale: 0.97; }
:is(a, button, input, summary):focus-visible { outline: 2px solid #5eead4; outline-offset: 3px; }

/* calm underline for the portfolio navigation */
.nav-links a {
    border-bottom: 0 !important;
    background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
    transition: background-size 0.25s ease, color 0.2s;
}
.nav-links a:hover { background-size: 100% 1px; }

/* ─── Card spotlight (hover only) ─── */
:is(.term-card, .module-card, .service-card:not(.featured), .project-card, .channel, .process-steps li, .fact, .about-info, .mc-cta-opt, .dlg-box):hover {
    background-image: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 50%), rgba(168, 85, 247, 0.09), transparent 45%);
}
[data-theme="light"] :is(.term-card, .module-card, .service-card:not(.featured), .project-card, .channel, .process-steps li, .fact, .about-info, .dlg-box):hover {
    background-image: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 50%), rgba(124, 58, 237, 0.05), transparent 45%);
}

/* ─── Content appears softly when it is rendered ─── */
#terms > .term-card,
.module-grid > *,
#lexikon-chips > a {
    animation: fx-up 0.3s ease backwards;
    animation-delay: calc(min(var(--i, 0), 8) * 20ms);
}
#terms[data-fx-quiet] > .term-card { animation: none; }
.course-main > * { animation: fx-up 0.3s ease backwards; }

/* quiz feedback */
.quiz fieldset.ok { animation: fx-ok 0.7s ease-out; }
.quiz fieldset.bad { animation: fx-nudge 0.3s ease; }

/* ─── Lexicon dialog: fades in and out ─── */
dialog.term-dialog {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.25s ease, overlay 0.25s allow-discrete, display 0.25s allow-discrete;
}
dialog.term-dialog[open] { opacity: 1; transform: none; }
@starting-style { dialog.term-dialog[open] { opacity: 0; transform: translateY(8px); } }
@media (max-width: 700px) {
    dialog.term-dialog { transform: translateY(40px); }
    @starting-style { dialog.term-dialog[open] { opacity: 0; transform: translateY(60px); } }
}
dialog.term-dialog::backdrop {
    background: rgba(15, 6, 28, 0);
    transition: background 0.25s ease, overlay 0.25s allow-discrete, display 0.25s allow-discrete;
}
dialog.term-dialog[open]::backdrop { background: rgba(15, 6, 28, 0.7); backdrop-filter: blur(3px); }
@starting-style { dialog.term-dialog[open]::backdrop { background: rgba(15, 6, 28, 0); } }

.popover { animation: fx-pop 0.15s ease; transform-origin: top left; }

/* ─── Portfolio mobile menu: simple fade ─── */
.mobile-menu { opacity: 0; transition: opacity 0.2s ease, display 0.2s allow-discrete; }
.mobile-menu.show { opacity: 1; }
@starting-style { .mobile-menu.show { opacity: 0; } }

/* ─── "Let's talk" panel closes smoothly ─── */
.mc-cta-panel.is-closing { animation: fx-panel-out 0.18s ease forwards; }
@keyframes fx-panel-out { to { opacity: 0; transform: translateY(6px); } }

/* ─── Calm mode toggle in the footer ─── */
.fx-calm-toggle {
    font: 500 0.78rem 'Inter', system-ui, sans-serif;
    letter-spacing: 0.03em;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(168, 85, 247, 0.35);
    background: transparent;
    color: inherit;
    opacity: 0.85;
    cursor: pointer;
}
.fx-calm-toggle:hover { opacity: 1; border-color: #5eead4; }
.fx-calm-toggle[aria-pressed="true"] { border-color: #5eead4; color: #5eead4; }
[data-theme="light"] .fx-calm-toggle[aria-pressed="true"] { border-color: #0f9b8e; color: #0f9b8e; }
.footer .fx-calm-toggle { margin-top: 10px; }

/* ═══════════════════════════════════
   Trip mode 🍄 (opt-in, html[data-trip])
   The one place where things are allowed to move on their own, because the visitor asked for it.
   ═══════════════════════════════════ */
@property --trip-hue { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

/* The mushroom: dim and grey until you look closer */
.fx-trip-toggle { position: relative; }
.fx-trip-toggle span { display: inline-block; filter: grayscale(1); opacity: 0.55; transition: filter 0.3s, opacity 0.3s; }
.fx-trip-toggle:hover span, .fx-trip-toggle:focus-visible span { filter: none; opacity: 1; }
@media (hover: hover) { .fx-trip-toggle:hover span { animation: trip-wiggle 0.6s ease; } }
html[data-trip] .fx-trip-toggle { border-color: #f0abfc; box-shadow: 0 0 14px rgba(240, 171, 252, 0.45); }
html[data-trip] .fx-trip-toggle span { filter: none; opacity: 1; animation: trip-bob 2.8s ease-in-out infinite; }
@keyframes trip-wiggle { 25% { transform: rotate(-14deg); } 60% { transform: rotate(10deg); } }
@keyframes trip-bob { 50% { transform: translateY(-2px) rotate(8deg) scale(1.08); } }

/* Layers (created by fx.js, shown only while tripping) */
.fx-trip-lava, .fx-trip-veil, .fx-trip-canvas { position: fixed; pointer-events: none; display: none; }
html[data-trip] :is(.fx-trip-lava, .fx-trip-veil, .fx-trip-canvas) { display: block; }

/* Lava lamp behind the content */
.fx-trip-lava {
    inset: -25%;
    z-index: -1;
    opacity: 0.6;
    background:
        radial-gradient(28% 28% at 28% 32%, rgba(255, 63, 216, 0.55), transparent 70%),
        radial-gradient(24% 24% at 74% 26%, rgba(34, 211, 238, 0.45), transparent 70%),
        radial-gradient(30% 30% at 66% 74%, rgba(163, 230, 53, 0.32), transparent 70%),
        radial-gradient(26% 26% at 30% 76%, rgba(251, 146, 60, 0.4), transparent 70%);
    animation: trip-lava 28s ease-in-out infinite alternate;
}
[data-theme="light"] .fx-trip-lava { opacity: 0.4; }
@keyframes trip-lava {
    33% { transform: rotate(40deg) scale(1.12) translate(3%, -4%); }
    66% { transform: rotate(-25deg) scale(0.95) translate(-4%, 3%); }
    100% { transform: rotate(80deg) scale(1.08); }
}

/* Slowly cycles every colour on the page */
.fx-trip-veil {
    inset: 0;
    z-index: 150;
    -webkit-backdrop-filter: hue-rotate(var(--trip-hue)) saturate(1.35);
    backdrop-filter: hue-rotate(var(--trip-hue)) saturate(1.35);
    animation: trip-hue 36s linear infinite;
}
@keyframes trip-hue { to { --trip-hue: 360deg; } }

.fx-trip-canvas { inset: 0; width: 100%; height: 100%; z-index: 96; }

/* Rainbow headings */
html[data-trip] :is(h1, h2) {
    background: linear-gradient(90deg, #f0abfc, #5eead4, #fde047, #fb7185, #f0abfc) 0 0 / 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: trip-text 9s linear infinite;
}
html[data-trip][data-theme="light"] :is(h1, h2) {
    background-image: linear-gradient(90deg, #c026d3, #0d9488, #ca8a04, #e11d48, #c026d3);
}
@keyframes trip-text { to { background-position: 300% 0; } }

/* Cards breathe */
html[data-trip] :is(.term-card, .module-card, .service-card, .project-card, .channel, .process-steps li, .fact, .lexikon-chips a, .about-photo) {
    animation: trip-breathe 7s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * -0.9s);
}
@keyframes trip-breathe { 50% { transform: scale(1.012) rotate(0.4deg); } }
html[data-trip] :is(img, .viz) { filter: saturate(1.5); }

/* Switching on: the trip seeps out of the mushroom */
html.fx-vt-trip::view-transition-old(root) { animation: trip-vt-out 0.9s ease both; }
html.fx-vt-trip::view-transition-new(root) { animation: fx-circle 0.9s cubic-bezier(0.6, 0, 0.2, 1) both, trip-vt-in 1.1s ease both; }
@keyframes trip-vt-in { from { filter: hue-rotate(180deg) saturate(3) blur(6px); } }
@keyframes trip-vt-out { to { filter: hue-rotate(-60deg) blur(2px); transform: scale(1.02); } }

/* Little message so nobody gets lost */
.fx-trip-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 210;
    max-width: min(440px, calc(100vw - 32px));
    padding: 10px 16px;
    border-radius: 14px;
    font: 500 0.88rem/1.4 'Inter', system-ui, sans-serif;
    text-align: center;
    color: #fdf4ff;
    background: rgba(30, 12, 50, 0.92);
    border: 1px solid rgba(240, 171, 252, 0.45);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
.fx-trip-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* System "reduce motion": keep the colours, drop the movement */
@media (prefers-reduced-motion: reduce) {
    html[data-trip] :is(.fx-trip-lava, .fx-trip-veil, .fx-trip-toggle span, h1, h2, .term-card, .module-card, .service-card, .project-card, .channel, .process-steps li, .fact, .lexikon-chips a, .about-photo) { animation: none; }
    .fx-trip-veil { --trip-hue: 300deg; }
    .fx-trip-canvas { display: none !important; }
}

/* ─── Calm mode and reduced motion: everything still ─── */
html[data-calm] *, html[data-calm] *::before, html[data-calm] *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}
html[data-calm] .fx-canvas, html[data-calm] .fx-trip-canvas, html[data-calm] .fx-trip-lava, html[data-calm] .fx-trip-veil, html[data-calm] .hero-canvas, html[data-calm] .cursor-glow { display: none !important; }
html[data-calm] .reveal { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    .fx-canvas { display: none; }
}
html[data-calm]::view-transition-group(*), html[data-calm]::view-transition-old(*), html[data-calm]::view-transition-new(*) { animation: none !important; }