/* =========================================================
   HOMEPAGE LUXURY POLISH
========================================================= */

:root{
  --section-space:clamp(7rem,10vw,10rem);
}

/* =========================================================
   GLOBAL SECTION SPACING
========================================================= */

.story-section,
.promise-section,
.services-showcase,
.booking-cta{
    position:relative;
    overflow:hidden;
    padding:var(--section-space) 0;
}

/* =========================================================
   BACKGROUND PAW WATERMARKS
========================================================= */

.story-section::before,
.services-showcase::before,
.booking-cta::before{

content:"";

position:absolute;

width:620px;
height:620px;

background:
url("/assets/images/walking-paw.png")
center/contain
no-repeat;

opacity:.028;

pointer-events:none;

animation:
pawDrift 36s ease-in-out infinite;

z-index:0;

}

.story-section::before{

top:-120px;
right:-180px;

}

.services-showcase::before{

left:-180px;
bottom:-180px;

animation-delay:8s;

}

.booking-cta::before{

right:-180px;
top:-120px;

animation-delay:14s;

}

@keyframes pawDrift{

0%,100%{

transform:
translateY(0)
rotate(0deg);

}

50%{

transform:
translateY(-18px)
rotate(4deg);

}

}

/* =========================================================
   STORY SECTIONS
========================================================= */

.story-grid{

position:relative;

z-index:2;

display:grid;

align-items:center;

gap:clamp(70px,8vw,130px);

}

.story-copy{

max-width:610px;

}

.story-copy h2{

margin-bottom:18px;

}

.story-copy p{

line-height:1.95;

}

.story-lead{

margin-bottom:26px;

font-size:clamp(1.7rem,2vw,2.3rem);

}

/* =========================================================
   DAISY PHOTO
========================================================= */

.story-photo-wrap{

position:relative;

}

.story-photo{

border-radius:38px;

box-shadow:

0 42px 90px
rgba(74,48,82,.14);

transition:

transform .8s ease,

box-shadow .8s ease;

}

.story-photo:hover{

transform:

translateY(-10px)
scale(1.02);

box-shadow:

0 60px 120px
rgba(74,48,82,.18);

}

.story-photo-accent{

opacity:.18;

}

/* =========================================================
   PROMISE
========================================================= */

.promise-section{

background:

linear-gradient(

135deg,

#8b7185 0%,

#a28b9b 58%,

#c7adb6 100%

);

padding:

85px 0;

}

.promise-inner{

max-width:860px;

margin:auto;

position:relative;

z-index:2;

text-align:center;

}

.promise-inner h2{

margin-bottom:22px;

}

.promise-inner p{

max-width:700px;

margin:auto;

line-height:1.9;

}

/* =========================================================
   SERVICE CARDS
========================================================= */

.services-showcase{

background:#faf8f6;

}

.services-showcase-grid{

margin-top:70px;

display:grid;

gap:30px;

}

.service-image-card{

border-radius:34px;

overflow:hidden;

transition:

transform .45s ease,

box-shadow .45s ease;

box-shadow:

0 22px 48px
rgba(74,48,82,.10);

}

.service-image-card:hover{

transform:

translateY(-12px);

box-shadow:

0 42px 90px
rgba(74,48,82,.16);

}

.service-image-card img{

transition:

transform .9s ease;

}

.service-image-card:hover img{

transform:

scale(1.05);

}

.service-image-overlay{

background:

linear-gradient(

180deg,

rgba(28,22,30,.04),

rgba(40,30,45,.78)

);

}

.service-card-front{

transition:

opacity .4s ease,

transform .4s ease;

}

.service-card-drawer{

transition:

opacity .45s ease,

transform .45s ease;

}

/* =========================================================
   CTA
========================================================= */

.booking-cta{

background:

linear-gradient(

180deg,

#faf8f6,

#f3ede9

);

}

.booking-cta-inner{

position:relative;

z-index:2;

display:grid;

align-items:center;

gap:40px;

}

.booking-cta img{

opacity:.92;

filter:

drop-shadow(

0 18px 30px
rgba(112,71,163,.14)

);

animation:

pawFloat 16s ease-in-out infinite;

}

@keyframes pawFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

/* =========================================================
   SECTION REVEALS
========================================================= */

.story-section,
.promise-section,
.services-showcase,
.booking-cta{

animation:

sectionReveal

1s ease both;

animation-timeline:view();

animation-range:

entry 12%

cover 34%;

}

@keyframes sectionReveal{

from{

opacity:0;

transform:

translateY(48px);

}

to{

opacity:1;

transform:none;

}

}