/* Tidal Modernism motion: cinematic editorial entrances, water-like image reveals, and deliberate parallax. */
html.motion-ready { scroll-behavior: auto; }
html.motion-ready .motion-heading .motion-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
html.motion-ready .motion-heading .motion-line-inner { display: block; transform: translate3d(0,112%,0) rotate(2deg); transform-origin: left bottom; transition: transform 1.05s cubic-bezier(.16,1,.3,1); }
html.motion-ready .motion-heading.motion-in .motion-line-inner { transform: translate3d(0,0,0) rotate(0); }
html.motion-ready .motion-heading .motion-line:nth-child(2) .motion-line-inner { transition-delay: .11s; }
html.motion-ready .motion-heading .motion-line:nth-child(3) .motion-line-inner { transition-delay: .22s; }
html.motion-ready .motion-heading .motion-line:nth-child(4) .motion-line-inner { transition-delay: .33s; }

html.motion-ready .hero .eyebrow,
html.motion-ready .hero-intro,
html.motion-ready .hero-price,
html.motion-ready .hero-actions,
html.motion-ready .hero-bottom { opacity: 0; transform: translate3d(0,18px,0); transition: opacity .7s cubic-bezier(.23,1,.32,1), transform .7s cubic-bezier(.23,1,.32,1); }
html.motion-ready .hero.motion-in .eyebrow { opacity: 1; transform: none; transition-delay: .1s; }
html.motion-ready .hero.motion-in .hero-intro { opacity: 1; transform: none; transition-delay: .52s; }
html.motion-ready .hero.motion-in .hero-price { opacity: 1; transform: none; transition-delay: .6s; }
html.motion-ready .hero.motion-in .hero-actions { opacity: 1; transform: none; transition-delay: .7s; }
html.motion-ready .hero.motion-in .hero-bottom { opacity: 1; transform: none; transition-delay: .82s; }

html.motion-ready .motion-visual { clip-path: none; isolation: isolate; will-change: transform; }
html.motion-ready .motion-visual::before { content: ""; position: absolute; z-index: 4; inset: -8%; pointer-events: none; background: linear-gradient(108deg,transparent 24%,rgba(255,251,244,.78) 48%,rgba(188,231,227,.24) 55%,transparent 71%); transform: translate3d(-142%,0,0) skewX(-15deg); }
html.motion-ready .motion-visual.motion-in::before { animation: imageGleam 1.35s cubic-bezier(.22,1,.36,1) both; }
html.motion-ready .district:nth-child(2) .motion-visual.motion-in::before { animation-delay: .13s; }
html.motion-ready .district:nth-child(3) .motion-visual.motion-in::before { animation-delay: .26s; }
html.motion-ready .gallery-card:nth-child(2).motion-visual.motion-in::before { animation-delay: .1s; }
html.motion-ready .gallery-card:nth-child(3).motion-visual.motion-in::before { animation-delay: .2s; }
html.motion-ready .gallery-card:nth-child(4).motion-visual.motion-in::before { animation-delay: .3s; }

.hero-image.motion-parallax { animation: none; transform: scale(1.075) translate3d(0,var(--motion-y,0px),0); transition: clip-path 1.25s cubic-bezier(.22,1,.36,1), transform .18s linear; }
.design-image.motion-parallax { transform: translate3d(0,var(--motion-y,0px),0) scale(1.05); transition: clip-path 1.25s cubic-bezier(.22,1,.36,1), transform .18s linear; }
.location-map.motion-parallax { transform: translate3d(0,var(--motion-y,0px),0); transition: clip-path 1.25s cubic-bezier(.22,1,.36,1), transform .18s linear; }

.motion-tide svg path { stroke-dasharray: 1800; stroke-dashoffset: 1800; transition: stroke-dashoffset 1.7s cubic-bezier(.23,1,.32,1); }
.motion-tide.motion-in svg path { stroke-dashoffset: 0; }
.motion-route { overflow: hidden; }
.motion-route::after { content: ""; position: absolute; z-index: 3; top: 0; bottom: 0; left: -38%; width: 34%; pointer-events: none; opacity: 0; background: linear-gradient(90deg,transparent,rgba(255,251,244,.78),transparent); transform: skewX(-20deg); }
.motion-route.motion-in::after { opacity: 1; animation: coastSweep 1.6s .35s cubic-bezier(.22,1,.36,1) both; }

.official-logo-plate { display: flex; align-items: center; justify-content: center; min-width: 138px; height: 38px; padding: 5px 10px; background: transparent; box-shadow: none; }
.official-logo-plate img { display: block; width: 118px !important; height: auto !important; max-height: 26px; object-fit: contain; }

.hero-vignette::after { content: ""; position: absolute; inset: -22%; pointer-events: none; background: linear-gradient(112deg,transparent 35%,rgba(188,231,227,.14) 49%,transparent 62%); transform: translateX(-70%) rotate(-8deg); animation: waterLight 10s 1.15s ease-in-out infinite; }
.hero-sun { animation: sunFloat 8s ease-in-out infinite alternate; }
.district.active .district-overlay { animation: districtBreath 5.4s ease-in-out infinite alternate; }
.gallery-card.motion-in { animation: galleryRise .8s cubic-bezier(.23,1,.32,1) both; }
.gallery-card:nth-child(2).motion-in { animation-delay: .08s; }.gallery-card:nth-child(3).motion-in { animation-delay: .16s; }.gallery-card:nth-child(4).motion-in { animation-delay: .24s; }
.section-index { position: relative; }
.motion-section.motion-in .section-index::after { content: ""; position: absolute; top: 13px; left: 42px; width: min(23vw,190px); height: 1px; background: currentColor; transform-origin: left; animation: indexLine 1.1s .15s cubic-bezier(.23,1,.32,1) both; opacity: .33; }
.tribay-section.motion-in .districts { animation: districtsBreathe 1.15s cubic-bezier(.23,1,.32,1) both; }
.location-fact.motion-pulse { animation: locationPulse .9s cubic-bezier(.23,1,.32,1) both; }

.residence-panel { position: relative; overflow: hidden; }
.residence-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg,transparent 23%,rgba(188,231,227,.18) 48%,transparent 67%); transform: translateX(-130%); }
.residences-section.motion-in .residence-panel::after { animation: residenceSheen 1.45s .35s cubic-bezier(.22,1,.36,1) both; }
.residences-section.motion-in .plan-ring { animation: slowOrbit 18s linear infinite; }
.residences-section.motion-in .ring-b { animation-direction: reverse; animation-duration: 23s; }
.opportunity-disc { animation: waterBreathe 10s ease-in-out infinite alternate; }
.preview-tide-mark { animation: slowOrbit 25s linear infinite; }
.preview-tide-mark span { animation: counterOrbit 25s linear infinite; }
.map-water { animation: waterBreathe 8s ease-in-out infinite alternate; }
.map-road { transform-origin: center; }
.location-section.motion-in .road-one { animation: roadPulse 1.2s .18s ease-out both; }
.location-section.motion-in .road-two { animation: roadPulse 1.2s .36s ease-out both; }
.location-section.motion-in .road-three { animation: roadPulse 1.2s .54s ease-out both; }

.button, .circle-button, .arrow-button, .gallery-filter-button, .residence-tab, .location-fact { transition-timing-function: cubic-bezier(.23,1,.32,1); }
.button:hover span, .circle-button:hover, .arrow-button:hover { animation: nudge .32s cubic-bezier(.23,1,.32,1) both; }

@keyframes coastSweep { from { transform: translateX(0) skewX(-20deg); } to { transform: translateX(440%) skewX(-20deg); } }
@keyframes imageGleam { from { transform: translate3d(-142%,0,0) skewX(-15deg); } to { transform: translate3d(142%,0,0) skewX(-15deg); } }
@keyframes residenceSheen { to { transform: translateX(130%); } }
@keyframes slowOrbit { to { transform: rotate(360deg); } }
@keyframes counterOrbit { to { transform: rotate(-375deg); } }
@keyframes waterBreathe { from { transform: scale(.98); filter: saturate(.93); } to { transform: scale(1.035); filter: saturate(1.06); } }
@keyframes roadPulse { from { opacity: 0; transform: scaleX(.12) rotate(var(--route-angle,0deg)); } to { opacity: 1; } }
@keyframes nudge { 50% { transform: translate3d(4px,-2px,0); } }
@keyframes waterLight { 0%,100% { transform: translateX(-70%) rotate(-8deg); opacity: .2; } 52% { transform: translateX(72%) rotate(-8deg); opacity: .9; } }
@keyframes sunFloat { from { transform: translate3d(0,-8px,0) scale(.98); } to { transform: translate3d(0,9px,0) scale(1.035); } }
@keyframes districtBreath { from { opacity: .82; } to { opacity: .56; } }
@keyframes galleryRise { from { opacity: .01; transform: translate3d(0,42px,0) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes indexLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes districtsBreathe { from { opacity: .01; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes locationPulse { 50% { transform: translateY(-11px); color: var(--coral); } }

@media (max-width: 650px) {
  html.motion-ready .motion-heading .motion-line-inner { transition-duration: .78s; }
  .hero-image.motion-parallax, .design-image.motion-parallax { transform: scale(1.045) translate3d(0,var(--motion-y,0px),0); }
  .official-logo-plate { min-width: 104px; height: 34px; padding: 5px 8px; }.official-logo-plate img { width: 89px !important; max-height: 21px; }
  .opportunity-disc { animation-duration: 13s; }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready .motion-heading .motion-line-inner,
  html.motion-ready .hero .eyebrow,
  html.motion-ready .hero-intro,
  html.motion-ready .hero-price,
  html.motion-ready .hero-actions,
  html.motion-ready .hero-bottom { opacity: 1; transform: none; transition: none; }
  html.motion-ready .motion-visual { clip-path: none; transition: none; }
  html.motion-ready .motion-visual::before, .hero-vignette::after { display: none; }
  .hero-image.motion-parallax, .design-image.motion-parallax, .location-map.motion-parallax { transform: none; }
  .motion-tide svg path { stroke-dasharray: none; stroke-dashoffset: 0; }
  .opportunity-disc, .preview-tide-mark, .preview-tide-mark span, .map-water, .residences-section.motion-in .plan-ring, .hero-sun, .district.active .district-overlay, .gallery-card.motion-in { animation: none; }
  .motion-route.motion-in::after { display: none; }
}