/* The animated CV is one display: navigation, content, assistant and footer. */
.portfolio-journey { --screen-gutter: 24px; --screen-bezel: 10px; --screen-cap: 18px; }
.portfolio-device { width: calc(100% - var(--screen-gutter) * 2); max-width: 1440px; margin: 24px auto 0; border: var(--screen-bezel) solid #272631; border-top: 0; border-bottom: 0; border-radius: 16px 16px 12px 12px; background: #272631; box-shadow: 0 24px 60px #0c091b24; }
.screen-topbar { position: sticky; top: 0; z-index: 50; min-height: calc(var(--journey-nav) + var(--screen-cap)); background: #272631; border-radius: 12px 12px 0 0; }
.screen-topbar .device-chrome { position: relative; top: auto; min-height: var(--screen-cap); height: var(--screen-cap); padding: 0; justify-content: center; border: 0; border-radius: 0; background: #272631; }
.device-chrome .device-camera { display: block; width: 5px; height: 5px; }
.screen-topbar .navbar { transition: background-color 200ms, color 200ms; }
[data-journey-past-intro="true"] .screen-topbar .navbar { position: relative; top: auto; left: auto; right: auto; width: 100%; border-radius: 5px 5px 0 0; }
.screen-bottom-bezel { position: sticky; z-index: 49; bottom: 0; height: 12px; background: #272631; border-radius: 0 0 8px 8px; pointer-events: none; }
.portfolio-screen { overflow: clip; }
.portfolio-screen section { scroll-margin-top: calc(var(--journey-nav) + var(--screen-cap) + 20px); }
.portfolio-screen footer { margin: 0; }
.portfolio-screen .ai-widget { right: max(calc(var(--screen-gutter) + var(--screen-bezel) + 16px), calc((100vw - 1440px) / 2 + 26px)); bottom: 28px; }
.portfolio-screen .ai-panel { width: min(420px, calc(100vw - (var(--screen-gutter) + var(--screen-bezel) + 16px) * 2)); }
.portfolio-screen .ai-greeting { max-width: min(320px, calc(100vw - (var(--screen-gutter) + var(--screen-bezel) + 16px) * 2)); }
html:not([data-experience="classic"]) [data-journey-past-intro="false"] .ai-widget,
html:not([data-experience="classic"]) [data-portfolio-journey]:not([data-journey-past-intro]) .ai-widget { visibility: hidden; }
.ai-launcher:not(.ai-launcher-open) { padding: 0; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); }
.photographic-display { border-radius: 2px; }

/* The classic presentation uses the original hero and project gallery. */
.classic-presentation { display: none; }
html[data-experience="classic"] .classic-presentation { display: block; }
html[data-experience="classic"] .journey-stage { display: none; }
html[data-experience="classic"] .classic-section { min-height: calc(100svh - 4rem); padding: 72px 0 88px; }
html[data-experience="classic"] .classic-section .classic-name { font-size: clamp(2.6rem, 5.6vw, 6rem); line-height: 1.05; }
html[data-experience="classic"] .classic-greeting { color: #e9d5ff; }
html[data-experience="classic"] .classic-version-control .experience-switch { background: #ffffff12; color: #f5f0ff; border-color: #ffffff50; }
html[data-experience="classic"] .portfolio-device { width: 100%; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--bg-primary); }
html[data-experience="classic"] .screen-topbar { position: static; min-height: 0; height: 0; }
html[data-experience="classic"] .screen-topbar .navbar { position: fixed; top: 0; left: 0; right: 0; width: 100%; border-radius: 0; }
html[data-experience="classic"] .screen-bottom-bezel { display: none; }
html[data-experience="classic"] .portfolio-screen > section > .container { max-width: 1400px; }
html[data-experience="classic"] .projects-section { padding: 0; }
html[data-experience="classic"] .projects-section > .projects-heading,
html[data-experience="classic"] .projects-section > .projects-github { display: none; }
html[data-experience="classic"] .projects-classic { display: block; max-width: none; }
html[data-experience="classic"] .projects-classic img { height: 100%; margin: 0; border-radius: 0; }
html[data-experience="classic"] .projects-classic p { font-size: inherit; line-height: inherit; }
html[data-experience="classic"] .ai-widget { right: 24px; bottom: 24px; }
html[data-experience="classic"] .ai-panel { width: min(420px, calc(100vw - 32px)); }
html[data-experience="classic"] .ai-greeting { max-width: 320px; }

@media (max-width: 759px) {
 .portfolio-journey { --screen-gutter: 6px; --screen-bezel: 5px; --screen-cap: 12px; }
 .portfolio-device { margin-top: 12px; border-radius: 10px; }
 .screen-topbar .navbar > .container { padding-inline: 12px; }
 .screen-bottom-bezel { height: 8px; }
 .portfolio-screen .ai-widget { right: 22px; bottom: 20px; }
 .portfolio-screen .ai-panel { width: calc(100vw - 44px); }
 .screen-topbar .navbar-mobile-menu { max-height: calc(100dvh - var(--journey-nav) - var(--screen-cap) - 20px); }
 html[data-experience="classic"] .classic-section { padding: 40px 0 72px; }
 html[data-experience="classic"] .classic-section .classic-name { font-size: clamp(1.75rem, 10.5vw, 3.25rem); }
 html[data-experience="classic"] .ai-widget { right: 16px; }
 html[data-experience="classic"] .ai-panel { width: calc(100vw - 32px); }
}
@media (min-width: 640px) and (max-width: 1100px) {
 html[data-experience="classic"] .classic-name-line { flex-wrap: wrap; row-gap: .1em; }
}
@media print {
 .screen-topbar, .screen-bottom-bezel, .classic-version-control { display: none !important; }
 .portfolio-device { margin: 0; border: 0; width: 100%; box-shadow: none; }
}
/* Preserve the original composition with legible text on its dark backdrop. */
html[data-experience="classic"] .classic-section .text-slate-300,
html[data-experience="classic"] .classic-section .text-slate-400 { color: #ddd4ef !important; }
html[data-experience="classic"] .classic-section .btn-secondary { color: #f3ecff; border-color: #ba9edf; }
html[data-experience="classic"] .classic-section a[aria-label] { color: #dfd2fa; }
@media (max-width: 639px) { html[data-experience="classic"] .classic-bracket { display: none; } }

/* Stop CSS loops outside the viewport, including pseudo-elements. */
[data-motion-visible="false"], [data-motion-visible="false"] *,
[data-motion-visible="false"] *::before, [data-motion-visible="false"] *::after,
[data-motion-paused="true"] *, [data-motion-paused="true"] *::before, [data-motion-paused="true"] *::after {
 animation-play-state: paused !important;
}
/* Hover effects should not animate layout, spacing or every text property. */
.portfolio-screen .card-hover { transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
@media (hover: none), (prefers-reduced-motion: reduce) { .portfolio-screen .card-hover:hover { transform: none; } }

/* The name sits on a dark backdrop in both color themes. */
.classic-section .classic-name-primary { color: #f8fafc; }
html:not([data-experience="classic"]) .studio-about-details .card {
 padding: clamp(20px, 3vw, 32px);
 background: var(--bg-card);
}

/* Build each screen in pieces, keeping the full document and its scroll height. */
.portfolio-screen [data-reveal] {
 opacity: 1;
 transform: none;
 transition: none;
 will-change: auto;
}
.portfolio-screen .experience-item[data-scroll-build] {
 opacity: 1;
 transform: none;
 transition: none;
}
html:not([data-experience="classic"]) .portfolio-screen > section[id] {
 padding-top: clamp(44px, 5vw, 64px);
 padding-bottom: clamp(44px, 5vw, 64px);
}
html:not([data-experience="classic"]) [data-build-heading] {
 margin-bottom: clamp(28px, 4vw, 40px);
}
html:not([data-experience="classic"]) .chapter-scene { margin-bottom: 32px; }
.portfolio-screen [data-build-state="pending"],
.portfolio-screen [data-build-state="building"] { transition: none !important; }
.portfolio-screen [data-scroll-build="module"][data-build-state="building"] {
 translate: 0 var(--build-offset, 0px);
}
html:not([data-experience="classic"]) :is(#skills, #experience, #education, #languages) .chapter-scene { margin-bottom: 0; }
@media (max-width: 759px) {
 html:not([data-experience="classic"]) .chapter-scene { margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
 [data-scroll-build] { opacity: 1 !important; clip-path: none !important; will-change: auto !important; translate: none !important; }
}
@media print {
 [data-scroll-build] { opacity: 1 !important; clip-path: none !important; will-change: auto !important; translate: none !important; }
}

/* Keep the classic technology strip. Specify
   only animation properties, so offscreen/document visibility can still pause it. */
@media (prefers-reduced-motion: no-preference) {
    html[data-experience="classic"] #skills .skills-marquee .marquee {
        animation-name: marquee-scroll !important;
        animation-duration: 40s !important;
        animation-timing-function: linear !important;
        animation-iteration-count: infinite !important;
    }
}
@media (hover: hover) {
    #skills .skills-marquee:hover .marquee { animation-play-state: paused !important; }
}
@media print { #skills .skills-marquee .marquee { animation: none !important; } }

html[data-experience="classic"] #skills[data-motion-visible="false"] .marquee,
html[data-experience="classic"] [data-motion-paused="true"] #skills .marquee {
    animation-play-state: paused !important;
}

/* Directional navigation moves only the chrome; document layout stays stable. */
html[data-experience="classic"] [data-nav-hidden="true"] .navbar { transform: translateY(-110%); pointer-events: none; }
html:not([data-experience="classic"]) [data-journey-past-intro="true"][data-nav-hidden="true"] .screen-topbar { transform: translateY(-110%); pointer-events: none; }
@media (max-width: 1099px), (max-height: 620px) {
    html:not([data-experience="classic"]) [data-nav-hidden="true"][data-guide-tour-ready] .guide-tour { translate: 0 calc(-1 * (var(--journey-nav) + var(--screen-cap))); }
}
@media (prefers-reduced-motion: no-preference) {
    html[data-experience="classic"] [data-nav-hidden] .navbar { transition: transform 220ms cubic-bezier(.22,.61,.36,1), background-color 220ms ease, color 220ms ease !important; }
    html:not([data-experience="classic"]) [data-journey-past-intro="true"] .screen-topbar { transition: transform 220ms cubic-bezier(.22,.61,.36,1); }
    [data-nav-hidden] .guide-tour { transition: translate 220ms cubic-bezier(.22,.61,.36,1); }
}
@media (prefers-reduced-motion: reduce) {
    [data-nav-hidden] .navbar, [data-nav-hidden] .screen-topbar, [data-nav-hidden] .guide-tour { transition: none !important; }
}

/* Leave the last line readable above the floating assistant, including safe areas. */
.portfolio-screen .site-footer { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
@media print { .portfolio-screen .site-footer { padding-bottom: 3rem; } }