/* design-taste-frontend (v1) pass (without the left-aligned layout) + smooth scroll + page transitions. Remove the <link> to undo. */

/* 1 — calmer H1 (tighter tracking, not screaming) */
@media (min-width:1200px){html:not([lang="de"]) .ui-VrdHj .style-preset-ox49xu:not(.rich-text-wrapper){--ui-font-size:100px;--ui-letter-spacing:-.035em;letter-spacing:-.035em}}

/* 2 — spring-like easing everywhere + tactile press feedback */
header.nav .resume,.am-lang button,.am-theme,header.nav .menu-btn,form button,.btn,.connect,.next-card,.frame.zoom{transition-timing-function:cubic-bezier(.16,1,.3,1)!important;transition-duration:.35s}
header.nav .resume:active,.am-theme:active,header.nav .menu-btn:active,.am-lang button:active,form button:active,.btn:active,.connect:active{transform:translateY(1px) scale(.97)}
.next-card:active,.frame.zoom:active{transform:scale(.985)}
a.ui-LT2sA.ui-EtG6L:active,a.ui-DlCYs.ui-1arxjw3:active{transform:scale(.985)!important}

/* 3 — materiality: tinted diffusion shadows + softer radii on project imagery (cards only where they carry hierarchy) */
.ui-1tz3idc,.ui-1ts3v8q{border-radius:16px;overflow:hidden;box-shadow:0 28px 44px -26px rgba(64,44,28,.32)}
.frame{border-radius:16px;overflow:hidden;box-shadow:0 30px 50px -28px rgba(64,44,28,.30)}
.frame.zoom:hover{box-shadow:0 36px 56px -26px rgba(64,44,28,.38)}
html[data-theme="dark"] .ui-1tz3idc,html[data-theme="dark"] .ui-1ts3v8q,html[data-theme="dark"] .frame{box-shadow:0 28px 44px -26px rgba(0,0,0,.6);outline:1px solid rgba(243, 241, 236,.06);outline-offset:-1px}

/* 4 — no custom mouse cursors (the "click to explore" cursor chip) */
.aman-cursor{display:none!important}

/* 5 — staggered load-in (CSS cascade) for the header and the static page heroes */
@keyframes taste-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
header.nav .brand,header.nav .links a,header.nav .nav-r>*{animation:taste-rise .7s cubic-bezier(.16,1,.3,1) both}
header.nav .links a:nth-child(1){animation-delay:.05s}header.nav .links a:nth-child(2){animation-delay:.10s}header.nav .links a:nth-child(3){animation-delay:.15s}header.nav .links a:nth-child(4){animation-delay:.20s}
header.nav .nav-r>*:nth-child(1){animation-delay:.22s}header.nav .nav-r>*:nth-child(2){animation-delay:.27s}header.nav .nav-r>*:nth-child(3){animation-delay:.32s}header.nav .nav-r>*:nth-child(4){animation-delay:.37s}
.hero-top>*,.crumbs,.hero .cover,.hero-side{animation:taste-rise .8s cubic-bezier(.16,1,.3,1) both}
.crumbs{animation-delay:.05s}.hero-top>*:nth-child(1){animation-delay:.12s}.hero-top>*:nth-child(2){animation-delay:.24s}.hero .cover{animation-delay:.34s}
@media (prefers-reduced-motion:reduce){header.nav *,.hero-top>*,.crumbs,.hero .cover,.hero-side{animation:none!important}}

/* 6 — perpetual micro-interaction: a breathing "live" dot beside the Hamburg clock */
header.nav .clock::before{content:"";display:inline-block;width:9px;height:9px;margin-right:12px;border-radius:50%;background:#6DBF9B;vertical-align:middle;position:relative;top:-2px;animation:taste-breathe 2.6s ease-in-out infinite}
@keyframes taste-breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(.6);opacity:.45}}
@media (prefers-reduced-motion:reduce){header.nav .clock::before{animation:none}}

/* 7 — body copy measure: comfortable line length */
.summary,.legal-body p,.step p{max-width:65ch}


/* ---- smooth scrolling (Lenis) ---- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ---- page transitions: a calm fade through the page colour ---- */
html{--pt-bg:#fdfaf6}
html[data-theme="dark"]{--pt-bg:#151412}
html::after{content:"";position:fixed;inset:0;z-index:2147483000;background:var(--pt-bg);opacity:0;pointer-events:none;transition:opacity .38s cubic-bezier(.16,1,.3,1)}
html.am-pt-out::after{opacity:1;pointer-events:all}
html.am-pt-enter::after{opacity:1;transition:none}
@media (prefers-reduced-motion:reduce){html::after{transition:none}}

/* ---- "dynamic pill" button feel (after Skiper UI #3, Apple play button) ----
   spring overshoot on hover/press (bounce ≈ .16), width morph with a soft overshoot, label swaps in with scale + blur */
:is(header.nav .resume,header.nav .menu-btn,.am-theme,.btn,.connect,button.ui-0gsxm,a[href^="mailto:"][style*="height: 40px"],.next-card .go){
  transition:transform .55s cubic-bezier(.34,1.56,.64,1),background-color .3s ease,color .3s ease,border-color .3s ease,width .6s cubic-bezier(.34,1.3,.64,1)!important}
:is(header.nav .resume,header.nav .menu-btn,.am-theme,.btn,.connect,button.ui-0gsxm,a[href^="mailto:"][style*="height: 40px"]):hover{transform:scale(1.045)}
:is(header.nav .resume,header.nav .menu-btn,.am-theme,.btn,.connect,button.ui-0gsxm,a[href^="mailto:"][style*="height: 40px"],.am-lang button):active{transform:scale(.95)!important;transition-duration:.18s!important}
@keyframes am-blur-in{from{opacity:0;transform:scale(.55);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
.am-blurin{display:inline-block;animation:am-blur-in .5s cubic-bezier(.34,1.56,.64,1) both}
@media (prefers-reduced-motion:reduce){
  :is(header.nav .resume,header.nav .menu-btn,.am-theme,.btn,.connect,button.ui-0gsxm,a[href^="mailto:"][style*="height: 40px"]){transition:background-color .2s ease,color .2s ease!important}
  :is(header.nav .resume,header.nav .menu-btn,.am-theme,.btn,.connect,button.ui-0gsxm,a[href^="mailto:"][style*="height: 40px"]):is(:hover,:active){transform:none!important}
  .am-blurin{animation:none}
}

/* ---- theme switch wipe (Skiper UI #26 · rectangle, bottom-up) ---- */
@keyframes am-reveal-up{from{clip-path:polygon(0% 100%,100% 100%,100% 100%,0% 100%)}to{clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}}
::view-transition-group(root){animation-duration:.7s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:-1}
::view-transition-new(root){animation:am-reveal-up .7s cubic-bezier(.16,1,.3,1) both}

/* ---- circle-fill hover: the same hover as "Read my story" / "View all projects", on every other button ---- */
:is(header.nav .resume,header.nav .menu-btn,.am-theme,.btn,.connect,button.ui-0gsxm,a[href^="mailto:"][style*="height: 40px"]){
  position:relative;overflow:hidden;isolation:isolate;--hv-fill:var(--ink,#201f1d);--hv-text:var(--bg,#fdfaf6)}
:is(header.nav .resume,header.nav .menu-btn,.am-theme,.btn,.connect,button.ui-0gsxm,a[href^="mailto:"][style*="height: 40px"])::before{
  content:"";position:absolute;left:50%;bottom:-16px;width:16px;aspect-ratio:1;border-radius:50%;background:var(--hv-fill);transform:translateX(-50%);z-index:-1;pointer-events:none;
  transition:width .6s cubic-bezier(.16,1,.3,1),bottom .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
:is(header.nav .resume,header.nav .menu-btn,.am-theme,.btn,.connect,button.ui-0gsxm,a[href^="mailto:"][style*="height: 40px"]):hover::before{width:230%;bottom:50%;transform:translate(-50%,50%)}
:is(header.nav .resume,header.nav .menu-btn,.am-theme,.btn,.connect):hover{color:var(--hv-text)}
:is(button.ui-0gsxm,a[href^="mailto:"][style*="height: 40px"]):hover :is(p,span,div){color:var(--hv-text)!important}
/* keep each button's own background on hover (the circle does the filling) */
header.nav .resume:hover,html[data-theme="dark"] header.nav .resume:hover{background:var(--pink)!important}
.am-theme:hover{background:var(--color-bg-warm,#fff)!important}
.btn:hover{background:var(--card,#fff)!important}.btn.primary:hover{background:var(--pink)!important;--hv-fill:var(--ink)}
.btn.done,.btn.done:hover{background:var(--ink)!important;color:var(--bg)!important}
.results .btn{--hv-fill:#fff;--hv-text:var(--ink,#201f1d)}.results .btn:hover{background:transparent!important;border-color:#fff}
.connect:hover{background:var(--pink)!important}.connect.done:hover{background:var(--bg)!important}
html[data-theme="dark"] .btn:hover{color:var(--bg)}
/* the circle replaces the earlier scale-on-hover */
:is(header.nav .resume,header.nav .menu-btn,.am-theme,.btn,.connect,button.ui-0gsxm,a[href^="mailto:"][style*="height: 40px"]):hover{transform:none}
@media (prefers-reduced-motion:reduce){:is(header.nav .resume,header.nav .menu-btn,.am-theme,.btn,.connect,button.ui-0gsxm,a[href^="mailto:"][style*="height: 40px"])::before{transition:none}}

/* ---- theme button icon: sun ⇄ moon morph (Skiper UI #4, "expand" variant) ---- */
.am-theme svg.am-ico{position:static;width:24px;height:24px;fill:currentColor;stroke:none;opacity:1;transform:none;flex:none}
.am-ico .am-cp{transition:transform .35s ease-in-out}
.am-ico .am-disc{transition:r .35s ease-in-out}
.am-ico .am-rays{transform-origin:16px 16px;transition:transform .35s ease-in-out,opacity .35s ease-in-out}
html[data-theme="dark"] .am-ico .am-cp{transform:translate(-12px,10px)}
html[data-theme="dark"] .am-ico .am-disc{r:10px}
html[data-theme="dark"] .am-ico .am-rays{transform:rotate(-100deg) scale(.5);opacity:0}
@media (prefers-reduced-motion:reduce){.am-ico .am-cp,.am-ico .am-disc,.am-ico .am-rays{transition:none}}

/* ---- no copying from the site: text can't be selected or dragged; contact details (mailto / tel links) and form fields stay selectable ---- */
html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
a[href^="mailto:"],a[href^="mailto:"] *,a[href^="tel:"],a[href^="tel:"] *,input,textarea,select,[contenteditable="true"],.am-copyok,.am-copyok *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
img,svg,video,picture{-webkit-user-drag:none;user-drag:none}

/* Home hero headline (Home only, via .ui-x86js0): smaller than the old 100px one-liner, original 980px box kept. Line 1 = claim, line 2 = answer. German is a longer sentence, so it is set a little smaller. */
html[lang] body .ui-x86js0 h1.style-preset-ox49xu.ui-text{--ui-font-size:clamp(28px,4vw,58px)!important;--ui-line-height:114%!important;--ui-letter-spacing:-.015em!important}
html[lang="de"] body .ui-x86js0 h1.style-preset-ox49xu.ui-text{--ui-font-size:clamp(24px,2.7vw,39px)!important;--ui-line-height:120%!important}
/* phones: break after "…a user" so the claim reads "AI never watched a user / get stuck." instead of leaving "stuck." alone */
@media (max-width:600px){html[lang="en"] body .ui-x86js0 h1.style-preset-ox49xu.ui-text{max-width:12em;margin-inline:auto}}

/* Home hero extras: role line, domain chips and one call to action (injected by <script data-hero-extras> in index.html) */
.am-hero-eyebrow{margin:0 0 -14px;font:500 13px/1.3 "Geist Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;text-align:center;color:var(--color-text-primary,#201f1d);opacity:.72;animation:am-hero-in .7s .35s cubic-bezier(.16,1,.3,1) both}
.am-hero-actions{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:-6px;animation:am-hero-in .7s .5s cubic-bezier(.16,1,.3,1) both}
.am-hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0;list-style:none}
.am-hero-chips li{padding:9px 16px 8px;border:1px solid color-mix(in srgb,var(--color-text-primary,#201f1d) 30%,transparent);border-radius:999px;font:500 14px/1 Manrope,"Manrope Placeholder",sans-serif;letter-spacing:-.005em;color:var(--color-text-primary,#201f1d)}
.am-hero-cta{display:flex;justify-content:center}
.am-hero-btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:10px;padding:15px 28px 14px;border:1px solid var(--color-text-primary,#201f1d);border-radius:999px;background:var(--color-accent-yellow,#BCE8D2);color:var(--color-text-primary,#201f1d);font:600 16px/1 Manrope,"Manrope Placeholder",sans-serif;text-decoration:none;cursor:pointer;--hv-fill:var(--color-text-primary,#201f1d);--hv-text:var(--color-bg-primary,#fff);transition:color .3s ease}
.am-hero-btn i{font-style:normal;display:inline-block;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.am-hero-btn::before{content:"";position:absolute;left:50%;bottom:-16px;width:16px;aspect-ratio:1;border-radius:50%;background:var(--hv-fill);transform:translateX(-50%);z-index:-1;pointer-events:none;transition:width .6s cubic-bezier(.16,1,.3,1),bottom .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.am-hero-btn:hover{color:var(--hv-text)}
.am-hero-btn:hover::before{width:230%;bottom:50%;transform:translate(-50%,50%)}
.am-hero-btn:hover i{transform:translateY(3px)}
.am-hero-btn:active{transform:scale(.97)}
.am-hero-btn:focus-visible{outline:2px solid var(--color-text-primary,#201f1d);outline-offset:4px}
@keyframes am-hero-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:809.98px){.am-hero-eyebrow{font-size:11.5px;letter-spacing:.12em;margin-top:20px}.am-hero-chips li{font-size:13px;padding:8px 13px 7px}.am-hero-btn{padding:14px 24px 13px;font-size:15px}}
@media (prefers-reduced-motion:reduce){.am-hero-eyebrow,.am-hero-actions{animation:none}.am-hero-btn::before{transition:none}}