/* ═══════════════════════════════════
   trippy.ch home page
   Built on the malacarne.com design language (assets/design: style.css, cta.css, fx.css are shared 1:1);
   this file only adds the trippy.ch chapters: the portal hero, the game select, the lab and the insights.
   ═══════════════════════════════════ */

/* Headings wrap in balanced lines instead of leaving one word alone */
.section-head h2, .lexikon h2, .rave-card h3, .contact h2 { text-wrap: balance; }

/* ─── Hero: the portal ─── */
.hero { cursor: default; }
.logo { letter-spacing: 0.06em; }

.trippy-name {
    --g1: #5eead4;
    --g2: #c084fc;
    --g3: #f472b6;
    font-size: clamp(3.4rem, 9vw, 7.4rem);
    letter-spacing: -0.035em;
    line-height: 0.95;
}
[data-theme="light"] .trippy-name { --g1: #0f9b8e; --g2: #7c3aed; --g3: #db2777; --glow: #0f9b8e; }
.trippy-name .hn-vis { white-space: nowrap; }
.trippy-name .hn-first, .trippy-name .hn-tld { display: inline; white-space: nowrap; }
.trippy-name .hn-first .ch {
    color: var(--g2);
    color: color-mix(in oklab,
        color-mix(in oklab, var(--g1), var(--g2) calc(min(var(--t) * 2, 1) * 100%)),
        var(--g3) calc(max(var(--t) * 2 - 1, 0) * 100%));
}
.trippy-name .hn-tld { font-weight: 200; }
.trippy-name .hn-tld .ch { color: var(--text-3); }
.trippy-name .hn-tld .ch:first-child { color: var(--pink); }

/* "Touch the portal": the one hint that the hero answers */
.portal-hint {
    display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 18px 6px 6px;
    font: inherit; font-size: 0.86rem; font-weight: 500; letter-spacing: 0.02em; color: var(--text-2); cursor: pointer; text-align: left;
    background: color-mix(in srgb, var(--bg-card) 70%, transparent); border: 1px solid var(--border-strong); border-radius: 999px;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: border-color 0.25s, color 0.25s, box-shadow 0.25s;
    animation: hk-in 1s ease 1.6s backwards;
}
.portal-hint:hover { border-color: var(--accent); color: var(--text); }
.ph-icon {
    flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    color: var(--accent); background: var(--accent-light); transition: transform 0.6s cubic-bezier(0.3, 1.5, 0.5, 1), background 0.25s, color 0.25s;
}
.portal-hint:not(.is-used) .ph-icon { animation: ph-ping 2.8s ease-out 2.6s 3; }
.portal-hint.is-used .ph-icon { background: var(--accent); color: var(--bg); transform: rotate(180deg); }
.portal-hint.is-used:active .ph-icon { transform: rotate(270deg) scale(0.92); }
@keyframes ph-ping { 0% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(45, 212, 191, 0); } }

/* ─── Games: the dark band (same fixed night colours as the lexicon band on malacarne.com) ─── */
.new-dot {
    display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 99px; vertical-align: 2px;
    font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: #ec4899;
}
.neon-cube { background: rgba(236, 72, 153, 0.14) !important; color: #f9a8d4 !important; }
.games .lexikon-content > p.chips-label {
    margin: 0 0 10px; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #8f84b3;
}

/* Game select: point at a game to see its cover, tap to play */
.arcade {
    position: relative;
    background: rgba(30, 15, 55, 0.85); border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 20px; padding: 22px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7), 0 0 40px -10px rgba(124, 58, 237, 0.4);
}
.arcade .ld-label { font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace; }
.arcade-screen {
    --tone: rgba(168, 85, 247, 0.5);
    position: relative; isolation: isolate; overflow: hidden;
    aspect-ratio: 16 / 10; margin: 14px 0 14px; border-radius: 14px; background: #0b0416;
    border: 1px solid rgba(168, 85, 247, 0.32);
    box-shadow: 0 0 46px -14px var(--tone), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    transition: box-shadow 0.5s ease;
}
.arcade-screen[data-tone="gold"] { --tone: rgba(251, 191, 36, 0.5); }
.arcade-screen[data-tone="pink"] { --tone: rgba(236, 72, 153, 0.6); }
.arcade-glow {
    position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; z-index: -1;
    filter: blur(26px) saturate(1.5); opacity: 0.5; transform: scale(1.05);
}
.arcade-art {
    width: 100%; height: 100%; object-fit: contain;
    transition: opacity 0.14s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.arcade-screen.is-wide .arcade-art { object-fit: cover; }
.arcade-screen.is-swapping .arcade-art { opacity: 0; transform: scale(0.97); }
/* a whisper of scanlines, for the arcade */
.arcade-screen::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
    opacity: 0.35;
}
.arcade-list { list-style: none; display: grid; gap: 4px; }
.arcade-game {
    display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 14px; align-items: center;
    padding: 8px 10px 8px 8px; border-radius: 14px; border: 1px solid transparent;
    color: #ede6fb; text-decoration: none; transition: background 0.2s, border-color 0.2s;
}
.arcade-game img { width: 60px; height: 60px; object-fit: cover; border-radius: 10px; background: #10061c; }
.ag-text { display: grid; gap: 1px; min-width: 0; }
.ag-text small { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #5eead4; }
.ag-text b { font-size: 1rem; font-weight: 500; letter-spacing: 0.02em; }
.ag-text span { font-size: 0.8rem; line-height: 1.45; color: #a89ec7; }
.ag-go {
    width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; padding-left: 2px;
    color: #ede6fb; border: 1px solid rgba(168, 85, 247, 0.45); transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.arcade-game:hover, .arcade-game:focus-visible, .arcade-game.is-current { background: rgba(168, 85, 247, 0.12); border-color: rgba(168, 85, 247, 0.35); outline: none; }
.arcade-game:focus-visible { border-color: #5eead4; }
.arcade-game:hover .ag-go, .arcade-game:focus-visible .ag-go, .arcade-game.is-current .ag-go {
    border-color: transparent; color: #10061c;
    background: linear-gradient(135deg, #5eead4, #2dd4bf 55%, #14b8a6); box-shadow: 0 8px 20px -8px rgba(45, 212, 191, 0.8);
}

/* ─── The lab ─── */
.lab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lab-card { color: inherit; }
.lab-art {
    position: relative; height: 150px; display: grid; place-items: center; overflow: hidden;
    color: var(--c1);
    background:
        radial-gradient(ellipse 70% 90% at 25% 15%, color-mix(in srgb, var(--c1) 30%, transparent), transparent 62%),
        radial-gradient(ellipse 65% 80% at 90% 105%, color-mix(in srgb, var(--c2) 32%, transparent), transparent 62%),
        #170a2b;
    border-bottom: 1px solid var(--border);
}
[data-theme="light"] .lab-art { color: color-mix(in oklab, var(--c1) 70%, #1d1030); background-color: #f3ecfc; }
.lab-art svg { width: 58%; max-width: 190px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c1) 55%, transparent)); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
[data-theme="light"] .lab-art svg { filter: none; }
.lab-card:hover .lab-art svg { transform: scale(1.05) rotate(-2deg); }
.lab-card .project-body { flex: 1; }
.lab-card .project-body h3 { font-size: 1.3rem; }
.lab-more { display: flex; justify-content: center; margin-top: 40px; }

/* ─── Insights ─── */
.insights-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.rave-card { min-height: 360px; padding-top: 32px; }
.rave-card .rave-signal {
    position: absolute !important; z-index: 0 !important; right: -90px; bottom: -110px; width: 340px; aspect-ratio: 1; border-radius: 50%;
    background:
        repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.1) 0deg 1deg, transparent 1deg 12deg),
        conic-gradient(from 140deg, rgba(45, 212, 191, 0.45), rgba(236, 72, 153, 0.45), rgba(253, 203, 110, 0.35), rgba(45, 212, 191, 0.45));
    -webkit-mask: radial-gradient(circle, #000 18%, transparent 70%);
    mask: radial-gradient(circle, #000 18%, transparent 70%);
    opacity: 0.55; pointer-events: none;
    transition: opacity 0.6s ease;
}
.rave-card:hover .rave-signal { opacity: 0.8; animation: rave-spin 14s linear infinite; }
@keyframes rave-spin { to { transform: rotate(1turn); } }
.rave-date { font-size: 0.7rem !important; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #5eead4 !important; }
.rave-card h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 300; line-height: 1.22; padding-right: 110px; }
.rave-card h3 a { color: #fff; text-decoration: none; transition: color 0.2s; }
.rave-card h3 a:hover { color: #5eead4; }
.rave-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px; padding-top: 10px; }
.rave-actions .btn { margin: 0; }
.rave-card .btn-outline { color: #ede6fb; border-color: rgba(168, 85, 247, 0.5); }
.rave-card .btn-outline:hover { color: #5eead4; border-color: #2dd4bf; }

.channels.posts { grid-template-rows: repeat(3, minmax(0, 1fr)) auto; grid-auto-rows: auto; }
.post { color: inherit; }
.post-text { display: grid; gap: 4px; min-width: 0; }
.post-text small { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.post-text b { font-size: 1rem; font-weight: 400; line-height: 1.45; letter-spacing: 0.01em; }
.post .channel-cta { font-size: 1.1rem; transition: transform 0.25s; }
.post:hover .channel-cta { transform: translateX(3px); }
.posts-all { justify-self: end; padding: 6px 4px 0; }

/* ─── Support ─── */
.support .btn svg { flex: none; }

/* Floating CTA: a coffee option next to the shared ones */
.mc-cta-ic.coffee { background: linear-gradient(135deg, #fde68a, #fbbf24); color: #1a0a2e; }

/* ─── The mushroom 🍄: on trippy.ch it is not shy ─── */
.fx-trip-toggle span { filter: none; opacity: 0.9; }
.fx-trip-toggle:not([aria-pressed="true"]) span { animation: trip-wiggle 0.7s ease 2.6s 2; }

/* ─── Trip mode 🍄: the arcade breathes along ─── */
html[data-trip] :is(.arcade, .arcade-screen) { animation: trip-breathe 7s ease-in-out infinite; }
html[data-trip] .rave-card .rave-signal { opacity: 0.85; animation: rave-spin 9s linear infinite; }
html[data-trip] .portal-hint { border-color: #f0abfc; box-shadow: 0 0 18px rgba(240, 171, 252, 0.35); }

/* ─── Calm mode and reduced motion: nothing moves on its own ─── */
html[data-calm] :is(.portal-hint, .ph-icon, .arcade, .arcade-screen, .rave-signal, .fx-trip-toggle span) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    :is(.portal-hint, .ph-icon, .arcade, .arcade-screen, .rave-signal, .fx-trip-toggle span) { animation: none !important; }
}

/* ─── Responsive ─── */
@media (max-width: 960px) {
    /* Phone: portal on top, name below, and the "New: Trippy Jump Neon" bar closing the first screen */
    .hero { min-height: calc(100svh - 64px - 112px); padding: 16px 0 20px; align-items: stretch; }
    .hero-grid { align-content: center; gap: 16px; }
    .hero-heart { width: min(44vw, 25svh, 220px); }
    .hero-text { gap: 14px; }
    .hero-title { gap: 12px; }
    .trippy-name { font-size: clamp(2.8rem, min(17vw, 10svh), 5.4rem); }
    .hero-tagline { font-size: clamp(1.1rem, min(5vw, 3.2svh), 1.6rem); }
    .portal-hint { align-self: center; min-height: 44px; font-size: 0.8rem; }
    .lex-bridge { padding-top: 0; }
    .lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .insights-grid { grid-template-columns: minmax(0, 1fr); }
    .channels.posts { grid-template-rows: none; }
}
@media (max-width: 640px) {
    .lexikon.games { padding-top: 0; }
    .lab-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .lab-art { height: 120px; }
    .arcade { padding: 16px; }
    .arcade-game { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; }
    .arcade-game img { width: 52px; height: 52px; }
    .rave-card { min-height: 0; }
    .rave-card h3 { padding-right: 0; margin-top: 18px; }
    .lex-cta-text b { font-size: 0.98rem; }
    .lex-cta-text small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}