/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Page-turn animations (one place to tune speed/feel) */
    --pageFlipMs: 5200ms;
    --pageFlipEase: cubic-bezier(.42,0,.58,1);
    /* Top navigation height (separate UI strip) */
    --navBarH: 56px;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Frontpage (HJEM): big black notebook cover */
body.home-notebook-page {
    background: #f4f3ef;
    color: #111;
    min-height: 100vh;
    overflow-x: hidden;
}

body.home-notebook-page.home-opening-projects {
    /* lock scrolling during transition */
    overflow: hidden;
}

/* Projekter -> Om mig: right-page flip overlay (reuses homeCoverOpen flip) */
.projects-about-transition {
    position: fixed;
    inset: 0;
    z-index: 9999;
    /* Keep mounted for preloading, but hidden until activated */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 90ms linear, visibility 0s linear 90ms;
    /* Never show a "blank" frame behind the flip */
    background: var(--paperBgLeft, #f5f5f0);
    background-size: var(--paperBgLeftSize, 100% 25px);
    background-position: var(--paperBgLeftPos, 0 0);
    background-repeat: repeat, repeat, no-repeat, no-repeat, repeat;
}

/* Activate overlay only during the flip */
body.projects-about-flip-active .projects-about-transition {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transition: opacity 90ms linear;
}

/* While flipping, hide the real page (menu-click + drag) */
body.projects-about-flip-active > :not(.projects-about-transition):not(.navbar) {
    opacity: 0;
    pointer-events: none;
}

/* PROJEKTER -> OM MIG (single RIGHT-page turn to the LEFT) */
.projects-about-transition.is-ready {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.projects-about-transition .projects-about-turn {
    position: absolute;
    inset: 0;
    perspective: 1400px;
    overflow: hidden;
}

.projects-about-transition .projects-about-under {
    position: absolute;
    top: 0;
    height: 100vh;
    width: 50vw;
    overflow: hidden;
    background: #f5f5f5;
}
.projects-about-transition .projects-about-under--left { left: 0; }
.projects-about-transition .projects-about-under--right { right: 0; }

/* Match sketchbook paper */
.projects-about-transition .projects-about-under--left {
    background:
        linear-gradient(transparent 0px, transparent 23px, #d0d0d0 23px, #d0d0d0 24px, transparent 24px),
        linear-gradient(transparent 0px, transparent 25px, #e0e0e0 25px, #e0e0e0 26px, transparent 26px),
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.1) 0%, transparent 50%),
        #f5f5f0;
    background-size: 100% 25px, 100% 25px, 100% 100%, 100% 100%;
}
.projects-about-transition .projects-about-under--right {
    background:
        linear-gradient(transparent 0px, transparent 24px, #d5d5d5 24px, #d5d5d5 25px, transparent 25px),
        linear-gradient(transparent 0px, transparent 26px, #e0e0e0 26px, #e0e0e0 27px, transparent 27px),
        radial-gradient(circle at 80% 80%, rgba(0,0,0,0.02) 0%, transparent 50%),
        #f5f5f0;
    background-size: 100% 25px, 100% 25px, 100% 100%, 100% 100%;
}

.projects-about-transition .projects-about-frame {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100vw;
    border: 0;
    background: transparent;
    pointer-events: none;
    opacity: 1;
    transition: none;
}
/* (intentionally no load-gating here; file:// caching can skip iframe load events in Safari) */
.projects-about-transition .projects-about-frame--left { left: 0; }
.projects-about-transition .projects-about-frame--right { left: -50vw; }

/* Under pages:
   - LEFT side must stay as Projekter the whole time
   - RIGHT side crossfades under the turning sheet */
.projects-about-transition .projects-about-under--left .projects-about-under-frame--projects {
    display: block;
    opacity: 1;
}
.projects-about-transition .projects-about-under--left .projects-about-under-frame--about {
    display: none;
}

.projects-about-transition .projects-about-under--right .projects-about-under-frame--projects,
.projects-about-transition .projects-about-under--right .projects-about-under-frame--about {
    display: block;
    opacity: 0;
    transition: opacity 90ms linear;
}
.projects-about-transition .projects-about-under--right .projects-about-under-frame--projects { opacity: 1; }
.projects-about-transition .projects-about-under--right .projects-about-under-frame--about { opacity: 0; }
.projects-about-transition.swap-under-right .projects-about-under--right .projects-about-under-frame--projects { opacity: 0; }
.projects-about-transition.swap-under-right .projects-about-under--right .projects-about-under-frame--about { opacity: 1; }

/* During drag, use display toggles to avoid compositor/iframe ghosting (RIGHT side only) */
body.projects-about-dragging .projects-about-transition .projects-about-under--right .projects-about-under-frame--projects { display: block; }
body.projects-about-dragging .projects-about-transition .projects-about-under--right .projects-about-under-frame--about { display: none; }
body.projects-about-dragging .projects-about-transition.swap-under-right .projects-about-under--right .projects-about-under-frame--projects { display: none; }
body.projects-about-dragging .projects-about-transition.swap-under-right .projects-about-under--right .projects-about-under-frame--about { display: block; }

/* Turning sheet: RIGHT page turns to the LEFT */
.projects-about-transition .projects-about-turn__flip {
    position: absolute;
    top: 0;
    left: 50vw;
    width: 50vw;
    height: 100vh;
    overflow: hidden;
    transform-style: preserve-3d;
    transform-origin: 0% 50%;
    z-index: 6;
    opacity: 0;
    background: #f5f5f0;
}
.projects-about-transition.is-turning .projects-about-turn__flip {
    opacity: 1;
    animation: pageRightToLeft var(--pageFlipMs) var(--pageFlipEase) forwards;
    will-change: transform;
}

.projects-about-transition .projects-about-turn__flip-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: opacity 90ms linear;
}
.projects-about-transition .projects-about-turn__flip-face--front {
    transform: translateZ(0.6px);
    opacity: 1;
}
.projects-about-transition .projects-about-turn__flip-face--back {
    transform: rotateY(180deg) translateZ(0.6px);
    /* Start hidden; we reveal it exactly at the seam via `.swap-flip-mid`. */
    opacity: 0;
    /* Safari: allow iframe to paint when this face becomes front-facing */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

/* After passing the middle: show Om mig LEFT on the turning sheet */
.projects-about-transition.swap-flip-mid .projects-about-turn__flip-face--back { opacity: 1; }
.projects-about-transition.swap-flip-mid .projects-about-turn__flip-face--front { opacity: 0; }

/* iFrame 3D/backface stability */
.projects-about-transition .projects-about-turn__flip iframe {
    /* Safari: don't hide iframe via backface, it can stay invisible */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transform-style: preserve-3d;
    transform: translateZ(0.5px);
}

/* Never hide the turning-sheet iframes (prevents "blank" second half). */
.projects-about-transition .projects-about-turn__flip .projects-about-frame {
    opacity: 1 !important;
}

/* Projekter page: corner drag handle (page turn) */
.page-turn-handle {
    position: fixed;
    width: 84px;
    height: 84px;
    z-index: 12000;
    pointer-events: auto;
    touch-action: none;
    cursor: grab;
}
.page-turn-handle:active { cursor: grabbing; }

/* Corner fold hint (renders on the PAGE corner itself) */
.corner-fold-hints {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 11900; /* below handles, above page */
}
.corner-fold-hint {
    position: absolute;
    bottom: 0;
    width: 92px;
    height: 92px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 160ms cubic-bezier(.2,.9,.2,1), transform 160ms cubic-bezier(.2,.9,.2,1);
    will-change: opacity, transform;
    filter: drop-shadow(0 10px 14px rgba(0,0,0,0.10));
}
.corner-fold-hint::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 65% 65%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 62%),
        radial-gradient(circle at 30% 35%, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.0) 60%),
        linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.08) 55%, rgba(0,0,0,0.03) 100%);
    border-radius: 14px;
}
.corner-fold-hint--right { right: 0; clip-path: polygon(100% 0, 0 100%, 100% 100%); }
.corner-fold-hint--left  { left: 0;  clip-path: polygon(0 0, 0 100%, 100% 100%); }

@media (hover: hover) and (pointer: fine) {
    /* Hide the "symbol" triangle on desktop; use fold hint instead */
    .page-turn-handle--left::before,
    .page-turn-handle--left::after,
    .page-turn-handle--right::before,
    .page-turn-handle--right::after {
        opacity: 0 !important;
    }
    body.corner-fold-right .corner-fold-hint--right,
    body.corner-fold-left .corner-fold-hint--left {
        opacity: 1;
        transform: translateY(0);
    }
}
.page-turn-handle--left {
    left: 8px;
    bottom: 10px;
}
.page-turn-handle--left::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background:
        radial-gradient(circle at 0% 100%, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.00) 62%),
        radial-gradient(circle at 0% 100%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.00) 58%);
    transform: skewX(-8deg);
    opacity: 0.65;
}
.page-turn-handle--left::after {
    content: '';
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 0;
    height: 0;
    border-right: 26px solid rgba(0,0,0,0.10);
    border-top: 26px solid transparent;
    border-bottom: 0 solid transparent;
    transform: rotate(6deg);
    opacity: 0.55;
}

/* Right page corner (bottom-right) */
.page-turn-handle--right {
    right: 8px;
    bottom: 10px;
}
.page-turn-handle--right::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 100%, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.00) 62%),
        radial-gradient(circle at 100% 100%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.00) 58%);
    transform: skewX(8deg);
    opacity: 0.65;
}
.page-turn-handle--right::after {
    content: '';
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 0;
    height: 0;
    border-left: 26px solid rgba(0,0,0,0.10);
    border-top: 26px solid transparent;
    border-bottom: 0 solid transparent;
    transform: rotate(-6deg);
    opacity: 0.55;
}

/* During drag, never run the CSS flip animation */
body.projects-about-dragging.home-opening-projects .home-notebook__cover {
    animation: none !important;
}

/* About -> Projects drag: disable keyframe during drag */
body.about-projects-dragging .about-projects-transition.is-turning .about-projects-turn__flip {
    animation: none !important;
}

/* About -> Contact drag: disable keyframe during drag */
body.about-contact-dragging .about-contact-transition.is-turning .about-contact-turn__flip {
    animation: none !important;
}

/* Contact -> About drag: disable keyframe during drag */
body.contact-about-dragging .contact-about-transition.is-turning .contact-about-turn__flip {
    animation: none !important;
}

/* Hide handles during transitions */
body.projects-about-flip-active .page-turn-handle,
body.projects-transition-active .page-turn-handle,
body.about-projects-flip-active .page-turn-handle,
body.about-contact-flip-active .page-turn-handle,
body.contact-about-flip-active .page-turn-handle,
body.ai-close-active .page-turn-handle {
    display: none !important;
}

body.home-notebook-page.projects-about-flip-active > :not(.projects-about-transition) {
    opacity: 0;
    pointer-events: none;
}

/* OM MIG -> PROJEKTER: left page flips to right */
.about-projects-transition {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: auto;
    /* Projekter paper (right page) as immediate fallback */
    background:
        linear-gradient(transparent 0px, transparent 24px, #d5d5d5 24px, #d5d5d5 25px, transparent 25px),
        linear-gradient(transparent 0px, transparent 26px, #e0e0e0 26px, #e0e0e0 27px, transparent 27px),
        linear-gradient(#ff6b6b, #ff6b6b),
        radial-gradient(circle at 80% 80%, rgba(0,0,0,0.02) 0%, transparent 50%),
        #f5f5f0;
    background-size: 100% 25px, 100% 25px, 2px 100%, 100% 100%, 100% 100%;
    background-position: 0 0, 0 0, calc(100% - 60px) 0, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat, repeat;
    /* Prevent 1-frame "nothing visible" blink */
    opacity: 0;
    transition: opacity 120ms linear;
}
.about-projects-transition.is-preloading {
    /* Keep in DOM so iframes can load, but never block clicks or show */
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Overlay becomes visible before we hide the real page */
.about-projects-transition.is-ready { opacity: 1; }

body.about-projects-flip-active > :not(.about-projects-transition):not(.navbar) {
    opacity: 0;
    pointer-events: none;
}

/* AI UNIVERSE: close book + slide to center */
.ai-close-transition {
    position: fixed;
    inset: 0;
    z-index: 9999;
    /* IMPORTANT: prewarmed overlay must not block clicks */
    pointer-events: none;
    /* Match HJEM background */
    background: #f4f3ef;
    opacity: 0;
    /* Small fade-in to avoid a hard pop */
    transition: opacity 90ms ease-out;
}
.ai-close-transition.is-ready { opacity: 1; pointer-events: auto; }
body.ai-close-active > :not(.ai-close-transition):not(.navbar) {
    opacity: 0;
    pointer-events: none;
    transition: opacity 90ms ease-out;
}

/* AI page reveal behind the book (for fluent handoff into infobox) */
.ai-close-transition .ai-universe-reveal {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 240ms ease;
    z-index: 0;
}
.ai-close-transition.reveal-ai .ai-universe-reveal { opacity: 1; }
.ai-close-transition.is-glitching.reveal-ai .ai-universe-reveal {
    /* Avoid any end-of-transition "blank" frame/flash */
    opacity: 1 !important;
    transition: none !important;
}
.ai-close-transition .ai-universe-reveal iframe {
    width: 100vw;
    height: 100vh;
    border: 0;
    display: block;
}

.ai-close { z-index: 2; }
.ai-close--closed .ai-back-title { z-index: 3; }

/* As we hand off to the revealed AI page, fade the overlay title (no glitch) */
.ai-close-transition.handoff .ai-back-title {
    opacity: 0;
    transition: opacity 180ms ease;
}

/* After the title morph: glitch-away effect */
.ai-close-transition.is-glitching {
    /* Match the AI Universe purple/blue background (no black flash) */
    background:
        radial-gradient(circle at 18% 18%, rgba(106, 63, 176, 0.55) 0%, rgba(10, 10, 10, 0.0) 58%),
        radial-gradient(circle at 82% 78%, rgba(43, 60, 133, 0.58) 0%, rgba(10, 10, 10, 0.0) 62%),
        linear-gradient(135deg, #0b0f2a 0%, #1a1a3a 22%, #1b2b5a 52%, #2b3c85 78%, #6a3fb0 100%);
}
.ai-close-transition.is-glitching::before,
.ai-close-transition.is-glitching::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 99999;
    opacity: 0;
}
/* scanlines + green haze */
.ai-close-transition.is-glitching::before {
    opacity: 0.55;
    background:
        radial-gradient(circle at 50% 45%, rgba(0,255,102,0.16) 0%, rgba(0,0,0,0) 55%),
        repeating-linear-gradient(180deg,
            rgba(0,0,0,0.00) 0px,
            rgba(0,0,0,0.00) 2px,
            rgba(0,255,102,0.08) 3px,
            rgba(0,0,0,0.00) 5px
        );
    mix-blend-mode: screen;
    animation: matrixScanFlicker 70ms steps(2, end) infinite;
}
/* subtle noise */
.ai-close-transition.is-glitching::after {
    opacity: 0.35;
    background:
        repeating-linear-gradient(90deg,
            rgba(0,255,102,0.00) 0px,
            rgba(0,255,102,0.02) 1px,
            rgba(0,0,0,0.00) 3px
        );
    mix-blend-mode: overlay;
    animation: matrixNoiseShift 110ms steps(2, end) infinite;
}

/* During handoff (right before navigation), remove any flashy overlay artifacts */
.ai-close-transition.handoff::before,
.ai-close-transition.handoff::after {
    opacity: 0 !important;
    animation: none !important;
    transition: opacity 140ms ease;
}

.ai-close-transition.is-glitching .ai-close--closed {
    opacity: 1 !important;
    animation: none;
}

.ai-close-transition.is-glitching .ai-close--closed .home-notebook {
    animation: matrixGlitchAway 460ms steps(2, end) forwards, matrixSliceJitter 460ms steps(2, end) forwards;
    will-change: opacity, filter, transform, clip-path, translate;
}

/* Ensure the book is fully gone once glitch finishes */
.ai-close-transition.book-gone .ai-close--closed .home-notebook {
    display: none !important;
}

/* Once the book is gone, remove flashy overlay artifacts too */
.ai-close-transition.book-gone::before,
.ai-close-transition.book-gone::after {
    opacity: 0 !important;
    animation: none !important;
}

/* Keep the title stable during the book glitch */
.ai-close-transition.is-glitching .ai-back-title.is-matrix {
    animation: none !important;
}
.ai-close-transition.is-glitching .ai-back-title {
    opacity: 1;
    filter: none !important;
    transform: translate(-50%, -50%) translateY(var(--aiTitleShiftY, 0px)) translateZ(3px) !important;
}

/* Allow handoff fade even while glitching */
.ai-close-transition.is-glitching.handoff .ai-back-title {
    opacity: 0;
}

@keyframes matrixGlitchAway {
    0%   { opacity: 1; filter: none; transform: translateZ(0); }
    10%  { opacity: 1; filter: saturate(1.8) contrast(1.5) hue-rotate(16deg); transform: translateX(-2px) skewX(1deg); }
    20%  { opacity: 0.86; filter: saturate(2.2) contrast(1.8) hue-rotate(-12deg); transform: translateX(4px) skewX(-1deg); }
    32%  { opacity: 1; filter: saturate(2.6) contrast(2.0) hue-rotate(22deg) brightness(1.05); transform: translateX(-6px); }
    52%  { opacity: 0.72; filter: blur(0.9px) contrast(1.55) brightness(0.98); transform: translateX(8px) translateY(2px); }
    74%  { opacity: 0.42; filter: blur(2.2px) contrast(1.25) brightness(0.9); transform: translateX(-10px) translateY(6px); }
    100% { opacity: 0; filter: blur(7px) brightness(0.7) contrast(1.1); transform: translateY(18px); }
}

@keyframes matrixSliceJitter {
    0%   { clip-path: inset(0 0 0 0); translate: 0 0; filter: none; }
    12%  { clip-path: inset(0 0 0 0); translate: -8px 2px; }
    20%  { clip-path: inset(12% 0 64% 0); translate: 14px -4px; }
    28%  { clip-path: inset(42% 0 22% 0); translate: -18px 4px; }
    36%  { clip-path: inset(6% 0 78% 0); translate: 12px -2px; }
    48%  { clip-path: inset(56% 0 10% 0); translate: -16px 0px; }
    62%  { clip-path: inset(0 0 54% 0); translate: 20px 0; }
    76%  { clip-path: inset(0 0 86% 0); translate: -22px 0; }
    100% { clip-path: inset(0 0 100% 0); translate: 0 12px; }
}

@keyframes matrixScanFlicker {
    0% { opacity: 0.25; }
    50% { opacity: 0.75; }
    100% { opacity: 0.45; }
}

@keyframes matrixNoiseShift {
    0% { transform: translateX(0); }
    100% { transform: translateX(10px); }
}

/* (No seam mask. We overlap the two halves instead.) */

.ai-close {
    position: absolute;
    inset: 0;
}

/* Opened view (full-screen spread, ready to close) */
.ai-close--opened { opacity: 1; }
.ai-close--opened .home-notebook__title,
.ai-close--opened .home-notebook__leaf-fan,
.ai-close--opened .home-notebook__pages { opacity: 0 !important; pointer-events: none !important; }

.ai-close--opened .home-notebook__cover,
.ai-close--opened .home-notebook__spread {
    position: fixed;
    top: 0 !important;
    /* Slight overlap to prevent any seam peek-through (no visible line) */
    left: calc(50vw - 2px);
    width: calc(50vw + 2px);
    height: 100vh;
    border-radius: 0;
    box-shadow: none !important;
}

/* Remove any moving edge hints during AI close */
.ai-close-transition .home-notebook__cover::before,
.ai-close-transition .home-notebook__cover::after {
    display: none !important;
    content: none !important;
}
.ai-close--opened .home-notebook__spread {
    background: var(--paperBgRight);
    background-size: var(--paperBgRightSize);
    background-position: var(--paperBgRightPos);
    background-repeat: repeat, repeat, no-repeat, no-repeat, repeat;
}

/* No center crease/gutter during AI close (prevents moving seam line) */
.ai-close-transition .home-notebook__spread::before {
    display: none !important;
    content: none !important;
}

/* If any seam still peeks through, fade the right page out immediately while closing */
.ai-close-transition.is-closing .ai-close--opened .home-notebook__spread {
    /* Keep visible so the book appears immediately (prevents blank flash) */
    opacity: 1 !important;
}
.ai-close--opened .home-notebook__cover {
    transform-origin: 0% 50%;
    transform-style: preserve-3d;
    /* Start "opened": cover is the left page */
    transform: translateX(-100%) rotateY(-180deg);
    /* IMPORTANT: use the real leather cover styling (black), not paper */
    background: none;
    filter: none;
}
.ai-close-transition.is-closing .ai-close--opened .home-notebook__cover {
    animation: aiCoverClose 800ms cubic-bezier(.18,.85,.22,1) forwards;
    will-change: transform;
}
@keyframes aiCoverClose {
    0% { transform: translateX(-100%) rotateY(-180deg); }
    100% { transform: translateX(0) rotateY(0deg); }
}

/* Closed view (book shifted right, then slides to center) */
.ai-close--closed {
    opacity: 0;
    pointer-events: none;
    /* Expose book sizing vars to the title (sibling of .home-notebook) */
    --bookTop: 40px;
    --bookH: min(980px, calc(100vh - 60px));
}
.ai-close-transition.show-closed .ai-close--opened { opacity: 0; pointer-events: none; }
.ai-close-transition.show-closed .ai-close--closed { opacity: 1; pointer-events: none; }

.ai-close--closed .home-notebook {
    /* Start from the "right side" (shifted), then go to center */
    left: 0;
    transform-style: preserve-3d;
    transform: translateX(calc(var(--bookW) / 2));
}

/* Mirror the CLOSED book (AI transition only) */
.ai-close-transition.show-closed .ai-close--closed .home-notebook {
    transform: translateX(calc(var(--bookW) / 2)) scaleX(-1);
    transform-origin: center;
}

/* Closed state: only show the closed book (no spread/title extras) */
.ai-close--closed .home-notebook__spread,
.ai-close--closed .home-notebook__leaf-fan,
.ai-close--closed .home-notebook__title {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Show the black BACK cover:
   rotate the cover 180deg so the `cover-back` face is front-facing. */
.ai-close--closed .home-notebook__cover {
    transform: translateX(-50%) rotateY(180deg) !important;
    transform-style: preserve-3d;
    backface-visibility: visible !important;
}

/* Make the back face leather-black for this transition */
.ai-close--closed .home-notebook__cover-back {
    position: relative;
    background:
        radial-gradient(140% 110% at 20% 18%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.05) 34%, rgba(255,255,255,0.00) 64%),
        radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,0.00) 52%, rgba(0,0,0,0.28) 100%),
        repeating-linear-gradient(
            12deg,
            rgba(255,255,255,0.08) 0px,
            rgba(255,255,255,0.08) 1px,
            rgba(0,0,0,0.00) 7px,
            rgba(0,0,0,0.00) 14px
        ),
        repeating-radial-gradient(circle at 30% 30%,
            rgba(255,255,255,0.10) 0px,
            rgba(255,255,255,0.10) 1.2px,
            rgba(0,0,0,0.00) 2.6px,
            rgba(0,0,0,0.00) 6.5px
        ),
        linear-gradient(180deg, #17151b 0%, #050506 100%);
    background-blend-mode: screen, multiply, overlay, overlay, normal;
    box-shadow:
        0 34px 110px rgba(0,0,0,0.62),
        0 14px 32px rgba(0,0,0,0.26),
        inset 0 0 0 2px rgba(255,255,255,0.08),
        inset 0 20px 34px rgba(255,255,255,0.035),
        inset 0 -18px 28px rgba(0,0,0,0.38);
    filter: contrast(1.18) saturate(1.08);
    backface-visibility: visible !important;
}

/* Back-cover title (render as real element for reliability) */
.ai-close--closed .ai-back-title {
    display: block !important;
    position: absolute;
    left: 50%;
    /* Start centered on the closed book */
    top: calc(var(--bookTop) + (var(--bookH) / 2)) !important;
    bottom: auto !important;
    transform:
        translate(-50%, -50%)
        translateX(var(--aiTitleShiftX, 0px))
        translateY(var(--aiTitleShiftY, 0px))
        scale(var(--aiTitleScale, 1))
        translateZ(3px);
    transform-origin: center;
    /* Size to the text itself (important for exact rect matching) */
    width: max-content;
    max-width: calc(100vw - 40px);
    text-align: center;
    font-family: 'Bradley Hand', 'Noteworthy', 'Marker Felt', 'Chalkboard SE', 'Segoe Script', 'Brush Script MT', cursive;
    font-weight: 900;
    letter-spacing: 0.8px;
    font-size: clamp(28px, 3.8vw, 56px);
    color: rgba(245,245,245,0.96);
    background: none !important;
    -webkit-text-fill-color: currentColor;
    text-shadow:
        0 -1px 0 rgba(255,255,255,0.18),
        0 1px 0 rgba(255,255,255,0.08),
        0 10px 22px rgba(0,0,0,0.62);
    pointer-events: none;
    white-space: nowrap;
    z-index: 9999;
    transition: transform 900ms cubic-bezier(.2,.9,.2,1);
    will-change: transform;
}

/* Marker class only; JS updates --aiTitleShiftY to the exact target. */
.ai-close--closed .ai-back-title.is-rising { transition-property: transform; }

/* Matrix-ish morph styling */
.ai-close--closed .ai-back-title.is-matrix {
    animation: matrixFlicker 0.9s steps(2) infinite;
    /* IMPORTANT: remove handwritten tracking so it matches infobox headline exactly */
    letter-spacing: 0 !important;
}

.ai-universe-page h1.matrix-headline {
    position: relative;
    filter: saturate(1.15) contrast(1.05);
    animation: matrixGlow 2.2s ease-in-out infinite alternate;
    /* Match the moving title exactly (no extra tracking) */
    letter-spacing: 0 !important;
    font-size: clamp(28px, 3.8vw, 56px) !important;
    line-height: 1.05;
}

.ai-close--closed .ai-back-title .matrix-char,
.ai-universe-page h1.matrix-headline .matrix-char {
    display: inline-block;
    /* Try to evoke the MATRIX title font (serif + sharp contrast).
       If you want the exact font, we can add a real font file via @font-face. */
    font-family: "Copperplate", "Copperplate Gothic Light", "Palatino Linotype", Palatino, "Times New Roman", Times, serif !important;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #00ff66 !important;
    text-shadow:
        0 0 10px rgba(0, 255, 102, 0.55),
        0 0 22px rgba(0, 255, 102, 0.35),
        0 0 46px rgba(0, 255, 102, 0.20) !important;
    /* Subtle crisp edge like the logo */
    -webkit-text-stroke: 0.35px rgba(220, 255, 235, 0.25);
}

/* Spaces as spans so spacing is consistent during handoff */
.ai-close--closed .ai-back-title .matrix-space,
.ai-universe-page h1.matrix-headline .matrix-space {
    display: inline-block;
    font-family: "Copperplate", "Copperplate Gothic Light", "Palatino Linotype", Palatino, "Times New Roman", Times, serif !important;
    font-weight: 600;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    color: transparent;
    text-shadow: none;
    -webkit-text-stroke: 0;
}

/* "Rain drop" feel: active characters fall into place with a faint trail */
.ai-close--closed .ai-back-title .matrix-char.matrix-drop,
.ai-universe-page h1.matrix-headline .matrix-char.matrix-drop {
    animation: matrixRainDrop 180ms cubic-bezier(.15,.9,.25,1) forwards;
    text-shadow:
        0 0 10px rgba(0, 255, 102, 0.55),
        0 0 22px rgba(0, 255, 102, 0.35),
        0 0 46px rgba(0, 255, 102, 0.20),
        0 -10px 0 rgba(0,255,102,0.10),
        0 -18px 0 rgba(0,255,102,0.06),
        0 -26px 0 rgba(0,255,102,0.03);
}

@keyframes matrixRainDrop {
    0%   { transform: translateY(-1.05em); filter: blur(1.1px); opacity: 0.25; }
    55%  { opacity: 1; }
    100% { transform: translateY(0em); filter: blur(0px); opacity: 1; }
}

.ai-universe-page h1.matrix-headline::after {
    content: '';
    position: absolute;
    inset: -8px -10px;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            180deg,
            rgba(0,0,0,0.00) 0px,
            rgba(0,0,0,0.00) 3px,
            rgba(0,255,102,0.06) 4px,
            rgba(0,0,0,0.00) 6px
        );
    mix-blend-mode: screen;
    opacity: 0.65;
}

@keyframes matrixGlow {
    0% { text-shadow: 0 0 10px rgba(0,255,102,0.55), 0 0 22px rgba(0,255,102,0.30), 0 0 46px rgba(0,255,102,0.18); }
    100% { text-shadow: 0 0 14px rgba(0,255,102,0.75), 0 0 30px rgba(0,255,102,0.45), 0 0 64px rgba(0,255,102,0.26); }
}

@keyframes matrixFlicker {
    0% { opacity: 1; }
    48% { opacity: 0.92; }
    50% { opacity: 0.55; }
    52% { opacity: 0.98; }
    100% { opacity: 1; }
}

/* Remove spine/page-edge hints (front-cover details) when showing the back */
.ai-close--closed .home-notebook__cover::before,
.ai-close--closed .home-notebook__cover::after {
    display: none !important;
    content: none !important;
}
.ai-close-transition.is-sliding .ai-close--closed .home-notebook {
    animation: aiShiftToCenter 650ms cubic-bezier(.22,.95,.18,1) forwards;
    will-change: transform;
}
@keyframes aiShiftToCenter {
    from { transform: translateX(calc(var(--bookW) / 2)) scaleX(-1); }
    to   { transform: translateX(0px) scaleX(-1); }
}

/* OM MIG <-> KONTAKT transitions (reuse same flip movement, keep page designs) */
.about-contact-transition,
.contact-about-transition {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: auto;
    background: #f5f5f0;
    opacity: 0;
    transition: opacity 120ms linear;
}
.about-contact-transition.is-preloading,
.contact-about-transition.is-preloading {
    /* Keep in DOM so iframes can load, but never block clicks or show */
    opacity: 0 !important;
    pointer-events: none !important;
}
.about-contact-transition.is-ready,
.contact-about-transition.is-ready { opacity: 1; }

body.about-contact-flip-active > :not(.about-contact-transition):not(.navbar),
body.contact-about-flip-active > :not(.contact-about-transition):not(.navbar) {
    opacity: 0;
    pointer-events: none;
}

.about-contact-turn,
.contact-about-turn {
    position: absolute;
    inset: 0;
    perspective: 1400px;
    overflow: hidden;
}

.about-contact-turn__under,
.contact-about-turn__under {
    position: absolute;
    top: 0;
    height: 100vh;
    width: 50vw;
    overflow: hidden;
    background: #f5f5f0;
}
.about-contact-turn__under--left,
.contact-about-turn__under--left { left: 0; }
.about-contact-turn__under--right,
.contact-about-turn__under--right { right: 0; }

.about-contact-turn__frame,
.contact-about-turn__frame {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100vw;
    border: 0;
    background: transparent;
    pointer-events: none;
    opacity: 1;
}
.about-contact-turn__frame--left,
.contact-about-turn__frame--left { left: 0; }
.about-contact-turn__frame--right,
.contact-about-turn__frame--right { left: -50vw; }

/* Under-iframe visibility control */
.about-contact-turn__under-frame--contact,
.contact-about-turn__under-frame--about { display: none; }
.about-contact-turn__under-frame--about,
.contact-about-turn__under-frame--contact { display: block; }

.about-contact-transition.swap-under-right .about-contact-turn__under--right .about-contact-turn__under-frame--about { display: none; }
.about-contact-transition.swap-under-right .about-contact-turn__under--right .about-contact-turn__under-frame--contact { display: block; }
.about-contact-transition.swap-under-left .about-contact-turn__under--left .about-contact-turn__under-frame--about { display: none; }
.about-contact-transition.swap-under-left .about-contact-turn__under--left .about-contact-turn__under-frame--contact { display: block; }

.contact-about-transition.swap-under-left .contact-about-turn__under--left .contact-about-turn__under-frame--contact { display: none; }
.contact-about-transition.swap-under-left .contact-about-turn__under--left .contact-about-turn__under-frame--about { display: block; }
.contact-about-transition.swap-under-right .contact-about-turn__under--right .contact-about-turn__under-frame--contact { display: none; }
.contact-about-transition.swap-under-right .contact-about-turn__under--right .contact-about-turn__under-frame--about { display: block; }

/* Kontakt -> Om mig: swap the FLIPPING page content at mid (50%) */
.contact-about-turn__flip-front--about { display: none; }
.contact-about-turn__flip-front--contact { display: block; }
.contact-about-transition.swap-flip-mid .contact-about-turn__flip-front--about { display: block; }
.contact-about-transition.swap-flip-mid .contact-about-turn__flip-front--contact { display: none; }

/* Right page flips to left (Om mig -> Kontakt) */
.about-contact-turn__flip {
    position: absolute;
    top: 0;
    left: 50vw;
    width: 50vw;
    height: 100vh;
    overflow: hidden;
    transform-style: preserve-3d;
    transform-origin: 0% 50%;
    z-index: 5;
    opacity: 0; /* keep pages visible until flip starts */
}
.about-contact-transition.is-turning .about-contact-turn__flip { opacity: 1; }
.about-contact-transition.is-turning .about-contact-turn__flip {
    animation: pageRightToLeft var(--pageFlipMs) var(--pageFlipEase) forwards;
    will-change: transform;
}
@keyframes pageRightToLeft {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(-180deg); }
}

/* Left page flips to right (Kontakt -> Om mig) */
.contact-about-turn__flip {
    position: absolute;
    top: 0;
    left: 0;
    width: 50vw;
    height: 100vh;
    overflow: hidden;
    transform-style: preserve-3d;
    transform-origin: 100% 50%;
    z-index: 5;
    opacity: 0;
}
.contact-about-transition.is-turning .contact-about-turn__flip { opacity: 1; }
.contact-about-transition.is-turning .contact-about-turn__flip {
    animation: pageLeftToRight var(--pageFlipMs) var(--pageFlipEase) forwards;
    will-change: transform;
}
@keyframes pageLeftToRight {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(180deg); }
}

/* Flip faces */
.about-contact-turn__flip-face,
.contact-about-turn__flip-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* iFrame backface fix (Kontakt -> Om mig):
   Some browsers keep iframes visible even when the parent face is backfacing,
   which can look like the right page is mirrored during the flip.
   Force iframe elements themselves to respect backface visibility. */
.contact-about-turn__flip iframe {
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform: translateZ(0.5px);
}
.about-contact-turn__flip iframe {
    /* Default: keep front-face iframe from leaking while backfacing. */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    transform: translateZ(0.5px);
}
.about-contact-turn__flip-face--front {
    transform: translateZ(2px);
    transform-origin: 50% 50%;
}
.about-contact-turn__flip-face--back {
    transform: rotateY(180deg) translateZ(2px);
    transform-origin: 50% 50%;
    /* Safari: allow this face to paint when it becomes front-facing */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

/* Om mig -> Kontakt: force a deterministic visible-face swap at mid (50%),
   so the turning sheet shows Kontakt LEFT after the seam. */
.about-contact-turn__flip-face--back { opacity: 0; }
.about-contact-transition.swap-flip-mid .about-contact-turn__flip-face--back { opacity: 1; }
.about-contact-transition.swap-flip-mid .about-contact-turn__flip-face--front { opacity: 0; }

/* Om mig -> Kontakt: also swap the FRONT iframe at mid.
   This fixes browsers that "leak" the front iframe while it is backfacing,
   which otherwise can show a mirrored Om mig page during the second half. */
.about-contact-transition .about-contact-turn__flip-front--contact {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
.about-contact-transition .about-contact-turn__flip-front--about {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.about-contact-transition.swap-flip-mid .about-contact-turn__flip-front--contact {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.about-contact-transition.swap-flip-mid .about-contact-turn__flip-front--about {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* After the middle: allow Safari to paint the Kontakt backface iframe */
/* Only the BACK face iframe should be allowed to paint (prevents any early Kontakt). */
.about-contact-turn__flip-face--front iframe {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.about-contact-turn__flip-face--back iframe {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

/* Extra safety: keep the back iframe hidden until mid (prevents early Kontakt flashes). */
.about-contact-turn__flip-back { opacity: 0; }
.about-contact-transition.swap-flip-mid .about-contact-turn__flip-back { opacity: 1; }

.contact-about-turn__flip-face--front {
    /* Keep Kontakt readable on the front face */
    transform: translateZ(2px);
    transform-origin: 50% 50%;
}
.contact-about-turn__flip-face--back {
    transform: rotateY(180deg) translateZ(2px);
    transform-origin: 50% 50%;
}

/* Kontakt -> Om mig:
   Only mirror ONCE Om mig is visible (after mid).
   Also adjust cropping so we still show the RIGHT page (about.html right half). */
.contact-about-transition.swap-flip-mid .contact-about-turn__flip-front--about,
.contact-about-transition .contact-about-turn__flip-back {
    left: 0 !important; /* show left half, then mirror to display original right half */
    transform: translateZ(0.6px) scaleX(-1);
    transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: reduce) {
    .about-contact-transition.is-turning .about-contact-turn__flip,
    .contact-about-transition.is-turning .contact-about-turn__flip {
        animation: none !important;
        transform: rotateY(180deg);
    }
}

/* PROJEKTER -> KONTAKT (double flip with "Om mig" hint) */
.projects-contact-transition {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: auto;
    background: #f5f5f0;
    opacity: 0;
    transition: opacity 120ms linear;
}
.projects-contact-transition.is-ready { opacity: 1; }

body.projects-contact-flip-active > :not(.projects-contact-transition):not(.navbar) {
    opacity: 0;
    pointer-events: none;
}

/* PROJEKTER -> KONTAKT (MENU): double flip via Om mig */
.projects-contact-double-transition {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: auto;
    background: #f5f5f0;
    /* Speed up ONLY the double-flip transition (Projekter -> Kontakt via Om mig) */
    --pageFlipMs: 1800ms;
    opacity: 0;
    transition: opacity 120ms linear;
}
.projects-contact-double-transition.is-preloading {
    /* Keep in DOM so iframes can load, but never block clicks or show */
    opacity: 0 !important;
    pointer-events: none !important;
}
.projects-contact-double-transition.is-ready { opacity: 1; }
body.projects-contact-double-active > :not(.projects-contact-double-transition):not(.navbar) {
    opacity: 0;
    pointer-events: none;
}

.projects-contact-double-transition .pcd-turn {
    position: absolute;
    inset: 0;
    perspective: 1400px;
    overflow: hidden;
}
.projects-contact-double-transition .pcd-under {
    position: absolute;
    top: 0;
    height: 100vh;
    width: 50vw;
    overflow: hidden;
    background: #f5f5f0;
}
.projects-contact-double-transition .pcd-under--left { left: 0; }
.projects-contact-double-transition .pcd-under--right { right: 0; }

.projects-contact-double-transition .pcd-frame {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100vw;
    border: 0;
    background: transparent;
    pointer-events: none;
}
.projects-contact-double-transition .pcd-frame--left { left: 0; }
.projects-contact-double-transition .pcd-frame--right { left: -50vw; }

/* Under-page visibility
   Stage 1 starts as Projekter spread, then reveals Om mig underneath.
   Stage 2 starts as Om mig spread, then reveals Kontakt underneath. */
.projects-contact-double-transition .pcd-under-frame { display: none; }

/* Stage 1 (start): both pages are Projekter */
.projects-contact-double-transition.stage-1 .pcd-under-left--projects,
.projects-contact-double-transition.stage-1 .pcd-under-right--projects { display: block; }

/* Stage 1: reveal Om mig RIGHT underneath as soon as turning starts */
.projects-contact-double-transition.stage-1.swap1-under-right .pcd-under-right--projects { display: none; }
.projects-contact-double-transition.stage-1.swap1-under-right .pcd-under-right--about { display: block; }

/* Stage 2 (start): show Om mig spread underneath */
.projects-contact-double-transition.stage-2 .pcd-under-left--about,
.projects-contact-double-transition.stage-2 .pcd-under-right--about { display: block; }

/* Stage 2: reveal Kontakt RIGHT underneath as soon as turning starts */
.projects-contact-double-transition.stage-2.swap2-under-right .pcd-under-right--about { display: none; }
.projects-contact-double-transition.stage-2.swap2-under-right .pcd-under-right--contact { display: block; }

.projects-contact-double-transition .pcd-flip {
    position: absolute;
    top: 0;
    left: 50vw;
    width: 50vw;
    height: 100vh;
    overflow: hidden;
    transform-style: preserve-3d;
    transform-origin: 0% 50%;
    z-index: 6;
    opacity: 0;
    background: #f5f5f0;
    display: none;
}
.projects-contact-double-transition.is-turning-1 .pcd-flip--1,
.projects-contact-double-transition.is-turning-2 .pcd-flip--2 {
    display: block;
    opacity: 1;
    animation: pageRightToLeft var(--pageFlipMs) var(--pageFlipEase) forwards;
    will-change: transform;
}

.projects-contact-double-transition .pcd-flip-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
}
.projects-contact-double-transition .pcd-flip-face--front { transform: translateZ(0.6px); }
.projects-contact-double-transition .pcd-flip-face--back {
    transform: rotateY(180deg) translateZ(0.6px);
    opacity: 0;
    /* Safari/WebKit: allow this face to paint when it becomes front-facing */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

/* Flip #1: Projekter -> Om mig (swap on turning sheet at mid) */
.projects-contact-double-transition .pcd-flip1-front--about { display: none !important; }
.projects-contact-double-transition .pcd-flip1-front--projects { display: block; }
.projects-contact-double-transition.swap1-mid .pcd-flip--1 .pcd-flip-face--back { opacity: 1; }

/* Flip #2: Om mig -> Kontakt (swap on turning sheet at mid) */
.projects-contact-double-transition .pcd-flip2-front--contact { display: none; }
.projects-contact-double-transition .pcd-flip2-front--about { display: block; }
.projects-contact-double-transition.swap2-mid .pcd-flip2-front--contact { display: block; }
.projects-contact-double-transition.swap2-mid .pcd-flip2-front--about { display: none; }
.projects-contact-double-transition.swap2-mid .pcd-flip--2 .pcd-flip-face--back { opacity: 1; }

/* Flip #2 (CV -> Kontakt): keep CV (Om mig right) readable (NOT mirrored) before mid.
   Cropping to the right page is already handled by `.pcd-frame--right` (left:-50vw). */

/* Mirror "Om mig" LEFT page on the TURNING sheet (after mid on flip #1) */
.projects-contact-double-transition.is-turning-1.swap1-mid .pcd-flip1-back--about {
    /* In the 2nd half we are showing the BACK face (rotateY(180deg)),
       which is already mirrored by the 3D flip. So do NOT apply an extra scaleX(-1),
       otherwise it cancels the mirror and looks un-mirrored. */
    left: 0 !important;
    transform: translateZ(0.6px) !important;
    transform-origin: 50% 50% !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Prevent early backface/iframe paint leaks (some browsers can show back iframes too early) */
.projects-contact-double-transition .pcd-flip-back { opacity: 0; }
.projects-contact-double-transition.swap1-mid .pcd-flip--1 .pcd-flip-face--back { opacity: 1; }
.projects-contact-double-transition.swap1-mid .pcd-flip--1 .pcd-flip1-back--about { opacity: 1; }
.projects-contact-double-transition.swap2-mid .pcd-flip--2 .pcd-flip-face--back { opacity: 1; }
.projects-contact-double-transition.swap2-mid .pcd-flip--2 .pcd-flip2-back--contact { opacity: 1; }

/* (reverted) no container-wide mirroring on backfaces */

/* Allow Safari to paint the backface iframe once it becomes front-facing */
.projects-contact-double-transition .pcd-flip-face--front iframe {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.projects-contact-double-transition .pcd-flip-face--back iframe {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

/* PROJEKTER -> KONTAKT (single right-page flip) */
.projects-contact-turn {
    position: absolute;
    inset: 0;
    perspective: 1400px;
    overflow: hidden;
}

.projects-contact-turn__under {
    position: absolute;
    top: 0;
    height: 100vh;
    width: 50vw;
    overflow: hidden;
    background: #f5f5f0;
}
.projects-contact-turn__under--left { left: 0; }
.projects-contact-turn__under--right { right: 0; }

.projects-contact-turn__frame {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100vw;
    border: 0;
    background: transparent;
    pointer-events: none;
}
.projects-contact-turn__frame--left { left: 0; }
.projects-contact-turn__frame--right { left: -50vw; }

/* Keep Projekter visible during the whole transition.
   Only gate Kontakt iframes to avoid a "wrong page" flash. */
.projects-contact-transition .projects-contact-turn__page--contact {
    opacity: 0;
    transition: none;
}
.projects-contact-transition .projects-contact-turn__page--contact.is-loaded { opacity: 1; }

/* Under pages:
   - left stays Projekter (until the turning sheet covers it)
   - right swaps to Kontakt immediately when turning starts */
.projects-contact-transition .projects-contact-turn__under-frame--projects { display: block; }
.projects-contact-transition .projects-contact-turn__under-frame--contact { display: none; }
.projects-contact-transition.swap-under-left
  .projects-contact-turn__under--left
  .projects-contact-turn__under-frame--projects { display: none; }
.projects-contact-transition.swap-under-left
  .projects-contact-turn__under--left
  .projects-contact-turn__under-frame--contact { display: block; }
.projects-contact-transition.swap-under-right
  .projects-contact-turn__under--right
  .projects-contact-turn__under-frame--projects { display: none; }
.projects-contact-transition.swap-under-right
  .projects-contact-turn__under--right
  .projects-contact-turn__under-frame--contact { display: block; }

.projects-contact-turn__flip {
    position: absolute;
    top: 0;
    left: 50vw;
    width: 50vw;
    height: 100vh;
    overflow: hidden;
    transform-style: preserve-3d;
    transform-origin: 0% 50%;
    z-index: 6;
    opacity: 0; /* keep spread visible until turning starts */
    background: #f5f5f0;
}

.projects-contact-transition.is-turning .projects-contact-turn__flip {
    opacity: 1;
    animation: pageRightToLeft var(--pageFlipMs) var(--pageFlipEase) forwards;
    will-change: transform;
}

.projects-contact-turn__flip-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}
.projects-contact-turn__flip-face--front {
    transform: translateZ(0.6px);
}
.projects-contact-turn__flip-face--back {
    transform: rotateY(180deg) translateZ(0.6px);
    /* Some browsers can "leak" iframe backfaces; keep it fully hidden until seam swap. */
    opacity: 0;
}

/* Projekter -> Kontakt: swap design on the FLIPPING page */
/* Default (first half): MUST show Projekter-right on the turning sheet */
.projects-contact-transition .projects-contact-turn__flip-front--contact {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
.projects-contact-transition .projects-contact-turn__flip-front--projects {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* After seam (second half): show Kontakt-left on the turning sheet */
.projects-contact-transition.swap-flip-mid .projects-contact-turn__flip-front--contact {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.projects-contact-transition.swap-flip-mid .projects-contact-turn__flip-front--projects {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Reveal the backface only after mid (prevents early Kontakt flashes). */
.projects-contact-transition.swap-flip-mid .projects-contact-turn__flip-face--back { opacity: 1; }

/* Extra safety: keep the backface iframe invisible until mid. */
.projects-contact-turn__flip-back { opacity: 0; }
.projects-contact-transition.swap-flip-mid .projects-contact-turn__flip-back { opacity: 1; }

/* iFrame 3D/backface stability */
.projects-contact-turn__flip iframe {
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform: translateZ(0.5px);
}

.pc-turn {
    position: absolute;
    inset: 0;
    perspective: 1400px;
    overflow: hidden;
}

.pc-under {
    position: absolute;
    top: 0;
    height: 100vh;
    width: 50vw;
    overflow: hidden;
    background: #f5f5f0;
}
.pc-under--left { left: 0; }
.pc-under--right { right: 0; }

.pc-frame {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100vw;
    border: 0;
    background: transparent;
    pointer-events: none;
    opacity: 1;
}
.pc-frame--left { left: 0; }
.pc-frame--right { left: -50vw; }

/* Prevent brief wrong paint while iframe loads */
.projects-contact-transition .pc-frame {
    opacity: 0;
    transition: none;
}
.projects-contact-transition .pc-frame.is-loaded { opacity: 1; }

/* Stage visibility */
.projects-contact-transition .pc-under-frame--projects,
.projects-contact-transition .pc-under-frame--about,
.projects-contact-transition .pc-under-frame--contact { display: none; }

.projects-contact-transition.pc-stage-projects .pc-under-frame--projects { display: block; }
.projects-contact-transition.pc-stage-about .pc-under-frame--about { display: block; }
.projects-contact-transition.pc-stage-contact .pc-under-frame--contact { display: block; }

/* Side swaps for flip 1 (to About) */
.projects-contact-transition.swap-right-to-about .pc-under--right .pc-under-frame--projects { display: none; }
.projects-contact-transition.swap-right-to-about .pc-under--right .pc-under-frame--about { display: block; }
.projects-contact-transition.swap-left-to-about .pc-under--left .pc-under-frame--projects { display: none; }
.projects-contact-transition.swap-left-to-about .pc-under--left .pc-under-frame--about { display: block; }

/* Side swaps for flip 2 (to Contact) */
.projects-contact-transition.swap-right-to-contact .pc-under--right .pc-under-frame--about { display: none; }
.projects-contact-transition.swap-right-to-contact .pc-under--right .pc-under-frame--contact { display: block; }
.projects-contact-transition.swap-left-to-contact .pc-under--left .pc-under-frame--about { display: none; }
.projects-contact-transition.swap-left-to-contact .pc-under--left .pc-under-frame--contact { display: block; }

/* Flip sheets (right page -> left) */
.pc-flip {
    position: absolute;
    top: 0;
    left: 50vw;
    width: 50vw;
    height: 100vh;
    overflow: hidden;
    transform-style: preserve-3d;
    transform-origin: 0% 50%;
    z-index: 5;
    opacity: 0; /* keep spread visible until turning starts */
    background: #f5f5f0;
}
.pc-flip--two { z-index: 6; }

/* Mirror ONLY the design/content on the flipping sheets (not the motion) */
.pc-flip__content {
    position: absolute;
    inset: 0;
    overflow: hidden;
    transform: scaleX(-1);
    transform-origin: 50% 50%;
}

.projects-contact-transition.turning1 .pc-flip--one {
    opacity: 1;
    animation: pcRightToLeft 1200ms cubic-bezier(.18,.85,.22,1) forwards;
    will-change: transform;
}
.projects-contact-transition.turning2 .pc-flip--two {
    opacity: 1;
    animation: pcRightToLeft 1200ms cubic-bezier(.18,.85,.22,1) forwards;
    will-change: transform;
}

@keyframes pcRightToLeft {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(-180deg); }
}

/* KONTAKT -> PROJEKTER (double flip with "Om mig" hint) */
.contact-projects-transition {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: auto;
    background: #f5f5f0;
    --pageFlipMs: 1800ms;
    --pageFlipEase: cubic-bezier(.18,.85,.22,1);
    opacity: 0;
    transition: opacity 120ms linear;
}
.contact-projects-transition.is-ready { opacity: 1; }

body.contact-projects-flip-active > :not(.contact-projects-transition):not(.navbar) {
    opacity: 0;
    pointer-events: none;
}

/* Keep navbar visible but non-interactive during transitions */
body.projects-about-flip-active .navbar,
body.about-projects-flip-active .navbar,
body.about-contact-flip-active .navbar,
body.contact-about-flip-active .navbar,
body.projects-contact-flip-active .navbar,
body.projects-contact-double-active .navbar,
body.contact-projects-flip-active .navbar,
body.ai-close-active .navbar {
    pointer-events: none;
}

.cp-turn {
    position: absolute;
    inset: 0;
    perspective: 1400px;
    overflow: hidden;
}

.cp-under {
    position: absolute;
    top: 0;
    height: 100vh;
    width: 50vw;
    overflow: hidden;
    /* Always show correct sketchbook paper even before iframes paint */
    background: #f5f5f0;
}
.cp-under--left { left: 0; }
.cp-under--right { right: 0; }

/* Match `body.sketchbook-theme::before` / `::after` paper look */
.cp-under--left {
    background:
        linear-gradient(transparent 0px, transparent 23px, #d0d0d0 23px, #d0d0d0 24px, transparent 24px),
        linear-gradient(transparent 0px, transparent 25px, #e0e0e0 25px, #e0e0e0 26px, transparent 26px),
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.1) 0%, transparent 50%),
        #f5f5f0;
    background-size: 100% 25px, 100% 25px, 100% 100%, 100% 100%;
}
.cp-under--right {
    background:
        linear-gradient(transparent 0px, transparent 24px, #d5d5d5 24px, #d5d5d5 25px, transparent 25px),
        linear-gradient(transparent 0px, transparent 26px, #e0e0e0 26px, #e0e0e0 27px, transparent 27px),
        radial-gradient(circle at 80% 80%, rgba(0,0,0,0.02) 0%, transparent 50%),
        #f5f5f0;
    background-size: 100% 25px, 100% 25px, 100% 100%, 100% 100%;
}

.cp-frame {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100vw;
    border: 0;
    background: transparent;
    pointer-events: none;
    opacity: 1;
}
.cp-frame--left { left: 0; }
.cp-frame--right { left: -50vw; }

/* Prevent brief wrong paint while iframe loads */
.contact-projects-transition .cp-frame {
    opacity: 0;
    transition: none;
}
.contact-projects-transition .cp-frame.is-loaded { opacity: 1; }

/* Stage visibility */
.contact-projects-transition .cp-under-frame--contact,
.contact-projects-transition .cp-under-frame--about,
.contact-projects-transition .cp-under-frame--projects { display: none; }
.contact-projects-transition.cp-stage-contact .cp-under-frame--contact { display: block; }
.contact-projects-transition.cp-stage-about .cp-under-frame--about { display: block; }
.contact-projects-transition.cp-stage-projects .cp-under-frame--projects { display: block; }

/* Side swaps for flip 1 (to About) */
.contact-projects-transition.swap-left-to-about .cp-under--left .cp-under-frame--contact { display: none; }
.contact-projects-transition.swap-left-to-about .cp-under--left .cp-under-frame--about { display: block; }
.contact-projects-transition.swap-right-to-about .cp-under--right .cp-under-frame--contact { display: none; }
.contact-projects-transition.swap-right-to-about .cp-under--right .cp-under-frame--about { display: block; }

/* Side swaps for flip 2 (to Projects) */
.contact-projects-transition.swap-left-to-projects .cp-under--left .cp-under-frame--about { display: none; }
.contact-projects-transition.swap-left-to-projects .cp-under--left .cp-under-frame--projects { display: block; }
.contact-projects-transition.swap-right-to-projects .cp-under--right .cp-under-frame--about { display: none; }
.contact-projects-transition.swap-right-to-projects .cp-under--right .cp-under-frame--projects { display: block; }

/* Flip sheets (left page -> right) */
.cp-flip {
    position: absolute;
    top: 0;
    left: 0;
    width: 50vw;
    height: 100vh;
    overflow: hidden;
    transform-style: preserve-3d;
    transform-origin: 100% 50%;
    z-index: 5;
    opacity: 0;
    /* Paper fallback (prevents wrong-design flash on the turning sheet) */
    background:
        linear-gradient(transparent 0px, transparent 23px, #d0d0d0 23px, #d0d0d0 24px, transparent 24px),
        linear-gradient(transparent 0px, transparent 25px, #e0e0e0 25px, #e0e0e0 26px, transparent 26px),
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.1) 0%, transparent 50%),
        #f5f5f0;
    background-size: 100% 25px, 100% 25px, 100% 100%, 100% 100%;
}
.cp-flip--two { z-index: 6; }

/* Turning sheet content layers (we swap designs at the seam) */
.cp-flip__content {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 1;
    transition: none;
}

/* Mirror ONLY the design/content on the flipping sheets (not the motion) */
.cp-flip__content--mirrored {
    /* Mirror inside the 50vw page, while keeping the correct half cropped */
    transform: translateX(50vw) scaleX(-1);
    transform-origin: 0% 50%;
}

/* Keep both layer iframes "alive" (no display:none) so Projects can render
   lines/circles before it becomes visible on the turning sheet. */
.contact-projects-transition .cp-flip--one .cp-flip__content--mirrored { opacity: 0; }
.contact-projects-transition .cp-flip--two .cp-flip__content--mirrored { opacity: 0; }

/* Flip 1 seam: Kontakt LEFT -> Om mig RIGHT */
.contact-projects-transition.cp-swap1-mid .cp-flip--one .cp-flip__content--normal { opacity: 0; }
.contact-projects-transition.cp-swap1-mid .cp-flip--one .cp-flip__content--mirrored { opacity: 1; }

/* Flip 2 seam: Om mig LEFT -> Projekter RIGHT */
.contact-projects-transition.cp-swap2-mid .cp-flip--two .cp-flip__content--normal { opacity: 0; }
.contact-projects-transition.cp-swap2-mid .cp-flip--two .cp-flip__content--mirrored { opacity: 1; }

/* Kontakt -> Projekter: let the 3D turn create the natural "mirrored" backside.
   (Extra scaleX(-1) cancels the mirror when the page reaches 180deg.) */

.contact-projects-transition.turning1 .cp-flip--one {
    opacity: 1;
    animation: cpLeftToRight var(--pageFlipMs) var(--pageFlipEase, cubic-bezier(.18,.85,.22,1)) forwards;
    will-change: transform;
}
.contact-projects-transition.turning2 .cp-flip--two {
    opacity: 1;
    animation: cpLeftToRight var(--pageFlipMs) var(--pageFlipEase, cubic-bezier(.18,.85,.22,1)) forwards;
    will-change: transform;
}

@keyframes cpLeftToRight {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(180deg); }
}

.about-projects-turn {
    position: absolute;
    inset: 0;
    perspective: 1400px;
    overflow: hidden;
}

.about-projects-turn__under {
    position: absolute;
    top: 0;
    height: 100vh;
    width: 50vw;
    overflow: hidden;
    /* Never show blank while iframes load */
    background: #f5f5f0;
}
.about-projects-turn__under--left { left: 0; }
.about-projects-turn__under--right { right: 0; }

.about-projects-turn__under--left {
    /* Same as `body.sketchbook-theme::before` (left page) */
    background:
        linear-gradient(transparent 0px, transparent 23px, #d0d0d0 23px, #d0d0d0 24px, transparent 24px),
        linear-gradient(transparent 0px, transparent 25px, #e0e0e0 25px, #e0e0e0 26px, transparent 26px),
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.1) 0%, transparent 50%),
        #f5f5f0;
    background-size: 100% 25px, 100% 25px, 100% 100%, 100% 100%;
}
.about-projects-turn__under--right {
    /* Same as `body.sketchbook-theme::after` (right page) */
    background:
        linear-gradient(transparent 0px, transparent 24px, #d5d5d5 24px, #d5d5d5 25px, transparent 25px),
        linear-gradient(transparent 0px, transparent 26px, #e0e0e0 26px, #e0e0e0 27px, transparent 27px),
        radial-gradient(circle at 80% 80%, rgba(0,0,0,0.02) 0%, transparent 50%),
        #f5f5f0;
    background-size: 100% 25px, 100% 25px, 100% 100%, 100% 100%;
}

.about-projects-turn__frame {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100vw;
    border: 0;
    background: transparent;
    pointer-events: none;
    /* Show Om mig pages immediately (no blank screen) */
    opacity: 1;
}

/* Under-pages: keep OM MIG visible until Projekter-left is ready (prevents split-second blanks) */
.about-projects-turn__under-frame--projects,
.about-projects-turn__under-frame--about {
    display: block;
    opacity: 0;
    transition: opacity 80ms linear;
}
.about-projects-turn__under-frame--about {
    opacity: 1;
    z-index: 1;
}
.about-projects-turn__under-frame--projects {
    z-index: 2;
}

/* Start swapping to Projekter-left under-page once flip begins (swap-under-left),
   but only hide Om mig when the Projekter-left iframe has loaded (swap-under-left-ready). */
.about-projects-transition.swap-under-left .about-projects-turn__under--left .about-projects-turn__under-frame--projects.is-loaded { opacity: 1; }
.about-projects-transition.swap-under-left.swap-under-left-ready .about-projects-turn__under--left .about-projects-turn__under-frame--about { opacity: 0; }

/* If Projekter iframes are still loading, keep paper visible (no blank flash). */
.about-projects-transition .about-projects-turn__under-frame--projects,
.about-projects-transition .about-projects-turn__flip-front--projects,
.about-projects-transition .about-projects-turn__flip-face--back iframe {
    opacity: 0;
    transition: opacity 80ms linear;
}
.about-projects-transition .about-projects-turn__under-frame--projects.is-loaded,
.about-projects-transition .about-projects-turn__flip-front--projects.is-loaded,
.about-projects-transition .about-projects-turn__flip-face--back iframe.is-loaded {
    opacity: 1;
}

/* Menu-click safety: once we are actually swapping to Projekter, never keep it hidden.
   This prevents "still showing Om mig" / "blank 2nd half" if an iframe missed `is-loaded`. */
.about-projects-transition.swap-under-left .about-projects-turn__under-frame--projects { opacity: 1; }
.about-projects-transition.swap-flip-mid .about-projects-turn__flip-front--projects { opacity: 1; }
.about-projects-transition.swap-flip-mid .about-projects-turn__flip-face--front .about-projects-turn__flip-front--projects { opacity: 1; }

/* Om mig -> Projekter: show the Projekter RIGHT page on the flipping sheet */
.about-projects-transition.is-turning .about-projects-turn__flip-front--projects,
.about-projects-transition.is-turning .about-projects-turn__flip-face--back .about-projects-turn__frame--projects-right-on-flip,
.about-projects-transition.is-turning .about-projects-turn__flip-backface .about-projects-turn__frame--projects-right-on-flip {
    /* Crop to the right half (iframe is 100vw) */
    left: -50vw !important;
    transform: translateZ(0.6px);
    transform-origin: 0% 50%;
    backface-visibility: hidden;
}

.about-projects-transition.is-turning .about-projects-turn__under--right .about-projects-turn__under-frame--about { display: block; }
.about-projects-transition.is-turning .about-projects-turn__under--right .about-projects-turn__under-frame--projects { display: none; }

/* Later in the flip, swap the RIGHT under-page to Projekter */
.about-projects-transition.is-turning.swap-under-right .about-projects-turn__under--right .about-projects-turn__under-frame--about { display: none; }
.about-projects-transition.is-turning.swap-under-right .about-projects-turn__under--right .about-projects-turn__under-frame--projects { display: block; }
/* crop halves */
.about-projects-turn__frame--left { left: 0; }
.about-projects-turn__frame--right { left: -50vw; }
.about-projects-turn__frame--about-left { left: 0; }
.about-projects-turn__frame--projects-right-on-flip { left: -50vw; }

/* Om mig -> Projekter: swap the FLIPPING page content at mid (50%)
   IMPORTANT: don't use display:none, because Safari may not paint the iframe in time.
   Keep both iframes mounted and swap via opacity. */
.about-projects-turn__flip-front--projects,
.about-projects-turn__flip-front--about {
    display: block;
}
.about-projects-turn__flip-front--projects { opacity: 0; }
.about-projects-turn__flip-front--about { opacity: 1; }
.about-projects-transition.swap-flip-mid .about-projects-turn__flip-front--projects { opacity: 1; }
.about-projects-transition.swap-flip-mid .about-projects-turn__flip-front--about { opacity: 0; }

/* The flipping sheet surface is a true 50vw card.
   This avoids mirroring a 100vw iframe (which can make it look empty). */
.about-projects-turn__flip-surface {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.about-projects-turn__flip-surface--about {
    transform: none;
}
.about-projects-turn__flip-surface--projects {
    transform: none;
}

.about-projects-turn__flip {
    position: absolute;
    top: 0;
    left: 0;
    width: 50vw;
    height: 100vh;
    overflow: hidden;
    transform-style: preserve-3d;
    transform-origin: 100% 50%; /* hinge at the middle seam */
    z-index: 5;
    isolation: isolate; /* keep sheet layers deterministic */
    /* Background is painted on both faces via ::before/::after */
    background: transparent;
    /* Keep Om mig visible until flip starts */
    opacity: 0;
}

/* Show the flipping sheet ONLY once the animation starts */
/* Make the grabbed (left) page look mirrored immediately on transition start */
.about-projects-transition.is-ready .about-projects-turn__flip,
.about-projects-transition.is-turning .about-projects-turn__flip {
    opacity: 1;
}

/* Paint Projekter RIGHT-page paper on BOTH faces (prevents black/blank at ~90deg) */
.about-projects-turn__flip::before,
.about-projects-turn__flip::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    backface-visibility: hidden;
    z-index: 0; /* always behind the iframe faces */
    background:
        linear-gradient(transparent 0px, transparent 24px, #d5d5d5 24px, #d5d5d5 25px, transparent 25px),
        linear-gradient(transparent 0px, transparent 26px, #e0e0e0 26px, #e0e0e0 27px, transparent 27px),
        linear-gradient(#ff6b6b, #ff6b6b),
        radial-gradient(circle at 80% 80%, rgba(0,0,0,0.02) 0%, transparent 50%),
        #f5f5f0;
    background-size: 100% 25px, 100% 25px, 2px 100%, 100% 100%, 100% 100%;
    background-position: 0 0, 0 0, calc(100% - 60px) 0, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat, repeat;
}
.about-projects-turn__flip::before { transform: translateZ(0.5px); }
.about-projects-turn__flip::after { transform: rotateY(180deg) translateZ(0.5px); }

/* Two-sided flipping page */
.about-projects-turn__flip-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    opacity: 1;
    transition: opacity 120ms linear;
    z-index: 2; /* above paper fallbacks */
}
.about-projects-turn__flip-face--front {
    /* Do NOT mirror at rest: the 3D flip itself provides the "flip" */
    transform: translateZ(2px);
    transform-origin: 50% 50%;
    /* Safari: keep front face visible even when back-facing */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}
.about-projects-turn__flip-face--back {
    transform: rotateY(180deg) translateZ(2px);
    transform-origin: 50% 50%;
    /* Prevent Safari/iframe backface "leak" before mid */
    opacity: 0;
}

/* Deterministic seam swap: avoid iframe/backface leaks.
   After crossing the middle, force the back face to be the only visible face. */
.about-projects-transition.swap-flip-mid .about-projects-turn__flip-face--front { opacity: 0; }
.about-projects-transition.swap-flip-mid .about-projects-turn__flip-face--back { opacity: 0; }

/* Dedicated backface layer (faces viewer after seam; Safari iframe-safe) */
.about-projects-turn__flip-backface {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
    transform: rotateY(180deg) translateZ(6px);
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    /* Prefer "always paint" over occasional Safari blanking */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    opacity: 0;
    z-index: 10;
    pointer-events: none;
    transition: none;
    will-change: transform, opacity;
}
.about-projects-transition.swap-flip-mid .about-projects-turn__flip-backface { opacity: 1 !important; }

/* Make sure this iframe can paint (some Safari builds hide iframe backs oddly) */
.about-projects-turn__flip-backface-frame {
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    will-change: transform, opacity;
}

.about-projects-transition.is-turning .about-projects-turn__flip {
    animation: aboutLeftToRight var(--pageFlipMs) var(--pageFlipEase) forwards;
    will-change: transform;
}

@keyframes aboutLeftToRight {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(180deg); }
}

@media (prefers-reduced-motion: reduce) {
    .about-projects-transition.is-turning .about-projects-turn__flip {
        animation: none !important;
        transform: rotateY(180deg);
    }
}

/* Always show Om mig LEFT page underneath the flip (prevents blank flash at 90deg) */
body.home-notebook-page.home-opening-projects.projects-about-flip-active .home-notebook__under-left {
    position: fixed;
    top: 0;
    left: 0;
    width: 50vw;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
    background: #f5f5f0;
}

body.home-notebook-page.home-opening-projects.projects-about-flip-active .home-notebook__under-left-frame {
    position: absolute;
    top: 0;
    left: 0; /* show LEFT half */
    width: 100vw;
    height: 100%;
    border: 0;
    background: transparent;
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms linear;
}

/* Show Projekter-left under the flip initially (prevents early Om mig reveal) */
body.home-notebook-page.home-opening-projects.projects-about-flip-active .home-notebook__under-left-frame--projects {
    opacity: 1;
    display: block;
}
body.home-notebook-page.home-opening-projects.projects-about-flip-active .home-notebook__under-left-frame--about {
    opacity: 0;
    display: block;
}

/* As soon as the flip begins, show Om mig LEFT page underneath.
   Use display toggles so Projekter-left cannot leak while dragging. */
body.home-notebook-page.home-opening-projects.projects-about-flip-active.projects-about-left-ready .home-notebook__under-left-frame--projects {
    opacity: 0;
}
body.home-notebook-page.home-opening-projects.projects-about-flip-active.projects-about-left-ready .home-notebook__under-left-frame--about {
    opacity: 1;
}

/* Drag determinism: prevent any iframe/compositor "ghosting" while dragging. */
body.home-notebook-page.home-opening-projects.projects-about-flip-active.projects-about-dragging .home-notebook__under-left-frame--projects {
    display: block;
}
body.home-notebook-page.home-opening-projects.projects-about-flip-active.projects-about-dragging .home-notebook__under-left-frame--about {
    display: none;
}
body.home-notebook-page.home-opening-projects.projects-about-flip-active.projects-about-dragging.projects-about-left-ready .home-notebook__under-left-frame--projects {
    display: none;
}
body.home-notebook-page.home-opening-projects.projects-about-flip-active.projects-about-dragging.projects-about-left-ready .home-notebook__under-left-frame--about {
    display: block;
}

/* (intentionally no extra `.is-loaded` rule needed here) */

/* Click (menu) flip: we swap underneath pages via JS at the visual seam
   (the easing reaches the midpoint early). Avoid CSS timeline swaps here. */

/* When loaded as transition preview (?preview=1), hide navigation only */
html.transition-preview .navbar,
html.transition-preview .edge-nav {
    display: none !important;
}
html.transition-preview body {
    overflow: hidden !important;
}

/* Projekter preview stability: don't show nodes until positioned (prevents top-left "glitch") */
html.transition-preview body.sketchbook-theme .brainstorm-container .project-node {
    opacity: 0 !important;
}
html.transition-preview body.sketchbook-theme .brainstorm-container.preview-ready .project-node {
    opacity: 1 !important;
}

/* Flip content layers */
.home-notebook__turner-front,
.home-notebook__turner-right,
.home-notebook__turner-back {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100vw; /* we crop by page width */
    border: 0;
    display: block;
    background: transparent;
    pointer-events: none;
    opacity: 0;
    transition: opacity 90ms linear;
}

/* Under-page (spread): show RIGHT half of about.html */
body.home-notebook-page.home-opening-projects.projects-about-flip-active .home-notebook__turner-right {
    opacity: 1;
    left: -50vw;
}

/* Flipping page FRONT: show RIGHT half of projects.html */
body.home-notebook-page.home-opening-projects.projects-about-flip-active .home-notebook__turner-front {
    opacity: 1;
    /* Show RIGHT page of Projekter on the turning page */
    left: -50vw;
    /* Make this a true "front face" so it disappears after passing 90deg */
    transform: translateZ(2px);
    backface-visibility: hidden;
}

/* Flipping page BACK: show LEFT half of about.html */
body.home-notebook-page.home-opening-projects.projects-about-flip-active .home-notebook__turner-back {
    opacity: 1;
    left: 0;
    /* Keep readable when the cover-back becomes visible */
    transform: translateZ(2px);
    backface-visibility: hidden;
}

/* Turn the flipping page into a true two-face card:
   - FRONT surface (Projects right) = RIGHT page paper design
   - BACK surface (About left) = .home-notebook__cover-back uses LEFT page paper design */
body.home-notebook-page.home-opening-projects.projects-about-flip-active .home-notebook__cover {
    /* don't paint a single background on both faces */
    background: transparent !important;
}

body.home-notebook-page.home-opening-projects.projects-about-flip-active .home-notebook__turner-surface {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* Let `projects.html` render its own paper design inside the iframe */
    background: transparent !important;
    box-shadow: none !important;
    /* NOTE: don't rely on iframe backface-visibility (buggy on some browsers).
       We do an explicit halfway swap instead. */
    /* Keep readable: the right page is already cropped via `left:-50vw` on the iframe */
    transform: translateZ(1px);
    transform-origin: 50% 50%;
    animation: none;
    /* Avoid 1-frame gaps during swap */
    opacity: 1;
    transition: opacity 90ms linear;
    /* Paper fallback so there's never a white flash */
    background: var(--paperBgLeft, #f5f5f0) !important;
    background-size: var(--paperBgLeftSize, 100% 25px) !important;
    background-position: var(--paperBgLeftPos, 0 0) !important;
    background-repeat: repeat, repeat, no-repeat, no-repeat, repeat !important;
}

/* Dedicated backface layer (faces the viewer after crossing the seam).
   This avoids iframe backface bugs by making the iframe front-facing again. */
body.home-notebook-page.home-opening-projects.projects-about-flip-active .home-notebook__turner-backface {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: transparent !important;
    box-shadow: none !important;
    /* Backface: make the iframe front-facing again (no extra mirroring) */
    transform: rotateY(180deg) translateZ(2px);
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    opacity: 0;
    z-index: 2;
    animation: none;
    transition: opacity 90ms linear;
    /* Paper fallback so there's never a white flash */
    background: var(--paperBgLeft, #f5f5f0) !important;
    background-size: var(--paperBgLeftSize, 100% 25px) !important;
    background-position: var(--paperBgLeftPos, 0 0) !important;
    background-repeat: repeat, repeat, no-repeat, no-repeat, repeat !important;
}

/* Remove notebook spine/edge hints during this flip-only transition */
body.home-notebook-page.home-opening-projects.projects-about-flip-active .home-notebook__cover::before,
body.home-notebook-page.home-opening-projects.projects-about-flip-active .home-notebook__cover::after {
    display: none !important;
    content: none !important;
}

/* Force the BACK face to appear exactly once the page passes the seam (~50%). */
body.home-notebook-page.home-opening-projects.projects-about-flip-active .home-notebook__cover-back {
    border-radius: 0 !important;
    /* Let `about.html` left page render its own design inside the iframe */
    background: transparent !important;
    box-shadow: none !important;
    animation: none !important;
    opacity: 0 !important;
}

/* Also remove the base "right paper" paint so the about iframe provides it */
body.home-notebook-page.home-opening-projects.projects-about-flip-active .home-notebook__spread {
    background: transparent !important;
    box-shadow: none !important;
}

/* Default: show Projects face, hide About-left face */
body.home-notebook-page.home-opening-projects.projects-about-flip-active .home-notebook__turner-surface { opacity: 1; }
body.home-notebook-page.home-opening-projects.projects-about-flip-active .home-notebook__turner-backface { opacity: 0; }

/* After crossing seam: swap to About-left */
body.home-notebook-page.home-opening-projects.projects-about-flip-active.projects-about-flip-half .home-notebook__turner-surface {
    opacity: 0;
}
body.home-notebook-page.home-opening-projects.projects-about-flip-active.projects-about-flip-half .home-notebook__turner-backface {
    opacity: 1;
}

/* Hard guarantee: after 50% NEVER show Projekter-right on the flipping page. */
body.home-notebook-page.home-opening-projects.projects-about-flip-active:not(.projects-about-flip-half) .home-notebook__turner-front {
    opacity: 1 !important;
}
body.home-notebook-page.home-opening-projects.projects-about-flip-active:not(.projects-about-flip-half) .home-notebook__turner-back {
    opacity: 0 !important;
}
body.home-notebook-page.home-opening-projects.projects-about-flip-active.projects-about-flip-half .home-notebook__turner-front {
    opacity: 0 !important;
}
body.home-notebook-page.home-opening-projects.projects-about-flip-active.projects-about-flip-half .home-notebook__turner-back {
    opacity: 1 !important;
}

/* Deterministic swap (DRAG only): prevent iframe/compositor leakage.
   For click transitions we rely on the timeline-driven face swap above, so the midpoint always shows Om mig. */
body.home-notebook-page.home-opening-projects.projects-about-flip-active.projects-about-dragging:not(.projects-about-flip-half) .home-notebook__turner-back {
    opacity: 0 !important;
    visibility: hidden !important;
}
body.home-notebook-page.home-opening-projects.projects-about-flip-active.projects-about-dragging.projects-about-flip-half .home-notebook__turner-front {
    opacity: 0 !important;
    visibility: hidden !important;
}
body.home-notebook-page.home-opening-projects.projects-about-flip-active.projects-about-dragging.projects-about-flip-half .home-notebook__turner-back {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Mid-swap is crossfaded very briefly so nothing "pops". */

/* Click-flip face swap is controlled by the `projects-about-flip-half` class (JS-timed seam). */

@media (prefers-reduced-motion: reduce) {
    body.home-notebook-page.home-opening-projects.projects-about-flip-active .home-notebook__turner-surface {
        opacity: 0;
    }
    body.home-notebook-page.home-opening-projects.projects-about-flip-active .home-notebook__turner-backface {
        opacity: 1;
    }
}

/* Shared paper look (matches projects sketchbook paper) */
body.home-notebook-page {
    --paperBg:
        /* Horizontal ruling (same as projects) */
        linear-gradient(transparent 0px, transparent 23px, #d0d0d0 23px, #d0d0d0 24px, transparent 24px),
        linear-gradient(transparent 0px, transparent 25px, #e0e0e0 25px, #e0e0e0 26px, transparent 26px),
        /* Red margin lines (like projects) */
        linear-gradient(#ff6b6b, #ff6b6b),
        linear-gradient(#ff6b6b, #ff6b6b),
        /* Paper texture */
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.10) 0%, transparent 50%),
        #f5f5f0;
    --paperBgSize: 100% 25px, 100% 25px, 2px 100%, 2px 100%, 100% 100%, 100% 100%;
    --paperBgPos: 0 0, 0 0, 60px 0, calc(100% - 60px) 0, 0 0, 0 0;

    /* Preview crop/offset disabled (we keep true projects geometry) */
    --previewNavCut: 0px;
    --previewYOffset: 0px;

    /* Avoid red lines near the center seam:
       - Left page should only have the LEFT margin line
       - Right page should only have the RIGHT margin line */
    --paperBgLeft:
        linear-gradient(transparent 0px, transparent 23px, #d0d0d0 23px, #d0d0d0 24px, transparent 24px),
        linear-gradient(transparent 0px, transparent 25px, #e0e0e0 25px, #e0e0e0 26px, transparent 26px),
        linear-gradient(#ff6b6b, #ff6b6b),
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.10) 0%, transparent 50%),
        #f5f5f0;
    --paperBgLeftSize: 100% 25px, 100% 25px, 2px 100%, 100% 100%, 100% 100%;
    --paperBgLeftPos: 0 0, 0 0, 60px 0, 0 0, 0 0;

    --paperBgRight:
        linear-gradient(transparent 0px, transparent 23px, #d0d0d0 23px, #d0d0d0 24px, transparent 24px),
        linear-gradient(transparent 0px, transparent 25px, #e0e0e0 25px, #e0e0e0 26px, transparent 26px),
        linear-gradient(#ff6b6b, #ff6b6b),
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.10) 0%, transparent 50%),
        #f5f5f0;
    --paperBgRightSize: 100% 25px, 100% 25px, 2px 100%, 100% 100%, 100% 100%;
    --paperBgRightPos: 0 0, 0 0, calc(100% - 60px) 0, 0 0, 0 0;
}

/* During the transition, match Projects viewport size exactly */
body.home-notebook-page.home-opening-layout,
body.home-notebook-page.home-opening-projects,
body.home-notebook-page.home-opened-projects {
    /* Let paper run behind the navbar (no dead space). */
    --bookTop: 0px;
    --bookH: 100vh;
    /* Slight bleed so pages feel bigger top/bottom */
    --pageBleed: 22px;
    /* Extra space ONLY at the top */
    --pageTopBleed: 30px;
}

body.home-notebook-page.home-opening-layout .home-notebook__cover,
body.home-notebook-page.home-opening-layout .home-notebook__spread,
body.home-notebook-page.home-opening-projects .home-notebook__cover,
body.home-notebook-page.home-opening-projects .home-notebook__spread,
body.home-notebook-page.home-opened-projects .home-notebook__cover,
body.home-notebook-page.home-opened-projects .home-notebook__spread {
    /* When the flipping starts, the pages must fill the entire viewport */
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    transition: none !important; /* prevent any one-frame "jump" */
}

/* Phase 0: shift closed book right so the spine sits at screen middle */
body.home-notebook-page.home-shift-projects .home-notebook {
    animation: homeShiftToSeam 900ms cubic-bezier(.2,.9,.2,1) forwards;
    will-change: left;
    left: 0;
}

/* Once opened: two equal pages filling the screen from the middle seam. */
body.home-notebook-page.home-opened-projects .home-notebook__cover {
    position: fixed;
    top: 0 !important;
    bottom: 0 !important;
    left: 50vw;
    width: 50vw;
    height: auto !important;
    border-radius: 0;
    /* Left page sits on the left half */
    transform: translateX(-100%) rotateY(-180deg);
    transform-origin: 0% 50%;
    /* Keep it visible so the left preview never disappears */
    opacity: 1 !important;
    /* Make it read as paper (same as opening) */
    background: var(--paperBgLeft) !important;
    background-size: var(--paperBgLeftSize) !important;
    background-position: var(--paperBgLeftPos) !important;
    background-repeat: repeat, repeat, no-repeat, no-repeat, repeat !important;
    /* Keep rendering at 180deg so the inside page shows */
    backface-visibility: visible;
    z-index: 3;
    pointer-events: none !important;
}

body.home-notebook-page.home-opened-projects .home-notebook__cover-back {
    border-radius: 0;
}

body.home-notebook-page.home-opened-projects .home-notebook__spread {
    position: fixed;
    top: 0 !important;
    bottom: 0 !important;
    left: 50vw;
    width: 50vw !important;
    height: auto !important;
    border-radius: 0;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    /* Thin seam so pages feel attached (not a gap) */
    box-shadow: inset 1px 0 0 rgba(0,0,0,0.10);
    /* Only the RIGHT margin line (no red strip near seam) */
    background: var(--paperBgRight) !important;
    background-size: var(--paperBgRightSize) !important;
    background-position: var(--paperBgRightPos) !important;
    background-repeat: repeat, repeat, no-repeat, no-repeat, repeat !important;
}

/* Real LEFT page (paper sheet) – only after the flip finishes */
body.home-notebook-page.home-opened-projects .home-notebook::before {
    /* Left page is the flipped cover (so we don't double-draw + flicker) */
    display: none !important;
    content: none !important;
}

/* In this mode, hide notebook extras but keep the left "opening page" (cover-back) */
body.home-notebook-page.home-opened-projects .home-notebook__pages,
body.home-notebook-page.home-opened-projects .home-notebook__leaf-fan,
body.home-notebook-page.home-opened-projects .home-notebook__title {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide the title immediately when transition starts (no flash during flip) */
body.home-notebook-page.home-opening-layout .home-notebook__title,
body.home-notebook-page.home-opening-projects .home-notebook__title {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Keep the title visible while the CLOSED book slides right */
body.home-notebook-page.home-shift-projects:not(.home-opening-layout):not(.home-opening-projects):not(.home-opened-projects) .home-notebook__title {
    opacity: 1 !important;
}

body.home-notebook-page.home-opened-projects .home-notebook__spread-left,
body.home-notebook-page.home-opened-projects .home-notebook__spread-right,
body.home-notebook-page.home-opened-projects .home-notebook__spread-margin {
    display: none !important;
}

body.home-notebook-page .hero-section,
body.home-notebook-page .logo-container,
body.home-notebook-page .main-logo {
    display: none !important;
}

.home-notebook {
    min-height: 100vh;
    padding-top: 0 !important; /* navbar hidden */
    display: grid;
    place-items: center;
    position: relative;
    /* Shared sizing tokens for the book + opened pages */
    --bookTop: 40px;
    /* Slightly slimmer book */
    --bookW: min(680px, calc(100vw - 64px));
    /* Taller book */
    --bookH: min(980px, calc(100vh - 60px));
}

/* Add perspective ONLY during opening animation (frontpage still front-view at rest) */
body.home-notebook-page.home-opening-projects .home-notebook {
    /* IMPORTANT: don't put perspective on parent, it can offset fixed children in browsers */
    perspective: none !important;
}

.home-notebook__pages,
.home-notebook__cover {
    position: absolute;
    top: var(--bookTop);
    left: 50%;
    transform: translateX(-50%);
    /* Taller notebook proportions */
    width: var(--bookW);
    height: var(--bookH);
    border-radius: 26px;
}

/* The paper block behind the cover (makes it feel like a whole notebook) */
.home-notebook__pages {
    /* Front view: slight offset behind the cover */
    transform: translateX(-50%) translateX(14px) translateY(12px);
    border-radius: 24px;
    background:
        /* page edge lines */
        repeating-linear-gradient(
            0deg,
            rgba(0,0,0,0.06) 0px,
            rgba(0,0,0,0.06) 1px,
            rgba(255,255,255,0.0) 10px
        ),
        linear-gradient(180deg, #fbfaf7 0%, #f0eee9 100%);
    box-shadow:
        0 26px 70px rgba(0,0,0,0.22),
        inset 0 0 0 1px rgba(0,0,0,0.06);
    z-index: 0;
}

.home-notebook__cover {
    /* Front view */
    transform: translateX(-50%);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    background:
        /* big soft highlight */
        radial-gradient(140% 110% at 20% 18%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.05) 34%, rgba(255,255,255,0.00) 64%),
        /* vignette / depth */
        radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,0.00) 52%, rgba(0,0,0,0.28) 100%),
        /* leather creases (very visible) */
        repeating-linear-gradient(
            12deg,
            rgba(255,255,255,0.08) 0px,
            rgba(255,255,255,0.08) 1px,
            rgba(0,0,0,0.00) 7px,
            rgba(0,0,0,0.00) 14px
        ),
        /* pore texture (bigger dots so you can see it) */
        repeating-radial-gradient(circle at 30% 30%,
            rgba(255,255,255,0.10) 0px,
            rgba(255,255,255,0.10) 1.2px,
            rgba(0,0,0,0.00) 2.6px,
            rgba(0,0,0,0.00) 6.5px
        ),
        /* base leather color */
        linear-gradient(180deg, #17151b 0%, #050506 100%);
    background-blend-mode: screen, multiply, overlay, overlay, normal;
    box-shadow:
        0 34px 110px rgba(0,0,0,0.62),
        0 14px 32px rgba(0,0,0,0.26),
        inset 0 0 0 2px rgba(255,255,255,0.08),
        inset 0 20px 34px rgba(255,255,255,0.035),
        inset 0 -18px 28px rgba(0,0,0,0.38);
    filter: contrast(1.18) saturate(1.08);
    z-index: 1;
}

/* Back/inside of the cover (paper page feel when opening) */
.home-notebook__cover-back {
    position: absolute;
    inset: 0;
    border-radius: 26px;
    /* The moving part should be PAPER while opening */
    background: var(--paperBgLeft);
    background-size: var(--paperBgLeftSize);
    background-position: var(--paperBgLeftPos);
    background-repeat: repeat, repeat, no-repeat, no-repeat, repeat;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.07);
    transform: rotateY(180deg) translateZ(1px);
    backface-visibility: hidden;
}

/* A small fan/stack of pages visible while opening (suggests "a few pages in") */
.home-notebook__leaf-fan {
    position: absolute;
    top: var(--bookTop);
    left: 50%;
    width: var(--bookW);
    height: var(--bookH);
    border-radius: 26px;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    z-index: 1; /* keep behind the projekter preview */
    background:
        repeating-linear-gradient(
            0deg,
            rgba(0,0,0,0.06) 0px,
            rgba(0,0,0,0.06) 1px,
            rgba(255,255,255,0.0) 9px
        ),
        linear-gradient(180deg, #fbfaf7 0%, #f0eee9 100%);
    box-shadow:
        0 18px 40px rgba(0,0,0,0.16),
        inset 0 0 0 1px rgba(0,0,0,0.06);
    clip-path: inset(0 0 0 52% round 26px); /* only show right half as "open pages" */
}

/* Notebook spine (left) */
.home-notebook__cover::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 18px;
    bottom: 18px;
    width: 26px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 30%, rgba(0,0,0,0.15) 100%),
        linear-gradient(90deg, rgba(0,0,0,0.30) 0%, rgba(255,255,255,0.04) 45%, rgba(0,0,0,0.35) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.06);
    opacity: 0.9;
}

/* Slight “page edge” hint on the right */
.home-notebook__cover::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 26px;
    bottom: 26px;
    width: 10px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.05) 45%, rgba(255,255,255,0.10) 100%);
    opacity: 0.25;
}

.home-notebook__title {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0 18px;
    text-align: center;
    /* Handwritten, but still strong */
    font-family: 'Bradley Hand', 'Noteworthy', 'Marker Felt', 'Chalkboard SE', 'Segoe Script', 'Brush Script MT', cursive;
    font-weight: 800;
    letter-spacing: 0.2px;
    font-size: clamp(32px, 5vw, 64px);
    /* "Printed / inprinted" white ink with subtle texture */
    color: transparent;
    background:
        /* paper/ink grain */
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.98) 0px,
            rgba(255,255,255,0.98) 2px,
            rgba(245,245,245,0.92) 4px,
            rgba(255,255,255,0.98) 6px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.99) 0px,
            rgba(255,255,255,0.99) 3px,
            rgba(235,235,235,0.88) 4px
        );
    -webkit-background-clip: text;
    background-clip: text;
    /* Slightly pressed into the cover */
    text-shadow:
        /* bright edge catching light */
        0 -1px 0 rgba(255,255,255,0.22),
        0 1px 0 rgba(255,255,255,0.10),
        /* deeper pressed shadow */
        0 4px 0 rgba(0,0,0,0.82),
        0 7px 14px rgba(0,0,0,0.55);
    transform: translateY(-8px);
}

/* Add a subtle deboss highlight edge + extra grain */
.home-notebook__title::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: rgba(255,255,255,0.16);
    transform: translateY(-2px);
    filter: blur(0.2px);
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Inside "projekter" look shown while opening */
.home-notebook__spread {
    position: absolute;
    top: var(--bookTop);
    left: 50%;
    transform: translateX(-50%);
    width: min(1220px, calc(100vw - 40px)); /* opened spread is wider */
    height: min(820px, calc(100vh - 140px));
    border-radius: 28px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 2; /* below cover while opening */
    /* Neutral / minimal "blank spread" base (match Projects paper + add vertical ruling too) */
    background:
        /* Horizontal ruling (same as projects) */
        linear-gradient(transparent 0px, transparent 23px, #d0d0d0 23px, #d0d0d0 24px, transparent 24px),
        linear-gradient(transparent 0px, transparent 25px, #e0e0e0 25px, #e0e0e0 26px, transparent 26px),
        /* Red margin lines (like projects) */
        linear-gradient(#ff6b6b, #ff6b6b),
        linear-gradient(#ff6b6b, #ff6b6b),
        /* Paper texture */
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.10) 0%, transparent 50%),
        #f5f5f0;
    background-size: 100% 25px, 100% 25px, 2px 100%, 2px 100%, 100% 100%, 100% 100%;
    background-position: 0 0, 0 0, 60px 0, calc(100% - 60px) 0, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, repeat;
    box-shadow:
        0 28px 70px rgba(0,0,0,0.18),
        inset 0 0 0 1px rgba(0,0,0,0.06);
}

/* No red margins in the neutral base (keep it clean) */
.home-notebook__spread-margin { display: none !important; }

.home-notebook__spread-left,
.home-notebook__spread-right {
    position: absolute;
    top: 18px;
    bottom: 18px;
    border-radius: 18px;
    background:
        /* Hand-drawn lines (same vibe as projects) */
        linear-gradient(transparent 0px, transparent 23px, #d0d0d0 23px, #d0d0d0 24px, transparent 24px),
        linear-gradient(transparent 0px, transparent 25px, #e0e0e0 25px, #e0e0e0 26px, transparent 26px),
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.10) 0%, transparent 50%),
        #f5f5f0;
    background-size: 100% 25px, 100% 25px, 100% 100%, 100% 100%;
}

.home-notebook__spread-left {
    left: 18px;
    right: calc(50% + 12px);
    box-shadow:
        inset -2px 0 10px rgba(0,0,0,0.10),
        0 18px 40px rgba(0,0,0,0.12);
}

.home-notebook__spread-right {
    left: calc(50% + 12px);
    right: 18px;
    background:
        linear-gradient(transparent 0px, transparent 24px, #d5d5d5 24px, #d5d5d5 25px, transparent 25px),
        linear-gradient(transparent 0px, transparent 26px, #e0e0e0 26px, #e0e0e0 27px, transparent 27px),
        radial-gradient(circle at 80% 80%, rgba(0,0,0,0.02) 0%, transparent 50%),
        #f5f5f0;
    background-size: 100% 25px, 100% 25px, 100% 100%, 100% 100%;
    box-shadow:
        inset 2px 0 10px rgba(0,0,0,0.10),
        0 18px 40px rgba(0,0,0,0.12);
}

/* Center gutter/crease like a real spread */
.home-notebook__spread::before {
    content: '';
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 50%;
    width: 10px;
    transform: translateX(-50%);
    background:
        linear-gradient(90deg,
            rgba(0,0,0,0.12) 0%,
            rgba(0,0,0,0.06) 35%,
            rgba(255,255,255,0.10) 50%,
            rgba(0,0,0,0.06) 65%,
            rgba(0,0,0,0.10) 100%
        );
    border-radius: 18px;
    opacity: 0.38;
    pointer-events: none;
}

.home-notebook__spread-margin {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ff6b6b;
    opacity: 0.7;
}
.home-notebook__spread-margin.left { left: calc(18px + 60px); }
.home-notebook__spread-margin.right { right: calc(18px + 60px); }

/* Real projekter page inside the opening spread (split in two pages) */
/* Single full projects preview */
.home-notebook__projekter-full {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: transparent;
    pointer-events: none;
    opacity: 0;
    /* Keep it BELOW the cover while opening so it feels printed on the page */
    z-index: 3;
    transform-origin: 82% 18%;
    transform: translateX(0) translateY(0) scale(1);
}

/* Left-half projekter preview (lives on the flipping page) */
.home-notebook__projekter-left {
    position: absolute;
    inset: 0;
    width: 100vw;        /* we crop by page width */
    height: 100%;
    border: 0;
    display: block;
    background: transparent;
    pointer-events: none;
    opacity: 0;
    z-index: 7; /* above paper on the flipping page */
    left: 0;
    top: 0;
}

/* Projekter design fills BOTH pages during opening */
body.home-notebook-page.home-opening-layout.home-reveal-projects .home-notebook__projekter-full[data-home-preview-ready="1"],
body.home-notebook-page.home-opening-projects.home-reveal-projects .home-notebook__projekter-full[data-home-preview-ready="1"],
body.home-notebook-page.home-opened-projects.home-reveal-projects .home-notebook__projekter-full[data-home-preview-ready="1"] {
    opacity: 1;
    /* Show RIGHT half of the same 100vw composition */
    width: 100vw;
    height: 100%;
    left: -50vw;
    top: 0;
    transform: none;
    clip-path: none;
}

body.home-notebook-page.home-opening-layout.home-reveal-projects .home-notebook__projekter-left[data-home-preview-ready="1"],
body.home-notebook-page.home-opening-projects.home-reveal-projects .home-notebook__projekter-left[data-home-preview-ready="1"],
body.home-notebook-page.home-opened-projects.home-reveal-projects .home-notebook__projekter-left[data-home-preview-ready="1"] {
    opacity: 1;
    /* Show the RIGHT half, mirrored into the LEFT page so the brain sits at the seam */
    left: -50vw;
    top: 0;
    height: 100%;
    transform: scaleX(-1);
    transform-origin: 50vw 0;
}

/* NOTE: we no longer "shrink" the opened preview; it stays full spread to avoid flicker */

/* Opening animation (triggered on "PROJEKTER" click) */
body.home-notebook-page.home-opening-projects .home-notebook {
    /* IMPORTANT: don't put perspective on parent, it can offset fixed children in browsers */
    perspective: none !important;
}

body.home-notebook-page.home-opening-projects .home-notebook__title {
    animation: homeTitleFade 1100ms ease forwards;
}

body.home-notebook-page.home-opening-projects .home-notebook__cover {
    /* Hinge exactly on the middle seam */
    position: fixed;
    top: var(--bookTop);
    left: 50vw;
    width: 50vw;
    height: var(--bookH);
    border-radius: 0;
    /* Ensure the flipping page starts exactly at the middle seam */
    transform: perspective(1400px) rotateY(0deg);
    /* The flipping surface should read as a PAPER PAGE (not leather) */
    background: var(--paperBgLeft) !important;
    background-size: var(--paperBgLeftSize) !important;
    background-position: var(--paperBgLeftPos) !important;
    background-repeat: repeat, repeat, no-repeat, no-repeat, repeat !important;
    filter: none !important;
    /* Match the right page edge exactly (no extra shadow making it look larger) */
    box-shadow: none !important;
    transform-origin: 0% 50%;
    transform-style: preserve-3d;
    /* Keep rendering at 180deg so the inside page shows */
    backface-visibility: visible;
    /* cover is above the right page while it flips */
    z-index: 6;
    overflow: hidden; /* crop left-half preview while flipping */
    /* Single smooth flip (no stepped keyframes) */
    animation: homeCoverOpen var(--pageFlipMs) var(--pageFlipEase) forwards;
    will-change: transform;
}

body.home-notebook-page.home-opening-projects .home-notebook__pages {
    /* No page-block visible behind the flipping cover */
    opacity: 0 !important;
    animation: none !important;
}

body.home-notebook-page.home-opening-projects .home-notebook__spread {
    /* While opening, we only see the RIGHT page and it starts at screen middle */
    position: fixed;
    top: var(--bookTop);
    left: 50vw;
    width: 50vw;
    height: var(--bookH);
    transform: none !important;
    border-radius: 0;
    clip-path: none;
    /* Match the flipping page edge exactly */
    box-shadow: none !important;
    /* Paper on the RIGHT page */
    background: var(--paperBgRight) !important;
    background-size: var(--paperBgRightSize) !important;
    background-position: var(--paperBgRightPos) !important;
    background-repeat: repeat, repeat, no-repeat, no-repeat, repeat !important;
    /* Ensure the right page is already present from the first opening frame */
    opacity: 1 !important;
    animation: none !important;
    overflow: hidden; /* crop right-half preview */
}

/* While opening, hide the center gutter/crease completely */
body.home-notebook-page.home-opening-projects .home-notebook__spread::before {
    display: none !important;
}

body.home-notebook-page.home-opening-projects .home-notebook__leaf-fan {
    /* No extra page stack visible during flip */
    opacity: 0 !important;
    animation: none !important;
}

@keyframes homeTitleFade {
    /* Only fade; don't touch transform (so it can slide with the book) */
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes homeCoverOpen {
    /* Open from the book's center seam */
    0%   { opacity: 1; transform: perspective(1400px) rotateY(0deg); }
    100% { opacity: 1; transform: perspective(1400px) rotateY(-180deg); }
}

/* Pre-center: make both opening pages fixed-at-50vw but visually aligned with current book */
body.home-notebook-page.home-opening-layout .home-notebook__cover {
    position: fixed;
    top: var(--bookTop);
    left: 50vw;
    width: 50vw;
    height: var(--bookH);
    border-radius: 0;
    transform-origin: 0% 50%;
    transform-style: preserve-3d;
    backface-visibility: visible;
    /* paper surface (LEFT page margin only; no red strip near seam) */
    background: var(--paperBgLeft) !important;
    background-size: var(--paperBgLeftSize) !important;
    background-position: var(--paperBgLeftPos) !important;
    background-repeat: repeat, repeat, no-repeat, no-repeat, repeat !important;
    filter: none !important;
    box-shadow: none !important;
    z-index: 6;
    overflow: hidden; /* crop left-half preview */
    /* keep it where the book currently is */
    transform: perspective(1400px) translateX(var(--precenterShiftX, 0px)) rotateY(0deg);
}

body.home-notebook-page.home-opening-layout .home-notebook__spread {
    position: fixed;
    top: var(--bookTop);
    left: 50vw;
    width: 50vw;
    height: var(--bookH);
    border-radius: 0;
    clip-path: none;
    box-shadow: none !important;
    opacity: 1 !important;
    background: var(--paperBgRight);
    background-size: var(--paperBgRightSize);
    background-position: var(--paperBgRightPos);
    background-repeat: repeat, repeat, no-repeat, no-repeat, repeat;
    overflow: hidden; /* crop right-half preview */
    transform: translateX(var(--precenterShiftX, 0px)) !important;
}

/* Animate both pages into the center seam BEFORE the fold starts */
body.home-notebook-page.home-opening-layout.home-opening-center .home-notebook__cover,
body.home-notebook-page.home-opening-layout.home-opening-center .home-notebook__spread {
    transition: transform 560ms cubic-bezier(.2,.9,.2,1);
}

body.home-notebook-page.home-opening-layout.home-opening-center .home-notebook__cover {
    transform: perspective(1400px) translateX(0px) rotateY(0deg);
}

body.home-notebook-page.home-opening-layout.home-opening-center .home-notebook__spread {
    transform: translateX(0px) !important;
}

@keyframes homeLeafFan {
    0%   { opacity: 0; transform: translateX(-50%) translateX(0px) scale(0.995); }
    30%  { opacity: 0.15; }
    100% { opacity: 1; transform: translateX(-50%) translateX(0px) scale(1); }
}

@keyframes homePagesShift {
    0% { opacity: 1; transform: translateX(-50%) translateX(14px) translateY(12px); }
    100% { opacity: 0.0; transform: translateX(-50%) translateX(80px) translateY(10px); }
}

@keyframes homeSpreadReveal {
    0% { opacity: 0; transform: translateX(-50%) translateX(0px) scale(0.98); }
    35% { opacity: 0.2; }
    /* Follow the cover's right-shift so the page feels attached while opening */
    55%  { opacity: 0.55; transform: translateX(-50%) translateX(46px) scale(1); }
    80%  { opacity: 0.8;  transform: translateX(-50%) translateX(62px) scale(1); }
    /* Finish centered so the opened spread sits in the middle */
    100% { opacity: 1; transform: translateX(-50%) translateX(0px) scale(1); }
}

@keyframes homeRightPageReveal {
    0%   { opacity: 0; }
    35%  { opacity: 0.18; }
    100% { opacity: 1; }
}

@keyframes homeShiftToSeam {
    /* Move the book right WITHOUT transform (keeps fixed pages aligned to screen middle) */
    from { left: 0; }
    to   { left: calc(var(--bookW) / 2); }
}

@media (prefers-reduced-motion: reduce) {
    body.home-notebook-page.home-opening-projects .home-notebook__cover,
    body.home-notebook-page.home-opening-projects .home-notebook__pages,
    body.home-notebook-page.home-opening-projects .home-notebook__spread,
    body.home-notebook-page.home-opening-projects .home-notebook__title {
        animation: none !important;
    }
    body.home-notebook-page.home-opening-projects .home-notebook__spread { opacity: 1; }
    /* Keep cover visible, but shifted left (no animation) */
    body.home-notebook-page.home-opening-projects .home-notebook__cover {
        opacity: 1;
        z-index: 6;
        position: fixed;
        top: var(--bookTop);
        left: 50vw;
        width: 50vw;
        height: var(--bookH);
        border-radius: 0;
        transform-origin: 0% 50%;
        transform: rotateY(-180deg);
    }
    body.home-notebook-page.home-opening-projects .home-notebook__leaf-fan { opacity: 1; }
    body.home-notebook-page.home-opening-projects .home-notebook__pages { opacity: 0; }
    body.home-notebook-page.home-opening-projects .home-notebook__title { opacity: 0; }
}

/* Navigation */
.navbar {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--navBarH);
    z-index: 20000; /* above all transition overlays */
    display: block !important;
}

/* Right-edge navbar is enabled (see `.edge-nav` styles below). */

/* Right-edge navigation (replacement while navbar is hidden) */
.edge-nav {
    display: none !important;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 260px;
    transform: translateX(232px); /* keep a slim handle visible */
    transition: transform 220ms cubic-bezier(.2,.9,.2,1), opacity 180ms ease;
    z-index: 2000;
    pointer-events: none; /* enabled only when open */
    opacity: 0.98;
}

.edge-nav.is-open {
    transform: translateX(0);
    pointer-events: auto;
}

/* Handle area (the "end of right side") */
.edge-nav__handle {
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 100%;
    background: transparent;
    backdrop-filter: none;
}

.edge-nav__panel {
    position: absolute;
    top: 0;
    left: 28px;
    right: 0;
    height: 100%;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    box-shadow: none;
    padding: 18px 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.edge-nav__title {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: rgba(0,0,0,0.55);
    margin: 6px 0 10px;
    text-transform: uppercase;
}

.edge-nav__link {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: #111;
    font-weight: 700;
    font-size: 0.95rem;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.7);
}

.edge-nav__link:hover,
.edge-nav__link:focus-visible {
    background: rgba(0,0,0,0.06);
    outline: none;
}

/* Don't interfere with book animation */
body.home-notebook-page.home-shift-projects .edge-nav,
body.home-notebook-page.home-opening-layout .edge-nav,
body.home-notebook-page.home-opening-projects .edge-nav,
body.home-notebook-page.home-opened-projects .edge-nav {
    display: none !important;
}

/* Projects (sketchbook-theme): keep navbar matching other pages */
body.sketchbook-theme .navbar {
    font-family: 'Arial', sans-serif;
}
body.sketchbook-theme .nav-menu {
    padding: 0.3rem 0;
}
body.sketchbook-theme .nav-link {
    font-family: 'Arial', sans-serif;
    font-size: 0.8rem;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative; /* anchor right tabs */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 0.3rem 0;
    height: 100%;
    align-items: center;
    margin: 0;
}

.nav-item {
    margin: 0 1.5rem;
}

.nav-link {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 0.8rem;
    transition: opacity 0.2s ease;
    line-height: var(--navBarH);
}

.nav-link:hover {
    opacity: 0.7;
}

/* Keep all items visible in the top navbar (no hover-reveal zones) */
.navbar::after { display: none !important; }
.nav-item--hover-chapter {
    opacity: 1 !important;
    pointer-events: auto !important;
    max-width: none !important;
    margin: 0 1.5rem !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
}

@media (max-width: 768px) {
    .nav-item--hover-chapter { margin: 0 0.8rem !important; }
}

/* Main Logo Styles */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    margin-top: 0 !important; /* navbar hidden */
}

.logo-container {
    text-align: center;
}

.main-logo {
    font-size: 8rem;
    font-weight: 900;
    color: white;
    text-shadow: 0 8px 25px rgba(0,0,0,0.3);
    letter-spacing: 0.5rem;
    animation: logoGlow 3s ease-in-out infinite alternate;
    font-family: 'Arial Black', sans-serif;
    margin: 0;
    line-height: 1;
}

@keyframes logoGlow {
    0% {
        text-shadow: 0 8px 25px rgba(0,0,0,0.3), 0 0 20px rgba(255,255,255,0.1);
    }
    100% {
        text-shadow: 0 8px 25px rgba(0,0,0,0.3), 0 0 40px rgba(255,255,255,0.3);
    }
}

/* Hero Section */
.hero {
    margin-top: 80px; /* Account for fixed navbar */
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.hero-image {
    width: 100%;
    height: 100%;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Main Content */
.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 20px;
    text-align: center;
}

.main-content h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #333;
}

.main-content p {
    font-size: 1.2rem;
    color: #666;
}

/* Project Links */
.project-link {
    text-decoration: none;
    color: #333;
    transition: opacity 0.2s ease;
}

.project-link:hover {
    opacity: 0.7;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        flex-direction: column;
        align-items: center;
    }
    
    .nav-item {
        margin: 0.5rem 0;
    }
    
    .hero {
        height: 60vh;
    }
    
    .main-content h1 {
        font-size: 2rem;
    }
    
    .main-content p {
        font-size: 1rem;
    }
}

/* Brainstorm Page Styles */
.brainstorm-container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Brain blush (cheeks) */
.brain {
    position: relative;
}

.brain-blush {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    /* Red center that fades more and more away from the center */
    background: radial-gradient(circle,
        rgba(255, 60, 90, 1.0) 0%,
        rgba(255, 80, 120, 0.85) 30%,
        rgba(255, 80, 120, 0.45) 55%,
        rgba(255, 80, 120, 0.0) 78%
    );
    filter: blur(0.25px) saturate(1.2);
    mix-blend-mode: multiply;
    transition: opacity 0.15s ease;
}

.brain.is-blushing .brain-blush {
    opacity: 0.9;
}

/* TWISTER hover: tongue lick (over -> under icecream) */
.brain-tongue {
    position: absolute;
    left: 50%;
    /* Sit just under the mouth line */
    top: 59%;
    width: 110px;
    height: auto;
    transform: translate(-50%, -50%) scale(0.10);
    transform-origin: 10% 50%;
    opacity: 0;
    pointer-events: none;
    display: block;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    /* Base filter (JS may add blur briefly at start) */
    --tongueBaseFilter: none;
    filter: var(--tongueBaseFilter);
}

/* OVER the twister icecream asset (icecream is z-index: 25) */
.brain-tongue.tongue-over {
    z-index: 28;
}

/* UNDER the twister icecream asset */
.brain-tongue.tongue-under {
    z-index: 24;
    --tongueBaseFilter: brightness(0.95) saturate(0.95);
}

/* JS-driven animation: we only toggle visibility */
.brain-tongue.is-visible {
    opacity: 1;
}

/* Old keyframes removed (now computed from the mouth path each frame) */

/* Embarrassed eyes when the brain farts */
.brain.is-farting .eyes-group .eye.sclera {
    transform-box: fill-box;
    transform-origin: center;
    animation: embarrassedSquint 0.22s ease-in-out infinite;
}

.brain.is-farting .eyes-group .pupil {
    transform-box: fill-box;
    transform-origin: center;
    animation: embarrassedPupil 0.22s ease-in-out infinite;
}

/* D&AD badge next to TWISTER */
.dandd-badge {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    pointer-events: none;
    z-index: 30;
}

.dandd-logo {
    width: 90px;
    height: auto;
    display: block;
}

.dandd-sparks {
    position: absolute;
    /* Cover the whole D&AD set (logo + VINDER) so rays can be all around */
    top: 44%; /* move the ring a bit up */
    left: 50%;
    width: calc(100% + 36px);  /* a lot smaller */
    height: calc(100% + 36px); /* a lot smaller */
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: none;
    z-index: 2; /* over the logo image */
}

.dandd-badge.is-sparking .dandd-sparks {
    display: block;
}

.dandd-sparks .spark {
    position: absolute;
    /* Shine rays (over the logo, as long as the logo) */
    width: var(--w, 4px);
    height: var(--h, 70px);
    border-radius: 999px;
    /* Matte colored-pencil look (less shiny, more grain/cross-hatch) */
    background:
        /* pencil streaks */
        repeating-linear-gradient(
            90deg,
            rgba(255, 235, 150, 0.00) 0px,
            rgba(255, 235, 150, 0.00) 1px,
            rgba(255, 230, 60, 0.45) 2px,
            rgba(255, 255, 200, 0.22) 3px,
            rgba(255, 230, 60, 0.26) 4px
        ),
        /* diagonal pencil cross-hatch */
        repeating-linear-gradient(
            135deg,
            rgba(210, 170, 35, 0.00) 0px,
            rgba(210, 170, 35, 0.10) 2px,
            rgba(210, 170, 35, 0.00) 6px
        ),
        /* subtle paper grain */
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.0) 0px,
            rgba(255, 255, 255, 0.0) 5px,
            rgba(255, 255, 255, 0.07) 6px
        ),
        /* matte yellow body (less gold, more yellow) */
        linear-gradient(to top,
            rgba(255, 245, 150, 0.00) 0%,
            rgba(255, 230, 70, 0.55) 32%,
            rgba(255, 255, 190, 0.72) 62%,
            rgba(255, 245, 150, 0.00) 100%
        );
    background-blend-mode: multiply, multiply, normal, normal;
    opacity: 0;
    transform-origin: 50% 100%;
    mix-blend-mode: multiply;
    /* waxy edge */
    border: 1px solid rgba(210, 170, 35, 0.14);
    filter:
        saturate(1.02)
        contrast(1.06);
    left: 50%;
    top: 50%;
    /* Rays around the set: rotate and push outward */
    /* Anchor the ray BASE to the ring so all rays start at the same radius */
    transform: translate(-50%, -100%) rotate(var(--rot, 0deg)) translateY(calc(-1 * var(--r, 56px))) scaleY(0.65);
    animation: rayShine 1.5s ease-in-out infinite, pencilWiggle 1.6s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

/* Add a pencil-grain overlay on top of each ray */
.dandd-sparks .spark::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.70;
    background:
    /* pencil grain speckles */
        repeating-radial-gradient(circle,
            rgba(120, 80, 20, 0.14) 0px,
            rgba(120, 80, 20, 0.14) 1px,
            rgba(255, 255, 255, 0.00) 2px,
            rgba(255, 255, 255, 0.00) 4px
        ),
        /* micro-streaks */
        repeating-linear-gradient(
            90deg,
            rgba(120, 80, 20, 0.00) 0px,
            rgba(120, 80, 20, 0.18) 1px,
            rgba(120, 80, 20, 0.00) 3px
        ),
        /* subtle grain wash */
        radial-gradient(circle at 40% 30%,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(255, 255, 255, 0.00) 70%
        );
    background-size: 10px 10px, 6px 100%, 100% 100%;
    mix-blend-mode: multiply;
    filter: blur(0.12px) contrast(1.12);
    animation: pencilGrainMove 0.9s steps(5) infinite;
}

@keyframes pencilGrainMove {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 10px 12px, 6px 0; }
}

/* Fan shine rays */
.dandd-sparks .spark:nth-child(1) { --rot:   0deg; --d: 0s;    --w: 4px; --r: 50px; --h: 78px; }
.dandd-sparks .spark:nth-child(2) { --rot:  45deg; --d: 0.10s; --w: 3px; --r: 46px; --h: 70px; }
.dandd-sparks .spark:nth-child(3) { --rot:  90deg; --d: 0.20s; --w: 4px; --r: 50px; --h: 78px; }
.dandd-sparks .spark:nth-child(4) { --rot: 135deg; --d: 0.30s; --w: 3px; --r: 46px; --h: 70px; }
.dandd-sparks .spark:nth-child(5) { --rot: 180deg; --d: 0.40s; --w: 4px; --r: 50px; --h: 78px; }
.dandd-sparks .spark:nth-child(6) { --rot: 225deg; --d: 0.50s; --w: 3px; --r: 46px; --h: 70px; }
.dandd-sparks .spark:nth-child(7) { --rot: 270deg; --d: 0.60s; --w: 4px; --r: 50px; --h: 78px; }

@keyframes rayShine {
    0%, 100% {
        opacity: 0;
        transform:
            translate(calc(-50% + var(--ox, 0px)), calc(-100% + var(--oy, 0px)))
            rotate(var(--rot, 0deg))
            translateY(calc(-1 * var(--r, 56px)))
            scaleY(0.55);
    }
    30% {
        opacity: 1;
        transform:
            translate(calc(-50% + var(--ox, 0px)), calc(-100% + var(--oy, 0px)))
            rotate(var(--rot, 0deg))
            translateY(calc(-1 * var(--r, 56px)))
            scaleY(1.05);
    }
    65% {
        opacity: 0.55;
        transform:
            translate(calc(-50% + var(--ox, 0px)), calc(-100% + var(--oy, 0px)))
            rotate(var(--rot, 0deg))
            translateY(calc(-1 * var(--r, 56px)))
            scaleY(0.85);
    }
}

@keyframes pencilWiggle {
    0%, 100% {
        filter: saturate(1.02) contrast(1.03) drop-shadow(0 0 2px rgba(180, 120, 30, 0.22));
    }
    50% {
        filter: saturate(1.08) contrast(1.08) drop-shadow(0 0 3px rgba(180, 120, 30, 0.28));
    }
}

.dandd-winner {
    width: 90px;
    height: auto;
    display: block;
    margin-top: -34px; /* move up closer to logo */
    margin-left: 7px; /* slightly more to the right */
}

/* Kravlinprisen badge (handwritten text) */
.kravling-nomineret-badge {
    position: absolute;
    pointer-events: none;
    z-index: 12;
    display: block;
    text-align: center;
    color: #1a1a1a;
    /* Keep the original handwritten feel here */
    font-family: 'Bradley Hand', 'Brush Script MT', 'Segoe Script', 'Comic Sans MS', cursive !important;
    font-weight: bold;
    line-height: 1.18;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    filter:
        blur(0.05px)
        drop-shadow(0 0 0.05px rgba(0,0,0,0.15));
}

.kravling-nomineret-badge > div + div {
    margin-top: 2px;
}

.kravling-nomineret-badge .kravling-line1 {
    font-size: 15px;
}

.kravling-nomineret-badge .kravling-line2 {
    font-size: 14px;
    margin-top: -1px; /* move NOMINERET slightly up (2025 badge) */
}

.kravling-nomineret-badge .kravling-line3 {
    font-size: 22px !important;
    margin-top: -4px; /* move 2025 slightly down */
}

/* KØ-BAJER arrow tip label (2024) */
.kobajer-kravling-2024-badge {
    position: absolute;
    pointer-events: none;
    z-index: 20;
    display: block;
    text-align: center;
    color: #1a1a1a;
    /* Another handwritten font (still hand-drawn feel) */
    font-family: 'Noteworthy', 'Bradley Hand', 'Marker Felt', 'Chalkboard SE', 'Brush Script MT', 'Segoe Script', 'Comic Sans MS', cursive !important;
    font-weight: bold;
    line-height: 1.18;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    filter:
        blur(0.05px)
        drop-shadow(0 0 0.05px rgba(0,0,0,0.15));
}

.kobajer-kravling-2024-text > div + div {
    margin-top: 2px;
}

.kobajer-kravling-2024-badge .kravling-line1 { font-size: 14px; }
.kobajer-kravling-2024-badge .kravling-line2 { font-size: 14px; margin-top: 4px; } /* move NOMINERET slightly down */
.kobajer-kravling-2024-badge .kravling-line3 { font-size: 18px !important; margin-top: 2px; }

/* KØ-BAJER -> Kravlingprisen 2024 hover animation (charcoal rays) */
.kobajer-kravling-2024-sparks {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220px;  /* will be overridden by JS to hug the text */
    height: 120px; /* will be overridden by JS to hug the text */
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: none;
    z-index: 2;
}

.kobajer-kravling-2024-badge.is-sparking .kobajer-kravling-2024-sparks {
    display: block;
}

.kobajer-kravling-2024-sparks .spark {
    position: absolute;
    width: var(--w, 4px);
    height: var(--h, 70px);
    border-radius: 999px;
    left: 50%;
    top: 50%;
    opacity: 0;
    transform-origin: 50% 100%;
    /* Same "ray" geometry as TWISTER ring */
    transform: translate(-50%, -100%) rotate(var(--rot, 0deg)) translateY(calc(-1 * var(--r, 48px))) scaleY(0.65);
    /* Charcoal pencil texture (dark, grainy) */
    background:
        /* graphite streaks */
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.00) 0px,
            rgba(0, 0, 0, 0.00) 1px,
            rgba(20, 20, 20, 0.35) 2px,
            rgba(80, 80, 80, 0.18) 3px,
            rgba(20, 20, 20, 0.22) 4px
        ),
        /* cross-hatch */
        repeating-linear-gradient(
            135deg,
            rgba(0, 0, 0, 0.00) 0px,
            rgba(0, 0, 0, 0.10) 2px,
            rgba(0, 0, 0, 0.00) 6px
        ),
        /* matte body */
        linear-gradient(to top,
            rgba(0, 0, 0, 0.00) 0%,
            rgba(25, 25, 25, 0.55) 32%,
            rgba(85, 85, 85, 0.35) 62%,
            rgba(0, 0, 0, 0.00) 100%
        );
    background-blend-mode: multiply, multiply, normal;
    mix-blend-mode: multiply;
    border: 1px solid rgba(0, 0, 0, 0.14);
    filter: saturate(0.9) contrast(1.12);
    animation: rayShine 1.5s ease-in-out infinite, charcoalWiggle 1.6s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

/* Nudge the ray that sits over the last "N" in "PRISEN" */
/* Per-ray tweaks can be done via CSS vars if needed:
   .kobajer-kravling-2024-sparks .spark:nth-child(n) { --ox: 2px; --oy: -1px; } */

.kobajer-kravling-2024-sparks .spark::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.75;
    background:
        repeating-radial-gradient(circle,
            rgba(0, 0, 0, 0.18) 0px,
            rgba(0, 0, 0, 0.18) 1px,
            rgba(255, 255, 255, 0.00) 2px,
            rgba(255, 255, 255, 0.00) 4px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.00) 0px,
            rgba(0, 0, 0, 0.20) 1px,
            rgba(0, 0, 0, 0.00) 3px
        );
    background-size: 10px 10px, 6px 100%;
    mix-blend-mode: multiply;
    filter: blur(0.12px) contrast(1.18);
    animation: pencilGrainMove 0.9s steps(5) infinite;
}

@keyframes charcoalWiggle {
    0%, 100% {
        filter: saturate(0.9) contrast(1.10) drop-shadow(0 0 2px rgba(0, 0, 0, 0.22));
    }
    50% {
        filter: saturate(0.95) contrast(1.18) drop-shadow(0 0 3px rgba(0, 0, 0, 0.28));
    }
}

/* Kravlinprisen hover animation (stars) - triggered when hovering REPOP */
.kravling-sparks {
    position: absolute;
    inset: -34px;
    pointer-events: none;
    display: none;
    z-index: 2;
    transform: translateY(-12px);
}

.kravling-nomineret-badge.is-sparking .kravling-sparks {
    display: block;
}

.kravling-sparks .kravling-star {
    position: absolute;
    width: var(--s, 10px);
    height: var(--s, 10px);
    display: block;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    filter:
        blur(0.06px)
        drop-shadow(0 0 0.6px rgba(0, 0, 0, 0.22));
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.15);
    opacity: 0;
    animation: kravlingStarPop 1.35s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

/* Grain / crayon strokes overlay */
.kravling-sparks .kravling-star::before {
    content: none;
}

/* Tiny hand wobble so it feels drawn */
.kravling-sparks .kravling-star {
    animation:
        kravlingStarPop 1.35s ease-in-out infinite,
        kravlingStarWobble 1.25s ease-in-out infinite;
    animation-delay: var(--d, 0s), var(--d, 0s);
}

@keyframes kravlingStarPop {
    0%   { opacity: 0;   transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.10); }
    18%  { opacity: 1;   transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.10); }
    45%  { opacity: 0.9; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.85); }
    100% { opacity: 0;   transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.10); }
}

@keyframes kravlingStarWobble {
    0%, 100% { transform: translate(-50%, -50%) rotate(calc(var(--rot, 0deg) - 1.5deg)); }
    50%      { transform: translate(-50%, -50%) rotate(calc(var(--rot, 0deg) + 1.8deg)); }
}

@keyframes embarrassedSquint {
    0%, 100% { transform: scaleY(0.55) scaleX(1.05); }
    50% { transform: scaleY(0.40) scaleX(1.08); }
}

@keyframes embarrassedPupil {
    0%, 100% { transform: translateY(1.2px) scale(0.75); }
    50% { transform: translateY(2px) scale(0.6); }
}

.brain-blush.left {
    left: 26.5%;
    top: 54%; /* moved up a lot */
}

.brain-blush.right {
    right: 27%;
    top: 54%; /* moved up a lot */
}

/* Effects layer for fart clouds */
.fart-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 380px; /* slightly larger than brain area */
    height: 260px;
    pointer-events: none;
    z-index: 2; /* behind brain which is z-index:4 */
}

.fart-cloud {
    position: absolute;
    width: 16px;
    height: 16px;
    /* Brainfarts: brown-ish fart clouds */
    background: radial-gradient(circle at 35% 30%, rgba(155, 107, 52, 0.75) 0%, rgba(107, 74, 35, 0.55) 55%, rgba(107, 74, 35, 0.0) 72%);
    border-radius: 50%;
    opacity: 0;
    filter: blur(0.8px) saturate(0.95);
    animation: fartRise var(--dur, 1.2s) ease-out forwards;
}

@keyframes fartRise {
    0% { transform: translate(0, 0) scale(0.75); opacity: 0; }
    12% { opacity: 0.55; }
    55% { opacity: 0.7; }
    /* Move UP only (no sideways drift) */
    100% { transform: translate(0px, var(--dy, -120px)) scale(var(--scale, 1.8)); opacity: 0; }
}

/* Slight variations */
.fart-cloud.v2 { animation-duration: 1.5s; transform: rotate(-8deg); }
.fart-cloud.v3 { animation-duration: 1s;  transform: rotate(-15deg); }
.fart-cloud.light { background: radial-gradient(circle at 30% 30%, #b48853 0%, #7b562b 60%, rgba(123,86,43,0.0) 70%); }
.fart-cloud.dark { background: radial-gradient(circle at 30% 30%, #6f4a22 0%, #4a3218 60%, rgba(74,50,24,0.0) 70%); }

/* Mindmap connecting lines styling */
.connecting-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.mindmap-line {
    transition: all 0.3s ease;
    /* Clear lines without blur - like Safari - crisp rendering */
    filter: none;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: none;
    /* Remove animation for clarity */
    animation: none;
}

/* Projects page clickable feedback: pulse the hand-drawn circle frame instead of showing a purple box */
.hand-drawn-frame {
    transition: opacity 0.15s ease, filter 0.15s ease;
}

.frame-fill {
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.frame-fill.is-hovered {
    opacity: 1;
}

.hand-drawn-frame.is-hovered {
    opacity: 1 !important;
    /* Purple glow that follows the actual circle asset shape */
    filter:
        drop-shadow(0 0 14px rgba(118, 75, 162, 0.55))
        drop-shadow(0 0 26px rgba(102, 126, 234, 0.45))
        drop-shadow(0 6px 10px rgba(0,0,0,0.22))
        brightness(1.06);
    animation: frameHoverPulse 0.9s ease-in-out infinite;
}

@keyframes frameHoverPulse {
    0%, 100% {
        filter:
            drop-shadow(0 0 8px rgba(118, 75, 162, 0.35))
            drop-shadow(0 0 14px rgba(102, 126, 234, 0.28))
            drop-shadow(0 5px 9px rgba(0,0,0,0.20))
            brightness(1.04);
    }
    50% {
        filter:
            drop-shadow(0 0 14px rgba(118, 75, 162, 0.55))
            drop-shadow(0 0 24px rgba(102, 126, 234, 0.40))
            drop-shadow(0 8px 14px rgba(0,0,0,0.26))
            brightness(1.10);
    }
}

body.sketchbook-theme .project-node:hover {
    text-decoration: underline;
}

/* Hide any lines connecting to BRAINFARTS (left: 15%, top: 50%) */
/* Lines that end near BRAINFARTS position (x2 around 15-20%, y2 around 50%) */
/* (intentionally left blank previously) */
.connecting-lines line[x2="24.9%"],
.connecting-lines line[x2="25.1%"],
.connecting-lines line[x2*="24"],
.connecting-lines line[x2*="25"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Hide paths that connect to BRAINFARTS area */
/* (intentionally left blank previously) */

@keyframes handDrawnPulse {
    0%, 100% { 
        filter: 
            drop-shadow(0 0 0.3px rgba(0,0,0,0.4)) 
            drop-shadow(0 0.3px 0.6px rgba(0,0,0,0.3)) 
            drop-shadow(0 0.6px 1px rgba(0,0,0,0.25))
            drop-shadow(0 1px 1.5px rgba(0,0,0,0.2))
            drop-shadow(0 1.5px 2.5px rgba(0,0,0,0.15))
            drop-shadow(0 2.5px 4px rgba(0,0,0,0.1))
            drop-shadow(0 4px 6px rgba(0,0,0,0.08));
    }
    50% { 
        filter: 
            drop-shadow(0 0 0.4px rgba(0,0,0,0.5)) 
            drop-shadow(0 0.4px 0.8px rgba(0,0,0,0.4)) 
            drop-shadow(0 0.8px 1.2px rgba(0,0,0,0.3))
            drop-shadow(0 1.2px 2px rgba(0,0,0,0.25))
            drop-shadow(0 2px 3px rgba(0,0,0,0.2))
            drop-shadow(0 3px 5px rgba(0,0,0,0.15))
            drop-shadow(0 5px 8px rgba(0,0,0,0.1));
    }
}

.project-node:hover ~ .connecting-lines .mindmap-line {
    stroke-width: 3;
    opacity: 1;
    stroke-dasharray: none;
}

/* Remove the old pseudo-element lines since we're using SVG now */
.project-node::before {
    display: none;
}

/* Specific line positions for each project node */
.project-node:nth-child(2)::before { /* Byens Landhandel */
    transform: translateY(-50%) rotate(-45deg);
    transform-origin: right center;
}

.project-node:nth-child(3)::before { /* Naturlig */
    transform: translateY(-50%) rotate(45deg);
    transform-origin: left center;
}

.project-node:nth-child(4)::before { /* Repop */
    transform: translateY(-50%) rotate(-30deg);
    transform-origin: right center;
}

.project-node:nth-child(5)::before { /* DUREX X GUESS WHO */
    transform: translateY(-50%) rotate(30deg);
    transform-origin: left center;
}

.project-node:nth-child(6)::before { /* BRAINFARTS */
    transform: translateY(-50%) rotate(-15deg);
    transform-origin: right center;
}

.project-node:nth-child(7)::before { /* KØ-BAJER */
    transform: translateY(-50%) rotate(-60deg);
    transform-origin: right center;
}

.project-node:nth-child(8)::before { /* TWISTER */
    transform: translateY(-50%) rotate(-75deg);
    transform-origin: right center;
}

.project-node:nth-child(8):hover { /* TWISTER hover - no movement but visual feedback */
    transform: translateX(-50%) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    background-color: transparent !important;
    transition: box-shadow 0.3s ease !important;
    animation: none !important;
}

.project-node:nth-child(8):hover::before { /* TWISTER hover pseudo-element - no movement */
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

.project-node:nth-child(8) { /* TWISTER base - no transitions */
    transition: none !important;
    animation: none !important;
}

.project-node:nth-child(8)::before { /* TWISTER pseudo-element - no transitions */
    transition: none !important;
    animation: none !important;
}

/* Ultra-specific Twister tab fix - keep original position but match other tabs visual feedback */
body .brainstorm-container .project-node[href="twister.html"]:hover,
body .brainstorm-container a[href="twister.html"]:hover,
.project-node[href="twister.html"]:hover,
a[href="twister.html"]:hover {
    transform: translateX(-50%) !important;
    position: absolute !important;
    bottom: 10% !important;
    left: 50% !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    background-color: transparent !important;
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    transition: box-shadow 0.3s ease !important;
    animation: none !important;
}

a[href="twister.html"]:hover *,
a[href="twister.html"]:hover::before,
a[href="twister.html"]:hover::after {
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

body .brainstorm-container .project-node[href="twister.html"]:hover *,
body .brainstorm-container a[href="twister.html"]:hover *,
.project-node[href="twister.html"]:hover *,
a[href="twister.html"]:hover * {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    background-color: transparent !important;
}

/* Ultra-specific Durex tab fix - keep original position and allow wider text */
a[href="durex.html"] {
    max-width: 300px !important;
    min-width: 300px !important;
    white-space: normal !important;
}

a[href="durex.html"]:hover {
    transform: translateY(-50%) !important;
    transition: none !important;
    animation: none !important;
}

a[href="durex.html"]:hover *,
a[href="durex.html"]:hover::before,
a[href="durex.html"]:hover::after {
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* Ultra-specific BRAINFARTS tab fix - keep original position */
.project-node[href="project1.html"]:hover,
a[href="project1.html"]:hover {
    transform: translateY(-50%) !important;
    transition: none !important;
    animation: none !important;
}

.project-node[href="project1.html"]:hover *,
.project-node[href="project1.html"]:hover::before,
.project-node[href="project1.html"]:hover::after,
a[href="project1.html"]:hover *,
a[href="project1.html"]:hover::before,
a[href="project1.html"]:hover::after {
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* BRAINFARTS - COMPLETELY DISABLE ALL HOVER EFFECTS */
body .brainstorm-container .project-node[href="project1.html"]:hover,
body .brainstorm-container a[href="project1.html"]:hover,
.project-node[href="project1.html"]:hover,
a[href="project1.html"]:hover {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    transform: translateY(-50%) !important;
    transition: none !important;
    animation: none !important;
    box-shadow: none !important;
    position: absolute !important;
    left: 8% !important;
    top: 50% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* BRAINFARTS - Remove any ::after pseudo-elements */
.project-node[href="project1.html"]::after,
a[href="project1.html"]::after {
    display: none !important;
    content: none !important;
}

.project-node[href="project1.html"]:hover *,
a[href="project1.html"]:hover * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* NUCLEAR OPTION - Lock BRAINFARTS position completely */
body .brainstorm-container .project-node[href="project1.html"],
body .brainstorm-container a[href="project1.html"],
.project-node[href="project1.html"],
a[href="project1.html"] {
    position: absolute !important;
    left: 8% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: none !important;
    animation: none !important;
}

body .brainstorm-container .project-node[href="project1.html"]:hover,
body .brainstorm-container a[href="project1.html"]:hover,
.project-node[href="project1.html"]:hover,
a[href="project1.html"]:hover {
    position: absolute !important;
    left: 8% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: none !important;
    animation: none !important;
}

/* Ultra-specific Byens Landhandel tab fix - keep original position */
.project-node[href="byens-landhandel.html"]:hover,
a[href="byens-landhandel.html"]:hover {
    transform: translateX(-50%) !important;
    transition: none !important;
    animation: none !important;
}

.project-node[href="byens-landhandel.html"]:hover *,
.project-node[href="byens-landhandel.html"]:hover::before,
.project-node[href="byens-landhandel.html"]:hover::after,
a[href="byens-landhandel.html"]:hover *,
a[href="byens-landhandel.html"]:hover::before,
a[href="byens-landhandel.html"]:hover::after {
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* Two-page sketchbook theme for projects page */
body.sketchbook-theme {
    background: #8B4513; /* Brown book cover */
    font-family: 'Courier New', monospace;
    position: relative;
    overflow: hidden;
}

/* Left page */
body.sketchbook-theme::before {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background: 
        /* Hand-drawn lines */
        linear-gradient(transparent 0px, transparent 23px, #d0d0d0 23px, #d0d0d0 24px, transparent 24px),
        linear-gradient(transparent 0px, transparent 25px, #e0e0e0 25px, #e0e0e0 26px, transparent 26px),
        /* Paper texture */
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.1) 0%, transparent 50%),
        #f5f5f0;
    background-size: 100% 25px, 100% 25px, 100% 100%, 100% 100%;
    z-index: 1;
    box-shadow: inset -2px 0 10px rgba(0,0,0,0.1);
}

/* Right page */
body.sketchbook-theme::after {
    content: '';
    position: fixed;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background: 
        /* Hand-drawn lines */
        linear-gradient(transparent 0px, transparent 24px, #d5d5d5 24px, #d5d5d5 25px, transparent 25px),
        linear-gradient(transparent 0px, transparent 26px, #e0e0e0 26px, #e0e0e0 27px, transparent 27px),
        /* Paper texture */
        radial-gradient(circle at 80% 80%, rgba(0,0,0,0.02) 0%, transparent 50%),
        #f5f5f0;
    background-size: 100% 25px, 100% 25px, 100% 100%, 100% 100%;
    z-index: 1;
    box-shadow: inset 2px 0 10px rgba(0,0,0,0.1);
}

/* Red margin lines for both pages */
body.sketchbook-theme .left-margin {
    position: fixed;
    left: 60px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ff6b6b;
    z-index: 2;
    opacity: 0.7;
}

body.sketchbook-theme .right-margin {
    position: fixed;
    right: 60px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ff6b6b;
    z-index: 2;
    opacity: 0.7;
}

/* OM MIG: same sketchbook feeling as Projekter (two pages + pinned polaroids) */
body.about-sketchbook-page.sketchbook-theme {
    /* projects page uses overflow hidden, but OM MIG needs scrolling */
    overflow-x: hidden;
    overflow-y: auto;
}

body.about-sketchbook-page.sketchbook-theme .about-sketchbook {
    position: relative;
    z-index: 3;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    column-gap: 0;
    padding-top: 0;
    padding-bottom: 0;
}

body.about-sketchbook-page.sketchbook-theme .about-sketchbook__title {
    margin: 0 0 12px;
    text-align: left;
    font-family: 'Bradley Hand', 'Brush Script MT', 'Segoe Script', 'Comic Sans MS', cursive;
    font-weight: 900;
    letter-spacing: 0.8px;
    font-size: clamp(2.4rem, 3.6vw, 3.6rem);
    transform: rotate(-0.5deg);
    filter: blur(0.05px) drop-shadow(0 0.06px 0.12px rgba(0,0,0,0.14));
    position: relative;
    z-index: 7; /* always above photos */
}

body.about-sketchbook-page.sketchbook-theme .about-sketchbook__page {
    min-height: calc(100vh - 120px);
    padding: 75px 64px 42px 96px; /* move down 2 ruled lines (2 * 25px) */
    position: relative;
    z-index: 7; /* text must never be covered by photos */
    display: flex;
    align-items: flex-start; /* move headline/text up */
}

/* Left page: move headline + text up one ruled line */
body.about-sketchbook-page.sketchbook-theme .about-sketchbook__page--left {
    padding-top: 50px;
}

body.about-sketchbook-page.sketchbook-theme .about-sketchbook__page--right {
    padding: 75px 96px 42px 64px; /* move down 2 ruled lines (2 * 25px) */
    flex-direction: column;
    align-items: flex-start;
}

body.about-sketchbook-page.sketchbook-theme .about-sketchbook__right-title,
body.about-sketchbook-page.sketchbook-theme .about-sketchbook__right-mid-title {
    font-family: 'Bradley Hand', 'Brush Script MT', 'Segoe Script', 'Comic Sans MS', cursive;
    font-weight: 900;
    letter-spacing: 0.6px;
    color: rgba(0,0,0,0.92);
    filter: blur(0.05px) drop-shadow(0 0.06px 0.12px rgba(0,0,0,0.14));
    transform: rotate(-0.4deg);
}

body.about-sketchbook-page.sketchbook-theme .about-sketchbook__right-title {
    margin: 0;
    /* Match "HVEM ER MIKKEL" scale */
    font-size: clamp(2.4rem, 3.6vw, 3.6rem);
    line-height: 50px; /* 2 * 25px grid (same headline height feel) */
    text-align: left;
    width: auto;
}

body.about-sketchbook-page.sketchbook-theme .about-sketchbook__cv {
    margin-top: 25px; /* move entries down one ruled line */
    font-family: 'Courier New', monospace;
    font-size: 1.14rem;
    line-height: 25px; /* match ruling */
    color: rgba(0,0,0,0.78);
    text-align: left;
}

body.about-sketchbook-page.sketchbook-theme .about-sketchbook__cv p {
    margin: 0; /* one ruled line per entry */
    white-space: nowrap;
}

body.about-sketchbook-page.sketchbook-theme .about-sketchbook__page--right {
    position: relative;
}

body.about-sketchbook-page.sketchbook-theme .about-sketchbook__right-mid-title {
    position: static;
    transform: rotate(-0.4deg);
    margin: 0;
    font-size: clamp(2rem, 2.8vw, 2.9rem);
    line-height: 50px; /* 2 * 25px grid */
    text-align: left;
}

body.about-sketchbook-page.sketchbook-theme .about-sketchbook__awards-block {
    position: absolute;
    top: 50%;
    left: 64px;
    right: 96px;
    transform: translateY(-50%);
}

body.about-sketchbook-page.sketchbook-theme .about-sketchbook__awards {
    margin-top: 25px; /* one ruled line under the headline */
    font-family: 'Courier New', monospace;
    font-size: 1.14rem;
    line-height: 25px;
    color: rgba(0,0,0,0.78);
    text-align: left;
}

body.about-sketchbook-page.sketchbook-theme .about-sketchbook__awards p {
    margin: 0;
    white-space: nowrap;
}

body.about-sketchbook-page.sketchbook-theme .about-sketchbook__content {
    width: 100%;
    max-width: 700px;
    margin: 0;
    text-align: left;
    /* Contain floats (polaroid wraps text; full width below photo) */
    display: flow-root;
    position: relative;
    z-index: 8; /* keep text above pinned photo if they ever overlap */
}

body.about-sketchbook-page.sketchbook-theme .polaroid.polaroid--about.polaroid--about-main {
    position: absolute;
    top: 62px; /* nudge a bit further down */
    right: 34px;
    width: 190px;
    z-index: 6;
}

/* Invisible spacer: makes text wrap next to photo, then full width below */
body.about-sketchbook-page.sketchbook-theme .about-sketchbook__photo-spacer {
    float: right;
    width: 192px; /* photo width (190) + tiny gap (2) */
    height: 150px; /* moved up 5 lines: 6 * 25px ruling */
    margin-top: 62px; /* match photo offset so wrap aligns */
}

body.about-sketchbook-page.sketchbook-theme .about-sketchbook__clear-after-photo {
    clear: both;
    height: 0;
}

body.about-sketchbook-page.sketchbook-theme .about-sketchbook__text {
    font-family: 'Courier New', monospace;
    font-size: 1.14rem;
    /* Snap to the paper's horizontal ruling (25px grid) */
    line-height: 25px;
    color: rgba(0,0,0,0.78);
    text-align: left;
}

body.about-sketchbook-page.sketchbook-theme .about-sketchbook__text p {
    /* Keep paragraph breaks aligned to the same 25px grid */
    margin: 0 0 25px 0;
}

/* About: move specific paragraphs down exactly one ruled line */
body.about-sketchbook-page.sketchbook-theme .about-sketchbook__text p.about-sketchbook__p--down-1 {
    padding-top: 25px;
}

/* About: move ONLY this paragraph up 2 ruled lines (50px), while staying on-grid */
body.about-sketchbook-page.sketchbook-theme .about-sketchbook__text p.about-sketchbook__p--down-1.about-sketchbook__p--up-2 {
    padding-top: 0;
    margin-top: -25px;
    transform: translateY(6px);
}

/* About: tiny baseline nudge to better match the paper ruling */
body.about-sketchbook-page.sketchbook-theme .about-sketchbook__text p.about-sketchbook__p--nudge-down {
    transform: translateY(6px);
}

body.about-sketchbook-page.sketchbook-theme .highlight-text {
    font-weight: 900;
    color: rgba(0,0,0,0.92);
}

/* Polaroid base (shared style; only used on OM MIG with `.polaroid--about`) */
body.about-sketchbook-page.sketchbook-theme .polaroid.polaroid--about {
    position: relative;
    z-index: 4;
    pointer-events: none;
    width: 220px;
    max-width: 100%;
    /* Default clip orientation: vertical + same angle as yellow */
    --clipBase: -90deg;
    --clipTilt: 30deg;
}

body.about-sketchbook-page.sketchbook-theme .polaroid--about .polaroid__frame {
    position: relative;
    z-index: 1;
    background: #fbfbf7;
    border-radius: 6px;
    padding: 14px 14px 34px; /* thicker bottom */
    box-shadow:
        0 18px 40px rgba(0,0,0,0.14),
        0 6px 14px rgba(0,0,0,0.10),
        inset 0 0 0 1px rgba(0,0,0,0.06);
    transform: rotate(var(--polaroidRot, -1deg));
}

body.about-sketchbook-page.sketchbook-theme .polaroid--about-small {
    width: 200px;
    --polaroidRot: 2deg;
    /* Yellow clip: rotate 30deg, but keep vertical base */
    --clipTilt: 30deg;
}

body.about-sketchbook-page.sketchbook-theme .polaroid--about-wide {
    width: min(460px, 100%);
    --polaroidRot: -1.5deg;
}

body.about-sketchbook-page.sketchbook-theme .polaroid--about .polaroid__frame img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    filter: contrast(1.06) saturate(1.04);
}

body.about-sketchbook-page.sketchbook-theme .polaroid--about .polaroid__caption {
    margin-top: 10px;
    font-family: 'Bradley Hand', 'Brush Script MT', 'Segoe Script', 'Comic Sans MS', cursive;
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: 0.2px;
    color: rgba(0,0,0,0.82);
}

/* Clip */
body.about-sketchbook-page.sketchbook-theme .polaroid--about .polaroid__clip {
    position: absolute;
    top: -18px;
    left: 50%;
    width: 86px;
    height: auto;
    z-index: 3; /* keep clip in front of the photo */
    /* Paperclip assets: keep vertical base, then apply per-clip tilt */
    transform: translateX(-50%) rotate(calc(var(--clipBase, -90deg) + var(--clipTilt, 0deg)));
    background: none;
    border-radius: 0;
    box-shadow: none;
}

/* Red clip (mojito): place at the RIGHT end of the photo */
body.about-sketchbook-page.sketchbook-theme .polaroid--about-wide .polaroid__clip {
    left: calc(100% - 18px);
    transform: translateX(-100%) rotate(calc(var(--clipBase, -90deg) + var(--clipTilt, 0deg)));
}

body.about-sketchbook-page.sketchbook-theme .polaroid--about .polaroid__clip::before { content: none; }

body.about-sketchbook-page.sketchbook-theme .polaroid--about .polaroid__clip-img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    image-rendering: -webkit-optimize-contrast;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.18));
}

/* Placement (replaced by in-flow media blocks on each page) */

@media (max-width: 900px) {
    body.about-sketchbook-page.sketchbook-theme .about-sketchbook__cv p {
        white-space: normal;
    }
    body.about-sketchbook-page.sketchbook-theme .about-sketchbook__awards {
        margin-top: 25px;
    }
    body.about-sketchbook-page.sketchbook-theme .about-sketchbook__awards p {
        white-space: normal;
    }
    body.about-sketchbook-page.sketchbook-theme .about-sketchbook {
        grid-template-columns: 1fr;
    }
    body.about-sketchbook-page.sketchbook-theme .about-sketchbook__page {
        padding: 18px 18px 18px 18px;
        min-height: auto;
        display: block;
    }
    body.about-sketchbook-page.sketchbook-theme .about-sketchbook__right-mid-title {
        position: static;
        transform: rotate(-0.4deg);
        margin: 18px 0 0 0;
        text-align: center;
    }
    body.about-sketchbook-page.sketchbook-theme .about-sketchbook__awards-block {
        position: static;
        transform: none;
        margin-top: 18px;
    }
    body.about-sketchbook-page.sketchbook-theme .polaroid.polaroid--about.polaroid--about-main {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        float: none;
        margin: 8px 0 14px 0;
    }
    body.about-sketchbook-page.sketchbook-theme .about-sketchbook__photo-spacer {
        display: none;
    }
}

/* (OM MIG) sketchbook/polaroid layout reverted */

/* Kontakt page: match Projekter sketchbook look */
body.contact-sketchbook-page.sketchbook-theme .contact-sketchbook {
    position: relative;
    z-index: 3; /* above paper + margin lines */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Place content on the LEFT page (left half of the spread) */
    width: 50vw;
    max-width: 50vw;
    align-items: center;
    text-align: center;
    /* Respect the red margin line (60px) + give some breathing room */
    padding: 22px 64px 80px 110px;
    color: #1a1a1a;
}

body.contact-sketchbook-page.sketchbook-theme .contact-sketchbook__title {
    font-family: 'Bradley Hand', 'Brush Script MT', 'Segoe Script', 'Comic Sans MS', cursive;
    font-weight: 900;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    letter-spacing: 0.3px;
    /* Move "Kontakt mig på" down 3 ruled lines (3 * 25px) */
    margin: 75px 0 22px 0;
    filter: blur(0.05px) drop-shadow(0 0.05px 0.1px rgba(0,0,0,0.12));
    transform: rotate(-0.6deg);
    /* Center the title on the left page */
    width: 100%;
    text-align: center;
}

body.contact-sketchbook-page.sketchbook-theme .contact-info {
    width: min(560px, calc(50vw - 180px));
    margin: 0 auto;
}

body.contact-sketchbook-page.sketchbook-theme .or-divider {
    margin: 18px 0;
    font-family: 'Bradley Hand', 'Brush Script MT', 'Segoe Script', 'Comic Sans MS', cursive;
    font-size: 1.2rem;
    opacity: 0.8;
}

/* Override the old "card" contact styling so it feels drawn on paper */
body.contact-sketchbook-page.sketchbook-theme .contact-item {
    position: relative;
    display: block;
    text-decoration: none;
    /* Symmetric side padding keeps the TEXT centered on the page */
    padding: 22px 140px;
    margin: 44px 0;
    border-radius: 14px;
    background: transparent;
    /* Pencil-like dashed outline is drawn via ::before/::after */
    border: none;
    color: #1a1a1a;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    min-height: 118px; /* fits the bigger icons */
    --contactAccent: var(--contactAccent, rgba(0,0,0,0.22));
    --contactAccentInk: color-mix(in srgb, var(--contactAccent) 72%, rgba(0,0,0,0.28) 28%);
}

body.contact-sketchbook-page.sketchbook-theme .contact-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.10);
}

/* Pencil texture outline (two passes, slightly offset) */
body.contact-sketchbook-page.sketchbook-theme .contact-item::before,
body.contact-sketchbook-page.sketchbook-theme .contact-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    border: 2px dashed var(--contactAccent);
    opacity: 0.62;
    /* tiny blur makes it feel like graphite on paper */
    filter: blur(0.18px);
}

body.contact-sketchbook-page.sketchbook-theme .contact-item::after {
    border-color: var(--contactAccentInk);
    opacity: 0.36;
    transform: translate(1px, -1px) rotate(-0.15deg);
    filter: blur(0.28px);
}

body.contact-sketchbook-page.sketchbook-theme .contact-item:hover::before {
    opacity: 0.78;
}
body.contact-sketchbook-page.sketchbook-theme .contact-item:hover::after {
    opacity: 0.48;
}

/* Match dashed dots to logo color */
body.contact-sketchbook-page.sketchbook-theme .contact-item--mail { --contactAccent: rgba(20, 110, 230, 0.45); }
body.contact-sketchbook-page.sketchbook-theme .contact-item--phone { --contactAccent: rgba(40, 170, 90, 0.45); }
body.contact-sketchbook-page.sketchbook-theme .contact-item--linkedin { --contactAccent: rgba(0, 120, 190, 0.45); }

body.contact-sketchbook-page.sketchbook-theme .contact-item h3 {
    color: #1a1a1a;
    margin: 0 0 6px 0;
    font-size: 1.6rem;
    font-weight: 900;
    font-family: 'Bradley Hand', 'Brush Script MT', 'Segoe Script', 'Comic Sans MS', cursive;
}

body.contact-sketchbook-page.sketchbook-theme .contact-item p {
    margin: 0;
    font-size: 1.3rem;
    color: rgba(0,0,0,0.78);
    font-family: 'Courier New', monospace;
}

body.contact-sketchbook-page.sketchbook-theme .contact-item__icon {
    width: 118px;
    height: 118px;
    object-fit: contain;
    opacity: 0.92;
    filter: contrast(1.08) saturate(1.05);
    image-rendering: -webkit-optimize-contrast;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%) rotate(-2deg);
}

body.contact-sketchbook-page.sketchbook-theme .contact-item__icon--phone { transform: translateY(-50%) rotate(1.5deg); }
body.contact-sketchbook-page.sketchbook-theme .contact-item__icon--linkedin { transform: translateY(-50%) rotate(-1deg); }

body.contact-sketchbook-page.sketchbook-theme .contact-item__text {
    min-width: 0;
    text-align: center;
}

/* Sketchbook project tabs - no border, will use SVG frames */
body.sketchbook-theme .project-node {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-family: 'Bradley Hand', 'Brush Script MT', 'Segoe Script', 'Comic Sans MS', cursive !important;
    font-weight: bold !important;
    color: #1a1a1a !important;
    font-style: normal !important;
    letter-spacing: 0.3px !important;
    font-size: 1.2rem !important;
    text-shadow: none !important;
    transition: none !important;
    /* Completely override the main project-node gradient background */
    background: transparent !important;
    background-image: none !important;
    /* Add very subtle handwritten charcoal texture to text */
    filter: 
        blur(0.05px)
        drop-shadow(0 0 0.05px rgba(0,0,0,0.15))
        drop-shadow(0 0.05px 0.1px rgba(0,0,0,0.1));
    /* Remove the ::after pseudo-element that creates the pink dot */
}

body.sketchbook-theme .project-node::after {
    display: none !important;
}

/* (disabled) We no longer use a generic ::after hover blob. Hover feedback is the circle frame glow. */

/* Hide all ::before pseudo-elements for sketchbook theme */
body.sketchbook-theme .project-node::before,
body.sketchbook-theme .project-node:nth-child(2)::before,
body.sketchbook-theme .project-node:nth-child(3)::before,
body.sketchbook-theme .project-node:nth-child(4)::before,
body.sketchbook-theme .project-node:nth-child(5)::before,
body.sketchbook-theme .project-node:nth-child(6)::before,
body.sketchbook-theme .project-node:nth-child(7)::before,
body.sketchbook-theme .project-node:nth-child(8)::before {
    display: none !important;
}

/* Additional override to ensure no background shows through */
body.sketchbook-theme .project-node,
body.sketchbook-theme .project-node * {
    background: transparent !important;
    background-image: none !important;
}

/* Force remove any remaining backgrounds or shadows */
body.sketchbook-theme .project-node {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    /* Additional aggressive overrides */
    background-clip: border-box !important;
    background-origin: border-box !important;
    background-size: auto !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-position: 0% 0% !important;
}

/* Remove any pseudo-element backgrounds */
body.sketchbook-theme .project-node::before,
body.sketchbook-theme .project-node::after {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Nuclear option - override everything */
body.sketchbook-theme .project-node,
body.sketchbook-theme .project-node *,
body.sketchbook-theme .project-node::before,
body.sketchbook-theme .project-node::after {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    background-clip: border-box !important;
    background-origin: border-box !important;
    background-size: auto !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-position: 0% 0% !important;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
    border-image: none !important;
}

/* Individual tab rotations for sketchbook effect */
body.sketchbook-theme .project-node:nth-child(1) { transform: rotate(-1deg) !important; }
body.sketchbook-theme .project-node:nth-child(2) { transform: translateX(-50%) rotate(1deg) !important; }
body.sketchbook-theme .project-node:nth-child(3) { transform: rotate(-2deg) !important; }
body.sketchbook-theme .project-node:nth-child(4) { transform: rotate(0.5deg) !important; }
body.sketchbook-theme .project-node:nth-child(5) { transform: rotate(-1.5deg) !important; }
body.sketchbook-theme .project-node:nth-child(6) { transform: rotate(2deg) !important; }
body.sketchbook-theme .project-node:nth-child(7) { transform: rotate(-0.5deg) !important; }
body.sketchbook-theme .project-node:nth-child(8) { transform: translateX(-50%) rotate(1.5deg) !important; }
body.sketchbook-theme .project-node:nth-child(9) { transform: rotate(-1deg) !important; }

/* Ensure tabs stay still on hover in sketchbook theme */
body.sketchbook-theme .project-node:hover {
    transform: inherit !important;
    transition: none !important;
    animation: none !important;
}

/* Projects page: keep the purple hover feedback, but make it ROUND (not a square) */
body.sketchbook-theme .brainstorm-container .project-node,
body.sketchbook-theme .brainstorm-container a.project-node {
    overflow: visible !important;
}

/* Projects: BRAINFARTS is under construction (not clickable) */
body.sketchbook-theme .brainstorm-container a.project-node[href="brainfarts.html"] {
    cursor: not-allowed !important;
}

/* Remove the rectangular hover background on the tab itself */
body.sketchbook-theme .brainstorm-container .project-node:hover,
body.sketchbook-theme .brainstorm-container a.project-node:hover {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* (disabled) generic hover blob removed */

/* Keep text readable */
body.sketchbook-theme .brainstorm-container .project-node:hover *,
body.sketchbook-theme .brainstorm-container a.project-node:hover * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Sketchbook brain container */
body.sketchbook-theme .brainstorm-container {
    background: transparent;
    border: 3px dashed #999;
    border-radius: 15px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.1);
    overflow: visible; /* allow purple glow/shadows to be visible */
}

/* Projects: Brainfarts -> Under ombygning arrow + sign */
body.sketchbook-theme .brainstorm-container .brainfarts-build {
    position: absolute;
    /* BRAINFARTS node is at: top 50%, left 10% */
    left: 7.5%;
    top: 56%;
    width: 170px;
    height: 210px;
    z-index: 12; /* under nodes (15), above paper (1) */
    pointer-events: none;
}

body.sketchbook-theme .brainstorm-container .brainfarts-build__arrow,
body.sketchbook-theme .brainstorm-container .brainfarts-build__sign {
    position: absolute;
    display: block;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    image-rendering: -webkit-optimize-contrast;
    filter: contrast(1.06) saturate(1.03);
}

/* Only the sign should be translucent (not the arrow) */
body.sketchbook-theme .brainstorm-container .brainfarts-build__arrow {
    opacity: 1;
}
body.sketchbook-theme .brainstorm-container .brainfarts-build__sign {
    opacity: 0.95;
}

body.sketchbook-theme .brainstorm-container .brainfarts-build__arrow {
    left: 94%;
    top: 24px;
    width: 85px;
    transform: translateX(-50%) rotate(var(--brainfartsArrowRot, 112deg));
    transform-origin: 50% 20%;
}

body.sketchbook-theme .brainstorm-container .brainfarts-build__sign {
    left: 56%;
    top: 66px;
    width: 105px;
    transform: translateX(-50%) rotate(var(--brainfartsSignRot, 0deg));
}

@media (max-width: 768px) {
    body.sketchbook-theme .brainstorm-container .brainfarts-build {
        left: 9%;
        top: 58%;
        width: 155px;
        height: 200px;
    }
    body.sketchbook-theme .brainstorm-container .brainfarts-build__arrow {
        width: 78px;
        top: 12px;
        left: 94%;
    }
    body.sketchbook-theme .brainstorm-container .brainfarts-build__sign {
        top: 64px;
        left: 56%;
        width: 98px;
    }
}

/* Stronger, SVG-safe hover highlight (Safari-friendly) */
body.sketchbook-theme .brainstorm-container .connecting-lines .hand-drawn-frame.is-hovered {
    filter:
        drop-shadow(0 0 16px rgba(118, 75, 162, 0.65))
        drop-shadow(0 0 28px rgba(102, 126, 234, 0.55))
        drop-shadow(0 10px 18px rgba(0,0,0,0.22))
        brightness(1.08) !important;
    opacity: 1 !important;
}

/* Brain container positioning for mindmap effect */
.brain {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 12; /* Higher than connecting lines (z-index: 10) so assets can appear above lines */
}

/* Blush elements */
.blush-left, .blush-right {
    position: absolute;
    width: 20px;
    height: 15px;
    background: radial-gradient(circle, rgba(255, 182, 193, 0.8) 0%, rgba(255, 182, 193, 0.4) 50%, transparent 100%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
}

.blush-left {
    top: 60%;
    left: 25%;
}

.blush-right {
    top: 60%;
    right: 25%;
}

/* Fart cloud animation */
@keyframes fartFloat {
    0%, 100% { transform: translateY(0px) scale(1); opacity: 0.6; }
    50% { transform: translateY(-10px) scale(1.1); opacity: 0.8; }
}

/* Asset animations */
@keyframes condomAppear {
    0% { opacity: 0; transform: scale(0) rotate(0deg); }
    100% { opacity: 1; transform: scale(1) rotate(20deg); }
}

@keyframes kornCircle {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes kornRotateOnce {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes kasketFall {
    0% { opacity: 0; transform: translate(-50%, calc(-50% - 50px)); }
    100% { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes oldaseAppear {
    0% { opacity: 0; transform: scale(0); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes naturliAppear {
    0% { opacity: 0; transform: scaleX(1) scaleY(1); }
    25% { opacity: 1; transform: scaleX(0.7) scaleY(1); }
    50% { opacity: 1; transform: scaleX(1) scaleY(1); }
    75% { opacity: 1; transform: scaleX(0.7) scaleY(1); }
    100% { opacity: 1; transform: scaleX(1) scaleY(1); }
}

@keyframes dropsAppear {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* NATURLI' hover: bottle squeezes 3 times, drops burst bigger + further away each squeeze */
.naturli-asset {
    transform-origin: 50% 70%;
}

.naturli-drops-asset {
    transform-origin: 50% 50%;
}

@keyframes naturliSqueeze3 {
    0%, 100% { opacity: 1; transform: scaleX(1) scaleY(1); }
    /* squeeze 1 */
    8% { transform: scaleX(0.9) scaleY(1.01); }
    12% { transform: scaleX(0.72) scaleY(1.03); }
    18% { transform: scaleX(0.9) scaleY(1.01); }
    22% { transform: scaleX(1) scaleY(1); }
    /* squeeze 2 */
    38% { transform: scaleX(0.9) scaleY(1.02); }
    44% { transform: scaleX(0.68) scaleY(1.05); }
    48% { transform: scaleX(0.9) scaleY(1.02); }
    52% { transform: scaleX(1) scaleY(1); }
    /* squeeze 3 */
    68% { transform: scaleX(0.9) scaleY(1.03); }
    74% { transform: scaleX(0.64) scaleY(1.07); }
    78% { transform: scaleX(0.9) scaleY(1.03); }
    82% { transform: scaleX(1) scaleY(1); }
}

@keyframes naturliDropsBurst3 {
    0% { opacity: 0; transform: translate(0px, 0px) scale(0.34); }
    5% { opacity: 1; transform: translate(0px, 0px) scale(0.34); }
    /* Sync with bottle squeezes (peaks at 12%, 44%, 74%) */
    /* Push 1: grow + move up, then HOLD (no shrinking) */
    8%  { opacity: 1; transform: translate(0px, -2px)  scale(0.60); }
    12% { opacity: 1; transform: translate(0px, -9px)  scale(0.82); } /* after push 1 */
    22% { opacity: 1; transform: translate(0px, -9px)  scale(0.82); }
    /* Push 2: grow + move up more, then HOLD */
    38% { opacity: 1; transform: translate(0px, -12px) scale(0.98); }
    44% { opacity: 1; transform: translate(0px, -14px) scale(1.04); } /* after push 2 */
    52% { opacity: 1; transform: translate(0px, -14px) scale(1.04); }
    /* Push 3: grow + move up more, then HOLD */
    68% { opacity: 1; transform: translate(0px, -16px) scale(1.26); }
    74% { opacity: 1; transform: translate(0px, -18px) scale(1.26); } /* after push 3 */
    100% { opacity: 1; transform: translate(0px, -18px) scale(1.26); }
}

@keyframes twisterAppear {
    0% { opacity: 0; transform: scale(0) rotate(0deg); }
    100% { opacity: 1; transform: scale(1) rotate(360deg); }
}

@keyframes ungeModUvAppear {
    0% { opacity: 0; transform: translateX(-50px) scale(0); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* Ensure project nodes have proper z-index */
.project-node {
    position: absolute;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
    min-width: 180px;
    max-width: 180px;
    min-height: 80px;
    max-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
    line-height: 1.2;
    z-index: 15;
    pointer-events: auto !important;
}

.project-node::after {
    content: '';
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 15px;
    background: #FF69B4;
    border-radius: 50%;
}

/* Top projects - pointer points down */
.project-node[style*="top: 5%"]::before,
.project-node[style*="top: 10%"]::before,
.project-node[style*="top: 15%"]::before,
.project-node[style*="top: 20%"]::before {
    bottom: -20px;
    top: auto;
    border-top: 20px solid #FF69B4;
    border-bottom: none;
}

.project-node[style*="top: 5%"]::after,
.project-node[style*="top: 10%"]::after,
.project-node[style*="top: 15%"]::after,
.project-node[style*="top: 20%"]::after {
    bottom: -35px;
    top: auto;
}

/* Bottom projects - pointer points up */
.project-node[style*="bottom: 5%"]::before,
.project-node[style*="bottom: 10%"]::before,
.project-node[style*="bottom: 15%"]::before,
.project-node[style*="bottom: 20%"]::before {
    top: -20px;
    bottom: auto;
    border-bottom: 20px solid #FF69B4;
    border-top: none;
}

.project-node[style*="bottom: 5%"]::after,
.project-node[style*="bottom: 10%"]::after,
.project-node[style*="bottom: 15%"]::after,
.project-node[style*="bottom: 20%"]::after {
    top: -35px;
    bottom: auto;
}

/* Right projects - pointer points left */
.project-node[style*="right: 5%"]::before,
.project-node[style*="right: 10%"]::before,
.project-node[style*="right: 15%"]::before,
.project-node[style*="right: 20%"]::before {
    left: -20px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    border-left: 20px solid #FF69B4;
    border-right: none;
    border-top: none;
    border-bottom: none;
}

.project-node[style*="right: 5%"]::after,
.project-node[style*="right: 10%"]::after,
.project-node[style*="right: 15%"]::after,
.project-node[style*="right: 20%"]::after {
    left: -35px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
}

/* Left projects - pointer points right */
.project-node[style*="left: 5%"]::before,
.project-node[style*="left: 10%"]::before,
.project-node[style*="left: 15%"]::before,
.project-node[style*="left: 20%"]::before {
    right: -20px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    border-right: 20px solid #FF69B4;
    border-left: none;
    border-top: none;
    border-bottom: none;
}

.project-node[style*="left: 5%"]::after,
.project-node[style*="left: 10%"]::after,
.project-node[style*="left: 15%"]::after,
.project-node[style*="left: 20%"]::after {
    right: -35px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
}

.project-node:hover {
    transform: none !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    background-color: transparent !important;
}

/* Additional override to ensure no white background */
.project-node:hover,
.project-node:hover * {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    background-color: transparent !important;
}

/* Force remove any white background with maximum specificity */
body .brainstorm-container .project-node:hover,
body .brainstorm-container .project-node:hover *,
.project-node:hover,
.project-node:hover * {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    background-color: transparent !important;
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* Make brain smile when hovering over project nodes */
.project-node:hover ~ .brain svg path[d*="42,42 Q50,45 58,42"] {
    d: path("M42,42 Q50,48 58,42");
    transition: d 0.3s ease;
}

/* Alternative approach for brain smile on hover */
.brain:hover svg path[d*="42,42 Q50,45 58,42"],
.project-node:hover ~ .brain svg path[d*="42,42 Q50,45 58,42"] {
    d: path("M42,42 Q50,48 58,42");
    transition: d 0.3s ease;
}

/* Brain smile animation */
.brain-smile {
    transition: d 0.3s ease;
}

/* Farting Brain Animation */
.farting-brain {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
}

.farting-brain svg {
    width: 300px;
    height: 300px;
    animation: brainFart 4s ease-in-out infinite;
}

@keyframes brainFart {
    0%, 100% { 
        transform: translateY(0px) scale(1); 
    }
    25% { 
        transform: translateY(-5px) scale(1.02); 
    }
    50% { 
        transform: translateY(-10px) scale(1.05); 
    }
    75% { 
        transform: translateY(-5px) scale(1.02); 
    }
}

/* Brain eyes smooth movement */
.brain svg circle[cx="35"], .brain svg circle[cx="65"],
.brain svg circle[cx="36"], .brain svg circle[cx="66"] {
    transition: cx 0.1s ease, cy 0.1s ease;
}

/* Collaborator links */
.collaborator-link {
    color: #FF69B4;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.collaborator-link:hover {
    color: #FF1493;
    text-decoration: underline;
}

.connection-line {
    position: absolute;
    background: rgba(255, 255, 255, 0.6);
    height: 2px;
    z-index: 0;
}

/* Page Content Styles */
.page-content {
    max-width: 1600px;
    margin: 400px auto 0;
    padding: 2rem 20px;
    text-align: center;
}

/* ------------------------------------------------------------
   Unified subpage infobox width (horizontal consistency)
   ------------------------------------------------------------ */
:root {
    /* Match the old Repop infobox width */
    --infoboxMaxW: 1600px;
    --infoboxSidePad: 20px;
}

/* Force the main content box to the same horizontal length everywhere */
.page-content,
.thought-bubble,
body.brainfarts-page .brainfarts-content,
body.unge-mod-uv-page .unge-mod-uv-content {
    width: min(calc(100vw - (var(--infoboxSidePad) * 2)), var(--infoboxMaxW)) !important;
    max-width: var(--infoboxMaxW) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Thought Bubble Style for Project Pages */
.thought-bubble {
    background: white;
    border-radius: 50px;
    padding: 3rem;
    margin: 2rem auto;
    max-width: 1400px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    position: relative;
    border: 3px solid #FF69B4;
}

.thought-bubble::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #FF69B4;
}

.thought-bubble::after {
    content: '';
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 15px;
    background: #FF69B4;
    border-radius: 50%;
}

.thought-bubble .bubble-2 {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: #FF69B4;
    border-radius: 50%;
}

.thought-bubble .bubble-3 {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: #FF69B4;
    border-radius: 50%;
}

.page-content * {
    text-align: center;
}

.page-content h1 {
    font-size: 2.5rem;
    margin-bottom: 0.2rem;
    color: #333;
    text-align: center;
}

.page-content h2 {
    font-size: 1.8rem;
    margin: 0.8rem 0 0.2rem;
    color: #444;
    text-align: center;
}

.page-content h3 {
    font-size: 1.4rem;
    margin: 0.6rem 0 0.2rem;
    color: #555;
    text-align: center;
}

.page-content p {
    margin-bottom: 0.5rem;
    margin-top: 0;
    line-height: 1.6;
    text-align: center;
    display: block;
    width: 100%;
}

.page-content ul {
    margin: 1rem 0;
    padding-left: 0;
    list-style: none;
    text-align: center;
}

.page-content li {
    margin-bottom: 0.5rem;
    text-align: center;
}

/* Back Button */
.back-button {
    position: fixed;
    top: 100px;
    left: 20px;
    color: white;
    padding: 0.8rem 1.5rem;
    text-decoration: none;
    border-radius: 999px;
    z-index: 1000;
    display: inline-block;
    isolation: isolate; /* keep pseudo-elements layered reliably */
    background: transparent; /* background handled by ::after so circle frame can sit behind */
    transition: none;
}

/* Back button: NO hand-drawn circle frame */
.back-button::before {
    content: none !important;
    display: none !important;
}

/* (intentionally no hover circle) */

.back-button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #333;
    border-radius: 999px;
    transition: background 0.2s ease;
    z-index: -2; /* behind circle frame */
}

.back-button:hover::after {
    background: #555;
}

/* Per-page circle assets */
.repop-page .back-button::before {
    background-image: url("assets/circle around repop by depop.webp");
}

.byens-landhandel-page .back-button::before {
    background-image: url("assets/circle omkring byens landhandel.webp");
}

.durex-page .back-button::before {
    background-image: url("assets/circle omkring durex x guess who.webp");
}

.kobajer-page .back-button::before {
    background-image: url("assets/cirkel købajer.webp");
}

.naturlig-page .back-button::before {
    background-image: url("assets/cirkel omkring naturli'.webp");
}

.twister-page .back-button::before {
    background-image: url("assets/cirkel omkring twister.webp");
}

.brainfarts-page .back-button::before {
    background-image: url("assets/cirkel om brainfarts.webp");
}

.unge-mod-uv-page .back-button::before {
    background-image: url("assets/unge mod uv cirkel.webp");
}

/* Project Images */
.project-image {
    margin: 2rem 0;
    text-align: center;
}

.project-visual {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.project-visual:hover {
    transform: scale(1.02);
}

/* Repop by Depop Page Theme */
.repop-page {
    background: linear-gradient(135deg, #ff4444 0%, #ff8844 100%);
    min-height: 100vh;
    color: white;
}

/* Project1 Page Theme (same as repop but with standard navbar) */
.project1-page {
    background: linear-gradient(135deg, #ff4444 0%, #ff8844 100%);
    min-height: 100vh;
    color: white;
}

.repop-page .page-content,
.project1-page .page-content {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 1600px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.repop-page h1,
.project1-page h1 {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    font-size: 3rem;
    margin-bottom: 0.2rem;
}

.repop-page h2,
.project1-page h2 {
    color: #fff8e1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    font-size: 1.5rem;
    margin-bottom: 0.2rem;
}

.repop-page h3,
.project1-page h3 {
    color: #fff8e1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    font-size: 1.8rem;
    margin: 1rem 0 0.2rem 0;
}

.repop-page p {
    color: white;
    font-size: 1.2rem;
    line-height: 1.6;
    margin-top: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    text-align: center;
    max-width: 50%;
    margin-left: 0;
    margin-right: auto;
}

.lfw-headline {
    color: #fff8e1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    font-size: 2.5rem;
    font-weight: bold;
    margin: 3rem auto 1.5rem auto;
    text-align: center;
}

.lfw-content {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

.content-left {
    flex: 1;
}

.content-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* Poster Styling */
.poster-container {
    text-align: center;
    margin: 3rem 0;
}

.project-poster {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    max-height: 600px;
}

/* Byens Landhandel Page Theme */
.byens-landhandel-page {
    background: linear-gradient(135deg, #8B7355 0%, #A0522D 50%, #8B4513 100%);
    color: #2F1B14;
    min-height: 100vh;
}

/* .byens-landhandel-page .navbar (custom styling removed) */

/* .byens-landhandel-page .nav-link (custom styling removed) */

/* .byens-landhandel-page .nav-link:hover (custom styling removed) */

.byens-landhandel-page .back-button {
    background: rgba(139, 115, 85, 0.9);
    color: #2F1B14;
    border: 2px solid #6B4423;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
}

.byens-landhandel-page .back-button:hover {
    background: rgba(160, 82, 45, 0.9);
    color: #2F1B14;
    border-color: #8B4513;
}

.byens-landhandel-page .page-content {
    background: rgba(255, 248, 240, 0.9);
    border-radius: 15px;
    padding: 3rem;
    margin: 2rem auto;
    max-width: 1200px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 2px solid #8B7355;
}

.byens-landhandel-page h1 {
    color: #000;
    text-shadow: none;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: bold;
}

.byens-landhandel-page h2 {
    color: #A0522D;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    font-size: 1.8rem;
    margin: 1.5rem 0 1rem 0;
}

.byens-landhandel-page h3 {
    color: #8B4513;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    font-size: 1.4rem;
    margin: 1.2rem 0 0.8rem 0;
}

.byens-landhandel-page p {
    color: #000;
    font-size: 1.1rem;
    line-height: 1.22;
    margin: 0 0 0.4rem 0;
    text-shadow: none;
}

/* .byens-landhandel-page .poster-container (custom styling removed) */

.byens-landhandel-page .project-poster {
    /* Removed border for cleaner look */
    width: 100%;
    max-height: none;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}

.lfw-content h4 {
    color: #fff8e1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    font-size: 1.8rem;
    font-weight: bold;
    margin: 1rem 0 0.5rem 0;
    text-align: center;
}

.lfw-content p {
    color: white;
    font-size: 1.2rem;
    line-height: 1.6;
    margin: 0 0 0.5rem 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.hero-image-container {
    text-align: center;
    margin-bottom: 3rem;
}



.hero-image {
    max-width: 700px;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}





.screenshot-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.repop-page .collaborator-link {
    color: #fff8e1;
    text-decoration: none;
    border-bottom: 2px solid #fff8e1;
    transition: all 0.3s ease;
}

.repop-page .collaborator-link:hover {
    color: white;
    border-bottom-color: white;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.repop-page h4 {
    color: #fff8e1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    font-size: 1.4rem;
    margin: 1.5rem 0 0.8rem 0;
}

.repop-page ul {
    margin: 1rem 0;
    padding-left: 2rem;
}

.repop-page li {
    color: white;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* 2x2 Grid Layout */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2rem;
    margin: 3rem 0;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.grid-item {
    padding: 2rem;
    transition: transform 0.3s ease;
}

.grid-item:hover {
    transform: translateY(-5px);
}

.grid-item h3 {
    color: white;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.grid-item p {
    color: white;
    font-size: 1.1rem;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    text-align: center;
    margin: 0;
}

/* Responsive Grid */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
        gap: 1.5rem;
    }
}

/* Video Section */
.video-section {
    text-align: center;
    margin: 3rem 0;
}

.video-section h3 {
    color: #fff8e1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

/* Responsive video container */
.video-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 2rem auto 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.video-container::before {
    content: '';
    display: block;
    padding-top: 56.25%; /* 16:9 ratio */
    pointer-events: none;
}

.video-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    z-index: 1;
    pointer-events: auto;
}

/* Local MP4 videos use the same responsive container */
.video-container video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    z-index: 1;
    object-fit: cover;
    background: #000;
}

/* Safari/iOS fix: iframes inside backdrop-filter containers can become unclickable.
   Force a clean stacking/compositing context for the video player. */
.durex-page .video-container {
    position: relative;
    z-index: 5;
    isolation: isolate;
    transform: translateZ(0);
}
.durex-page .video-container iframe {
    pointer-events: auto !important;
    transform: translateZ(0);
}

.video-fallback {
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.campaign-steps {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.step-column {
    text-align: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    backdrop-filter: blur(15px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-column h4 {
    color: #32CD32;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.step-column h5 {
    color: #FF69B4;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.step-column p {
    color: #333;
    line-height: 1.6;
    margin: 0;
}

.step-image {
    width: 100%;
    height: 200px;
    object-fit: contain;
    object-position: center;
    margin-top: 1rem;
}

.step-column:nth-child(1) .step-image {
    height: 350px;
    object-position: left center;
    margin-left: -1.2rem;
    margin-right: -1.2rem;
    width: calc(100% + 2.4rem);
    margin-top: -3.5rem;
}

.step-column:nth-child(2) .step-image {
    height: 250px;
    margin-top: 3rem;
}

.step-column:nth-child(3) .step-image {
    height: 250px;
    margin-top: 0rem;
}

@media (max-width: 768px) {
    .campaign-steps {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* NATURLI' Page Theme */
.naturlig-page {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 25%, #90caf9 50%, #64b5f6 75%, #42a5f5 100%) !important;
    color: #333333;
    min-height: 100vh;
    position: relative;
}

.naturlig-page .navbar {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(15px);
}

.naturlig-page .nav-link {
    color: #1976d2 !important;
    font-weight: 600;
}

.naturlig-page .nav-link:hover {
    color: #42a5f5 !important;
}

.naturlig-page .back-button {
    background: rgba(255, 255, 255, 0.9);
    color: #1976d2;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.naturlig-page .back-button:hover {
    background: rgba(255, 255, 255, 1);
    color: #42a5f5;
}

.naturlig-page .page-content {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    border: 3px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    box-shadow:
        0 10px 40px rgba(25, 118, 210, 0.3),
        0 5px 20px rgba(66, 165, 245, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 1;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 900px;
}

.naturlig-page h1 {
    color: #1976d2;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2.5rem;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.naturlig-page h2, .naturlig-page h3 {
    color: #42a5f5;
    margin-bottom: 1rem;
}

.naturlig-page p {
    color: #333;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* DUREX X GUESS WHO Page Theme */
.durex-page {
    background: linear-gradient(135deg, #0066CC 0%, #0099FF 25%, #00CCFF 50%, #33CCFF 75%, #66CCFF 100%) !important;
    color: #333333;
    min-height: 100vh;
    position: relative;
}

.durex-page .navbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.durex-page .nav-link {
    color: #1976D2;
}

.durex-page .nav-link:hover {
    color: #42A5F5;
}

.durex-page .back-button {
    color: #1976D2;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #1976D2;
    font-weight: 600;
}

.durex-page .back-button:hover {
    background: #1976D2;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.4);
}

.durex-page .page-content {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    border: 3px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    box-shadow: 
        0 10px 40px rgba(25, 118, 210, 0.3),
        0 5px 20px rgba(66, 165, 245, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 1;
    padding: 2rem;
    margin-top: 2rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.durex-page h1 {
    color: #1976D2;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8);
    font-weight: bold;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.durex-page h2 {
    color: #1976D2;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8);
    font-weight: bold;
    font-size: 1.8rem;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

.durex-page h3 {
    color: #1976D2;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    font-weight: 600;
    font-size: 1.4rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.durex-page p {
    color: #333333;
    line-height: 1.7;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

/* KØ-BAJER Page Theme */
.kobajer-page {
    background: linear-gradient(135deg, #FFE066 0%, #FF6B6B 25%, #4ECDC4 50%, #45B7D1 75%, #96CEB4 100%);
    color: #333333;
    min-height: 100vh;
    position: relative;
}

.kobajer-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.kobajer-page .navbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.kobajer-page .nav-link {
    color: #333333;
}

.kobajer-page .nav-link:hover {
    color: #666666;
}

.kobajer-page .back-button {
    color: #FF6B6B;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #FF6B6B;
    font-weight: 600;
}

.kobajer-page .back-button:hover {
    background: #FF6B6B;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}

.kobajer-page .page-content {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    border: 3px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    box-shadow: 
        0 10px 40px rgba(255, 107, 107, 0.3),
        0 5px 20px rgba(78, 205, 196, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 1;
    padding: 1rem 2rem;
    margin-top: 1rem;
    margin-bottom: 0;
}

.kobajer-page h2 {
    color: #000000;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8);
    font-weight: bold;
    margin: 0.32rem 0 0rem 0;
}
.kobajer-page h1 + h2 { margin-top: 0; }
.kobajer-page h2 + p { margin-top: 0; }

.kobajer-page h3 {
    color: #000000;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    font-weight: 600;
    margin: 0.55rem 0 0rem 0;
}
.kobajer-page h3 + p { margin-top: 0; }

.kobajer-page p {
    color: #000000;
    line-height: 1.7;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    margin: 0 0 0.65rem 0;
}

.kobajer-page ol {
    color: #000000;
}

.kobajer-page ol li {
    margin-bottom: 0.5rem;
}

/* KØ-BAJER Info Boxes Section */
.kobajer-info-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
}

.kobajer-info-box {
    text-align: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid rgba(78, 205, 196, 0.4);
    border-radius: 16px;
    backdrop-filter: blur(15px);
    box-shadow: 
        0 8px 24px rgba(78, 205, 196, 0.2),
        0 4px 12px rgba(69, 183, 209, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 140px;
}

.kobajer-info-box h4 {
    color: #4ECDC4;
    font-size: 1.3rem;
    margin: 0 0 1rem 0;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(78, 205, 196, 0.3);
}

.kobajer-info-box p {
    color: #000000;
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.kobajer-can-image {
    max-width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .kobajer-info-boxes {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* KØ-BAJER Steps Section */
.kobajer-steps {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
}

.kobajer-step-box {
    text-align: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid rgba(255, 107, 107, 0.3);
    border-radius: 16px;
    backdrop-filter: blur(15px);
    box-shadow: 
        0 8px 24px rgba(255, 107, 107, 0.2),
        0 4px 12px rgba(78, 205, 196, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.kobajer-step-box h4 {
    color: #FF6B6B;
    font-size: 2rem;
    margin: 0 0 0.5rem 0;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
}

.kobajer-step-box p {
    color: #000000;
    font-size: 1rem;
    margin: 0;
    font-weight: 500;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.kobajer-step-box .step-detail {
    color: #666666;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    font-weight: 400;
    font-style: italic;
}

.kobajer-step-image {
    max-width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .kobajer-steps {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Elements Section */
.elements-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}

.element-box {
    text-align: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    backdrop-filter: blur(15px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    position: relative;
}

.element-box h4 {
    color: #333;
    font-size: 1.2rem;
    margin: 0;
    font-weight: 600;
    line-height: 1.4;
}

.element-box:nth-child(1) h4 {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
}

.element-image {
    max-width: 100%;
    height: auto;
    margin-top: 1rem;
    max-height: 150px;
    object-fit: contain;
}

.element-box:nth-child(2) {
    overflow: visible;
}

.element-box:nth-child(2) .element-image {
    max-height: 600px;
    position: relative;
    z-index: 10;
}

.element-box:nth-child(3) .element-image {
    max-height: 400px;
}

.element-box:nth-child(4) .element-image {
    max-height: 400px;
}

@media (max-width: 768px) {
    .elements-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.video-fallback a {
    color: #FF69B4;
    text-decoration: none;
}

.video-fallback a:hover {
    text-decoration: underline;
}

/* Responsive Video */
@media (max-width: 768px) {
    .video-container iframe {
        height: 250px;
    }
}

.repop-page .back-button {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

.repop-page .back-button:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}



/* About Page Hero Section */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3rem;
    gap: 2rem;
}

.picture-container {
    flex: 0 0 auto;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-picture {
    width: 300px;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    border: 2px solid #ddd;
    background-color: #f0f0f0;
}

.centered-text {
    flex: 0 0 auto;
    text-align: center;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.centered-text h1 {
    font-size: 2.5rem;
    margin: 0;
    color: #333;
    font-weight: bold;
    white-space: nowrap;
    line-height: 1.2;
}

/* Brain Image Section */
.brain-image-section {
    text-align: center;
    margin: 2rem 0;
    padding: 1rem;
}

.brain-image {
    max-width: 300px;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
}

.brain-image:hover {
    transform: scale(1.05);
}

/* Mobile Responsive for Brainstorm */
@media (max-width: 768px) {
    .brain {
        width: 150px;
        height: 150px;
    }
    
    .project-node {
        padding: 0.8rem;
        font-size: 0.9rem;
        min-width: 100px;
    }
    
    .back-button {
        top: 80px;
        left: 10px;
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }
    
    /* Mobile responsive for hero section */
    .hero-section {
        flex-direction: column;
        gap: 1rem;
    }
    
    .about-picture {
        width: 250px;
        height: 300px;
    }
    
    .centered-text h1 {
        font-size: 2rem;
    }
    
    .brain-image {
        max-width: 250px;
    }
} 

/* Project node stable transform */
.project-node {
    transform-origin: center center !important;
}

/* Center Byens Landhandel horizontally */
a[href="byens-landhandel.html"] {
    left: 45% !important;
    transform: translateX(-50%) !important;
}

a[href="byens-landhandel.html"]:hover {
    transform: translateX(-50%) !important;
}

.project-node:hover {
    transform: none !important;
} 

.eyes-smile {
    transition: transform 180ms ease, r 180ms ease;
}

.eyes-smile .sclera {
    r: 5.2;
}

.eyes-smile {
    transform: translateY(-0.6px);
} 

/* Eye smile animation */
.eye-smile {
    transform-origin: center center;
    transition: transform 300ms ease;
}

.project-node:hover ~ .brain .eye-smile {
    transform: scaleY(0.7) translateY(1px); /* Squint and lift */
}

/* Remove the embarrassed eyes animation since we simplified it */
.eyes-embarrassed .eye {
    transform-origin: center center;
    transition: transform 200ms ease;
}

.project-node:hover ~ .brain .eyes-embarrassed .eye {
    transform: scaleY(0.3) scaleX(1.1) translateY(1px); /* More squint, less wide, less down */
}

.eyes-embarrassed .pupil {
    transform-origin: center center;
    transition: transform 200ms ease;
}

.project-node:hover ~ .brain .eyes-embarrassed .pupil {
    transform: translateY(1px) scaleX(1.05); /* Pupils look down slightly and barely wider */
} 

/* Twister Ice Cream Page Theme */
.twister-page {
    background: linear-gradient(135deg,
        #32CD32 0%, #32CD32 25%, #FF69B4 40%, #FFFACD 100%
    );
    min-height: 100vh;
    overflow-x: hidden;
}

.twister-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    margin-top: 80px;
    position: relative;
}

.twister-ice-cream {
    position: relative;
    width: 200px;
    height: 300px;
    margin-bottom: 2rem;
    /* Removed animation */
}

.ice-cream-spiral {
    position: relative;
    width: 100%;
    height: 80%;
    border-radius: 50% 50% 30% 30%;
    overflow: hidden;
    background: #32CD32;
}

.spiral-layer {
    position: absolute;
    width: 100%;
    height: 16.66%;
    border-radius: 50%;
}

.spiral-layer.green {
    background: #32CD32;
    transform: rotate(0deg) scale(1);
}

.spiral-layer.cream {
    background: #FFFACD;
    transform: rotate(180deg) scale(0.9);
}

.spiral-layer:nth-child(1) { top: 0%; transform: rotate(0deg) scale(1); }
.spiral-layer:nth-child(2) { top: 16.66%; transform: rotate(180deg) scale(0.95); }
.spiral-layer:nth-child(3) { top: 33.33%; transform: rotate(0deg) scale(0.9); }
.spiral-layer:nth-child(4) { top: 50%; transform: rotate(180deg) scale(0.85); }
.spiral-layer:nth-child(5) { top: 66.66%; transform: rotate(0deg) scale(0.8); }
.spiral-layer:nth-child(6) { top: 83.33%; transform: rotate(180deg) scale(0.75); }

.ice-cream-top {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 20px;
    background: #FF69B4;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(255, 105, 180, 0.3);
}

.popsicle-stick {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 60px;
    background: linear-gradient(45deg, #8B4513, #D2691E);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(139, 69, 19, 0.3);
}

.twister-title {
    font-size: 4rem;
    font-weight: 900;
    color: white;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
    margin: 0;
    /* Removed animation */
}

/* Twister page content box consistent with other subpages */
.twister-page .page-content {
    border-radius: 20px;
    padding: 2rem 2rem 1rem 2rem;
    margin: 2rem auto;
    max-width: 1400px;
    position: relative;
    /* Frame (inspired by Twister swirl) */
    border: 3px solid transparent;
    background:
        linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)) padding-box,
        conic-gradient(
            from 210deg,
            rgba(50, 205, 50, 0.95) 0%,
            rgba(50, 205, 50, 0.95) 26%,
            rgba(255, 105, 180, 0.95) 42%,
            rgba(255, 250, 205, 0.95) 72%,
            rgba(50, 205, 50, 0.95) 100%
        ) border-box;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255,255,255,0.35) inset,
        0 0 22px rgba(255, 105, 180, 0.10),
        0 0 22px rgba(50, 205, 50, 0.10);
}

.contact-info {
    text-align: center;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.contact-info h1 {
    color: #FF69B4;
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    font-weight: 900;
}

.twister-logo {
    max-width: 300px;
    height: auto;
    margin-bottom: 1.5rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Twister: tighter headline/subtext spacing */
.twister-page .contact-info h3 {
    margin: 0.85rem 0 0.2rem 0;
}
.twister-page .contact-info h3 + p {
    margin-top: 0;
}
.twister-page .contact-info p {
    margin: 0 0 0.6rem 0;
    line-height: 1.55;
}

.twister-page .video-container {
    margin-top: 0.6rem;
}

.twister-page .campaign-steps {
    margin-top: 1.2rem;
    gap: 1.25rem;
}
.twister-page .step-column h4 {
    margin-bottom: 0.25rem;
}
.twister-page .step-column h5 {
    margin-bottom: 0.55rem;
}

.video-container {
    position: relative;
    width: 80%;
    max-width: 800px;
    margin: 1rem auto 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.video-container::before {
    content: '';
    display: block;
    padding-top: 56.25%; /* 16:9 ratio */
}

.video-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.contact-info h2 {
    color: #FF69B4;
    font-size: 2.5rem;
    margin-bottom: 2rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.contact-item {
    margin: 1.5rem 0;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(50, 205, 50, 0.1), rgba(255, 105, 180, 0.1));
    border-radius: 15px;
    border: 2px solid rgba(50, 205, 50, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* FINAL NUCLEAR OPTION - BRAINFARTS NO MOVEMENT */
html body .brainstorm-container .project-node[href="project1.html"],
html body .brainstorm-container a[href="project1.html"],
html body .project-node[href="project1.html"],
html body a[href="project1.html"] {
    position: absolute !important;
    left: 8% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
}

html body .brainstorm-container .project-node[href="project1.html"]:hover,
html body .brainstorm-container a[href="project1.html"]:hover,
html body .project-node[href="project1.html"]:hover,
html body a[href="project1.html"]:hover {
    position: absolute !important;
    left: 8% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
}

/* BRAINFARTS image hover effects - visual feedback but stays still */
.brainfarts-image:hover {
    opacity: 1.0 !important;
    filter: brightness(1.2) !important;
    transform: none !important;
    transition: opacity 0.3s ease, filter 0.3s ease !important;
}

/* BRAINFARTS - Match other tabs hover effects */
.brainstorm-container a[href="project1.html"]:hover,
.brainstorm-container a[href="brainfarts.html"]:hover {
    transform: translateY(-50%) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    background-color: transparent !important;
    transition: box-shadow 0.3s ease !important;
}

.contact-item h3 {
    color: #32CD32;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
    text-align: center;
    max-width: none;
}

.contact-info p {
    color: #333;
    font-size: 1.2rem;
    margin: 0 0 1rem 0;
    font-weight: 500;
    text-align: center;
    max-width: none;
    line-height: 1.6;
}

/* Lazy video styles */
.video-lazy {
    cursor: pointer;
    background: #000;
}

.video-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border: none;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff 0%, #ddd 60%, rgba(255,255,255,0.2) 61%), #FF69B4;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.play-overlay::after {
    content: '';
    position: absolute;
    left: 33px;
    top: 26px;
    width: 0;
    height: 0;
    border-left: 24px solid white;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
}

.video-lazy:hover .play-overlay {
    filter: brightness(1.1);
}

/* BRAINFARTS - Match other tabs hover effects but stay still */
body .brainstorm-container .project-node[href="brainfarts.html"]:hover,
body .brainstorm-container a[href="brainfarts.html"]:hover,
.brainstorm-container a[href="brainfarts.html"]:hover,
a[href="brainfarts.html"]:hover,
.project-node[href="brainfarts.html"]:hover {
    transform: translateY(-50%) !important;
    position: absolute !important;
    left: 10% !important;
    top: 50% !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    background-color: transparent !important;
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    transition: box-shadow 0.3s ease !important;
}

body .brainstorm-container .project-node[href="brainfarts.html"]:hover *,
body .brainstorm-container a[href="brainfarts.html"]:hover *,
.project-node[href="brainfarts.html"]:hover *,
a[href="brainfarts.html"]:hover * {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    background-color: transparent !important;
}

.brainfarts-image:hover {
    opacity: 1.0 !important;
    filter: brightness(1.2) !important;
    transform: none !important;
    transition: opacity 0.3s ease, filter 0.3s ease !important;
}