:root {
/* Design-system canonical tokens */
--color-primary: #1886E2;
--color-danger: #FD5250;
--color-warning: #F5B800;
--color-bg: #FDFBF7;
--color-surface: #FFFEF9;
--color-border: #E8E3DB;
--color-text-secondary: #8F8678;
--color-text-primary: #4A4540;
--color-text-emphasis: #1A1816;
/* Bridge aliases (backward compat) */
--card-bg: var(--color-surface);
--card-border: var(--color-border);
--bg: var(--color-bg);
--text-primary: var(--color-text-primary);
--text-secondary: var(--color-text-secondary);
--text-tertiary: var(--color-text-secondary);
/* Toggle tokens (primary blue, not indigo) */
--color-toggle-track-on: var(--color-primary);
--color-toggle-bg-on: rgba(24, 134, 226, 0.08);
--color-toggle-border-on: rgba(24, 134, 226, 0.2);
--color-toggle-dot-on: var(--color-primary);
--color-toggle-subtext-on: var(--color-primary);
--color-toggle-track-off: #d1d5db;
--color-toggle-dot-off: #cbd5e1;
/* Component tokens */
--color-surface-inset: #F5F4F1;
--color-surface-elevated: #fafafa;
--color-panel-bg: var(--color-surface);
--color-panel-border: #f0edf5;
--color-panel-highlight: rgba(24, 134, 226, 0.04);
--color-label-muted: #b4b0c8;
--color-label-dim: #c7d2ce;
--color-heading-dark: #1e1b4b;
--color-meta: #94a3b8;
--color-icon-default: #475569;
--color-panel-kbd: #f8f7ff;
--color-success: #22c55e;
--color-checkbox-border: #d1d5db;
/* Easter Eggs card */
--ee-row-bg: var(--color-surface-elevated);
--ee-row-bg-done: rgba(34, 197, 94, 0.04);
--ee-row-border: var(--color-panel-border);
--ee-row-border-done: rgba(34, 197, 94, 0.15);
--ee-ring-track: rgba(0, 0, 0, 0.06);
--ee-dot-empty: #d1d5db;
--ee-dot-empty-border: #d4d0de;
--ee-shimmer-a: #f0edf5;
--ee-shimmer-b: #e8e3db;
--ee-shimmer-c: #ddd8d0;
--ee-back-border: var(--color-border);
--ee-checkmark-stroke: #FFFEF9;
--ee-green-glow: rgba(34, 197, 94, 0.4);
--ee-badge-bg: rgba(34, 197, 94, 0.1);
--ee-badge-border: rgba(34, 197, 94, 0.2);
--ee-scroll-body-outer: #F5F0E8;
--ee-scroll-body-inner: #FAF7F2;
--ee-scroll-roll-outer: #D4C9B5;
--ee-scroll-roll-mid: #E8DFD0;
--ee-scroll-roll-highlight: rgba(240, 234, 224, 0.6);
--ee-scroll-knob: #B8AA94;
--ee-scroll-knob-highlight: #D4C9B5;
--ee-scroll-text-bars: rgba(212, 201, 181, 0.6);
--ee-scroll-texture: rgba(232, 223, 208, 0.4);
--ee-scroll-shadow: drop-shadow(0 3px 8px rgba(0,0,0,0.06));
--ee-scroll-shadow-peak: drop-shadow(0 6px 16px rgba(0,0,0,0.1));
--ee-sparkle-color: #D4C9B5;
--ee-sparkle-opacity: 0.5;
--ee-sparkle-shadow: 0 0 4px rgba(212, 201, 181, 0.4);
/* Tilt glow */
--color-tilt-glow: #1886E2;
--tilt-glow-opacity: 10;
--tilt-edge-opacity: 18;
/* Overlay & grid */
--grid-line-color: rgba(232, 227, 219, 0.6);
--card-overlay-color: rgba(245, 244, 241, 0.95);
--card-overlay-dark: rgba(14, 14, 16, 0.95);
/* Fonts */
--font-display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
--font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
--font-mono: 'IBM Plex Mono', monospace;
/* AI Loader — light mode */
--ai-phone-bezel: linear-gradient(175deg, #ffffff, #f0eeea);
--ai-phone-border: rgba(0, 0, 0, 0.06);
--ai-phone-shadow:
0 2px 4px rgba(0,0,0,0.04),
0 8px 24px rgba(0,0,0,0.06),
0 32px 64px rgba(0,0,0,0.08),
0 0 0 1px rgba(0,0,0,0.04);
--ai-screen-bg: #faf9f6;
--ai-screen-border: rgba(0, 0, 0, 0.04);
--ai-island-bg: var(--color-border);
--ai-island-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
--ai-button-color: rgba(0, 0, 0, 0.05);
--ai-orb-gradient: radial-gradient(circle at 38% 32%,
rgba(240, 210, 140, 0.95),
rgba(210, 175, 100, 0.6) 45%,
rgba(185, 150, 80, 0.25) 70%,
transparent);
--ai-orb-shadow-rest:
0 0 40px rgba(200, 165, 90, 0.15),
0 0 80px rgba(200, 165, 90, 0.06),
inset 0 0 20px rgba(255, 240, 200, 0.15);
--ai-orb-shadow-peak:
0 0 50px rgba(200, 165, 90, 0.25),
0 0 100px rgba(200, 165, 90, 0.1),
inset 0 0 30px rgba(255, 240, 200, 0.2);
--ai-orb-highlight: rgba(255, 255, 255, 0.65);
--ai-ambient-glow: radial-gradient(ellipse at 50% 42%,
rgba(212, 175, 110, 0.05) 0%, transparent 55%);
--ai-ring-stroke: rgba(180, 150, 90, 0.08);
--ai-ring-dash: rgba(180, 150, 90, 0.16);
--ai-inner-ring: rgba(180, 150, 90, 0.1);
--ai-label: rgba(110, 85, 35, 0.85);
--ai-sub: rgba(140, 120, 80, 0.4);
--ai-step-active: rgba(180, 150, 90, 0.45);
--ai-step-inactive: rgba(180, 150, 90, 0.1);
--ai-shimmer: rgba(255, 240, 200, 0.5);
--ai-home-bar: rgba(0, 0, 0, 0.12);
/* iMac Mockup — light mode */
--imac-bezel: linear-gradient(175deg, #f5f4f1, #eae8e4);
--imac-chin: linear-gradient(to bottom, #f0eeea, #e8e6e2);
--imac-border: rgba(0, 0, 0, 0.08);
--imac-shadow:
0 2px 8px rgba(0,0,0,0.04),
0 8px 24px rgba(0,0,0,0.06),
0 0 0 1px rgba(0,0,0,0.03);
--imac-stand-color: #d4cfc8;
--imac-foot-color: #c8c3bc;
--imac-screen-bg: #ffffff;
}
[data-theme="dark"] {
--color-primary: #5BA3F5;
--color-danger: #FF6B6B;
--color-warning: #FFD93D;
--color-bg: #2E2A28;
--color-surface: #3D3835;
--color-border: #5A524D;
--color-text-secondary: #B8AFA7;
--color-text-primary: #E8E3DB;
--color-text-emphasis: #FDFBF7;
--card-bg: var(--color-surface);
--card-border: var(--color-border);
--bg: var(--color-bg);
--text-primary: var(--color-text-primary);
--text-secondary: var(--color-text-secondary);
--text-tertiary: var(--color-text-secondary);
--color-toggle-track-on: var(--color-primary);
--color-toggle-bg-on: rgba(91, 163, 245, 0.1);
--color-toggle-border-on: rgba(91, 163, 245, 0.25);
--color-toggle-dot-on: var(--color-primary);
--color-toggle-subtext-on: var(--color-primary);
--color-toggle-track-off: #5A524D;
--color-toggle-dot-off: #7A726C;
--color-surface-inset: #352F2C;
--color-surface-elevated: #453E3A;
--color-panel-bg: #3D3835;
--color-panel-border: #5A524D;
--color-panel-highlight: rgba(91, 163, 245, 0.08);
--color-label-muted: #8A827B;
--color-label-dim: #7A726C;
--color-heading-dark: #E8E3DB;
--color-meta: #8A827B;
--color-icon-default: #B8AFA7;
--color-panel-kbd: rgba(91, 163, 245, 0.06);
--color-success: #4ade80;
--color-checkbox-border: #5A524D;
/* Easter Eggs card */
--ee-row-bg: var(--color-surface-elevated);
--ee-row-bg-done: rgba(74, 222, 128, 0.04);
--ee-row-border: var(--color-panel-border);
--ee-row-border-done: rgba(74, 222, 128, 0.12);
--ee-ring-track: #5A524D;
--ee-dot-empty: #5A524D;
--ee-dot-empty-border: #7A726C;
--ee-shimmer-a: #3D3835;
--ee-shimmer-b: #4A4540;
--ee-shimmer-c: #5A524D;
--ee-back-border: #5A524D;
--ee-checkmark-stroke: #2E2A28;
--ee-green-glow: rgba(74, 222, 128, 0.4);
--ee-badge-bg: rgba(74, 222, 128, 0.1);
--ee-badge-border: rgba(74, 222, 128, 0.2);
--ee-scroll-body-outer: #2E3038;
--ee-scroll-body-inner: #353840;
--ee-scroll-roll-outer: #3E424C;
--ee-scroll-roll-mid: #4A4E58;
--ee-scroll-roll-highlight: rgba(86, 91, 102, 0.4);
--ee-scroll-knob: #33373F;
--ee-scroll-knob-highlight: #4A4E58;
--ee-scroll-text-bars: rgba(62, 66, 76, 0.7);
--ee-scroll-texture: rgba(62, 66, 76, 0.3);
--ee-scroll-shadow: drop-shadow(0 3px 10px rgba(0,0,0,0.35));
--ee-scroll-shadow-peak: drop-shadow(0 8px 20px rgba(0,0,0,0.45));
--ee-sparkle-color: #6B7080;
--ee-sparkle-opacity: 0.4;
--ee-sparkle-shadow: 0 0 4px rgba(107, 112, 128, 0.3);
--color-tilt-glow: #E8E3DB;
--tilt-glow-opacity: 14;
--tilt-edge-opacity: 24;
--grid-line-color: rgba(90, 82, 77, 0.35);
--card-overlay-color: rgba(46, 42, 40, 0.95);
--card-overlay-dark: rgba(46, 42, 40, 0.95);
/* AI Loader — dark mode */
--ai-phone-bezel: linear-gradient(175deg, #453E3A, #3D3835);
--ai-phone-border: var(--color-border);
--ai-phone-shadow:
0 2px 4px rgba(0,0,0,0.1),
0 8px 24px rgba(0,0,0,0.15),
0 32px 64px rgba(0,0,0,0.12),
0 0 0 1px rgba(255,255,255,0.04);
--ai-screen-bg: #2E2A28;
--ai-screen-border: var(--color-border);
--ai-island-bg: var(--color-surface-inset);
--ai-island-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
--ai-button-color: rgba(255, 255, 255, 0.08);
--ai-orb-gradient: radial-gradient(circle at 38% 32%,
rgba(245, 220, 160, 0.7),
rgba(212, 175, 110, 0.35) 45%,
rgba(160, 120, 60, 0.15) 70%,
transparent);
--ai-orb-shadow-rest:
0 0 40px rgba(212, 175, 110, 0.18),
0 0 80px rgba(212, 175, 110, 0.06),
inset 0 0 20px rgba(212, 175, 110, 0.1);
--ai-orb-shadow-peak:
0 0 50px rgba(212, 175, 110, 0.28),
0 0 100px rgba(212, 175, 110, 0.1),
inset 0 0 30px rgba(212, 175, 110, 0.15);
--ai-orb-highlight: rgba(255, 240, 200, 0.5);
--ai-ambient-glow: radial-gradient(ellipse at 50% 42%,
rgba(212, 175, 110, 0.03) 0%, transparent 55%);
--ai-ring-stroke: rgba(212, 175, 110, 0.07);
--ai-ring-dash: rgba(212, 175, 110, 0.14);
--ai-inner-ring: rgba(212, 175, 110, 0.09);
--ai-label: rgba(212, 175, 110, 0.8);
--ai-sub: rgba(200, 190, 170, 0.32);
--ai-step-active: rgba(212, 175, 110, 0.45);
--ai-step-inactive: rgba(212, 175, 110, 0.08);
--ai-shimmer: rgba(255, 240, 200, 0.35);
--ai-home-bar: rgba(255, 255, 255, 0.1);
/* iMac Mockup — dark mode */
--imac-bezel: linear-gradient(175deg, #453e3a, #3d3835);
--imac-chin: linear-gradient(to bottom, #3d3835, #352f2c);
--imac-border: rgba(255, 255, 255, 0.06);
--imac-shadow:
0 2px 8px rgba(0,0,0,0.12),
0 8px 24px rgba(0,0,0,0.18),
0 0 0 1px rgba(255,255,255,0.04);
--imac-stand-color: #2e2a28;
--imac-foot-color: #252220;
--imac-screen-bg: #2E2A28;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.heading-squish {
font-variation-settings: 'opsz' 14, 'wdth' 100;
transition: font-variation-settings 0.3s ease;
}
.heading-squish:hover {
font-variation-settings: 'opsz' 14, 'wdth' 90;
}
/* Bugbear hover text */
.bugbear-text {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 16px;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.bugbear-card.hovered .bugbear-text {
transform: translateY(0);
}
/* Portrait circle (pops up on h1 hover) */
.portrait-circle {
position: absolute;
top: 0px;
left: 220px;
width: 108px;
height: 108px;
border-radius: 50%;
overflow: hidden;
background: var(--color-surface);
border: 2px solid var(--color-border);
opacity: 0;
pointer-events: none;
transform: translateX(-40px);
transition: opacity 0.4s cubic-bezier(0.76, 0, 0.24, 1),
transform 0.4s cubic-bezier(0.76, 0, 0.24, 1),
background 0.4s ease, border-color 0.4s ease;
z-index: 10;
}
.portrait-circle.is-visible {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.portrait-card__inner {
position: relative;
overflow: hidden;
border-radius: 50%;
width: 100%;
height: 100%;
}
.portrait-card__inner picture {
position: absolute;
inset: 0;
z-index: 2;
}
.portrait-card__static {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 1;
transition: opacity 350ms ease;
}
.portrait-card__inner .portrait-card__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.portrait-circle.is-visible .portrait-card__static {
opacity: 0;
}
/* ── Parallax Layers Card System ── */
.card {
position: relative;
overflow: hidden;
border-radius: 16px;
cursor: pointer;
transform-style: preserve-3d;
background-color: var(--color-surface);
}
.card-image-wrap {
position: relative;
overflow: hidden;
transition: clip-path 0.7s cubic-bezier(0.76, 0, 0.24, 1);
clip-path: inset(12px round 10px);
}
.card-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
transform-origin: center center;
}
.card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, var(--card-overlay-color) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.card-text {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: center;
text-align: center;
padding: 16px;
transform: translateY(40px);
opacity: 0;
transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
transition-delay: 0.12s;
z-index: 2;
}
.text-title {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 400;
color: var(--color-text-emphasis);
margin-bottom: 6px;
letter-spacing: -0.01em;
line-height: 1.2;
}
.text-desc {
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 300;
color: var(--color-text-emphasis);
line-height: 1.55;
opacity: 0.85;
}
.text-tag {
display: inline-block;
margin-top: 10px;
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-emphasis);
opacity: 0.5;
}
/* ── Hover State ── */
.card:not(.no-hover):hover .card-image-wrap {
clip-path: inset(12px 12px 60px 12px round 10px);
}
.card:not(.no-hover):hover .card-image-wrap img {
transform: scale(1.12) translateY(-8%);
}
.card:not(.no-hover):hover .card-overlay {
opacity: 1;
}
.card:not(.no-hover):hover .card-text {
transform: translateY(0);
opacity: 1;
}
.card.no-hover {
cursor: default;
}
/* ── Project Row Layout ── */
@media (min-width: 1024px) {
.project-text { flex: 0.75 !important; padding-bottom: 32px; }
.project-text + div { flex: 1.25 !important; }
}
.project-text .text-title {
font-family: var(--font-body);
font-size: 32px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--color-text-primary);
text-align: left;
margin-bottom: 16px;
max-width: 360px;
}
.project-text .text-desc {
font-family: var(--font-body);
font-size: 16px;
font-weight: 400;
line-height: 1.61;
color: #6B6560;
text-align: left;
max-width: 440px;
}
[data-theme="dark"] .project-text .text-desc {
color: var(--color-text-primary);
}
@media (min-width: 1536px) {
.project-text .text-desc {
font-size: 18px;
}
}
/* ── Numbered Bullet List ── */
.bullets-numbered {
max-width: 440px;
display: flex;
flex-direction: column;
gap: 12px;
counter-reset: bullet-counter;
}
.bullets-numbered .bullet-item {
font-family: var(--font-body);
font-size: 16px;
font-weight: 400;
line-height: 1.61;
color: #6B6560;
padding-left: 34px;
position: relative;
counter-increment: bullet-counter;
}
.bullets-numbered .bullet-item strong {
font-weight: 500;
}
.bullets-numbered .bullet-item::before {
content: counter(bullet-counter, decimal-leading-zero);
position: absolute;
left: 0;
top: 2px;
font-family: var(--font-mono);
font-size: 14px;
font-weight: 500;
color: var(--color-text-secondary);
}
[data-theme="dark"] .bullets-numbered .bullet-item {
color: var(--color-text-primary);
}
@media (min-width: 1536px) {
.bullets-numbered .bullet-item {
font-size: 18px;
}
.bullets-numbered .bullet-item::before {
font-size: 15px;
top: 3px;
}
}
/* ── Visit Site Button ── */
.visit-btn {
position: absolute;
bottom: 12px;
left: 12px;
right: 12px;
transform: translateY(16px);
opacity: 0;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 8px 14px;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--color-text-primary);
background: rgba(255,255,255,0.75);
border: 1px solid rgba(0,0,0,0.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 12px;
text-decoration: none;
cursor: pointer;
transition: all 0.45s cubic-bezier(0.76, 0, 0.24, 1);
transition-delay: 0.1s;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8);
overflow: hidden;
}
.card:hover .visit-btn {
transform: translateY(0);
opacity: 1;
}
.visit-btn:hover {
transform: scale(1.02);
box-shadow: 0 8px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
}
.visit-btn:active {
transform: scale(0.97);
}
#photojournalism .visit-btn {
bottom: 24px;
left: 24px;
right: 24px;
padding: 10px 16px;
font-size: 0.7rem;
}
.visit-btn svg {
color: var(--color-meta);
transform: translate(-1px, 0px);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
}
.visit-btn:hover svg {
transform: translate(0.5px, -0.5px);
color: var(--color-primary);
}
/* Dark mode visit button */
[data-theme="dark"] .visit-btn {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.18);
color: #FFF;
box-shadow: 0 2px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);
}
[data-theme="dark"] .visit-btn:hover {
box-shadow: 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}
/* ── Contain-fit card variants (Grovo, Otherwheres) ── */
#grovoCard .card-image-wrap img {
transform: scale(0.9);
}
#grovoCard:hover .card-image-wrap img {
transform: scale(1.05) translateY(-13%);
}
/* ── Dark gradient on hover (Grovo, Photojournalism) ── */
#grovoCard .card-overlay,
#photoCard .card-overlay {
background: linear-gradient(to top, var(--card-overlay-dark) 0%, transparent 60%);
}
#grovoCard:hover .card-overlay,
#photoCard:hover .card-overlay {
opacity: 0.25;
}
/* ── Wide card variant (Codecademy) ── */
.card--wide .card-image-wrap img {
transform: scale(0.95);
}
.card--wide:hover .card-image-wrap img {
transform: scale(1.12) translateY(-12%);
}
/* ── Tall card variant (Photojournalism) ── */
.card--tall:hover .card-image-wrap {
clip-path: inset(12px 12px 25% 12px round 10px);
}
/* ══════════════════════════════════════
iMac Device Mockup
══════════════════════════════════════ */
.imac {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 10% 8% 6%;
box-sizing: border-box;
}
.imac-display {
width: 100%;
max-width: 90%;
border-radius: 10px;
overflow: hidden;
background: var(--imac-bezel);
box-shadow: var(--imac-shadow);
border: 1px solid var(--imac-border);
display: flex;
flex-direction: column;
}
.imac-screen {
margin: 4%;
margin-bottom: 0;
border-radius: 4px 4px 0 0;
overflow: hidden;
background: var(--imac-screen-bg);
aspect-ratio: 16 / 9;
position: relative;
border: 1px solid var(--color-border);
}
.imac-screen img,
.imac-screen video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#bugbear .imac-screen img {
object-fit: contain;
}
#bugbear .imac-screen canvas {
width: 100%;
height: 100%;
display: block;
}
.imac-chin {
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: var(--imac-chin);
}
.imac-camera {
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.12);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .imac-camera {
background: rgba(255, 255, 255, 0.06);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.imac-stand {
width: 12%;
height: 32px;
background: linear-gradient(to bottom, var(--imac-stand-color), color-mix(in srgb, var(--imac-stand-color) 85%, black));
clip-path: polygon(3% 0%, 97% 0%, 100% 100%, 0% 100%);
}
.imac-foot {
width: 26%;
height: 5px;
border-radius: 0 0 3px 3px;
background: var(--imac-foot-color);
}
/* ── iMac peripherals (hidden — remove this block to re-enable) ── */
.imac-peripherals {
display: none;
}
/* ── iMac color tints (light mode) ── */
#formation .imac { --imac-tint: rgba(24, 134, 226, 0.18); }
#bugbear .imac { --imac-tint: rgba(245, 130, 50, 0.20); }
#codecademy .imac { --imac-tint: rgba(34, 167, 94, 0.18); }
#grovo .imac { --imac-tint: rgba(147, 100, 220, 0.18); }
/* ── Section background color wash ── */
section:has(#formation)::before,
section:has(#bugbear)::before,
section:has(#codecademy)::before,
section:has(#grovo)::before {
content: '';
position: absolute;
left: 16px; right: 16px; top: 16px; bottom: 16px;
z-index: 1;
pointer-events: none;
}
@media (min-width: 768px) {
section:has(#formation)::before,
section:has(#bugbear)::before,
section:has(#codecademy)::before,
section:has(#grovo)::before {
left: 32px; right: 32px; top: 32px; bottom: 32px;
}
}
@media (min-width: 1024px) {
section:has(#formation)::before,
section:has(#bugbear)::before,
section:has(#codecademy)::before,
section:has(#grovo)::before {
left: 48px; right: 48px; top: 48px; bottom: 48px;
}
}
@media (min-width: 1536px) {
section:has(#formation)::before,
section:has(#bugbear)::before,
section:has(#codecademy)::before,
section:has(#grovo)::before {
left: 56px; right: 56px; top: 56px; bottom: 56px;
}
}
section:has(#formation)::before { background: linear-gradient(180deg, transparent 0%, rgba(24, 134, 226, 0.03) 100%); }
section:has(#bugbear)::before { background: linear-gradient(180deg, transparent 0%, rgba(245, 130, 50, 0.03) 100%); }
section:has(#codecademy)::before { background: linear-gradient(180deg, transparent 0%, rgba(34, 167, 94, 0.03) 100%); }
section:has(#grovo)::before { background: linear-gradient(180deg, transparent 0%, rgba(147, 100, 220, 0.03) 100%); }
[data-theme="dark"] section:has(#formation)::before { background: linear-gradient(180deg, transparent 0%, rgba(91, 163, 245, 0.03) 100%); }
[data-theme="dark"] section:has(#bugbear)::before { background: linear-gradient(180deg, transparent 0%, rgba(255, 160, 80, 0.03) 100%); }
[data-theme="dark"] section:has(#codecademy)::before { background: linear-gradient(180deg, transparent 0%, rgba(74, 222, 128, 0.03) 100%); }
[data-theme="dark"] section:has(#grovo)::before { background: linear-gradient(180deg, transparent 0%, rgba(167, 130, 240, 0.03) 100%); }
/* ── Hero section background wash ── */
.hero-section::before {
content: '';
position: absolute;
left: 16px; right: 16px; top: 16px; bottom: 16px;
z-index: 1;
pointer-events: none;
background: linear-gradient(180deg, transparent 0%, rgba(180, 140, 80, 0.03) 100%);
}
[data-theme="dark"] .hero-section::before {
background: linear-gradient(180deg, transparent 0%, rgba(210, 175, 120, 0.07) 100%);
}
[data-theme="dark"] .hero-subtext {
color: var(--color-text-secondary);
}
@media (min-width: 768px) {
.hero-section::before { left: 32px; right: 32px; top: 32px; bottom: 32px; }
}
@media (min-width: 1024px) {
.hero-section::before { left: 48px; right: 48px; top: 48px; bottom: 48px; }
}
@media (min-width: 1536px) {
.hero-section::before { left: 56px; right: 56px; top: 56px; bottom: 56px; }
}
/* ── Card background gradients (light mode) ── */
#formation.card { background-image: linear-gradient(180deg, rgba(24, 134, 226, 0.02) 0%, rgba(24, 134, 226, 0.05) 100%); }
#bugbear.card { background-image: linear-gradient(180deg, rgba(245, 130, 50, 0.02) 0%, rgba(245, 130, 50, 0.05) 100%); }
#codecademy.card { background-image: linear-gradient(180deg, rgba(34, 167, 94, 0.02) 0%, rgba(34, 167, 94, 0.05) 100%); }
#grovo.card { background-image: linear-gradient(180deg, rgba(147, 100, 220, 0.02) 0%, rgba(147, 100, 220, 0.05) 100%); }
/* ── iMac color tints (dark mode) ── */
[data-theme="dark"] #formation .imac { --imac-tint: rgba(91, 163, 245, 0.22); }
[data-theme="dark"] #bugbear .imac { --imac-tint: rgba(255, 160, 80, 0.24); }
[data-theme="dark"] #codecademy .imac { --imac-tint: rgba(74, 222, 128, 0.22); }
[data-theme="dark"] #grovo .imac { --imac-tint: rgba(167, 130, 240, 0.22); }
/* ── Card background gradients (dark mode) ── */
[data-theme="dark"] #formation.card { background-image: linear-gradient(180deg, rgba(91, 163, 245, 0.02) 0%, rgba(91, 163, 245, 0.05) 100%); }
[data-theme="dark"] #bugbear.card { background-image: linear-gradient(180deg, rgba(255, 160, 80, 0.02) 0%, rgba(255, 160, 80, 0.05) 100%); }
[data-theme="dark"] #codecademy.card { background-image: linear-gradient(180deg, rgba(74, 222, 128, 0.02) 0%, rgba(74, 222, 128, 0.05) 100%); }
[data-theme="dark"] #grovo.card { background-image: linear-gradient(180deg, rgba(167, 130, 240, 0.02) 0%, rgba(167, 130, 240, 0.05) 100%); }
/* Apply tint to bezel and chin */
.imac .imac-display {
background: linear-gradient(175deg,
color-mix(in srgb, #f5f4f1, var(--imac-tint, transparent) 100%),
color-mix(in srgb, #eae8e4, var(--imac-tint, transparent) 100%)
);
}
.imac .imac-chin {
background: linear-gradient(to bottom,
color-mix(in srgb, #f0eeea, var(--imac-tint, transparent) 100%),
color-mix(in srgb, #e8e6e2, var(--imac-tint, transparent) 100%)
);
}
[data-theme="dark"] .imac .imac-display {
background: linear-gradient(175deg,
color-mix(in srgb, #453e3a, var(--imac-tint, transparent) 100%),
color-mix(in srgb, #3d3835, var(--imac-tint, transparent) 100%)
);
}
[data-theme="dark"] .imac .imac-chin {
background: linear-gradient(to bottom,
color-mix(in srgb, #3d3835, var(--imac-tint, transparent) 100%),
color-mix(in srgb, #352f2c, var(--imac-tint, transparent) 100%)
);
}
/* ── iMac hover behavior ── */
.card-image-wrap .imac {
transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
transform-origin: center center;
}
.card:hover .card-image-wrap .imac {
transform: scale(1.06);
}
/* Disable default img hover transform for iMac cards */
.card .imac-screen img,
.card .imac-screen video {
transition: none;
}
.card:not(.no-hover):hover .imac-screen img,
.card:not(.no-hover):hover .imac-screen video {
transform: none;
}
/* ── Responsive iMac sizing ── */
@media (max-width: 767px) {
.imac-chin { height: 18px; }
.imac-camera { width: 4px; height: 4px; }
.imac-stand { height: 22px; }
.imac-foot { height: 4px; }
.imac { padding-top: 2%; }
/* Hide cards on mobile only */
.mobile-hidden { display: none !important; }
/* Mobile bento card ordering */
#grovoCard { order: 1; }
#codecademyCard { order: 2; }
#bugbearCard { order: 3; }
#themeCard { order: 4; }
#formationBottomLeftCard { order: 5; }
#formationTopLeftCard { order: 6; }
/* Tighten task cards */
.task-card-item {
width: calc(100% - 16px);
}
/* Mobile project title size */
.project-text .text-title {
font-size: 24px;
}
}
/* ── Ballet placeholder (no image) ── */
.card--placeholder .card-text {
position: static;
opacity: 1;
transform: translateY(0);
padding: 32px 28px;
height: 100%;
display: flex;
align-items: flex-end;
}
/* ── Touch Device Fallback ── */
@media (hover: none) {
.card-text {
transform: translateY(0);
opacity: 1;
}
.card-image-wrap {
clip-path: inset(12px round 10px);
}
.visit-btn {
transform: translateY(0);
opacity: 1;
}
}
/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
.card-image-wrap,
.card-image-wrap img,
.card-image-wrap .imac,
.card-overlay,
.card-text,
.portrait-circle {
transition-duration: 0.01s;
}
.tilt-glow,
.tilt-edge {
display: none;
}
/* Theme transition clone — instant remove */
body > [style*="z-index: 9998"] {
opacity: 0 !important;
filter: none !important;
}
/* Mechanical switch — disable idle animations */
.glow-sun .glow-icon,
.sun-ray-glow,
.glow-moon .glow-icon,
.glow-star {
animation: none !important;
}
}
/* ── Bugbear card ── */
.bugbear-card {
transform-style: preserve-3d;
}
.bugbear-static-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
display: none;
transform: scale(0.86) translateX(-4px);
}
[data-theme="dark"] .bugbear-static-img {
display: block;
}
[data-theme="dark"] #bugbear-canvas {
display: none;
}
/* ── Phase 2: Magnetic Tilt Overlays ── */
.tilt-glow {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 2;
opacity: 0;
transition: opacity 0.35s;
}
.tilt-edge {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
border-radius: inherit;
pointer-events: none;
z-index: 3;
background: transparent;
transition: background 0.4s;
}
/* ══════════════════════════════════════
Modal System
══════════════════════════════════════ */
/* ── Backdrop ── */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(26, 26, 26, 0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 100;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.modal-backdrop.is-visible {
opacity: 1;
pointer-events: auto;
}
/* ── Modal Container ── */
.modal-view {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.92);
width: 85vw;
height: 70vh;
max-height: 90vh;
background: var(--card-bg);
border-radius: 16px;
border: 1px solid var(--card-border);
overflow: hidden;
z-index: 101;
opacity: 0;
pointer-events: none;
transition: all 0.55s cubic-bezier(0.76, 0, 0.24, 1);
display: flex;
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.15),
0 2px 8px rgba(0, 0, 0, 0.06);
}
.modal-view.is-visible {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
pointer-events: auto;
}
/* ── Image Panel ── */
.modal-image {
width: 45%;
min-height: 360px;
background-color: var(--bg);
background-size: 70%;
background-position: center;
background-repeat: no-repeat;
flex-shrink: 0;
position: relative;
border-right: 1px solid var(--card-border);
}
.modal-image-gradient {
position: absolute;
inset: 0;
background: linear-gradient(
to right,
transparent 0%,
transparent 40%,
var(--bg) 100%
);
}
/* ── Content Panel ── */
.modal-content {
flex: 1;
padding: 96px 36px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow-y: auto;
}
/* ── Close Button ── */
.modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--card-border);
background: var(--card-bg);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.25s ease;
color: var(--text-secondary);
}
.modal-close:hover {
background: var(--bg);
border-color: var(--color-border);
color: var(--text-primary);
}
/* ── Staggered Text Elements ── */
.m-title {
font-family: var(--font-display);
font-size: 1.65rem;
font-weight: 400;
letter-spacing: -0.02em;
margin-bottom: 6px;
color: var(--text-primary);
transform: translateY(20px);
opacity: 0;
transition: all 0.45s cubic-bezier(0.76, 0, 0.24, 1);
}
.modal-view.is-visible .m-title {
transform: translateY(0);
opacity: 1;
transition-delay: 0.15s;
}
.m-tag {
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 18px;
transform: translateY(20px);
opacity: 0;
transition: all 0.45s cubic-bezier(0.76, 0, 0.24, 1);
}
.modal-view.is-visible .m-tag {
transform: translateY(0);
opacity: 1;
transition-delay: 0.2s;
}
.m-divider {
width: 0;
height: 1px;
background: var(--card-border);
margin-bottom: 18px;
transition: width 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.modal-view.is-visible .m-divider {
width: 100%;
transition-delay: 0.25s;
}
.m-body {
font-size: 0.88rem;
color: var(--text-secondary);
line-height: 1.7;
font-weight: 300;
margin-bottom: 24px;
transform: translateY(20px);
opacity: 0;
transition: all 0.45s cubic-bezier(0.76, 0, 0.24, 1);
}
.modal-view.is-visible .m-body {
transform: translateY(0);
opacity: 1;
transition-delay: 0.32s;
}
/* ── View Project Button ── */
.m-button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--text-primary);
background: transparent;
border: 1px solid var(--card-border);
border-radius: 8px;
text-decoration: none;
cursor: pointer;
align-self: flex-start;
transform: translateY(20px);
opacity: 0;
transition: all 0.45s cubic-bezier(0.76, 0, 0.24, 1);
}
.modal-view.is-visible .m-button {
transform: translateY(0);
opacity: 1;
transition-delay: 0.38s;
}
.m-button:hover {
background: var(--text-primary);
color: var(--card-bg);
border-color: var(--text-primary);
}
.m-button svg {
transition: transform 0.25s ease;
}
.m-button:hover svg {
transform: translate(2px, -2px);
}
/* ── Modal Responsive ── */
@media (max-width: 720px) {
.modal-view {
flex-direction: column;
width: 92vw;
max-height: 90vh;
overflow-y: auto;
}
.modal-image {
width: 100%;
min-height: 200px;
height: 220px;
}
.modal-image-gradient {
background: linear-gradient(
to bottom,
transparent 0%,
transparent 50%,
var(--bg) 100%
);
}
.modal-content {
padding: 24px 20px 32px;
}
.m-title {
font-size: 1.35rem;
}
}
/* ── Modal Tablet ── */
@media (min-width: 721px) {
.m-title {
font-size: 2.3rem;
}
.m-tag {
font-size: 0.72rem;
}
.m-body {
font-size: 1rem;
}
.m-button {
font-size: 0.82rem;
}
}
/* ── Modal Desktop ── */
@media (min-width: 1024px) {
.m-title {
font-size: 3.2rem;
}
.m-tag {
font-size: 0.8rem;
}
.m-body {
font-size: 1.1rem;
}
.m-button {
font-size: 0.88rem;
}
}
/* ── Modal Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
.modal-backdrop,
.modal-view,
.m-title, .m-tag, .m-divider, .m-body, .m-button {
transition-duration: 0.01s;
transition-delay: 0s !important;
}
}
/* ══════════════════════════════════════
Graph Paper Section System
══════════════════════════════════════ */
.grid-container {
background-color: var(--color-bg);
background-image:
repeating-linear-gradient(
to right,
var(--grid-line-color) 0px,
var(--grid-line-color) 1px,
transparent 1px,
transparent 16px
),
repeating-linear-gradient(
to bottom,
var(--grid-line-color) 0px,
var(--grid-line-color) 1px,
transparent 1px,
transparent 16px
);
background-size: 16px 16px, 16px 16px;
background-position: 0 0, 0 0;
}
.corner-bracket {
width: 8px;
height: 8px;
position: relative;
}
.corner-bracket-top-left {
border-top: 2px solid var(--color-primary);
border-left: 2px solid var(--color-primary);
}
.corner-bracket-top-right {
border-top: 2px solid var(--color-primary);
border-right: 2px solid var(--color-primary);
}
.corner-bracket-bottom-left {
border-bottom: 2px solid var(--color-primary);
border-left: 2px solid var(--color-primary);
}
.corner-bracket-bottom-right {
border-bottom: 2px solid var(--color-primary);
border-right: 2px solid var(--color-primary);
}
/* ── Section Headers ── */
.section-header {
font-family: var(--font-display);
font-weight: 700;
color: var(--color-text-primary);
letter-spacing: -0.02em;
}
/* (project-card-image removed — replaced by .card bento system) */
/* ══════════════════════════════════════
Tactile Toggle (Card B)
══════════════════════════════════════ */
.toggle-card {
cursor: pointer;
transform-style: preserve-3d;
background: var(--color-surface);
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
padding: 10%;
}
.toggle-card-inner {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 12px;
background: var(--color-surface-inset);
border: 1.5px solid var(--color-border);
transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.toggle-card.is-on .toggle-card-inner {
background: var(--color-toggle-bg-on);
border-color: var(--color-toggle-border-on);
}
.toggle-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(143, 134, 120, 0.08);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s;
}
.toggle-icon svg {
transition: opacity 0.3s;
opacity: 0.4;
}
.toggle-card.is-on .toggle-icon {
background: rgba(34, 197, 94, 0.12);
}
.toggle-card.is-on .toggle-icon svg {
opacity: 1;
}
.toggle-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.toggle-label {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
transition: color 0.3s;
line-height: 1.3;
}
.toggle-card.is-on .toggle-label {
color: var(--text-primary);
}
.toggle-subtext {
font-family: var(--font-body);
font-size: 11px;
font-weight: 400;
color: var(--text-secondary);
opacity: 0.7;
transition: color 0.3s, opacity 0.3s;
line-height: 1.3;
}
.toggle-card.is-on .toggle-subtext {
color: var(--color-toggle-subtext-on);
opacity: 0.8;
}
.toggle-track {
flex-shrink: 0;
width: 44px;
height: 26px;
border-radius: 13px;
background: var(--color-toggle-track-off);
position: relative;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.toggle-card.is-on .toggle-track,
.toggle-card-mini.is-on .toggle-track {
background: var(--color-toggle-track-on);
box-shadow: 0 2px 12px rgba(24, 134, 226, 0.25);
}
.toggle-thumb {
width: 20px;
height: 20px;
border-radius: 10px;
background: var(--color-surface);
position: absolute;
top: 3px;
left: 3px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.toggle-card.is-on .toggle-thumb {
left: 21px;
}
.toggle-card-mini.is-on .toggle-thumb {
left: 21px;
}
.toggle-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-toggle-dot-off);
transition: background 0.3s, transform 0.3s;
}
.toggle-card.is-on .toggle-dot,
.toggle-card-mini.is-on .toggle-dot {
background: var(--color-toggle-dot-on);
}
.toggle-dot.pulse {
transform: scale(1.4);
}
.toggle-ripple {
position: absolute;
width: 44px;
height: 44px;
border-radius: 50%;
top: 50%;
left: 30%;
transform: translate(-50%, -50%) scale(0);
pointer-events: none;
opacity: 0;
}
.toggle-ripple.active {
animation: rippleOut 0.6s cubic-bezier(0, 0, 0.2, 1);
}
@keyframes rippleOut {
from { transform: translate(-50%, -50%) scale(0); opacity: 1; }
to { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}
.toggle-card.pressing .toggle-card-inner {
transform: scale(0.97);
transition: transform 0.2s;
}
/* ── Minimal Toggle (Card D) ── */
.toggle-card-mini {
cursor: pointer;
transform-style: preserve-3d;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.toggle-card-mini-inner {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 0;
padding: 0;
background: transparent;
}
/* Micro-interaction grid cells — spec sheet */
.micro-cell {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
border-right: 1px dashed var(--color-border);
border-bottom: 1px dashed var(--color-border);
}
.micro-cell:nth-child(2n) {
border-right: none;
}
.micro-cell:nth-child(n+3) {
border-bottom: none;
}
/* Spec sheet numbering */
.micro-cell::before {
content: attr(data-spec);
position: absolute;
top: 6px;
left: 8px;
font-family: var(--font-mono);
font-size: 8px;
font-weight: 500;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
opacity: 0.5;
pointer-events: none;
}
.micro-cell--placeholder {
opacity: 0.5;
}
.toggle-card-mini.pressing .toggle-card-mini-inner {
transform: scale(0.97);
transition: transform 0.2s;
}
/* Card D scaled toggle for micro-grid */
.toggle-card-mini .toggle-track {
width: 50px;
height: 30px;
border-radius: 15px;
}
.toggle-card-mini .toggle-thumb {
width: 24px;
height: 24px;
border-radius: 12px;
top: 3px;
left: 3px;
}
.toggle-card-mini.is-on .toggle-thumb {
left: 23px;
}
.toggle-card-mini .toggle-dot {
width: 7px;
height: 7px;
border-radius: 3.5px;
}
.toggle-card-mini .toggle-ripple {
width: 50px;
height: 50px;
}
/* ── Confetti Pop Heart ── */
.confetti-heart-wrap {
position: relative;
width: 55px;
height: 55px;
cursor: pointer;
}
.confetti-heart-wrap.is-liked {
}
.confetti-heart-svg {
width: 40px;
height: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.confetti-heart-wrap.is-liked .confetti-heart-svg {
filter: none;
}
.confetti-heart-wrap.is-liked .confetti-heart-path {
fill: url(#heartGrad);
stroke: none;
stroke-width: 0;
}
.confetti-heart-wrap.is-liked .confetti-heart-shine {
display: block !important;
}
.confetti-heart-ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
border: 2.5px solid #FF3366;
animation: confettiRing 0.5s ease-out forwards;
pointer-events: none;
}
.confetti-heart-particle {
position: absolute;
top: 50%;
left: 50%;
animation: confettiBurst 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
pointer-events: none;
opacity: 0;
}
.confetti-heart-plus {
position: absolute;
top: -4px;
right: -8px;
font-size: 14px;
font-weight: 700;
color: #FF3366;
animation: heartFloatUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
pointer-events: none;
}
@keyframes heartFloatUp {
0% { opacity: 1; transform: translateY(0) scale(1); }
60% { opacity: 1; }
100% { opacity: 0; transform: translateY(-28px) scale(0.7); }
}
@keyframes confettiRing {
0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; border-width: 2.5px; }
100% { transform: translate(-50%, -50%) scale(4); opacity: 0; border-width: 0.5px; }
}
@keyframes confettiBurst {
0% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0) rotate(0deg) scale(1); }
70% { opacity: 1; }
100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--distance) * -1)) rotate(var(--rotation)) scale(0.3); }
}
/* ── Share Icon (Paper Airplane) ── */
/* ── Star Burst Icon ── */
.star-icon-wrap {
position: relative;
width: 55px;
height: 55px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.star-icon-svg {
position: relative;
z-index: 1;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.star-poly {
fill: var(--color-toggle-track-off);
transition: fill 0.3s ease;
}
.star-icon-wrap.is-active .star-poly {
fill: url(#starGrad);
}
.star-shine {
transition: display 0s;
}
.star-icon-wrap.is-active .star-shine {
display: block !important;
}
.star-sparks-svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
overflow: visible;
}
@keyframes starBounce {
0% { transform: scale(0.3); opacity: 0; }
30% { transform: scale(1.3); }
50% { transform: scale(0.85); }
70% { transform: scale(1.1); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes starUnspin {
0% { transform: scale(1.1) rotate(8deg); }
50% { transform: scale(0.9) rotate(-4deg); }
100% { transform: scale(1) rotate(0deg); }
}
@keyframes sparkFly {
0% { transform: translate(0, 0) scale(0.6); opacity: 1; }
25% { transform: translate(calc(var(--sx) * 0.25), calc(var(--sy) * 0.25)) scale(1); opacity: 1; }
80% { opacity: 0.85; }
100% { transform: translate(var(--sx), var(--sy)) scale(0.1); opacity: 0; }
}
@keyframes ringPop {
0% { r: 5; opacity: 0.85; stroke-width: 2.5; }
100% { r: 30; opacity: 0; stroke-width: 0.4; }
}
/* ── Sound Icon (Mute/Unmute) ── */
.sound-icon-wrap {
position: relative;
width: 55px;
height: 55px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.sound-icon-wrap.is-unmuted {
}
.sound-icon-svg {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sound-speaker-path {
transition: fill 0.3s ease, stroke 0.3s ease;
}
/* Waves — use stroke-dasharray for draw-in effect */
.sound-wave {
stroke-dasharray: 20;
stroke-dashoffset: 20;
opacity: 0;
transition: stroke 0.3s ease, opacity 0.25s ease, stroke-dashoffset 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sound-wave-1 { transition-delay: 0s; }
.sound-wave-2 { transition-delay: 0.08s; }
.sound-wave-3 { transition-delay: 0.16s; }
.sound-mute-x line {
transition: stroke 0.3s ease;
}
.sound-mute-x {
transform-origin: center;
transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Unmuted (active) state — green */
.sound-icon-wrap.is-unmuted .sound-speaker-path {
fill: var(--color-success);
stroke: none;
}
.sound-icon-wrap.is-unmuted .sound-wave {
stroke: var(--color-success);
stroke-dashoffset: 0;
}
.sound-icon-wrap.is-unmuted .sound-wave-1 { opacity: 0.9; }
.sound-icon-wrap.is-unmuted .sound-wave-2 { opacity: 0.6; }
.sound-icon-wrap.is-unmuted .sound-wave-3 { opacity: 0.35; }
.sound-icon-wrap.is-unmuted .sound-mute-x {
opacity: 0;
transform: scale(0.5);
pointer-events: none;
}
/* Muted state — X visible */
.sound-mute-x {
opacity: 1;
transform: scale(1);
}
/* Muted state — retract waves (reverse cascade) */
.sound-icon-wrap:not(.is-unmuted) .sound-wave-1 { transition-delay: 0.12s; }
.sound-icon-wrap:not(.is-unmuted) .sound-wave-2 { transition-delay: 0.06s; }
.sound-icon-wrap:not(.is-unmuted) .sound-wave-3 { transition-delay: 0s; }
@keyframes slashAppear {
0% { opacity: 0; transform: scale(0.5); }
100% { opacity: 1; transform: scale(1); }
}
/* ══════════════════════════════════════
Spotlight Card (⌘K Trigger)
══════════════════════════════════════ */
.spotlight-card {
cursor: pointer;
transform-style: preserve-3d;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: var(--card-bg);
border: 1px solid var(--card-border);
transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.spotlight-card:hover {
border-color: rgba(24, 134, 226, 0.3);
transform: translateY(-2px);
}
.spotlight-card-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
width: 100%;
padding: 16px;
transition: transform 0.3s ease;
}
.spotlight-card:hover .spotlight-card-inner {
transform: translateY(-28px);
}
/* Large keycap display */
.spotlight-keycaps {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.spotlight-keycap {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 16px;
font-family: var(--font-display);
font-size: 36px;
font-weight: 600;
color: var(--color-text-primary);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
border: 1px solid var(--color-border);
user-select: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.spotlight-card:hover .spotlight-keycap {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
background: linear-gradient(135deg, #3B82F6, #60A5FA, #3B82F6);
background-size: 200% 200%;
animation: keycapShimmer 2s ease infinite;
color: #fff;
border-color: rgba(59, 130, 246, 0.3);
}
@keyframes keycapShimmer {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.spotlight-try-it {
position: absolute;
left: 0;
right: 0;
top: calc(50% + 44px);
text-align: center;
font-family: var(--font-body);
font-size: 18px;
color: var(--color-text-secondary);
opacity: 0;
transform: translateY(4px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.spotlight-card:hover .spotlight-try-it {
opacity: 1;
transform: translateY(0);
}
[data-theme="dark"] .spotlight-keycap {
background: var(--color-surface-elevated);
border-color: var(--color-border);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
[data-theme="dark"] .spotlight-card:hover .spotlight-keycap {
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
/* ══════════════════════════════════════
Spotlight Overlay — Aura Rich Cards
══════════════════════════════════════ */
/* Keyframes */
@keyframes auraFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes auraSlideUp {
from { opacity: 0; transform: translate(-50%, -50%) translateY(-16px) scale(0.97); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes auraCardIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes auraFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
.spotlight-backdrop {
position: fixed;
inset: 0;
background: radial-gradient(ellipse at 50% 30%, rgba(240,200,160,0.06) 0%, rgba(245,242,237,0.95) 70%);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 200;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease-out;
}
.spotlight-backdrop.is-visible {
opacity: 1;
pointer-events: auto;
animation: auraFadeIn 0.4s ease-out;
}
.spotlight-panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) translateY(-16px) scale(0.97);
width: calc(100% - 40px);
max-width: 580px;
background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
border: 1px solid var(--color-border);
border-radius: 24px;
box-shadow: 0 24px 80px rgba(140,120,80,0.1), 0 2px 4px rgba(160,140,100,0.04);
z-index: 201;
opacity: 0;
pointer-events: none;
overflow: hidden;
font-family: var(--font-body);
transition: opacity 0.01s;
}
.spotlight-panel.is-visible {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
pointer-events: auto;
animation: auraSlideUp 0.45s cubic-bezier(0.16,1,0.3,1);
}
/* Search */
.spotlight-search {
display: flex;
align-items: center;
gap: 16px;
padding: 22px 28px 20px;
}
.spotlight-cmd-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, #F0E2D0, #E4D1B8);
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
color: #B8956A;
box-shadow: 0 2px 8px rgba(184,149,106,0.12), inset 0 1px 0 rgba(255,255,255,0.5);
animation: auraFloat 4s ease-in-out infinite;
flex-shrink: 0;
}
.spotlight-input {
flex: 1;
background: none;
border: none;
outline: none;
color: var(--color-text-emphasis);
font-size: 18px;
font-family: var(--font-body);
letter-spacing: -0.01em;
}
.spotlight-input::placeholder {
color: var(--color-text-secondary);
}
/* Divider */
.spotlight-divider {
margin: 0 26px;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--color-border) 20%, var(--color-border) 80%, transparent 100%);
}
/* Items */
.spotlight-items {
padding: 14px 16px 10px;
}
/* Action Rows */
.spotlight-action {
display: flex;
align-items: center;
gap: 18px;
padding: 20px;
border-radius: 16px;
cursor: pointer;
background: transparent;
border: 1px solid transparent;
transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
transform: scale(1);
margin-bottom: 4px;
}
.spotlight-action:last-child {
margin-bottom: 0;
}
.spotlight-panel.is-visible .spotlight-action:nth-child(1) {
animation: auraCardIn 0.4s cubic-bezier(0.16,1,0.3,1) 0s both;
}
.spotlight-panel.is-visible .spotlight-action:nth-child(2) {
animation: auraCardIn 0.4s cubic-bezier(0.16,1,0.3,1) 0.06s both;
}
.spotlight-panel.is-visible .spotlight-action:nth-child(3) {
animation: auraCardIn 0.4s cubic-bezier(0.16,1,0.3,1) 0.12s both;
}
.spotlight-action.is-highlighted {
transform: translateX(2px) scale(1.005);
}
.spotlight-action-icon {
width: 52px;
height: 52px;
border-radius: 14px;
background: rgba(180,160,130,0.06);
border: 1px solid rgba(180,160,130,0.1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 22px;
color: var(--color-text-secondary);
transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.spotlight-action.is-highlighted .spotlight-action-icon {
box-shadow: 0 6px 16px var(--spotlight-color-10, rgba(0,0,0,0.06));
}
.spotlight-action-text {
flex: 1;
min-width: 0;
}
.spotlight-action-label {
font-family: var(--font-body);
font-size: 16px;
font-weight: 500;
color: var(--color-text-secondary);
transition: color 0.2s;
margin-bottom: 3px;
}
.spotlight-action.is-highlighted .spotlight-action-label {
color: var(--color-text-emphasis);
}
.spotlight-action-desc {
font-family: var(--font-body);
font-size: 13px;
font-weight: 400;
color: var(--color-text-secondary);
opacity: 0.7;
letter-spacing: 0.01em;
transition: all 0.2s;
}
.spotlight-action.is-highlighted .spotlight-action-desc {
color: var(--color-text-primary);
opacity: 1;
}
.spotlight-action-kbd {
padding: 4px 10px;
border-radius: 8px;
background: rgba(180,160,130,0.05);
border: 1px solid var(--color-border);
color: var(--color-text-secondary);
font-size: 11px;
font-family: var(--font-mono);
transition: all 0.25s;
}
.spotlight-action.is-highlighted .spotlight-action-kbd {
background: rgba(255,255,255,0.8);
color: var(--color-text-primary);
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.spotlight-action-arrow {
width: 20px;
height: 20px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: transparent;
background: transparent;
transition: all 0.25s;
transform: translateX(-4px);
opacity: 0;
}
.spotlight-action.is-highlighted .spotlight-action-arrow {
opacity: 1;
transform: translateX(0);
}
/* Conversational Aside */
.spotlight-aside {
margin: 4px 26px 16px;
padding: 20px 0 22px;
text-align: center;
}
.spotlight-aside-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-bottom: 12px;
}
.spotlight-aside-line {
flex: 1;
max-width: 80px;
height: 1px;
}
.spotlight-aside-line-left {
background: linear-gradient(90deg, transparent, rgba(180,160,130,0.3));
}
.spotlight-aside-line-right {
background: linear-gradient(90deg, rgba(180,160,130,0.3), transparent);
}
.spotlight-aside-label {
color: var(--color-text-secondary);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-family: var(--font-body);
font-weight: 500;
}
.spotlight-aside-body {
color: var(--color-text-secondary);
font-size: 16px;
line-height: 1.65;
font-family: var(--font-body);
font-weight: 400;
max-width: 460px;
margin: 0 auto;
}
.spotlight-aside-muted {
color: var(--color-text-secondary);
}
.spotlight-aside-bold {
color: inherit;
font-weight: inherit;
}
/* Footer */
.spotlight-footer {
flex-shrink: 0;
padding: 14px 26px;
border-top: 1px solid var(--color-border);
}
.spotlight-footer-hints {
display: flex;
gap: 14px;
}
.spotlight-footer-hint {
display: flex;
align-items: center;
gap: 5px;
}
.spotlight-kbd {
padding: 3px 8px;
border-radius: 5px;
background: rgba(180,160,130,0.06);
border: 1px solid var(--color-border);
color: var(--color-text-secondary);
font-size: 11px;
font-family: var(--font-mono);
}
.spotlight-kbd-label {
color: var(--color-text-secondary);
font-size: 12px;
font-family: var(--font-body);
}
/* Dark Mode */
[data-theme="dark"] .spotlight-backdrop {
background: radial-gradient(ellipse at 50% 30%, rgba(60,50,40,0.3) 0%, rgba(30,26,22,0.95) 70%);
}
[data-theme="dark"] .spotlight-panel {
background: linear-gradient(180deg, #3D3835 0%, #352F2C 100%);
border-color: rgba(255,255,255,0.06);
box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 24px 80px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .spotlight-cmd-icon {
background: linear-gradient(135deg, #4A3F34, #3D3428);
color: #C4A87A;
box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}
[data-theme="dark"] .spotlight-input {
color: var(--color-text-primary);
}
[data-theme="dark"] .spotlight-input::placeholder {
color: #7A726C;
}
[data-theme="dark"] .spotlight-divider {
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 20%, rgba(255,255,255,0.06) 80%, transparent 100%);
}
[data-theme="dark"] .spotlight-action-icon {
background: rgba(255,255,255,0.03);
border-color: rgba(255,255,255,0.04);
color: #8A827B;
}
[data-theme="dark"] .spotlight-action-label {
color: #B8AFA7;
}
[data-theme="dark"] .spotlight-action.is-highlighted .spotlight-action-label {
color: #E8E3DB;
}
[data-theme="dark"] .spotlight-action-desc {
color: #7A726C;
}
[data-theme="dark"] .spotlight-action.is-highlighted .spotlight-action-desc {
color: #9E9282;
}
[data-theme="dark"] .spotlight-action-kbd {
background: rgba(255,255,255,0.03);
border-color: rgba(255,255,255,0.06);
color: #7A726C;
}
[data-theme="dark"] .spotlight-action.is-highlighted .spotlight-action-kbd {
background: rgba(255,255,255,0.08);
color: #B8AFA7;
}
[data-theme="dark"] .spotlight-action-arrow {
color: transparent;
}
[data-theme="dark"] .spotlight-aside-line-left {
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1));
}
[data-theme="dark"] .spotlight-aside-line-right {
background: linear-gradient(90deg, rgba(255,255,255,0.1), transparent);
}
[data-theme="dark"] .spotlight-aside-label {
color: #7A726C;
}
[data-theme="dark"] .spotlight-aside-body {
color: #8A827B;
}
[data-theme="dark"] .spotlight-aside-muted {
color: #7A726C;
}
[data-theme="dark"] .spotlight-aside-bold {
color: #C4BAA8;
}
[data-theme="dark"] .spotlight-footer {
border-top-color: rgba(255,255,255,0.04);
}
[data-theme="dark"] .spotlight-kbd {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.06);
color: #7A726C;
}
[data-theme="dark"] .spotlight-kbd-label {
color: #6A625C;
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.spotlight-backdrop,
.spotlight-panel,
.spotlight-card,
.spotlight-action {
transition-duration: 0.01s !important;
animation: none !important;
}
.spotlight-cmd-icon {
animation: none;
}
}
/* Mobile */
@media (max-width: 480px) {
.spotlight-panel {
max-width: calc(100% - 40px);
}
}
/* ══════════════════════════════════════
Easter Eggs Card (Card E)
══════════════════════════════════════ */
@keyframes ee-float-star {
0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
50% { transform: translateY(-8px) scale(1.15); opacity: 0.7; }
}
/* Card wrapper */
.easter-egg-card {
perspective: 1000px;
position: relative;
background: transparent !important;
border: none !important;
}
.ee-flipper {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
}
.ee-flipper.is-flipped {
transform: rotateY(180deg);
}
/* Front face */
.ee-front {
position: absolute;
inset: 0;
backface-visibility: hidden;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 28px 24px 24px;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Back face */
.ee-back {
position: absolute;
inset: 0;
backface-visibility: hidden;
transform: rotateY(180deg);
background: var(--color-surface);
border: 1px solid var(--ee-back-border);
border-radius: 16px;
padding: 28px 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
}
/* Header */
.ee-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 24px;
}
.ee-title {
font-family: var(--font-display);
font-size: 1.5rem; /* 24px — H5 scale */
font-weight: 500;
color: var(--color-text-primary);
font-variation-settings: 'wght' 500, 'opsz' 24, 'wdth' 100;
line-height: 1.33;
margin: 0;
}
.ee-subtitle {
font-family: var(--font-body);
font-size: 0.875rem; /* 14px — body-small */
line-height: 1.43;
letter-spacing: 0.01em;
color: var(--color-text-secondary);
margin: 4px 0 0;
}
/* Radial Progress Ring */
.ee-progress-ring {
position: relative;
flex-shrink: 0;
width: 140px;
height: 140px;
margin: 0 auto 16px;
}
.ee-ring-fill {
transition: stroke-dashoffset 0.6s ease;
}
.ee-ring-label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 1.25rem; /* 20px */
font-weight: 700;
color: var(--color-text-primary);
letter-spacing: -0.02em;
}
/* Item rows */
.ee-items {
display: flex;
flex-direction: column;
gap: 10px;
}
.ee-item {
height: 48px;
box-sizing: border-box;
padding: 0 18px;
border-radius: 14px;
display: flex;
align-items: center;
transition: background 0.4s ease, border-color 0.4s ease;
cursor: default;
user-select: none;
background: var(--ee-row-bg);
border: 1px solid var(--ee-row-border);
}
.ee-item.is-done {
background: var(--ee-row-bg-done);
border-color: var(--ee-row-border-done);
}
/* Incomplete state */
.ee-item-incomplete {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.ee-dot-empty {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ee-dot-empty);
border: 1.5px solid var(--ee-dot-empty-border);
box-sizing: border-box;
flex-shrink: 0;
}
.ee-item-label--muted {
color: var(--color-meta);
}
.ee-dashed-circle {
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px dashed var(--ee-dot-empty-border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-sizing: border-box;
}
.ee-dashed-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ee-dot-empty-border);
}
/* Completed state */
.ee-item-complete {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.ee-item-complete-left {
display: flex;
align-items: center;
gap: 12px;
}
.ee-dot-done {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-success);
box-shadow: 0 0 8px var(--ee-green-glow);
flex-shrink: 0;
}
.ee-item-label {
font-family: var(--font-body);
font-size: 0.875rem; /* 14px — body-small */
font-weight: 400;
color: var(--color-text-primary);
letter-spacing: 0.01em;
line-height: 1.43;
}
.ee-kbd {
display: inline-flex;
align-items: center;
gap: 2px;
font-family: var(--font-mono);
font-size: 0.6875rem;
line-height: 1;
padding: 2px 5px;
border-radius: 4px;
background: var(--color-surface);
border: 1px solid var(--color-border);
box-shadow: 0 1px 0 var(--color-border);
color: var(--color-text-secondary);
vertical-align: baseline;
position: relative;
top: -0.5px;
}
.ee-item-label--muted .ee-kbd {
color: var(--color-meta);
background: transparent;
border-color: var(--color-border);
box-shadow: 0 1px 0 var(--color-border);
}
.ee-checkmark-circle {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--color-success);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ee-checkmark-circle svg path {
stroke: var(--ee-checkmark-stroke);
}
/* Back face content */
.ee-star {
position: absolute;
opacity: 0.3;
pointer-events: none;
}
@keyframes ee-scroll-float {
0%, 100% { transform: translateY(0) rotate(-1.5deg); filter: var(--ee-scroll-shadow); }
50% { transform: translateY(-4px) rotate(0.5deg); filter: var(--ee-scroll-shadow-peak); }
}
@keyframes ee-sparkle-pulse {
0%, 100% { transform: scale(0); opacity: 0; }
50% { transform: scale(1); opacity: var(--ee-sparkle-opacity); }
}
.ee-scroll-wrapper {
position: relative;
width: 80px;
height: 80px;
margin-bottom: 20px;
}
.ee-scroll-icon {
width: 80px;
height: 80px;
animation: ee-scroll-float 3.5s ease-in-out infinite;
filter: var(--ee-scroll-shadow);
}
.ee-sparkle {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--ee-sparkle-color);
box-shadow: var(--ee-sparkle-shadow);
pointer-events: none;
}
.ee-back-heading {
font-family: var(--font-body);
font-size: 22px;
font-weight: 700;
color: var(--color-text-primary);
letter-spacing: -0.02em;
margin: 0 0 8px;
}
.ee-back-subtext {
font-family: var(--font-body);
font-size: 14px;
color: var(--color-text-secondary);
line-height: 1.6;
max-width: 260px;
margin: 0;
}
.ee-badge {
margin-top: 20px;
padding: 8px 20px;
border-radius: 100px;
background: var(--ee-badge-bg);
border: 1px solid var(--ee-badge-border);
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: var(--color-success);
}
.ee-reset-btn {
position: absolute;
bottom: 24px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 14px;
border-radius: 100px;
border: 1px solid var(--color-border);
background: transparent;
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
color: var(--color-text-secondary);
cursor: pointer;
transition: color 0.2s, border-color 0.2s;
}
.ee-reset-btn:hover {
color: var(--color-text-primary);
border-color: var(--color-text-secondary);
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.ee-flipper {
transition-duration: 0.01s !important;
}
.ee-star {
animation: none !important;
}
.ee-scroll-icon {
animation: none !important;
}
.ee-sparkle {
animation: none !important;
}
.ee-ring-fill {
transition-duration: 0.01s !important;
}
.ee-item {
transition-duration: 0.01s !important;
}
}
/* ══════════════════════════════════════
Theme Toggle Card (Card C)
══════════════════════════════════════ */
.theme-toggle-card {
cursor: default;
transform-style: preserve-3d;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-surface);
border: 1px solid var(--color-border);
transition: background 0.4s ease, border-color 0.4s ease;
}
/* ── Illuminated Mechanical Switch ── */
.switch {
width: 80px;
height: 130px;
position: relative;
-webkit-tap-highlight-color: transparent;
user-select: none;
pointer-events: auto;
cursor: pointer;
transform: scale(1.1);
}
.plate {
position: absolute;
inset: 0;
border-radius: 12px;
background: linear-gradient(170deg, #edeae5 0%, #e6e3dd 50%, #ddd9d2 100%);
box-shadow:
0 1px 2px rgba(0,0,0,0.05),
0 4px 14px rgba(0,0,0,0.04),
0 0 0 1px rgba(0,0,0,0.03),
inset 0 1px 0 rgba(255,255,255,0.5);
transition: all 0.6s ease;
}
[data-theme="dark"] .plate {
background: linear-gradient(170deg, #222120 0%, #1a1918 50%, #131211 100%);
box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 4px 14px rgba(0,0,0,0.2),
0 0 0 1px rgba(255,255,255,0.03),
inset 0 1px 0 rgba(255,255,255,0.02);
}
.screw {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
z-index: 3;
left: 50%;
transform: translateX(-50%);
background: radial-gradient(circle at 38% 38%, #e2ded8, #ccc8c0);
border: 0.5px solid rgba(0,0,0,0.06);
transition: all 0.5s ease;
}
.screw::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 1px;
background: rgba(0,0,0,0.15);
transform: translate(-50%, -50%) rotate(-20deg);
border-radius: 1px;
}
[data-theme="dark"] .screw {
background: radial-gradient(circle at 38% 38%, #363330, #222120);
border-color: rgba(0,0,0,0.3);
}
[data-theme="dark"] .screw::after {
background: rgba(255,255,255,0.06);
}
.screw-t { top: 10px; }
.screw-b { bottom: 10px; }
.track {
position: absolute;
top: 26px;
bottom: 26px;
left: 50%;
transform: translateX(-50%);
width: 34px;
background: linear-gradient(180deg, #b0aaa3, #9e988f);
border-radius: 17px;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.2);
}
.lever {
position: absolute;
top: 24px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
background:
radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 70%),
linear-gradient(145deg, #f0ede8, #e4e0d8);
border: 1.5px solid rgba(0,0,0,0.06);
box-shadow:
0 3px 10px rgba(0,0,0,0.16),
inset 0 1px 2px rgba(255,255,255,0.5);
transition: top 0.22s cubic-bezier(0.22, 1.2, 0.36, 1);
z-index: 2;
overflow: hidden;
}
[data-theme="dark"] .lever {
background:
radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03), transparent 70%),
linear-gradient(145deg, #3a3836, #2a2826);
border-color: rgba(0,0,0,0.3);
box-shadow:
0 3px 10px rgba(0,0,0,0.35),
inset 0 1px 2px rgba(255,255,255,0.03);
}
.switch.active .lever {
top: 64px;
}
/* Sun icon */
.glow-sun {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.4s ease;
}
.switch.active .glow-sun {
opacity: 0;
}
.glow-sun .glow-icon {
width: 26px;
height: 26px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(234,160,28,0.4) 0%,
rgba(234,160,28,0.12) 50%,
transparent 70%
);
position: relative;
animation: sunBreath 3s ease-in-out infinite, sunSlowSpin 16s linear infinite;
}
.glow-sun .glow-icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(202,138,4,0.9);
box-shadow: 0 0 6px rgba(234,160,28,0.6), 0 0 14px rgba(251,191,36,0.3);
}
.sun-ray-glow {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 5px;
background: rgba(202,138,4,0.6);
border-radius: 1px;
transform-origin: center center;
box-shadow: 0 0 3px rgba(234,160,28,0.4);
animation: raySparkle 3s ease-in-out infinite;
}
.sun-ray-glow:nth-child(1) { transform: translate(-50%,-50%) rotate(0deg) translateY(-10px); animation-delay: 0s; }
.sun-ray-glow:nth-child(2) { transform: translate(-50%,-50%) rotate(45deg) translateY(-10px); animation-delay: 0.37s; }
.sun-ray-glow:nth-child(3) { transform: translate(-50%,-50%) rotate(90deg) translateY(-10px); animation-delay: 0.75s; }
.sun-ray-glow:nth-child(4) { transform: translate(-50%,-50%) rotate(135deg) translateY(-10px); animation-delay: 1.12s; }
.sun-ray-glow:nth-child(5) { transform: translate(-50%,-50%) rotate(180deg) translateY(-10px); animation-delay: 1.5s; }
.sun-ray-glow:nth-child(6) { transform: translate(-50%,-50%) rotate(225deg) translateY(-10px); animation-delay: 1.87s; }
.sun-ray-glow:nth-child(7) { transform: translate(-50%,-50%) rotate(270deg) translateY(-10px); animation-delay: 2.25s; }
.sun-ray-glow:nth-child(8) { transform: translate(-50%,-50%) rotate(315deg) translateY(-10px); animation-delay: 2.62s; }
/* Moon icon */
.glow-moon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s ease;
}
.switch.active .glow-moon {
opacity: 1;
}
.glow-moon .glow-icon {
width: 24px;
height: 24px;
position: relative;
animation: moonFloat 5s ease-in-out infinite;
}
.glow-moon .moon-shape {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: rgba(200,210,240,0.5);
box-shadow: 0 0 12px rgba(129,140,248,0.35), 0 0 24px rgba(129,140,248,0.15);
top: 50%;
left: 45%;
transform: translate(-50%, -50%);
}
.glow-moon .moon-shadow {
position: absolute;
width: 11px;
height: 11px;
border-radius: 50%;
top: 42%;
left: 55%;
transform: translate(-50%, -50%);
background: linear-gradient(145deg, #ece8e2, #e0dcd5);
transition: background 0.5s ease;
}
[data-theme="dark"] .glow-moon .moon-shadow {
background: linear-gradient(145deg, #363432, #282624);
}
.glow-star {
position: absolute;
width: 2px;
height: 2px;
border-radius: 50%;
background: rgba(129,140,248,0.6);
animation: twinkle 2s ease-in-out infinite;
}
.glow-star:nth-child(3) { top: 2px; right: 2px; animation-delay: 0s; }
.glow-star:nth-child(4) { top: 10px; right: 0; animation-delay: 0.7s; }
.glow-star:nth-child(5) { bottom: 3px; right: 4px; animation-delay: 1.3s; }
/* Switch keyframes */
@keyframes sunBreath {
0%, 100% { opacity: 0.85; }
50% { opacity: 1; }
}
@keyframes sunSlowSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes raySparkle {
0%, 100% { opacity: 0.58; height: 4.5px; box-shadow: 0 0 2px rgba(234,160,28,0.2); }
50% { opacity: 0.74; height: 5.2px; box-shadow: 0 0 3px rgba(251,191,36,0.32); }
}
@keyframes moonFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-1.5px); }
}
@keyframes twinkle {
0%, 100% { opacity: 0.9; transform: scale(1); }
50% { opacity: 0.3; transform: scale(0.5); }
}
/* ══════════════════════════════════════
Smooth Theme Transitions
══════════════════════════════════════ */
html, body {
height: 100%;
}
html {
background-color: var(--color-bg);
transition: background-color 0.4s ease;
}
/* ======================================
Task Animation Card (Formation)
====================================== */
.task-animation-card {
cursor: default;
transform-style: preserve-3d;
position: relative;
overflow: hidden;
}
.task-animation-inner {
width: 100%;
height: 100%;
padding: 28px 16px 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
transform: scale(1.15);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.task-animation-card:hover .task-animation-inner,
.task-animation-card.is-animating .task-animation-inner {
transform: scale(1.20);
}
.task-stage {
position: relative;
width: 100%;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
}
/* Task card that slides in/out */
.task-card-item {
position: absolute;
display: flex;
align-items: center;
gap: 14px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 20px 16px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
opacity: 0;
transform: translateY(40px) scale(0.9);
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
width: 92%;
max-width: 390px;
pointer-events: none;
}
.task-card-item.entering,
.task-card-item.active {
opacity: 1;
transform: translateY(0) scale(1);
}
.task-card-item.exiting {
opacity: 0;
transform: translateX(-300px) scale(0.8) rotate(-10deg);
transition: all 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
/* Checkbox */
.task-checkbox-wrap {
position: relative;
width: 30px;
height: 30px;
flex-shrink: 0;
order: 2;
}
.task-checkbox {
width: 30px;
height: 30px;
border: 1.5px solid var(--color-border);
border-radius: 6px;
background: var(--color-surface);
position: relative;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.task-checkbox.checked {
background: linear-gradient(135deg, #3ba0f7 0%, var(--color-primary) 50%, #1269B5 100%);
border-color: var(--color-primary);
box-shadow: 0 2px 6px rgba(24, 134, 226, 0.25);
animation: taskCheckPop 0.4s ease;
}
.task-checkmark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0) rotate(-45deg);
width: 13px;
height: 7px;
border-left: 2.5px solid white;
border-bottom: 2.5px solid white;
transform-origin: center;
transition: transform 0.2s ease 0.1s;
}
.task-checkbox.checked .task-checkmark {
transform: translate(-50%, -50%) scale(1) rotate(-45deg);
}
/* Task text */
.task-card-content {
flex: 1;
order: 1;
min-width: 0;
}
.task-card-title {
font-size: 14px;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 4px;
transition: all 0.3s ease;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.task-card-item.completed .task-card-title {
color: var(--color-meta);
text-decoration: line-through;
}
.task-card-subtitle {
font-size: 12px;
color: var(--color-text-secondary);
display: flex;
align-items: center;
gap: 5px;
}
.task-card-subtitle::before {
content: '\26A1';
font-size: 14px;
}
/* Progress dots */
.task-progress-track {
display: flex;
gap: 4px;
margin-top: 32px;
flex-shrink: 0;
transition: opacity 0.3s ease;
}
.task-progress-track.is-hidden {
opacity: 0;
}
.task-progress-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-border);
transition: all 0.3s ease;
}
.task-progress-dot.completed {
background: var(--color-primary);
animation: taskDotPulse 0.5s ease;
}
/* Celebration checkmark */
.task-celebration-checkmark {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, #3ba0f7 0%, var(--color-primary) 50%, #1269B5 100%);
box-shadow: 0 4px 12px rgba(24, 134, 226, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0) rotate(-180deg);
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.task-celebration-checkmark.show {
opacity: 1;
transform: scale(0.7) rotate(0deg) translateY(-24px);
}
.task-celebration-checkmark::after {
content: '';
width: 28px;
height: 14px;
border-left: 4px solid white;
border-bottom: 4px solid white;
transform: rotate(-45deg) translateY(-3px);
}
/* Celebration text */
.task-celebration-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 20px);
text-align: center;
white-space: nowrap;
display: flex;
flex-direction: column;
gap: 2px;
opacity: 0;
transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
pointer-events: none;
}
.task-celebration-checkmark.show ~ .task-celebration-text {
opacity: 1;
transform: translate(-50%, 24px);
}
.task-celebration-title {
font-family: var(--font-body);
font-size: 20px;
font-weight: 500;
line-height: 1.33;
color: var(--color-text-primary);
}
.task-celebration-sub {
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.43;
letter-spacing: 0.01em;
color: var(--color-text-secondary);
}
/* Completed stack indicators — hidden */
.task-completed-stack {
display: none;
}
/* Sparks */
.task-spark {
position: absolute;
width: 3px;
height: 3px;
background: var(--color-primary);
border-radius: 50%;
pointer-events: none;
animation: taskSparkFly 1s ease-out forwards;
}
/* Keyframes */
@keyframes taskCheckPop {
0% { transform: scale(1) rotate(0deg); }
30% { transform: scale(1.3) rotate(-5deg); }
60% { transform: scale(0.9) rotate(3deg); }
100% { transform: scale(1) rotate(0deg); }
}
@keyframes taskDotPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.5); }
}
@keyframes taskStackSlide {
from { transform: translateX(12px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes taskSparkFly {
0% { transform: translate(0, 0) scale(1); opacity: 1; }
100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.task-card-item,
.task-checkbox,
.task-progress-dot,
.task-celebration-checkmark,
.task-completed-stack {
transition-duration: 0.01s !important;
}
.task-spark,
.task-stack-indicator {
display: none;
}
}
/* ═══════════════════════════════════════
AI Loader — Stylized Phone
═══════════════════════════════════════ */
.ai-loader-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.ai-loader-phone-container {
position: relative;
width: 252px;
height: 510px;
transform: scale(var(--ai-phone-scale, 0.65));
transform-origin: center;
flex-shrink: 0;
}
@media (min-width: 768px) {
.ai-loader-phone-container {
--ai-phone-scale: 0.72;
}
}
@media (min-width: 1280px) {
.ai-loader-phone-container {
--ai-phone-scale: 0.82;
}
}
/* Side buttons */
.ai-btn {
position: absolute;
background: var(--ai-button-color);
}
.ai-btn-silent {
width: 3px; height: 24px;
left: -2px; top: 100px;
border-radius: 2px 0 0 2px;
}
.ai-btn-vol-up {
width: 3px; height: 40px;
left: -2px; top: 140px;
border-radius: 2px 0 0 2px;
}
.ai-btn-vol-down {
width: 3px; height: 40px;
left: -2px; top: 188px;
border-radius: 2px 0 0 2px;
}
.ai-btn-power {
width: 3px; height: 52px;
right: -2px; top: 136px;
border-radius: 0 2px 2px 0;
}
/* Bezel shell */
.ai-phone-bezel {
width: 252px;
height: 510px;
border-radius: 48px;
background: var(--ai-phone-bezel);
border: 1px solid var(--ai-phone-border);
box-shadow: var(--ai-phone-shadow);
padding: 10px;
}
/* Screen */
.ai-phone-screen {
width: 100%;
height: 100%;
border-radius: 38px;
background: var(--ai-screen-bg);
border: 1px solid var(--ai-screen-border);
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Dynamic Island */
.ai-dynamic-island {
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
width: 84px;
height: 24px;
border-radius: 20px;
background: var(--ai-island-bg);
box-shadow: var(--ai-island-shadow);
}
/* Ambient glow */
.ai-ambient-glow {
position: absolute;
inset: 0;
background: var(--ai-ambient-glow);
pointer-events: none;
}
/* Orb area */
.ai-orb-area {
position: relative;
width: 132px;
height: 132px;
display: flex;
align-items: center;
justify-content: center;
margin-top: -24px;
}
/* Rings */
.ai-ring-outer {
position: absolute;
width: 128px;
height: 128px;
animation: aiSpin 20s linear infinite;
}
.ai-ring-inner {
position: absolute;
width: 106px;
height: 106px;
animation: aiSpinR 15s linear infinite;
}
/* Orb */
.ai-orb {
width: 66px;
height: 66px;
border-radius: 50%;
background: var(--ai-orb-gradient);
position: relative;
animation: aiPulse 3s ease-in-out infinite;
}
.ai-orb-highlight {
position: absolute;
top: 20%;
left: 26%;
width: 24%;
height: 18%;
border-radius: 50%;
background: var(--ai-orb-highlight);
filter: blur(3px);
}
/* Status text */
.ai-status-text {
margin-top: 40px;
text-align: center;
padding: 0 24px;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.ai-status-text.ai-transitioning {
opacity: 0;
transform: translateY(4px);
}
.ai-status-label {
color: var(--ai-label);
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.3em;
margin: 0;
}
.ai-status-sub {
color: var(--ai-sub);
font-family: var(--font-body);
font-size: 11.5px;
font-weight: 300;
letter-spacing: 0.04em;
margin-top: 5px;
}
/* Step indicators */
.ai-step-indicators {
display: flex;
gap: 7px;
margin-top: 20px;
}
.ai-step-bar {
width: 5px;
height: 2px;
border-radius: 1px;
background: var(--ai-step-inactive);
transition: width 0.4s ease, background 0.4s ease;
position: relative;
overflow: hidden;
}
.ai-step-bar.ai-step-active {
width: 14px;
background: var(--ai-step-active);
}
.ai-step-bar.ai-step-current::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, var(--ai-shimmer), transparent);
animation: aiShimmer 1.5s infinite;
}
/* Home indicator */
.ai-home-bar {
position: absolute;
bottom: 8px;
width: 96px;
height: 4px;
border-radius: 2px;
background: var(--ai-home-bar);
}
/* Keyframes */
@keyframes aiPulse {
0%, 100% {
transform: scale(1);
box-shadow: var(--ai-orb-shadow-rest);
}
50% {
transform: scale(1.08);
box-shadow: var(--ai-orb-shadow-peak);
}
}
@keyframes aiSpin {
to { transform: rotate(360deg); }
}
@keyframes aiSpinR {
to { transform: rotate(-360deg); }
}
@keyframes aiShimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(200%); }
}
/* ── Learning Path Card ── */
.lp-browser-content {
background: var(--color-surface);
}
.lp-browser-content-inner {
height: 100%;
}
[data-theme="dark"] .lp-browser-toolbar {
background: #2a2520;
}
.learning-path-start-tag {
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
background: #fff;
border: 1.5px solid var(--color-border);
border-radius: 8px;
padding: 4px 10px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
color: #0E63F6;
text-transform: uppercase;
}
.learning-path-start-tag::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #fff;
filter: drop-shadow(0 1px 0 var(--color-border));
}
.learning-path-card:hover .learning-path-start-tag,
.learning-path-card.is-active .learning-path-start-tag {
opacity: 1;
animation: startTagBounce 1.5s ease-in-out infinite;
}
@keyframes startTagBounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
.learning-path-card:hover .learning-path-start-tag,
.learning-path-card.is-active .learning-path-start-tag {
animation: none;
}
}
.lp-browser-frame {
transform: translateY(10%) scale(0.97);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
transform-origin: center bottom;
}
.learning-path-card:hover .lp-browser-frame,
.learning-path-card.is-active .lp-browser-frame {
transform: translateY(0) scale(1);
}
.lp-progress-bar > div {
width: 2%;
transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.learning-path-card:hover .lp-progress-bar > div,
.learning-path-card.is-active .lp-progress-bar > div {
width: 8%;
}
@media (prefers-reduced-motion: reduce) {
.lp-browser-frame {
transform: translateY(0);
transition: none;
}
}
/* ── Glyph Scramble Card ── */
.glyph-card {
--glyph-text: var(--color-text-secondary);
--glyph-tooltip-bg: var(--color-text-emphasis);
--glyph-tooltip-text: var(--color-surface);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
cursor: url("data:image/svg+xml,") 6 6, pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.glyph-jp-text {
font-family: 'Nanum Myeongjo', serif;
font-weight: 400;
font-size: 2.7rem;
color: var(--glyph-text);
letter-spacing: 0.02em;
line-height: 1.4;
transition: opacity 0.35s ease;
text-align: center;
}
.glyph-en-text {
display: none;
flex-direction: column;
align-items: center;
gap: 0.4rem;
font-family: 'IBM Plex Mono', monospace;
font-weight: 400;
font-size: 1.05rem;
color: var(--glyph-text);
letter-spacing: 0.02em;
line-height: 1.15;
text-align: center;
}
.glyph-en-text.visible {
display: flex;
transform: scale(1.25);
}
.glyph-heart-icon {
display: inline-block;
width: 18px;
height: 18px;
vertical-align: -0.1em;
}
.glyph-scramble-container {
display: none;
flex-direction: column;
align-items: center;
gap: 0.4rem;
position: absolute;
inset: 0;
justify-content: center;
pointer-events: none;
transition: opacity 0.35s ease;
}
.glyph-scramble-container.active {
display: flex;
transform: scale(1.25);
}
.glyph-scramble-line {
display: flex;
justify-content: center;
}
.glyph-scramble-char {
display: inline-block;
color: var(--glyph-text);
}
.glyph-scramble-char.jp-glyph {
font-family: 'Shippori Mincho', serif;
font-size: 0.95rem;
}
.glyph-scramble-char.en-glyph {
font-family: 'IBM Plex Mono', monospace;
font-size: 1.05rem;
}
.glyph-sparkle {
position: absolute;
border-radius: 50%;
background: #f0c040;
opacity: 0;
pointer-events: none;
animation: glyphSparkle 1.4s ease-in-out infinite;
animation-play-state: paused;
}
.glyph-card:hover {
cursor: url("data:image/svg+xml,") 9 9, pointer;
}
.glyph-card:hover .glyph-sparkle {
animation-play-state: running;
}
.glyph-tooltip {
position: absolute;
padding: 5px 10px;
border-radius: 8px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 400;
letter-spacing: 0.02em;
color: var(--color-text-secondary);
background: var(--color-surface);
border: 1px solid var(--color-border);
box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.6) inset;
pointer-events: none;
white-space: nowrap;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 10;
}
.glyph-tooltip.visible {
opacity: 1;
transform: translateY(0);
}
@keyframes glyphSparkle {
0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
50% { opacity: 0.7; transform: scale(1.1) rotate(180deg); }
}
@keyframes glyphFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes glyphWordSettle {
from { opacity: 0.7; transform: translateY(2px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Emoji Slot (glyph card) ── */
.emoji-slot {
--item-height: 18px;
display: inline-flex;
width: var(--item-height);
height: var(--item-height);
overflow: clip;
position: relative;
vertical-align: -0.1em;
contain: strict;
}
.emoji-slot__track {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
width: 100%;
will-change: transform;
transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.emoji-slot__item {
width: var(--item-height);
height: var(--item-height);
line-height: var(--item-height);
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 var(--item-height);
box-sizing: border-box;
overflow: hidden;
aspect-ratio: 1 / 1;
}
/* ── Glass Link Button ── */
.glass-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
border-radius: 12px;
width: fit-content;
background: rgba(255,255,255,0.75);
border: 1px solid rgba(0,0,0,0.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #27272A;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
text-decoration: none;
cursor: pointer;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.9);
transform: scale(1);
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.glass-link:hover {
transform: scale(1.02);
box-shadow: 0 8px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
}
.glass-link:active {
transform: scale(0.97);
}
.glass-link-label {
position: relative;
z-index: 1;
}
.glass-link-arrow {
position: relative;
z-index: 1;
color: var(--color-meta);
transform: translate(-1px, 0px);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
}
.glass-link:hover .glass-link-arrow {
transform: translate(0.5px, -0.5px);
color: var(--color-primary);
}
.glass-link-arrow-down {
transform: scale(1) translateY(0px);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
}
.glass-link:hover .glass-link-arrow-down {
transform: scale(1.07) translateY(1px);
animation: downloadBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes downloadBounce {
0% { transform: scale(1) translateY(0px); }
40% { transform: scale(1.1) translateY(1.5px); }
70% { transform: scale(1.05) translateY(0.25px); }
100% { transform: scale(1.07) translateY(1px); }
}
.glass-link-shimmer {
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.7) 50%, transparent 65%);
transform: translateX(-100%);
pointer-events: none;
opacity: 0;
}
.glass-link:hover .glass-link-shimmer {
animation: glassShimmerSweep 0.6s ease-out forwards;
opacity: 0.6;
}
@keyframes glassShimmerSweep {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* Dark mode variant */
[data-theme="dark"] .glass-link {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.18);
color: #FFF;
box-shadow: 0 2px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);
}
[data-theme="dark"] .glass-link:hover {
box-shadow: 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}
[data-theme="dark"] .glass-link-shimmer {
background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.25) 50%, transparent 65%);
}
/* ══════════════════════════════════════
Scroll Entrance Animations
══════════════════════════════════════ */
.scroll-reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.scroll-reveal-delay {
transition-delay: 0.1s;
}
@media (prefers-reduced-motion: reduce) {
.scroll-reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* ══════════════════════════════════════
Text Shimmer
══════════════════════════════════════ */
.text-shimmer {
background: linear-gradient(
105deg,
var(--color-text-primary) 0%,
var(--color-text-primary) 44%,
var(--shimmer-highlight, #5E5955) 50%,
var(--color-text-primary) 56%,
var(--color-text-primary) 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: textShimmer 20s linear infinite;
}
[data-theme="dark"] .text-shimmer {
--shimmer-highlight: #F0EBE3;
}
@keyframes textShimmer {
0% { background-position: 100% center; }
100% { background-position: -100% center; }
}
@media (prefers-reduced-motion: reduce) {
.text-shimmer {
background: none;
-webkit-text-fill-color: unset;
animation: none;
}
}
/* ══════════════════════════════════════
Resume Drawer
══════════════════════════════════════ */
/* Backdrop — solid bg fade */
.resume-backdrop {
position: fixed;
inset: 0;
z-index: 499;
background: var(--color-bg);
opacity: 0;
pointer-events: none;
transition: opacity 0.5s cubic-bezier(0.5, 0, 0.8, 0.7);
}
.resume-backdrop.active {
opacity: 1;
pointer-events: all;
transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Drawer — slides up/down with spring settle */
.resume-drawer {
position: fixed;
inset: 0;
z-index: 500;
overflow-y: auto;
display: flex;
justify-content: center;
padding: 80px 40px 60px;
transform: translateY(100%) rotate(0.8deg);
transition: transform 0.5s cubic-bezier(0.36, 0, 0.66, -0.2);
pointer-events: none;
}
.resume-drawer.open {
transform: translateY(0) rotate(0deg);
transition: transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
pointer-events: all;
}
/* White paper card — shadow grows on entry */
.stamp-resume-paper {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
max-width: 680px;
width: 100%;
overflow: hidden;
height: fit-content;
transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.resume-drawer.open .stamp-resume-paper {
box-shadow: 0 12px 48px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08);
}
/* PDF container */
.resume-pdf-container {
position: relative;
}
.resume-pdf-container canvas {
display: block;
}
/* Annotation layer — don't block text selection */
.resume-pdf-container .annotationLayer {
pointer-events: none;
}
.resume-pdf-container .annotationLayer section {
pointer-events: auto;
}
/* Toolbar (download + close) — staggered pop-in */
.stamp-toolbar {
position: fixed;
top: 24px;
right: 24px;
z-index: 600;
display: flex;
gap: 8px;
pointer-events: none;
}
.stamp-toolbar.visible {
pointer-events: all;
}
.stamp-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text-primary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
text-decoration: none;
opacity: 0;
transform: scale(0.5);
transition: opacity 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
background 0.2s;
}
.stamp-btn:nth-child(1) { transition-delay: 0.35s; }
.stamp-btn:nth-child(2) { transition-delay: 0.45s; }
.stamp-toolbar.visible .stamp-btn {
opacity: 1;
transform: scale(1);
}
.stamp-toolbar:not(.visible) .stamp-btn {
transition-delay: 0s;
}
.stamp-btn:hover {
transform: scale(1.1);
background: var(--color-surface-inset);
}
/* ── Resume drawer mobile ── */
@media (max-width: 767px) {
.resume-drawer { padding: 70px 16px 40px; }
.stamp-toolbar { top: 16px; right: 16px; }
}
/* ── Resume drawer reduced motion ── */
@media (prefers-reduced-motion: reduce) {
.resume-backdrop,
.resume-drawer,
.stamp-toolbar {
transition-duration: 0.01s !important;
}
}