/* ============================================================
   DEPTH (2026-10-27): 3D material for cards, buttons, pills and fields.
   Only shadows and edge highlights: no sizes, spacing, colours, text or positions change.
   Loaded after shell.css/nav-v2.css when DEIJS_DEPTH is true or with ?preview=depth.
   Roll back: set DEIJS_DEPTH = false in src/i18n.php (the file then only loads in preview).
   ============================================================ */

/* Neumorphic level (owner's reference, 2026-10-27): ~8px dark shadow bottom-right + light highlight top-left,
   plus a hairline edge (light top, dark bottom) that merges with each element's own border. */
:root {
    --dp-rim: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
    --dp-card: 10px 10px 22px rgba(0, 0, 0, 0.8), -8px -8px 20px rgba(201, 216, 197, 0.09);
    --dp-card-hover: 14px 14px 30px rgba(0, 0, 0, 0.85), -10px -10px 24px rgba(201, 216, 197, 0.12);
    --dp-raised: 6px 6px 12px rgba(0, 0, 0, 0.75), -5px -5px 10px rgba(201, 216, 197, 0.11);
    --dp-pill: 4px 4px 8px rgba(0, 0, 0, 0.7), -3px -3px 7px rgba(201, 216, 197, 0.1);
    --dp-inset: inset 5px 5px 10px rgba(0, 0, 0, 0.7), inset -4px -4px 8px rgba(201, 216, 197, 0.08);
    --dp-pressed: inset 5px 5px 10px rgba(0, 0, 0, 0.75), inset -4px -4px 8px rgba(201, 216, 197, 0.08);
    --dp-focus: 0 0 0 2px rgba(201, 216, 197, 0.5);
}

[data-theme="light"] {
    --dp-rim: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(61, 68, 60, 0.12);
    --dp-card: 10px 10px 22px rgba(61, 68, 60, 0.32), -8px -8px 20px rgba(255, 255, 255, 0.95);
    --dp-card-hover: 14px 14px 30px rgba(61, 68, 60, 0.38), -10px -10px 24px rgba(255, 255, 255, 1);
    --dp-raised: 6px 6px 12px rgba(61, 68, 60, 0.3), -6px -6px 12px rgba(255, 255, 255, 0.95);
    --dp-pill: 4px 4px 8px rgba(61, 68, 60, 0.26), -4px -4px 8px rgba(255, 255, 255, 0.9);
    --dp-inset: inset 5px 5px 10px rgba(61, 68, 60, 0.26), inset -5px -5px 10px rgba(255, 255, 255, 0.9);
    --dp-pressed: inset 5px 5px 10px rgba(61, 68, 60, 0.3), inset -5px -5px 10px rgba(255, 255, 255, 0.9);
    --dp-focus: 0 0 0 2px rgba(88, 96, 87, 0.45);
}

/* Timeline pages (body.timeline-page: Career + Personal) keep their original glass-on-video look: the content
   blocks below are scoped away from them; only the shared chrome (top bar, rail, phone bar, footer) matches the site. */
/* Cards: float above the page and the videos. */
:is(body:not(.timeline-page), .topbar, .rail, .tabbar, footer) :is(.card, .glass-card, .modal-card, .education-card, .cv-card, .timeline-card, .stat-card, .job-card,
.profile-card, .internship-card, .cta-panel, .berlin-rec-card, .skill-card, .recommendation-card,
.privacy-card, .terms-card, .exercise-card, .visual-panel, .contact-form-card, .contact-info-panel,
.platform-card, .popout-card, .wcv-card, .player-card, .sc-play-card, .quote-card, .hero-featured-card,
.offering-card, .risk-card, .link-card, .cv-download-card, .cert-card, .summary-card,
.role-card, .competency-card, .slide-card, .hobby-card, .warning-card, .prompt-card, .project-card,
.linkedin-card, .language-card, .hero-card, .essay-card, .day-card, .connect-card, .bunkros-link-card,
.block-card, .panel--card, .notes-card, .notes-overlay-card, .es-floating-panel) {
    box-shadow: var(--dp-rim), var(--dp-card);
    transition: box-shadow 0.25s ease;
}
:is(body:not(.timeline-page), .topbar, .rail, .tabbar, footer) :is(.card, .glass-card, .education-card, .cv-card, .timeline-card, .stat-card, .job-card, .profile-card,
.internship-card, .berlin-rec-card, .skill-card, .recommendation-card, .exercise-card, .platform-card,
.wcv-card, .offering-card, .link-card, .cert-card, .role-card, .competency-card, .hobby-card,
.project-card, .linkedin-card, .language-card, .essay-card, .day-card, .connect-card, .bunkros-link-card):hover {
    box-shadow: var(--dp-rim), var(--dp-card-hover);
}

/* Buttons: raised, and pressed in while clicked. */
:is(body:not(.timeline-page), .topbar, .rail, .tabbar, footer) :is(.btn, .btn-primary, .btn-ghost, .btn-outline, .btn-submit, .btn-action, .btn-cta-tl, .btn-icon-tl,
.btn-pill, .btn-pill-tl, .btn-download, .icon-btn, .inline-btn, .day-btn, .chatbot-btn, .vp-btn,
.mobile-bar-btn, .cta-btn, .filter-btn, .wcv-btn, .submit-btn, .action-btn, .hero-scroll-btn,
.hero-start-btn, .viewpoint-btn, .toggle-btn, .cv-download-btn, .lang-toggle-btn, .theme-toggle-btn,
.scroll-btn, .player-btn, .album-play-btn, .play-pause-btn, .copy-btn, .notes-close-btn, .back-to-top,
.es-floating-button, .swiper-button-prev, .swiper-button-next, .hud-badge) {
    box-shadow: var(--dp-rim), var(--dp-raised);
    transition: box-shadow 0.15s ease;
}
:is(body:not(.timeline-page), .topbar, .rail, .tabbar, footer) :is(.btn, .btn-primary, .btn-ghost, .btn-outline, .btn-submit, .btn-action, .btn-cta-tl, .btn-icon-tl,
.btn-pill, .btn-pill-tl, .btn-download, .icon-btn, .inline-btn, .day-btn, .chatbot-btn, .vp-btn,
.mobile-bar-btn, .cta-btn, .filter-btn, .wcv-btn, .submit-btn, .action-btn, .hero-scroll-btn,
.hero-start-btn, .viewpoint-btn, .toggle-btn, .cv-download-btn, .lang-toggle-btn, .theme-toggle-btn,
.scroll-btn, .player-btn, .album-play-btn, .play-pause-btn, .copy-btn, .notes-close-btn, .back-to-top,
.es-floating-button, .hud-badge):active:not(:disabled) {
    box-shadow: var(--dp-pressed);
}
:is(body:not(.timeline-page), .topbar, .rail, .tabbar, footer) :is(.btn, .btn-submit, .submit-btn, .icon-btn, .action-btn, .cta-btn):disabled {
    box-shadow: none;
}

/* Pills, chips, tags and badges. */
:is(body:not(.timeline-page), .topbar, .rail, .tabbar, footer) :is(.chip, .skill-tag, .skill-chip, .contact-pill, .task-chip, .hero-tag, .lang-chip, .badge-chip,
.wcv-chip, .mode-chip, .day-chip, .bio-chip, .personality-chip, .activity-chip, .call-pill,
.featured-badge, .time-badge, .risk-badge, .hero-badge, .bot-tag, .notes-card-tag, .notes-overlay-tag) {
    box-shadow: var(--dp-rim), var(--dp-pill);
}

/* Fields: pressed into the surface (not on the timeline pages). */
body:not(.timeline-page) :is(.form-input, .form-control, .chat-input,
form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="file"]),
form textarea, form select) {
    box-shadow: var(--dp-inset);
}
body:not(.timeline-page) :is(.form-input, .form-control, .chat-input,
form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select)):focus {
    box-shadow: var(--dp-inset), var(--dp-focus);
}

/* App chrome: iPad rail, phone bar, page stepper and menus float; the active item is raised,
   the desktop link group is a pressed-in well. The desktop top bar and the footer stay flat: they are part
   of the page background (owner, 2026-10-27), only the elements on them come forward. */
.rail, .tabbar, .dots, .slimnav, .menu-overlay.sheet {
    box-shadow: var(--dp-card);
}

/* The D logo is a transparent cut-out, so the depth follows the letter itself (drop-shadow, not box-shadow). */
.brand-mark, body .rail a.rail-brand {
    filter: drop-shadow(3px 4px 3px rgba(0, 0, 0, 0.75)) drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.35));
}
[data-theme="light"] .brand-mark, [data-theme="light"] body .rail a.rail-brand {
    filter: drop-shadow(3px 4px 4px rgba(61, 68, 60, 0.45)) drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.95));
}
.topnav {
    box-shadow: var(--dp-inset);
}
.topnav a[aria-current="page"], .rail .tab[aria-current="page"], .tabbar .tab[aria-current="page"],
.tabbar-ind, .dots-step, .sheet-link, .slimnav .sn-item[aria-current="page"],
.dots-track button[aria-current="true"] i {
    box-shadow: var(--dp-rim), var(--dp-raised);
}
:is(.rail .tab, .tabbar .tab, .topnav a, .dots-step, .sheet-link, .slimnav .sn-item):active {
    box-shadow: var(--dp-pressed);
}

/* Home page sliders: experience, education and blog slides float like cards; achievements as raised pills. */
.experience-slide, .education-slide, .blog-slide {
    box-shadow: var(--dp-rim), var(--dp-card);
}
.slide-achievement {
    box-shadow: var(--dp-rim), var(--dp-pill);
}

/* CV page (/cv/en, /cv/nl): action tiles, active section tab, social links raised; language bars pressed in. */
.wcv-tile, .social-link, .wcv-nav a.on, .seg button[aria-pressed="true"] {
    box-shadow: var(--dp-rim), var(--dp-raised);
}
:is(.wcv-tile.is-action, .social-link, .wcv-nav a):active {
    box-shadow: var(--dp-pressed);
}
.wcv-period, .wcv-key {
    box-shadow: var(--dp-rim), var(--dp-pill);
}
.wcv-bar {
    box-shadow: var(--dp-inset);
}

/* Timeline pages: only the cards and photo frames get depth; glass pills and buttons over the video stay original. */
body.timeline-page :is(.rotterdam-swiper, .amsterdam-swiper, .berlin-swiper, .album-cover-wrapper, .popout-card, .berlin-rec-card, .exercise-card, .cv-download-card) {
    box-shadow: var(--dp-rim), var(--dp-card);
}
/* private-timeline.css styles these with section IDs, so the same IDs are needed here to win */
#origins .rotterdam-swiper, #amsterdam-return .amsterdam-swiper, #berlin-study .berlin-swiper, #berlin-life .berlin-rec-card {
    box-shadow: var(--dp-rim), var(--dp-card);
}
@media (min-width: 1200px) {
    /* desktop hero = a 1000px video card (phone/iPad hero is full-bleed, so no shadow there) */
    body.timeline-page :is(.timeline-hero-bg-video-wrap, .hero-bg-video-wrap) {
        box-shadow: var(--dp-rim), var(--dp-card);
    }
}

/* Same material as the header buttons (surface + hairline border + raised shadow) for the phone bar buttons,
   the fold-out menu items and the footer buttons, so they read as real 3D buttons too. */
.tabbar .tab, body .slimnav .sn-item, .slimnav .sn-x {
    background: var(--sh-surface);
    border: 1px solid var(--sh-border);
    box-shadow: var(--dp-rim), var(--dp-raised);
}
body .slimnav .sn-item { margin-bottom: 8px; }
body .slimnav .sn-item[aria-current="page"] {
    background: var(--sh-tint);
    border-color: rgba(var(--sh-accent-rgb), .35);
    box-shadow: var(--dp-rim), var(--dp-raised), inset 0 0 0 1px rgba(var(--sh-accent-rgb), .12);
}
:is(.tabbar .tab, body .slimnav .sn-item, .slimnav .sn-x):active:not(:disabled) {
    box-shadow: var(--dp-pressed);
}
html.pv-nav .tabbar .tab:disabled { box-shadow: none; }
footer :is(.social-link, .back-to-top) {
    box-shadow: var(--dp-rim), var(--dp-raised), -4px -4px 10px rgba(201, 216, 197, 0.14);
}
[data-theme="light"] footer :is(.social-link, .back-to-top) {
    box-shadow: var(--dp-rim), var(--dp-raised);
}

/* Shadows that fit where there is no room (2026-10-27): inside the iPad rail / phone bar, and on cards inside
   sliders (.swiper clips everything outside its box: only 0-4px at the sides, 40px+ below). */
:root {
    --dp-tight: 0 3px 6px -2px rgba(0, 0, 0, 0.7);
    --dp-slide: 0 18px 24px -12px rgba(0, 0, 0, 0.85), 0 7px 10px -6px rgba(0, 0, 0, 0.6);
}
[data-theme="light"] {
    --dp-tight: 0 3px 6px -2px rgba(61, 68, 60, 0.3);
    --dp-slide: 0 18px 24px -12px rgba(61, 68, 60, 0.4), 0 7px 10px -6px rgba(61, 68, 60, 0.25);
}
body .rail { box-shadow: var(--dp-raised); }
body .rail :is(.icon-btn, .tab[aria-current="page"]) { box-shadow: var(--dp-rim), var(--dp-tight); }
body.home-page .swiper .swiper-slide > :is(.experience-slide, .education-slide, .blog-slide, .cv-card) {
    box-shadow: var(--dp-rim), var(--dp-slide);
}

/* Phone bar: a little wider, real space between the 3D buttons, and room for their shadows. */
@media (max-width: 767px) {
    .tabbar { left: 8px; right: 8px; height: 74px; padding: 8px; gap: 8px; overflow: visible; }
    .tabbar .tab { min-height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    .card, .glass-card, .btn, .icon-btn, .chip { transition: none; }
}