/* Blessings (landing section after the cover), built from RS_Intro.psd.
   Watercolour background full-bleed; ornaments placed in a centred frame using the PSD's own proportions
   (1748 × 2480 canvas): garlands hang from the top corners, banana leaves sit at the sides from 41 % down,
   brass lamps stand in the bottom corners; the text is centred as in the design. */
.intro-sec{
  --intro-ink:#7E5A2C;            /* PSD body text #8A6333, a shade deeper for legibility */
  --intro-name:#7B301C;           /* PSD names */
  position:relative;overflow:hidden;
  background-color:#bfe2c0;
  background-image:url("assets/intro/bg-1080.webp");
  background-image:-webkit-image-set(url("assets/intro/bg-1080.webp") 1x,url("assets/intro/bg-1748.webp") 2x);
  background-image:image-set(url("assets/intro/bg-1080.webp") 1x,url("assets/intro/bg-1748.webp") 2x);
  background-size:cover;background-position:center top;
  padding-top:64px;                 /* clear the fixed header */
}
.intro-frame{position:relative;max-width:1240px;margin-inline:auto;
  padding:clamp(1.25rem,4vw,2.75rem) 0 clamp(8.5rem,30vw,9.5rem)}
@media (min-width:900px){ .intro-frame{padding-bottom:clamp(4rem,6vw,5.5rem)} }

/* ornaments */
.intro-orn{position:absolute;z-index:0;pointer-events:none}
.intro-garland{top:0;width:min(34.8%,420px)}
.intro-garland.is-l{left:0}
.intro-garland.is-r{right:0}
.intro-banana{top:41%;width:min(22.4%,270px)}
.intro-banana.is-l{left:0}
.intro-banana.is-r{right:0}
.intro-lamp{bottom:0;width:min(13.7%,165px)}
.intro-lamp.is-l{left:max(2.2%,8px)}
.intro-lamp.is-r{right:max(2.2%,8px)}
.intro-orn img{display:block;width:100%;height:auto}

/* text */
.intro-text{position:relative;z-index:1;max-width:46rem;margin-inline:auto;text-align:center;
  padding-left:max(clamp(1.1rem,11vw,4rem),env(safe-area-inset-left,0px));
  padding-right:max(clamp(1.1rem,11vw,4rem),env(safe-area-inset-right,0px));
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;color:var(--intro-ink);font-weight:500;
  font-variant-numeric:lining-nums}
.intro-text p{margin:0}
.intro-ganesh{display:block;width:clamp(64px,8vw,104px);height:auto;margin:0 auto clamp(.6rem,1.6vw,1.1rem)}
.intro-inv p{font-style:italic;font-weight:600;font-size:clamp(1.12rem,1.2vw + .8rem,1.5rem);line-height:1.45}
.intro-welcome{margin-top:clamp(1.1rem,2.6vw,1.8rem)!important;font-size:clamp(1.08rem,.9vw + .85rem,1.42rem);line-height:1.6;
  max-width:36em;margin-inline:auto;text-wrap:balance}
.intro-family{margin-top:clamp(1.4rem,3.4vw,2.3rem)}
.intro-name{font-weight:700;color:var(--intro-name);text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.4rem,2.1vw + .8rem,2.4rem);line-height:1.15;text-wrap:balance}
.intro-rel{margin-top:clamp(.8rem,2vw,1.3rem)}
.intro-label{font-size:clamp(1.05rem,.7vw + .85rem,1.32rem);line-height:1.35}
.intro-strong{font-weight:700;font-size:clamp(1.06rem,.75vw + .85rem,1.36rem);line-height:1.4;text-wrap:balance}
.intro-joiner{margin:clamp(1.2rem,3vw,2rem) 0 0!important;font-size:clamp(1.05rem,.7vw + .85rem,1.3rem);font-style:italic}
.intro-support{margin-top:clamp(1.6rem,3.6vw,2.4rem)}
.intro-supporters{margin-top:.15rem!important}
.intro-closing{margin:clamp(1.4rem,3.2vw,2.2rem) auto 0!important;max-width:30em;font-size:clamp(1.06rem,.75vw + .85rem,1.34rem);
  line-height:1.6;text-wrap:balance}

/* phones: leaves and lamps sit a little further out so they frame rather than cover the text */
@media (max-width:640px){
  .intro-banana{width:24%;top:43%}
  .intro-banana.is-l{left:-6%}
  .intro-banana.is-r{right:-6%}
  .intro-lamp{width:16%}
}
/* desktop: the section is wider than the PSD is tall-for-wide, so the leaves sit higher and the lamps stand clear of them */
@media (min-width:900px){
  .intro-banana{top:25%;width:min(17.5%,225px)}
  .intro-lamp{width:min(12.5%,150px)}
}
@media (prefers-reduced-motion:reduce){ .intro-orn *{animation:none!important} }

/* garlands: each strand swings on its own from its tie point, like a gentle breeze */
.intro-strands{position:relative;aspect-ratio:608/527}
.intro-strand{position:absolute;inset:0;width:100%;height:100%;display:block;
  animation:intro-swing 4.6s ease-in-out infinite alternate;will-change:transform}
.intro-strand.s1{animation-duration:4.2s;animation-delay:-1.1s}
.intro-strand.s2{animation-duration:5.1s;animation-delay:-3.4s}
.intro-strand.s3{animation-duration:4.6s;animation-delay:-.4s}
.intro-strand.s4{animation-duration:3.8s;animation-delay:-2.2s}
.intro-garland.is-r .intro-strand{animation-direction:alternate-reverse}
@keyframes intro-swing{from{transform:rotate(-2.6deg)}to{transform:rotate(2.6deg)}}

/* falling petals (drawn by intro-petals.js) sit over the painting, under the text */
.intro-petals{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){ .intro-strand{animation:none} .intro-petals{display:none} }

/* hanging flower strands removed at the family's request */
.intro-garland{display:none!important}