/* ==========================================================================
   Unlonely — original illustrations in a Headspace-style visual language.
   All artwork is original (SVG in _next/static/media/il-*.svg). Wired via
   pseudo-elements on stable Tailwind class hooks so it survives hydration.
   ========================================================================== */

@keyframes il-float { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-13px) } }
@keyframes il-float-slow { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
@keyframes il-drift { 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(10px,-8px) } }

/* ------------------------------------------------------------------ HERO -- */
main > div:first-of-type{ position:relative; }
/* sky scene: soft sunrise, clouds, gentle accents (overrides theme blobs) */
main > div:first-of-type::before{
  content:""; position:absolute; left:0; right:0; top:0; height:760px; z-index:0; pointer-events:none;
  filter:none !important;
  background:url(/_next/static/media/il-hero-scene.svg) top center / 100% auto no-repeat;
  -webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 55%, transparent 100%);
}
/* Unlonely envelope illustration floating in the hero (crisp, no blur) */
main > div:first-of-type::after{
  content:""; position:absolute; z-index:2; pointer-events:none;
  filter:none !important;
  width:186px; height:124px; left:50%; top:36px;
  background:url(/_next/static/media/il-envelope.jpg) center/cover no-repeat;
  border-radius:20px; box-shadow:0 18px 34px -14px rgba(120,75,30,.4);
  animation:il-float 6s ease-in-out infinite;
}
main > div:first-of-type > *{ position:relative; z-index:1; }

/* ------------------------------------------------------- DARK NIGHT BANDS -- */
section.bg-gray-900{ position:relative; }
section.bg-gray-900::before{
  content:""; position:absolute; left:0; right:0; top:0; height:70%; z-index:0; pointer-events:none;
  background:url(/_next/static/media/il-night-stars.svg) top center / cover no-repeat;
}
section.bg-gray-900::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:170px; height:170px; right:6%; top:52px;
  background:url(/_next/static/media/il-moon.svg) center/contain no-repeat;
  animation:il-float-slow 8s ease-in-out infinite;
}
/* lift real content above the bg illustrations, but DON'T force position on
   children that are meant to be absolute (e.g. the decorative spinning ring) */
section.bg-gray-900 > *:not([class*="absolute"]){ position:relative; z-index:1; }

/* -------------------------------------------------- LIGHT SECTION BLOBS ---- */
/* Your Safe Haven */
section.py-20.sm\:py-32:not(.bg-gray-900){ position:relative; overflow:hidden; }
section.py-20.sm\:py-32:not(.bg-gray-900)::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:300px; height:300px; left:-90px; top:40px; opacity:.5;
  background:url(/_next/static/media/il-blob-sky.svg) center/contain no-repeat;
  animation:il-drift 12s ease-in-out infinite;
}
section.py-20.sm\:py-32:not(.bg-gray-900)::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:280px; height:280px; right:-80px; bottom:20px; opacity:.5;
  background:url(/_next/static/media/il-blob-sage.svg) center/contain no-repeat;
  animation:il-drift 14s ease-in-out infinite reverse;
}
section.py-20.sm\:py-32:not(.bg-gray-900) > *{ position:relative; z-index:1; }

/* Reviews */
section.pt-20.pb-16{ position:relative; overflow:hidden; }
section.pt-20.pb-16::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:300px; height:300px; right:-110px; top:120px; opacity:.45;
  background:url(/_next/static/media/il-blob-butter.svg) center/contain no-repeat;
}
section.pt-20.pb-16::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:260px; height:260px; left:-100px; top:420px; opacity:.4;
  background:url(/_next/static/media/il-blob-coral.svg) center/contain no-repeat;
}
section.pt-20.pb-16 > *{ position:relative; z-index:1; }

/* ------------------------------------------------------------- FOOTER ----- */
footer{ position:relative; overflow:hidden; }
footer::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:150px; z-index:0; pointer-events:none;
  background:url(/_next/static/media/il-hills.svg) bottom center / 100% 100% no-repeat;
  opacity:.6;
}
footer > *{ position:relative; z-index:1; }

/* ------------------------------------------ COLOURFUL FEATURE ICON CHIPS -- */
li.rounded-2xl.border > img:first-child,
li.rounded-2xl.border > svg:first-child{
  box-sizing:border-box !important;
  width:58px !important; height:58px !important;
  padding:13px; border-radius:18px; object-fit:contain;
  box-shadow:0 6px 16px -8px rgba(120,75,30,.35);
}
li.rounded-2xl.border:nth-child(4n+1) > img:first-child,
li.rounded-2xl.border:nth-child(4n+1) > svg:first-child{ background:#e2f2f9; }   /* sky   */
li.rounded-2xl.border:nth-child(4n+2) > img:first-child,
li.rounded-2xl.border:nth-child(4n+2) > svg:first-child{ background:#fdeede; }   /* peach */
li.rounded-2xl.border:nth-child(4n+3) > img:first-child,
li.rounded-2xl.border:nth-child(4n+3) > svg:first-child{ background:#e7f3e3; }   /* sage  */
li.rounded-2xl.border:nth-child(4n+4) > img:first-child,
li.rounded-2xl.border:nth-child(4n+4) > svg:first-child{ background:#efe9fb; }   /* lav   */

/* ------------------------------------------- HERO PHONE APP SCREENSHOT ---- */
/* Fill the empty hero phone frame with the real Unlonely home screen.
   The screenshot sits inside the bezel; the frame SVG/overlay draws around it. */
main div:has(> img[src*="phone-frame"]){ position:relative; }
main div:has(> img[src*="phone-frame"])::after{
  content:"";
  position:absolute;
  top:3.3%; left:6.6%; right:7.0%; bottom:2.9%;
  background:#f4efe3 url(/_next/static/media/il-app-home.png) center / contain no-repeat;
  border-radius:9% / 4.4%;
  z-index:2;
  pointer-events:none;
}