/* Flow With Grace - shared design system. Linked by every page. */
/* ============================================================
   Liquid glass, tuned to Grace's palette.
   Frosted surfaces floating over an animated aurora wallpaper.
   Ported from Itay's shoopi-design system; the mechanics carry
   over, the coral/mono identity does not. Blue leads here.
   ============================================================ */

html{scroll-behavior:smooth;background:#fcf9f1}
body{font-family:'Quicksand',sans-serif;background:transparent}
/* anchors land clear of the fixed nav instead of under it */
section[id]{scroll-margin-top:5rem}

/* ---- wallpaper: soft mesh gradient, painted on a fixed layer.
   Not background-attachment:fixed, which is broken on iOS Safari. ---- */
.wallpaper::before{
  content:'';position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(90% 60% at 8% 4%, #e4e8ff 0%, transparent 60%),
    radial-gradient(80% 55% at 94% 16%, #e0f0ff 0%, transparent 60%),
    radial-gradient(90% 60% at 50% 102%, #fdf0e4 0%, transparent 55%),
    linear-gradient(180deg,#fcf9f1 0%,#f5f6fd 50%,#fcf9f1 100%);
}
/* soft-light pass so the background reads as lit from above, not flat */
.wallpaper::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  mix-blend-mode:soft-light;
  background:
    radial-gradient(120% 70% at 50% 0%, rgb(255 255 255/.9) 0%, transparent 60%),
    radial-gradient(140% 90% at 50% 110%, rgb(22 32 77/.5) 0%, transparent 55%);
}
/* film grain: makes a smooth gradient look printed, and hides banding */
.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;background-size:160px 160px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* aurora blobs: the vivid colour the glass frosts over */
/* Kept to the edges and low-opacity: this page is long and text-heavy, so the
   aurora tints the margins rather than washing out the reading column. */
.blob{position:fixed;z-index:-1;border-radius:50%;filter:blur(80px);opacity:.2;pointer-events:none;will-change:transform}
.blob-a{width:380px;height:380px;left:-8%;top:2%;background:#0022fc;animation:aurora-a 21s ease-in-out infinite alternate}
.blob-b{width:420px;height:420px;right:-6%;top:48%;background:#8fa2fb;opacity:.24;animation:aurora-b 26s ease-in-out infinite alternate}
.blob-c{width:300px;height:300px;left:4%;bottom:2%;opacity:.13;background:#ffc48c;animation:aurora-c 18s ease-in-out infinite alternate}
@keyframes aurora-a{to{transform:translate(50px,70px) scale(1.15)}}
@keyframes aurora-b{to{transform:translate(-60px,-90px) scale(.9)}}
@keyframes aurora-c{to{transform:translate(60px,-70px) scale(1.1)}}

/* ---- the primary surface: thin fill so colour bleeds through,
   heavy blur, specular rim. Never nest one inside another. ---- */
.glass{
  background:linear-gradient(180deg,rgb(252 249 241/.55) 0%,rgb(252 249 241/.32) 100%);
  border:1px solid rgb(255 255 255/.6);
  box-shadow:
    inset 0 1.5px 1px rgb(255 255 255/.95),
    inset 1px 0 1px rgb(255 255 255/.35),
    inset -1px 0 1px rgb(255 255 255/.35),
    inset 0 -1px 2px rgb(22 32 77/.06),
    0 12px 40px rgb(22 32 77/.14);
  backdrop-filter:blur(28px) saturate(1.9) brightness(1.06);
  -webkit-backdrop-filter:blur(28px) saturate(1.9) brightness(1.06);
}

/* azure halo on anything interactive */
.hover-glow{transition:box-shadow .3s ease,transform .2s ease}
.hover-glow:hover{box-shadow:0 0 0 1px rgb(0 34 252/.28),0 0 24px rgb(0 34 252/.28),0 8px 32px rgb(22 32 77/.12)}

/* The `hidden` attribute must beat Tailwind's display utilities. A .flex or
   .grid class sits later in the cascade than the UA stylesheet's [hidden]
   rule, so without this an element with both renders visible. */
[hidden] { display: none !important }

/* keyboard focus, global. Don't remove outlines locally. */
:focus-visible{outline:2px solid #0022fc;outline-offset:2px;border-radius:8px}

/* ---- entrance motion: revealed on scroll, staggered by animation-delay ---- */
.js-reveal [data-rise],.js-reveal [data-pop]{opacity:0}
[data-rise].in{animation:rise .55s ease-out both}
[data-pop].in{animation:pop .45s cubic-bezier(.34,1.56,.64,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;scale:.6}to{opacity:1;scale:1}}

.wiggle{animation:wiggle 6s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-15px) rotate(2deg)}}

img.fluent-emoji{height:1.2em;width:1.2em;margin:0 .1em;vertical-align:-0.25em;display:inline-block}
.tiktok-icon{color:#000;transition:background .3s,color .3s;display:inline-block;line-height:1}
.feed-card:hover .tiktok-icon{background:linear-gradient(135deg,#25F4EE,#FE2C55);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- phones: backdrop-filter is the costly part. Lighter blur, one less blob. ---- */
@media (max-width:640px){
  .glass{backdrop-filter:blur(14px) saturate(1.7);-webkit-backdrop-filter:blur(14px) saturate(1.7)}
  .blob{filter:blur(50px)}
  .blob-c{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-reveal [data-rise],.js-reveal [data-pop]{opacity:1;animation:none}
  .wiggle,.blob{animation:none}
}
/* frosted surfaces go near-solid when the user asks for less transparency */
@media (prefers-reduced-transparency:reduce){
  .glass{background:rgb(252 249 241/.96);backdrop-filter:none;-webkit-backdrop-filter:none}
}
/* defined borders when the user asks for more contrast */
@media (prefers-contrast:more){
  .glass{background:#fff;border:1.5px solid #16204d;backdrop-filter:none;-webkit-backdrop-filter:none}
  .blob,.grain{display:none}
}