@font-face {
  font-family: 'Purplereignbowwrites';
  src: url('fonts/Purplereignbowwrites-Regular 2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

  :root{
    --purple-light:#b483d6;
    --purple-mid:#9c53c4;
    --purple-rich:#7a3aa8;
    --purple-deep:#700076;
    --purple-black:#48005e;
    --violet-border:#631c78;
    --icon-bg:#631c78;
    --pastel-box:#b069e8;
    --pastel-box-light:#cb69fa;
    --text-light:#f6eefc;
    --text-dim: rgba(246,238,252,.82);
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Nunito',sans-serif;
    color:var(--text-light);
    background:var(--purple-black);
    position:relative;
    min-height:100vh;
    overflow-x:hidden;
  }

  /* ---------- layered background: base image-style gradient + animated color overlay on top, medium opacity ---------- */
  .bg-image{
    position:fixed; inset:0; z-index:-2;
    background:linear-gradient(160deg,
      var(--purple-light) 0%,
      var(--purple-mid) 28%,
      var(--purple-rich) 52%,
      var(--purple-deep) 75%,
      var(--purple-black) 100%);
    animation:hueShift 32s ease-in-out infinite;
  }
  /* Stays within the purple family the whole time: small hue-rotate swings
     (never enough to reach blue/green/yellow/red) combined with saturation +
     brightness moves so each stop reads as a distinct purple — true purple,
     violet/magenta, pale lavender, deep indigo/plum — instead of a full
     rainbow sweep. */
  @keyframes hueShift{
    0%  {filter:hue-rotate(0deg)   saturate(1)    brightness(1);}
    20% {filter:hue-rotate(22deg)  saturate(1.15) brightness(1.05);}
    40% {filter:hue-rotate(-12deg) saturate(0.6)  brightness(1.18);}
    60% {filter:hue-rotate(25deg)  saturate(1.25) brightness(0.92);}
    80% {filter:hue-rotate(-22deg) saturate(0.85) brightness(1.05);}
    100%{filter:hue-rotate(0deg)   saturate(1)    brightness(1);}
  }
  .bg-gradient-overlay{
    position:fixed; inset:0; z-index:-1;
    background:linear-gradient(120deg, var(--purple-mid), #d98fd0, var(--purple-deep), var(--purple-light), var(--purple-mid));
    background-size:400% 400%;
    opacity:.4;
    mix-blend-mode:overlay;
    animation:gradientShift 18s ease-in-out infinite;
  }
  @keyframes gradientShift{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
  }

  /* ---------- app-shell: contains EVERYTHING (hero, content, sticker) to a mobile-width column ---------- */
  .app-shell{
    max-width:480px;
    margin:0 auto;
    position:relative;
    overflow-x:hidden;
  }

  .page{
    position:relative;
    padding-bottom:120px;
  }

  /* ---------- hero / logo image placeholder ---------- */
  .hero{
    position:relative;
    width:100%;
    aspect-ratio:3/2.05;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
  }
.hero-bg{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 32% 28%, rgba(217,143,208,.4), transparent 55%),
    radial-gradient(circle at 75% 15%, rgba(255, 255, 255, 0.15), transparent 40%),
    url('images/IMG_7762-zoom.png'),   /* ← THIS is your header image */
    linear-gradient(165deg, #4a2a73 0%, #2a1548 55%, #170c28 100%);
    /* fades to true transparency so the live animated page gradient shows through
       underneath and behind it, instead of dissolving into a fixed snapshot color */
    -webkit-mask-image:linear-gradient(to bottom, black 38%, transparent 94%);
            mask-image:linear-gradient(to bottom, black 38%, transparent 94%);
  }
  .hero-bg::after{
    /* sparkle flecks, echoing the reference art */
    content:"";
    position:absolute; inset:0;
    background-image:
      radial-gradient(1.5px 1.5px at 20% 15%, #fff 60%, transparent 61%),
      radial-gradient(1.5px 1.5px at 82% 10%, #fff 60%, transparent 61%),
      radial-gradient(1px 1px at 65% 30%, #fff 60%, transparent 61%),
      radial-gradient(1.5px 1.5px at 10% 45%, #fff 60%, transparent 61%),
      radial-gradient(1px 1px at 90% 50%, #fff 60%, transparent 61%);
    opacity:.7;
  }
  /* second image layered over the header photo at low opacity, to add a sparkle/shimmer effect */
  .hero-overlay{
    position:absolute; inset:0;
    z-index:1;
    background-image:url('images/zene-zine-glitter-1-electric-violet.gif');   /* ← swap this for the sparkle/glitter image you want layered on top */
background-repeat: repeat;
background-size: 92px 92px; /* Width Height */
background-position: top left;
    opacity:.25;   /* lower this for a subtler effect, raise it for a stronger one */
    mix-blend-mode:screen;   /* lets bright sparkle areas glow over the photo instead of flattening it; try "overlay" or remove entirely if your image looks better without it */
    pointer-events:none;
    -webkit-mask-image:linear-gradient(to bottom, black 38%, transparent 94%);
            mask-image:linear-gradient(to bottom, black 38%, transparent 94%);
  }
  .hero-caption{
    position:relative; z-index:2;
    display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
    justify-content:center;
    padding:0 24px 18px;
    text-align:center;
  }
  .hero-caption .logo-word{
    font-family:'Caveat', cursive;
    font-weight:700;
    font-size:2rem;
    color:#fff;
    text-shadow:0 2px 10px rgba(0,0,0,.5);
  }
  .hero-caption .tagline{
    font-family:'Purplereignbowwrites', sans-serif;
    font-weight:200;
    font-size:1.28rem;
    color:#fff;
    text-shadow:0 2px 10px rgba(0,0,0,.5);
  }

  /* ---------- social row ---------- */
  .social-row{
    display:flex;
    justify-content:center;
    gap:16px;
    margin:20px 0 22px;
  }
  .social-icon{
    width:52px;height:52px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 12px rgba(107, 8, 127, 0.281);
    transition:transform .2s ease;
    text-decoration:none;
    border: 2px solid; 
    border-color: #ffffff70;
  }
  .social-icon:hover{transform:translateY(-4px);}
  .social-icon svg{width:34px;height:34px;}
  .kofi{background:#8ec9ea;}
  .insta{background:#ff25ba;}
  .email{background:#bd7bff;}

  /* ---------- shared section icon (same music-note glyph everywhere, per mock) ---------- */
  .box-icon{
    flex-shrink:0;
    width:46px;height:46px;
    border-radius:80%;
    background:var(--icon-bg);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 3px 8px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.12);
    z-index:2;
  }
  .box-icon svg{width:29px;height:29px;fill:#fff;}

  /* ---------- link boxes: Shop / Library (pill-left cards with image edge) ---------- */
  .link-box{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    margin:0 14px 10px;
    padding:16px 18px;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    border:3px solid var(--violet-border);
    box-shadow:0 10px 22px rgba(15, 5, 30, 0);
    min-height:96px;
  }
  .link-box.pill{
    border-radius:55px;
  }
  .link-box:hover{filter:brightness(1.04);}

  .shop{ background:linear-gradient(115deg, #ad63f4 0%, #6f37a8 55%, #5a2f8a 100%); }
  .library{ background:linear-gradient(115deg, #d488ff 0%, #b17cd4 55%, #9c5fc4 100%); }

  .box-text{position:relative; z-index:2; max-width:58%;}
  .box-text h2{
    margin:0 0 4px;
    font-family:'Comfortaa', sans-serif;
    font-weight:700;
    font-size:1.35rem;
    color:var(--text-light);
  }
  .box-text p{
    margin:0;
    font-size:.83rem;
    font-family: 'Comfortaa', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    line-height:1.35;
    color:var(--text-dim);
    text-shadow:0 2px 10px rgb(57, 0, 57);
  }

  /* fading slideshow thumbnail, right edge of Shop / Library boxes */
  .box-slideshow{
    position:absolute;
    right:-3px; top:-3px; bottom:-3px;
    width:70%;
    opacity: 50%;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(to right, transparent, black 38%);
            mask-image:linear-gradient(to right, transparent, black 38%);
  }
  .box-slideshow .slide{
    position:absolute; inset:0;
    opacity:0;
    transition:opacity 1.6s ease-in-out;
  }
  .box-slideshow .slide.active{opacity:1;}

  .shop .slide:nth-child(1){background:radial-gradient(circle at 30% 30%, #e7b7d8, #a55fb0 60%, #6b3a86);}
  .shop .slide:nth-child(2){background:radial-gradient(circle at 60% 40%, #f0c9a0, #c77fae 55%, #6b3a86);}
  .shop .slide:nth-child(3){background:radial-gradient(circle at 40% 60%, #cfa3e6, #8a4fae 55%, #4c2a6b);}

  .library .slide:nth-child(1){background:linear-gradient(135deg,#e7d3f2,#a97fc9 60%,#5c3684);}
  .library .slide:nth-child(2){background:linear-gradient(135deg,#f5c9d6,#b06fae 60%,#5c3684);}
  .library .slide:nth-child(3){background:linear-gradient(135deg,#c9b6f2,#8a5fc0 60%,#432a63);}

  /* ---------- flat pastel cards: My Compositions / Art Only ---------- */
  .flat-card{
    width:95%;
    margin:14px 0 10px 14px;
    padding:16px;
    border-radius:58px;
    background:var(--pastel-box);
    box-shadow:0 10px 22px rgba(15, 5, 30, 0);
    border:3px solid var(--violet-border);
  }

  .compositions .top-row{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
  .compositions h2, .art-only h2{
    margin:0;
    font-family:'Comfortaa', sans-serif;
    font-weight:700;
    font-size:1.12rem;
    color:var(--text-light);
    line-height:1.15;
  }

  .scroll-services{
    max-height:300px;
    overflow-y:auto;
    overscroll-behavior:contain;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding-right:4px;
  }
  .scroll-services::-webkit-scrollbar{width:6px;}
  .scroll-services::-webkit-scrollbar-track{background:transparent;}
  .scroll-services::-webkit-scrollbar-thumb{background:rgba(32,16,58,.35); border-radius:3px;}

  .service-badge{
    display:flex;align-items:center;gap:6px;
    background:#181720;
    border-radius:999px;
    padding:4px;
    font-size:.68rem;
    font-weight:700;
    color:#fff;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.08);
    transition:transform .15s ease, background .15s ease;
  }
  .service-badge:hover{transform:translateY(-2px); background:#1c1c22;}
  .service-image{
    flex:1;
    min-width:0;
    height:32px;
    display:flex;
    align-items:center;
  }
  /* Drop your logo/wordmark image in here, e.g.
     <img src="images/logos/spotify.png" alt="Spotify">
     It'll sit at the button's left edge and scale to fit the row height. */
  .service-image img{
    max-height:100%;
    max-width:100%;
    object-fit:contain;
  }

  .service-play{
    width:26px;height:26px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
    background:#454b60;
    border:0px solid rgba(255,255,255,.14);
  }
  .service-play svg{width:10px;height:10px;}

  .compositions .box-text{max-width:100%;}

  /* ---------- Art Only ---------- */
  .art-only{
    display:flex; align-items:center; gap:12px;
    background:var(--pastel-box-light); text-decoration:none;
  }
  .art-only .box-text{max-width:100%; text-align:left;}
  .art-only .box-text p{margin-top:2px;}

  /* ---------- floating sticker: fixed, stays put like a common widget ---------- */
  .floating-sticker{
    position:absolute;
    right:14px;
    bottom:16px;
    width:88px;
    z-index:60;
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));
    animation:none;
    pointer-events:none;
  }
  .floating-sticker img{
    display:block;
    width:100%;
    height:auto;
  }
  /* ---------- fixed anchor for the sticker: mirrors app-shell's width/centering so a  ---------- */
  /* ---------- fixed-position child stays aligned with the mobile column, not the raw viewport edge ---------- */
  .sticker-anchor{
    position:fixed;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    max-width:480px;
    height:100%;
    pointer-events:none;
    z-index:60;
  }
  @keyframes floatBob{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
  }

  @media (prefers-reduced-motion:reduce){
    .bg-image, .bg-gradient-overlay, .floating-sticker{animation:none;}
    .box-slideshow .slide{transition:none;}
  }

  a:focus-visible, .social-icon:focus-visible{
    outline:2px solid #fff;
    outline-offset:3px;
  }

  @media (max-width:380px){
    .box-text{max-width:54%;}
    .box-text h2{font-size:1.15rem;}
  }

      footer {
      margin-top: 32px;
      font-size: 11px;
      color: var(--text-muted);
      opacity: 0.5;
      text-align: center;
      font-weight: 300;
      letter-spacing: 0.04em;
    }

img {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}