/* Shared brand gradient: neutral black, #fe2c55 and its lighter tint. */
:root{
  --ambient-base:#080808;
  --ambient-rose:#fe2c55;
  --ambient-blush:#fe2c55bf;
  --ambient-highlight:#ff839b59;
  --ambient-shade:#080808a6;
}
:root[data-theme=light]{
  --ambient-base:#fff;
  --ambient-rose:#fe2c557a;
  --ambient-blush:#fe2c5559;
  --ambient-highlight:#ff839b4d;
  --ambient-shade:#ffffffb3;
}
body{isolation:isolate}
.ambient-background{
  position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  contain:strict;background:var(--ambient-base);
}
/* A soft pink base remains behind the final homepage sections. */
[data-home-scene] .ambient-background::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 95% 110% at 100% 45%,#fe2c5566,transparent 78%),
    radial-gradient(ellipse 85% 95% at 0% 100%,#fe2c554d,transparent 80%);
  opacity:var(--ambient-tail-opacity,0);
}
.ambient-glow{
  /* Overscan covers the full travel so no layer edge enters the viewport. */
  position:absolute;inset:-50%;
  will-change:transform,opacity;
}
.ambient-glow--rose{
  background:
    radial-gradient(ellipse 35% 40.5% at 76% 28.5%,var(--ambient-rose) 0% 14%,transparent 85%),
    radial-gradient(ellipse 17.5% 26% at 63.5% 44%,var(--ambient-highlight),transparent 76%);
  transform:translate3d(var(--ambient-rose-x,0%),var(--ambient-rose-y,0%),0);
  opacity:var(--ambient-rose-opacity,1);
}
.ambient-glow--blush{
  background:radial-gradient(ellipse 32.5% 35% at 23.5% 78.5%,var(--ambient-blush) 0% 6%,transparent 82%);
  transform:translate3d(var(--ambient-blush-x,0%),var(--ambient-blush-y,0%),0);
  opacity:var(--ambient-blush-opacity,1);
}
.ambient-background::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 65% 72% at 22% 22%,var(--ambient-shade),transparent 82%);
}
/* Let the same gradient flow through adjacent sections without a visible seam. */
[data-theme] .experience,[data-theme] .feature-section,[data-theme] .start-section{background:transparent}
@media(prefers-reduced-motion:reduce){
  .ambient-glow{transform:none;opacity:1;will-change:auto}
}
@media print{.ambient-background{display:none}}

/* Paint mobile gradients on the document canvas, not a fixed layer clipped by
   Safari's toolbars. The finite tiles fade to the base before their edges. */
@media(max-width:1000px){
  html{
    background-color:var(--ambient-base);
    background-image:
      radial-gradient(ellipse 100% 30% at 100% 25%,var(--ambient-rose),transparent 80%),
      radial-gradient(ellipse 100% 30% at 0% 75%,var(--ambient-blush),transparent 80%);
    background-size:100% 1500px;
    background-repeat:repeat-y;
  }
  .ambient-background{display:none}
  body{
    background:transparent;
    padding-left:env(safe-area-inset-left,0px);
    padding-right:env(safe-area-inset-right,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .header{top:calc(16px + env(safe-area-inset-top,0px));margin-top:calc(16px + env(safe-area-inset-top,0px))}
  .mobile-menu{
    top:calc(92px + env(safe-area-inset-top,0px));
    left:calc(20px + env(safe-area-inset-left,0px));
    right:calc(20px + env(safe-area-inset-right,0px));
    max-height:calc(100vh - 110px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    max-height:calc(100dvh - 110px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    overflow-y:auto;
  }
}
@media(max-width:600px){
  .header{top:calc(10px + env(safe-area-inset-top,0px));margin-top:calc(10px + env(safe-area-inset-top,0px))}
  .mobile-menu{top:calc(84px + env(safe-area-inset-top,0px))}
}