.petal-field { background: #b7c6a4 url('assets/petal-light.webp') center / cover no-repeat; background-blend-mode: luminosity; }
.home .hero .petal-field { mask-image: linear-gradient(#000 76%,transparent); -webkit-mask-image: linear-gradient(#000 76%,transparent); }
.about-hero .petal-field { opacity: .64; left: calc(50% - var(--visual-viewport,100%) / 2); right: calc(50% - var(--visual-viewport,100%) / 2); }
.ai-hero-grid { isolation: isolate; }
.ai-hero-grid>div { max-width: 720px; }
.ai-hero-grid .project-subtitle { max-width: 620px; }
.ai-object { width: var(--visual-viewport,100%); height: 1120px; top: -70px; right: calc((100% - var(--visual-viewport,100%)) / 2); max-width: none; mix-blend-mode: normal; mask-image: linear-gradient(90deg,transparent,#000 18%,#000 98%,transparent); -webkit-mask-image: linear-gradient(90deg,transparent,#000 18%,#000 98%,transparent); }
.project-hero:has(.ai-object) { min-height: 1010px; }
.project-hero:has(.ai-object)+.project-summary { position: relative; z-index: 1; }
.ai-object:not(.is-live) { background: url('assets/ai-fibre-sage.webp') 80% center / auto 94% no-repeat; }
@media(max-width:1000px){
 .ai-hero-grid>div { max-width: none; }
 .ai-hero-grid .project-subtitle { max-width: 32ch; }
 .ai-object { position: relative; width: calc(100% + 2 * var(--gutter)); height: min(100vw,760px); top: auto; right: auto; margin: -55px calc(-1 * var(--gutter)) -65px; mask-image: linear-gradient(transparent,#000 10%,#000 94%,transparent); -webkit-mask-image: linear-gradient(transparent,#000 10%,#000 94%,transparent); }
 .project-hero:has(.ai-object) { min-height: 0; }
 .ai-object:not(.is-live) { background-position: center; background-size: contain; }
}

@media(max-width:760px){.ai-object{height:530px;}}

/* Keep the controls' visual dots small, with separate, comfortable tap targets. */
.home .hero-dots { gap: 0; padding: 8px; cursor: default; touch-action: pan-y; }
.home .hero-dots button,.home .hero-dots button[aria-current] { position: relative; width: 28px; height: 32px; padding: 0; background: transparent; border-radius: 0; cursor: pointer; }
.home .hero-dots button::before { content: ''; display: block; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 10px; background: #252b2440; transform: translate(-50%,-50%); transition: width .35s,height .35s,background .35s; }
.home .hero-dots button[aria-current]::before { height: 22px; background: var(--ink); }
@media(max-width:760px){
 .home .hero-art { padding-bottom: 48px; }
 .home .hero-photos .hero-track { bottom: 48px; }
 .home .hero-dots { bottom: 0; padding: 4px 10px; }
 .home .hero-dots button,.home .hero-dots button[aria-current] { width: 30px; height: 32px; }
 .home .hero-dots button[aria-current]::before { width: 20px; height: 6px; }
}

@view-transition { navigation: auto; }
:root[data-ai-entry]::view-transition-group(root) { animation-duration: .9s; }
:root[data-ai-entry]::view-transition-old(root) { animation: ai-page-out .22s ease-out both; }
:root[data-ai-entry]::view-transition-new(root) { animation: ai-page-open .9s cubic-bezier(.22,.72,.2,1) both; transform-origin: var(--ai-entry-x) var(--ai-entry-y); }
@keyframes ai-page-out { to { opacity: .25; transform: scale(.985); } }
@keyframes ai-page-open {
 from { clip-path: inset(var(--ai-entry-top) var(--ai-entry-right) var(--ai-entry-bottom) var(--ai-entry-left) round 24px); transform: scale(.96); }
 to { clip-path: inset(0 0 0 0 round 0); transform: scale(1); }
}
:root[data-ai-fallback="opening"] body { animation: ai-page-open .85s cubic-bezier(.22,.72,.2,1) both; transform-origin: var(--ai-entry-x) var(--ai-entry-y); }
@media(prefers-reduced-motion:reduce){:root[data-ai-entry]::view-transition-group(root),:root[data-ai-entry]::view-transition-old(root),:root[data-ai-entry]::view-transition-new(root){animation:none;}}
@media(prefers-reduced-motion:reduce){:root[data-ai-fallback] body{animation:none;}}