/* ============================================ RESET & BASE ============================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* ============================================ CSS CUSTOM PROPERTIES ============================================ */ :root { /* Light mode (default) — warm amber accent pulled from hero grasslands */ --color-bg: #FAFAF8; --color-surface: #F2F0ED; --color-text: #1A1A1A; --color-text-secondary: #6B6B6B; --color-text-tertiary: #9B9B9B; --color-accent: #9A7B4F; --color-accent-hover: #7D6340; --color-divider: #E5E3DF; --color-footer-bg: #F2F0ED; --color-ornament: #C4B08A; /* Spacing */ --section-gap: 2.5rem; --content-max-width: 680px; --content-padding: 1.5rem; /* Transitions */ --transition-base: 0.2s ease; --transition-color: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } [data-theme="dark"] { /* Dark mode — cool slate blue accent pulled from hero night sky */ --color-bg: #111111; --color-surface: #1A1A1A; --color-text: #E8E6E1; --color-text-secondary: #A8A49D; --color-text-tertiary: #706C66; --color-accent: #8FAEC8; --color-accent-hover: #A8C4D8; --color-divider: #2A2A2A; --color-footer-bg: #0A0A0A; --color-ornament: #5A7A94; } /* ============================================ BODY & TYPOGRAPHY ============================================ */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 16px; line-height: 1.65; color: var(--color-text); background-color: var(--color-bg); transition: var(--transition-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================ PAGE LOAD ENTRANCE ANIMATION ============================================ */ /* Before JS adds .is-loaded, everything starts hidden */ .hero__image-wrapper { opacity: 0; } .hero__header { opacity: 0; } .hero__scroll-hint { opacity: 0; } .hero-controls { opacity: 0; } /* Once JS triggers .is-loaded on , elements animate in with staggered delays */ .is-loaded .hero__image-wrapper { animation: heroImageReveal 1.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; } .is-loaded .hero__header { animation: heroNameReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards; } .is-loaded .hero__scroll-hint { animation: heroFadeUp 1s ease 1.8s forwards; } .is-loaded .hero-controls { animation: heroFadeIn 0.8s ease 1.4s forwards; } /* Ken Burns — image fades from black with a gentle drift */ @keyframes heroImageReveal { 0% { opacity: 0; } 100% { opacity: 1; } } /* Name scales up from slightly smaller with fade */ @keyframes heroNameReveal { 0% { opacity: 0; transform: translateY(var(--hero-center-offset, 50%)) scale(0.92); } 100% { opacity: 1; transform: translateY(var(--hero-center-offset, 50%)) scale(1); } } /* Gentle fade-up for scroll hint */ @keyframes heroFadeUp { 0% { opacity: 0; transform: translateX(-50%) translateY(12px); } 100% { opacity: 1; transform: translateX(-50%) translateY(0); } } /* Simple fade for controls */ @keyframes heroFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* ============================================ HERO SECTION ============================================ */ .hero { position: relative; /* Taller to give room for the poem to reveal across scroll */ height: 420vh; z-index: 1; } .hero__image-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; z-index: 1; } @supports (height: 100svh) { .hero__image-wrapper { height: 100svh; } } .hero__image { width: 100%; height: 100%; background-size: cover; background-position: center 35%; /* Start zoomed into the city skyline (upper-right center of image) */ transform: scale(2.8); transform-origin: 55% 28%; will-change: transform; transition: background-image 0.6s ease; } /* Ken Burns drift — subtle origin shift during page entrance */ .is-loaded .hero__image { animation: kenBurnsDrift 3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; } @keyframes kenBurnsDrift { 0% { transform-origin: 52% 25%; transform: scale(3.0); } 100% { transform-origin: 55% 28%; transform: scale(2.8); } } .hero__overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.08) 35%, rgba(0, 0, 0, 0.35) 100% ); pointer-events: none; will-change: opacity; } /* ---- Name & Tagline: starts centered, moves to top on scroll ---- */ .hero__header { position: fixed; top: 0; left: 0; width: 100%; z-index: 3; text-align: center; padding: 4.5rem 1.5rem; pointer-events: none; will-change: opacity, transform; } .hero__name { font-family: 'Canela', 'DM Serif Display', 'Georgia', serif; font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 400; letter-spacing: 0.25em; text-transform: uppercase; color: #FFFFFF; line-height: 1.2; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 12px rgba(0, 0, 0, 0.4), 0 4px 24px rgba(0, 0, 0, 0.2); transition: font-size 0.4s ease, letter-spacing 0.4s ease; } /* Shrink name once it reaches the top */ .hero__header.is-at-top .hero__name { font-size: clamp(1rem, 1.8vw, 1.2rem); letter-spacing: 0.22em; } .hero__tagline { font-family: 'Cormorant Garamond', 'Georgia', serif; font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 400; font-style: italic; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.92); margin-top: 0.6em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.3); transition: font-size 0.4s ease, opacity 0.4s ease; } .hero__header.is-at-top .hero__tagline { font-size: clamp(0.75rem, 1.1vw, 0.85rem); } /* ---- Poem: reveals line by line on scroll ---- */ .hero__poem { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; text-align: center; pointer-events: none; width: 90%; max-width: 520px; will-change: opacity; opacity: 0; padding: 2rem 1.5rem; } .poem-line { font-family: 'Cormorant Garamond', 'Georgia', serif; font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 400; font-style: italic; line-height: 1.7; color: #FFFFFF; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 2px 10px rgba(0, 0, 0, 0.5), 0 4px 20px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(8px); transition: opacity 0.7s ease, transform 0.7s ease; } .poem-line.is-revealed { opacity: 1; transform: translateY(0); } /* Stanza breaks (extra top spacing for new couplets) */ .poem-line--stanza { margin-top: 1.1em; } /* Closing lines get slightly bolder treatment */ .poem-line--closing { font-weight: 400; } .poem-attribution { font-family: 'Inter', sans-serif; font-size: 0.7rem; font-style: normal; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-top: 1.8em; opacity: 0; transform: translateY(8px); transition: opacity 0.7s ease, transform 0.7s ease; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.3); pointer-events: auto; } .poem-attribution.is-revealed { opacity: 1; transform: translateY(0); } /* ---- Verse refresh easter egg ---- */ .poem-refresh { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: rgba(255, 255, 255, 0.45); cursor: pointer; padding: 0.3em; margin-left: 0.5em; vertical-align: middle; opacity: 1; transform: scale(1); transition: color 0.3s ease, transform 0.3s ease; pointer-events: auto; text-shadow: none; } .poem-refresh:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; border-radius: 50%; } .poem-refresh:hover { color: rgba(255, 255, 255, 0.85); transform: scale(1.1) rotate(45deg); } .poem-refresh:active { transform: scale(0.95) rotate(180deg); transition: transform 0.15s ease; } .poem-refresh svg { display: block; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); } /* ---- City label: hover-reveal over skyline ---- */ .city-label { position: fixed; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 0.5rem; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; cursor: default; } .city-label.is-active { pointer-events: auto; opacity: 1; } /* Subtle pin dot — always visible when label is active, pulses gently */ .city-label__pin { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 10px rgba(255, 255, 255, 0.25), 0 0 25px rgba(255, 255, 255, 0.1); transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; margin-bottom: 8px; animation: pinPulse 3s ease-in-out infinite; } @keyframes pinPulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } } .city-label:hover .city-label__pin { background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 12px rgba(255, 255, 255, 0.4), 0 0 35px rgba(255, 255, 255, 0.15); transform: scale(1.4); animation: none; } /* Content container — reveals on hover */ .city-label__content { display: flex; flex-direction: column; align-items: center; gap: 0.2em; opacity: 0; transform: translateY(-6px); transition: opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); padding: 0.55em 1.1em; background: rgba(0, 0, 0, 0.3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; } .city-label:hover .city-label__content { opacity: 1; transform: translateY(0); } .city-label__name { font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); white-space: nowrap; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } .city-label__flag { font-size: 0.85em; letter-spacing: 0; margin-left: 0.2em; } .city-label__coords { font-family: 'Inter', sans-serif; font-size: 0.58rem; font-weight: 400; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.5); white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } /* ---- Desktop hint (mobile only) ---- */ .hero__desktop-hint { display: none; } @media (hover: none), (pointer: coarse) { .hero__desktop-hint { display: block; position: fixed; bottom: 5.5rem; left: 50%; transform: translateX(-50%); z-index: 3; font-size: 0.55rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); white-space: nowrap; pointer-events: none; } } /* ---- Scroll hint ---- */ .hero__scroll-hint { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: rgba(255, 255, 255, 0.55); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; opacity: 1; will-change: opacity; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); } .hero__scroll-hint svg { animation: scrollBounce 2.2s ease-in-out infinite; } @keyframes scrollBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* ============================================ MAIN CONTENT ============================================ */ .content { position: relative; z-index: 10; background-color: var(--color-bg); transition: var(--transition-color); padding-top: 1rem; } /* Soft gradient bleed — eases the hard cut from hero image into content bg */ .content::before { content: ''; position: absolute; top: -80px; left: 0; right: 0; height: 80px; background: linear-gradient(to bottom, transparent 0%, var(--color-bg) 100%); pointer-events: none; z-index: 11; transition: background 0.3s ease; } /* ============================================ SECTIONS ============================================ */ .section { max-width: var(--content-max-width); margin: 0 auto; padding: var(--section-gap) var(--content-padding); position: relative; transition: var(--transition-color); } /* Ornamental section divider — three small dots */ .section::after { content: '\00B7\2002\2002\00B7\2002\2002\00B7'; display: block; text-align: center; font-size: 1rem; letter-spacing: 0.15em; color: var(--color-ornament); padding-top: var(--section-gap); opacity: 0.6; transition: color 0.3s ease; } .section:last-child::after { display: none; } .section__title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 2rem; transition: var(--transition-color); display: flex; align-items: center; gap: 0.75em; } /* Accent dash before section titles */ .section__title::before { content: ''; display: inline-block; width: 16px; height: 1.5px; background: var(--color-accent); border-radius: 1px; flex-shrink: 0; opacity: 0.7; transition: background 0.3s ease; } .section__body p { color: var(--color-text); margin-bottom: 1em; transition: var(--transition-color); } .section__body p:last-child { margin-bottom: 0; } /* ============================================ SECTION ANIMATIONS ============================================ */ [data-animate] { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); } [data-animate].is-visible { opacity: 1; transform: translateY(0); } /* ============================================ ABOUT LIST ============================================ */ .about-list { list-style: none; } .about-item { padding: 0.85rem 0; color: var(--color-text); border-bottom: 1px solid var(--color-divider); font-size: 0.95rem; line-height: 1.6; transition: var(--transition-color), padding-left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); cursor: default; } .about-item:hover { padding-left: 6px; } .about-item:first-child { padding-top: 0; } .about-item:last-child { border-bottom: none; padding-bottom: 0; } /* ============================================ WORK LIST ============================================ */ .work-list { list-style: none; } .work-item { padding: 1.25rem 0; border-bottom: 1px solid var(--color-divider); transition: var(--transition-color), padding-left 0.3s ease; cursor: default; } .work-item:hover { padding-left: 6px; } .work-item:first-child { padding-top: 0; } .work-item:last-child { border-bottom: none; padding-bottom: 0; } .work-item__header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.2rem; } .work-item__company { font-weight: 500; color: var(--color-text); transition: color 0.2s ease; } .work-item:hover .work-item__company { color: var(--color-accent); } .work-item__dates { font-size: 0.85rem; color: var(--color-text-tertiary); white-space: nowrap; transition: var(--transition-color); } .work-item__role { font-size: 0.9rem; color: var(--color-text-secondary); transition: var(--transition-color); } /* ============================================ PRINCIPLES LIST ============================================ */ .principles-list { list-style: none; counter-reset: principles; } .principle { counter-increment: principles; padding: 1.5rem 0; border-bottom: 1px solid var(--color-divider); transition: var(--transition-color), padding-left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); cursor: default; } .principle:hover { padding-left: 6px; } .principle:first-child { padding-top: 0; } .principle:last-child { border-bottom: none; padding-bottom: 0; } .principle::before { content: counter(principles, decimal-leading-zero); display: block; font-size: 0.75rem; font-weight: 500; color: var(--color-accent); letter-spacing: 0.05em; margin-bottom: 0.5rem; opacity: 0.7; transition: var(--transition-color); } .principle__title { display: block; font-weight: 500; color: var(--color-text); margin-bottom: 0.3rem; transition: var(--transition-color); } .principle__desc { display: block; font-size: 0.92rem; color: var(--color-text-secondary); line-height: 1.6; transition: var(--transition-color); } /* ============================================ FUN FACTS LIST ============================================ */ .fun-list { list-style: none; } .fun-list li { padding: 0.85rem 0; color: var(--color-text); border-bottom: 1px solid var(--color-divider); font-size: 0.95rem; line-height: 1.6; transition: var(--transition-color), padding-left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); cursor: default; } .fun-list li:hover { padding-left: 6px; } .fun-list li:first-child { padding-top: 0; } .fun-list li:last-child { border-bottom: none; padding-bottom: 0; } /* ============================================ LINKS GRID ============================================ */ .elsewhere-note { font-size: 0.95rem; color: var(--color-text-secondary); line-height: 1.65; margin-bottom: 1.5rem; font-style: italic; transition: var(--transition-color); } .links-grid { display: flex; flex-wrap: wrap; gap: 0; } .link-item { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.7rem 0; margin-right: 2.5rem; font-size: 0.95rem; font-weight: 500; color: var(--color-text); text-decoration: none; transition: color var(--transition-base); } .link-item:hover { color: var(--color-accent); } .link-item__arrow { width: 12px; height: 12px; opacity: 0.4; transition: opacity var(--transition-base), transform var(--transition-base); } .link-item:hover .link-item__arrow { opacity: 1; transform: translate(2px, -2px); } /* ============================================ FOOTER ============================================ */ .footer { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.75rem; max-width: var(--content-max-width); margin: 0 auto; padding: 2.5rem var(--content-padding); transition: var(--transition-color); } .footer__mountains { color: var(--color-ornament); opacity: 0.45; transition: color 0.3s ease, opacity 0.3s ease; } .footer:hover .footer__mountains { opacity: 0.7; } .footer__copy { font-size: 0.8rem; color: var(--color-text-tertiary); transition: var(--transition-color); } /* ============================================ TOP-RIGHT CONTROLS (theme + music) ============================================ */ .hero-controls { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 100; display: flex; align-items: center; gap: 0.6rem; } .hero-control { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; background: rgba(0, 0, 0, 0.15); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: rgba(255, 255, 255, 0.85); cursor: pointer; transition: color var(--transition-base), border-color var(--transition-base), background-color var(--transition-base); } .hero-control:hover { background: rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.5); color: #FFFFFF; } /* When scrolled past hero, adapt controls to content background */ .hero-controls.is-scrolled .hero-control { border-color: var(--color-divider); background: var(--color-surface); color: var(--color-text-secondary); } .hero-controls.is-scrolled .hero-control:hover { color: var(--color-text); border-color: var(--color-text-secondary); background: var(--color-surface); } /* ---- Theme toggle icons ---- */ .theme-icon--sun { display: none; } .theme-icon--moon { display: block; } [data-theme="dark"] .theme-icon--sun { display: block; } [data-theme="dark"] .theme-icon--moon { display: none; } /* ---- Music toggle icons ---- */ .music-icon--on { display: none; } .music-icon--off { display: block; } .music-toggle.is-playing .music-icon--on { display: block; } .music-toggle.is-playing .music-icon--off { display: none; } /* ---- Track skip button ---- */ .track-skip { transition: color var(--transition-base), border-color var(--transition-base), background-color var(--transition-base); } .track-skip:active svg { transform: translateX(2px); transition: transform 0.1s ease; } /* ============================================ CURSOR GLOW ============================================ */ .cursor-glow { position: fixed; top: 0; left: 0; width: 350px; height: 350px; border-radius: 50%; pointer-events: none; z-index: 50; opacity: 0; transform: translate(-50%, -50%); transition: opacity 0.3s ease, background 0.5s ease; will-change: top, left; /* Light mode: warm golden sunlight glow */ background: radial-gradient(circle, rgba(200, 170, 100, 0.18) 0%, transparent 70%); } /* Dark mode: cool moonlight blue glow */ [data-theme="dark"] .cursor-glow { background: radial-gradient(circle, rgba(120, 160, 220, 0.18) 0%, transparent 70%); } /* Hide on touch/mobile devices */ @media (hover: none), (pointer: coarse) { .cursor-glow { display: none; } } /* ============================================ CURSOR CREATURE (dragonfly / firefly) ============================================ */ .cursor-creature { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 51; opacity: 0; transform: translate(-50%, -50%); transition: opacity 0.4s ease; will-change: top, left, transform; } /* ---- Mode visibility ---- */ .creature--dragonfly { display: block; } .creature--firefly { display: none; } [data-theme="dark"] .creature--dragonfly { display: none; } [data-theme="dark"] .creature--firefly { display: block; } /* ---- Dragonfly ---- */ .creature--dragonfly svg { display: block; filter: drop-shadow(0 0 3px rgba(200, 170, 100, 0.3)); } /* Wing flutter — rapid oscillation via scaleY */ .dragonfly-wing--left, .dragonfly-wing--left-b { transform-origin: 14px center; animation: wingFlutterLeft 0.12s ease-in-out infinite alternate; } .dragonfly-wing--right, .dragonfly-wing--right-b { transform-origin: 14px center; animation: wingFlutterRight 0.12s ease-in-out infinite alternate; } /* Bottom wings slightly delayed for realism */ .dragonfly-wing--left-b, .dragonfly-wing--right-b { animation-delay: 0.04s; } @keyframes wingFlutterLeft { 0% { transform: rotate(-15deg) scaleY(1); } 100% { transform: rotate(-15deg) scaleY(0.6); } } @keyframes wingFlutterRight { 0% { transform: rotate(15deg) scaleY(1); } 100% { transform: rotate(15deg) scaleY(0.6); } } /* Wing shimmer — slow opacity pulse for sunlight effect */ .dragonfly-wing { animation: wingShimmer 2.5s ease-in-out infinite alternate; } /* Override: flutter takes precedence, shimmer layered on fill opacity */ .dragonfly-wing--left, .dragonfly-wing--left-b { animation: wingFlutterLeft 0.12s ease-in-out infinite alternate, wingShimmer 2.5s ease-in-out infinite alternate; } .dragonfly-wing--right, .dragonfly-wing--right-b { animation: wingFlutterRight 0.12s ease-in-out infinite alternate, wingShimmer 2.5s ease-in-out infinite alternate; } @keyframes wingShimmer { 0% { fill-opacity: 0.25; } 100% { fill-opacity: 0.45; } } /* ---- Firefly ---- */ .creature--firefly { position: relative; width: 30px; height: 30px; } .firefly-body { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #D4C85A; transform: translate(-50%, -50%); z-index: 2; } .firefly-glow { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(200, 200, 80, 0.5) 0%, rgba(180, 200, 60, 0.2) 35%, transparent 70% ); animation: fireflyPulse 2.2s ease-in-out infinite; z-index: 1; } @keyframes fireflyPulse { 0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } } /* Hide creature on touch/mobile */ @media (hover: none), (pointer: coarse) { .cursor-creature { display: none; } } /* ============================================ REDUCED MOTION ============================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* Skip all entrance animations */ .hero__image-wrapper, .hero__header, .hero__scroll-hint, .hero-controls { opacity: 1 !important; animation: none !important; } .hero__image { transform: scale(1) !important; animation: none !important; } .hero__header { opacity: 1 !important; } .hero__poem { opacity: 1 !important; } .poem-line, .poem-attribution { opacity: 1 !important; transform: none !important; } .hero__scroll-hint { display: none; } [data-animate] { opacity: 1; transform: none; transition: none; } .hero__scroll-hint svg { animation: none; } .cursor-glow, .cursor-creature { display: none; } } /* ============================================ RESPONSIVE — TABLET (768px) ============================================ */ @media (max-width: 768px) { :root { --section-gap: 2rem; --content-padding: 1.25rem; } .hero__name { letter-spacing: 0.15em; } .hero__tagline { letter-spacing: 0.1em; } .poem-line { font-size: clamp(1rem, 2.5vw, 1.2rem); } } /* ============================================ RESPONSIVE — MOBILE (480px) ============================================ */ @media (max-width: 480px) { :root { --section-gap: 2.5rem; --content-padding: 1rem; } body { font-size: 15px; line-height: 1.7; } .hero { height: 380vh; } .hero__image { transform: scale(2.4); transform-origin: 55% 28%; } .hero__header { padding: 5rem 1rem; } .hero__name { letter-spacing: 0.12em; font-size: 1rem; } .hero__poem { width: 88%; } .poem-line { font-size: 1rem; } .work-item__header { flex-direction: column; gap: 0.15rem; } .work-item__dates { font-size: 0.8rem; } .links-grid { flex-direction: column; } .link-item { margin-right: 0; padding: 0.6rem 0; border-bottom: 1px solid var(--color-divider); } .link-item:last-child { border-bottom: none; } }