/* =========================================================
   HOME HERO
========================================================= */

.home-hero{
  position:relative;
  min-height:calc(100vh - 88px);
  display:flex;
  align-items:center;
  overflow:hidden;

  padding:
    clamp(120px,12vw,170px)
    clamp(40px,5vw,72px)
    clamp(130px,12vw,170px);

  background:
    url("/assets/images/hero-home.png")
    72% center / cover
    no-repeat;

  isolation:isolate;
}

/* ---------------------------------------------------------
   Luxury Background Wash
--------------------------------------------------------- */

.home-hero::before{

content:"";

position:absolute;
inset:0;

background:

linear-gradient(
90deg,
rgba(250,248,246,1) 0%,
rgba(250,248,246,.99) 14%,
rgba(250,248,246,.93) 28%,
rgba(250,248,246,.82) 44%,
rgba(250,248,246,.46) 60%,
rgba(250,248,246,.08) 76%,
rgba(250,248,246,0) 90%
),

radial-gradient(
circle at top left,
rgba(199,173,182,.22),
transparent 42%
);

z-index:0;

}

/* ---------------------------------------------------------
   Walking Paw Background
--------------------------------------------------------- */

.home-hero::after{

content:"";

position:absolute;

left:-140px;
bottom:-160px;

width:780px;
height:780px;

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

opacity:.028;

pointer-events:none;

z-index:0;

animation:
heroPawFloat 30s ease-in-out infinite;

}

/* ---------------------------------------------------------
   Hero Content
--------------------------------------------------------- */

.home-hero-content{

position:relative;

z-index:2;

width:min(690px,100%);

margin-left:
max(
24px,
calc((100vw - var(--content-width))/2)
);

}

/* ---------------------------------------------------------
   Eyebrow
--------------------------------------------------------- */

.home-hero-eyebrow{

display:inline-flex;

align-items:center;

gap:12px;

margin-bottom:22px;

color:var(--brand-mauve);

font-size:.88rem;

font-weight:700;

letter-spacing:.20em;

text-transform:uppercase;

}

.home-hero-eyebrow::before{

content:"";

width:54px;
height:2px;

border-radius:999px;

background:

linear-gradient(
90deg,
var(--brand-gold),
transparent
);

}

/* ---------------------------------------------------------
   Heading
--------------------------------------------------------- */

.home-hero h1{

max-width:640px;

margin:0;

color:var(--brand-purple);

font-family:
"Italiana",
"Cormorant Garamond",
serif;

font-size:
clamp(4.5rem,7vw,7.4rem);

font-weight:400;

letter-spacing:-.03em;

line-height:.93;

text-wrap:balance;

}

/* ---------------------------------------------------------
   Motto
--------------------------------------------------------- */

.home-hero-motto{

margin-top:18px;

max-width:620px;

color:var(--brand-mauve);

font-family:var(--font-script);

font-size:
clamp(2.8rem,4vw,4.8rem);

line-height:.92;

}

/* ---------------------------------------------------------
   Body
--------------------------------------------------------- */

.home-hero-copy{

margin-top:32px;

max-width:560px;

color:#5a5454;

font-size:1.16rem;

line-height:2;

}

/* ---------------------------------------------------------
   CTA Buttons
--------------------------------------------------------- */

.home-hero-actions{

display:flex;

flex-wrap:wrap;

gap:18px;

margin-top:46px;

align-items:center;

}

/* ---------------------------------------------------------
   Decorative Glow
--------------------------------------------------------- */

.home-hero-glow{

position:absolute;

right:-140px;
top:-120px;

width:700px;
height:700px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(199,173,182,.18),
transparent 68%
);

pointer-events:none;

z-index:0;

filter:blur(8px);

}

/* =========================================================
   HERO ENTRANCE
========================================================= */

@keyframes heroFadeUp{

0%{
opacity:0;
transform:translateY(42px);
filter:blur(6px);
}

100%{
opacity:1;
transform:none;
filter:none;
}

}

@keyframes heroButtonReveal{

0%{
opacity:0;
transform:translateY(24px);
}

100%{
opacity:1;
transform:none;
}

}

@keyframes heroBackgroundDrift{

0%{
background-position:72% center;
}

100%{
background-position:75% center;
}

}

@keyframes heroPawFloat{

0%,100%{
transform:
translateY(0)
rotate(0deg);
}

50%{
transform:
translateY(-18px)
rotate(3deg);
}

}

/* ---------------------------------------------------------
   Background Motion
--------------------------------------------------------- */

.home-hero{

animation:
heroBackgroundDrift 36s ease-in-out infinite alternate;

}

/* ---------------------------------------------------------
   Hero Reveal
--------------------------------------------------------- */

.home-hero-eyebrow{

opacity:0;

animation:
heroFadeUp
900ms
cubic-bezier(.16,1,.3,1)
120ms
forwards;

}

.home-hero h1{

opacity:0;

animation:
heroFadeUp
1050ms
cubic-bezier(.16,1,.3,1)
260ms
forwards;

}

.home-hero-motto{

opacity:0;

animation:
heroFadeUp
1050ms
cubic-bezier(.16,1,.3,1)
430ms
forwards;

}

.home-hero-copy{

opacity:0;

animation:
heroFadeUp
950ms
cubic-bezier(.16,1,.3,1)
620ms
forwards;

}

.home-hero-actions .button{

opacity:0;

animation:
heroButtonReveal
850ms
cubic-bezier(.16,1,.3,1)
forwards;

}

.home-hero-actions .button:first-child{

animation-delay:840ms;

}

.home-hero-actions .button:last-child{

animation-delay:980ms;

}

/* ---------------------------------------------------------
   Button Polish
--------------------------------------------------------- */

.home-hero-actions .button{

min-width:190px;

}

.home-hero-actions .button-primary{

box-shadow:

0 22px 48px
rgba(139,113,133,.22);

}

.home-hero-actions .button-primary:hover{

transform:
translateY(-5px)
scale(1.02);

}

.home-hero-actions .button-secondary{

background:
rgba(255,255,255,.84);

backdrop-filter:
blur(14px);

}

/* ---------------------------------------------------------
   Scroll Indicator
--------------------------------------------------------- */

.home-scroll-indicator{

position:absolute;

left:50%;
bottom:34px;

transform:translateX(-50%);

display:flex;
flex-direction:column;
align-items:center;
gap:10px;

z-index:3;

opacity:.62;

transition:
opacity .35s ease;

}

.home-scroll-indicator:hover{

opacity:1;

}

.home-scroll-indicator svg{

width:18px;
height:18px;

stroke:var(--brand-mauve);

animation:

scrollArrow

2.4s ease-in-out infinite;

}

@keyframes scrollArrow{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(8px);

}

}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */

@media (max-width:1100px){

.home-hero{

background-position:78% center;

padding:

130px
34px
110px;

}

.home-hero-content{

margin-left:0;

max-width:620px;

}

.home-hero h1{

font-size:

clamp(3.8rem,9vw,5.8rem);

}

.home-hero-motto{

font-size:

clamp(2.4rem,5vw,4rem);

}

}

@media (max-width:760px){

.home-hero{

min-height:auto;

padding:

120px
24px
90px;

background-position:82% center;

}

.home-hero-copy{

font-size:1.05rem;

line-height:1.8;

}

.home-hero-actions{

flex-direction:column;

align-items:stretch;

}

.home-hero-actions .button{

width:100%;

}

.home-hero::after{

width:480px;
height:480px;

left:-120px;
bottom:-120px;

opacity:.03;

}

}

/* ---------------------------------------------------------
   Reduced Motion
--------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){

.home-hero,
.home-hero::after,
.home-hero-eyebrow,
.home-hero h1,
.home-hero-motto,
.home-hero-copy,
.home-hero-actions .button{

animation:none !important;

opacity:1;

transform:none;

filter:none;

}

}