/* Decorative motion never blocks content, touch navigation or reduced-motion preferences. */
body { overflow-x: clip; }
.marquee { margin-inline: 2px; }
.text-link { min-height: 44px; }
.footer-bottom details { min-width: 0; }
.footer-bottom details p { overflow-wrap: anywhere; }
a[href^="https://www.instagram.com/"]::before, a[href^="https://www.fatsoma.com/"]::before { content: ''; display: inline-block; width: 22px; height: 22px; flex: 0 0 22px; background-position: center; background-size: contain; background-repeat: no-repeat; vertical-align: middle; }
a[href^="https://www.instagram.com/"]::before { background-image: url('assets/instagram-logo.svg'); }
a[href^="https://www.fatsoma.com/"]::before { background-image: url('assets/fatsoma-logo.png'); }
.nav-button[href^="https://www.instagram.com/"]::before, .footer-top a[href^="https://www.instagram.com/"]::before { filter: brightness(0) invert(1); }
.fatsoma[href^="https://www.fatsoma.com/"]::before { background-image: url('assets/fatsoma-wordmark.svg'); }
.button[href^="https://www.instagram.com/"], .button[href^="https://www.fatsoma.com/"], .text-link[href^="https://www.fatsoma.com/"], .footer-top a { gap: 9px; }
.text-link[href^="https://www.fatsoma.com/"] { display: inline-flex; align-items: center; }
.platform-card[href]::before { width: 32px; height: 32px; display: block; margin-bottom: 22px; }
.platform-card.fatsoma[href]::before { width: 128px; height: 32px; background-position: left center; }
/* Existing sweep uses ::before, so logo-bearing buttons use ::after instead. */
.button.sweep[href]::before, .platform-card.sweep[href]::before { position: static; inset: auto; transform: none; opacity: 1; animation: none !important; z-index: auto; }
.button.sweep[href]::after, .platform-card.sweep[href]::after { content: ''; position: absolute; inset: -70% -90%; background: linear-gradient(110deg, transparent 40%, #ffffff35 48%, #ffffff70 50%, transparent 58%); transform: translateX(-65%) rotate(-8deg); pointer-events: none; z-index: 4; opacity: 0; }
.button.sweep[href]:hover::after, .button.sweep[href]:focus-visible::after, .platform-card.sweep[href]:hover::after, .platform-card.sweep[href]:focus-visible::after { animation: light-sweep 1.1s ease both; }
html[data-effects="on"] .hero-copy h1 { animation: entrance 1s cubic-bezier(.16, 1, .3, 1) both, headline-colour 16s 1s ease-in-out infinite; }
html[data-effects="on"] .hero .outlined { animation: outline-colour 16s 1s ease-in-out infinite; }
@keyframes headline-colour { 0%,100% { color: #faf7ff; } 25% { color: #ff75cb; } 50% { color: #e0ff75; } 75% { color: #a9e9ff; } }
@keyframes outline-colour { 0%,100% { -webkit-text-stroke-color: #ff75cb; } 25% { -webkit-text-stroke-color: #e0ff75; } 50% { -webkit-text-stroke-color: #a9e9ff; } 75% { -webkit-text-stroke-color: #ff75cb; } }
.hero-collage { translate: 0 var(--scroll-shift, 0px); transition: translate .45s ease-out; }
.hero-copy h1 { animation-duration: 1s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
.poster img { transition: scale 1s cubic-bezier(.16, 1, .3, 1), opacity .6s; }
.poster:hover img { scale: 1.04; opacity: 1; }
.site-header nav a { position: relative; min-height: 44px; display: inline-flex; align-items: center; }
.site-header nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px; background: var(--pink); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.site-header nav a:hover::after, .site-header nav a:focus-visible::after { transform: scaleX(1); }
.button { transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s, background-color .35s, border-color .35s; }
.button:active { transform: translateY(1px) scale(.98); box-shadow: none; }
.text-link, .footer-top a { transition: color .3s, border-color .3s; }
.platform-card { transition: transform .55s cubic-bezier(.16, 1, .3, 1), box-shadow .55s, border-color .4s; }
.platform-card:focus-visible { box-shadow: 10px 14px 0 #7548ef66, 0 0 60px #7548ef35; }
.platform-card h3 { transition: translate .5s cubic-bezier(.16, 1, .3, 1); }
.platform-card:hover h3, .platform-card:focus-visible h3 { translate: 5px 0; }
.has-reveals .reveal { transition-duration: 1s; transition-timing-function: cubic-bezier(.16, 1, .3, 1); }
.platform-grid .reveal:nth-child(2), .about-copy.reveal { transition-delay: .12s; }
.has-reveals .reveal-step { opacity: 0; translate: 0 18px; transition: opacity .65s ease, translate .75s cubic-bezier(.16, 1, .3, 1); }
.has-reveals .reveal-step.in-view { opacity: 1; translate: 0 0; }
.reveal-step:nth-child(2) { transition-delay: .07s; }
.reveal-step:nth-child(3) { transition-delay: .14s; }
.reveal-step:nth-child(4) { transition-delay: .21s; }
.about-heading:after { transform-origin: left; transition: scale 1.1s cubic-bezier(.16, 1, .3, 1) .15s; }
.has-reveals .about-heading:not(.in-view):after { scale: 0 1; }
.archive { transition: border-color .4s, box-shadow .4s, background-color .4s; }
.archive:hover { box-shadow: 0 12px 40px #ff75cb12; }
#motion-toggle, .footer-bottom summary { min-height: 44px; }
.footer-bottom summary { display: flex; align-items: center; }
.footer-top a { display: inline-flex; min-height: 44px; align-items: center; }
.hero-copy, .next-copy, .about-heading, .about-copy, .platform-card, .archive > div { min-width: 0; }
.section h2, .section h3, .vibe-lines strong { overflow-wrap: break-word; }
.vibe-lines strong { min-width: 0; }
@media (max-width: 650px) {
  .hero h1 .outlined { font-size: .8em; white-space: nowrap; }
  .site-header { gap: 14px; }
  .hero { padding-top: 34px; }
  .hero-collage { translate: none; }
  .hero-bottom { flex-wrap: wrap; align-items: center; }
  .hero-bottom > span { flex: 1 1 160px; max-width: none; }
  #motion-toggle { flex: 0 0 auto; white-space: nowrap; }
  .hero .actions .button, .next-copy .button { width: 100%; }
  .hero .actions .text-link { min-height: 44px; display: inline-flex; align-items: center; }
  .section { padding-block: 60px; }
  .next-panel { padding: 24px; }
  .city-stack { padding-inline: 8px; gap: 18px; }
  .city-stack span { font-size: clamp(1.5rem, 7vw, 1.875rem); }
  .archive > div:nth-child(2) { min-width: 0; flex: 1 1 140px; }
  .archive-date { min-width: 76px; }
  .platform-card h3 { font-size: clamp(2.75rem, 13vw, 3.375rem); }
  .platform-card { min-height: 0; padding: 26px; }
  .platform-grid .reveal:nth-child(2), .about-copy.reveal { transition-delay: 0s; }
  .contact .eyebrow { line-height: 1.7; }
  .footer-bottom { gap: 16px; }
  .footer-bottom details { width: 100%; }
}
@media (hover: none) { .platform-card:hover h3 { translate: none; } .poster:hover img { scale: 1; } }
[data-effects="paused"] .hero-collage { translate: none; }
[data-effects="paused"] .reveal-step { opacity: 1 !important; translate: none !important; }
[data-effects="paused"] .about-heading:after { scale: 1 1 !important; }
[data-effects="paused"] .button.sweep[href]::before, [data-effects="paused"] .platform-card.sweep[href]::before { opacity: 1 !important; }
[data-effects="paused"] .sweep[href]::after { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-collage, .platform-card h3, .has-reveals .reveal-step { translate: none; }
  .has-reveals .reveal-step { opacity: 1; }
  .about-heading:after { scale: 1 1 !important; }
  .button.sweep[href]::before { display: inline-block; }
  .platform-card.sweep[href]::before { display: block; }
  .sweep[href]::after { display: none; }
}