/* Sasa Pressed Injectable Hero
   Keep this file separate from your main styles.css.
   Injects into: <div id="sasa-hero-mount"></div>
*/

:root {
  --sasa-hot-pink: #ff5bad;
  --sasa-soft-pink: #ffc0d4;
  --sasa-lavender: #eeeaff;
  --sasa-purple: #5a2a66;
  --sasa-deep: #352038;
  --sasa-cream: #fff8fb;
  --sasa-green: #c9e96a;
  --sasa-yellow: #ffe37a;
}

.sasa-hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-height: clamp(360px, 38vw, 520px);
  margin: 0 auto 20px;
  border-radius: 22px;
  background-image: url("../img/purpleskies.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
  animation: sasaHeroTwitch 1.8s steps(2, end) infinite;
}
#sasa-hero-mount {
  width: 100%;
}
@keyframes sasaHeroTwitch {
  0%, 92%, 100% {
    transform: translate(0, 0);
  }

  93% {
    transform: translate(-6px, 4px);
  }

  94% {
    transform: translate(6px, -4px);
  }

  95% {
    transform: translate(-2px, 0);
  }

  96% {
    transform: translate(1px, 1px);
  }

  97% {
    transform: translate(0, 0);
  }
}
.sasa-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .80;
  background-image:
    repeating-linear-gradient(0deg, rgba(40, 24, 211, 0.765) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(181, 12, 224, 0.907) 0 1px, transparent 1px 5px);
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 1;
}
.sasa-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  mix-blend-mode: hard-light;
  opacity: 0;
  animation: sasaHeroGlitch 2.2s steps(2, end) infinite;
  background-image:
    repeating-linear-gradient(0deg, rgba(24, 211, 145, 0.765) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(181, 12, 224, 0.907) 0 1px, transparent 1px 5px);
}
@keyframes sasaHeroGlitch {
  0%, 55%, 100% {
    opacity: 0;
    transform: translateX(0) scale(1);
    clip-path: inset(0 0 0 0);
  }

  58% {
    opacity: .95;
    transform: translateX(-45px) scale(1.02);
    clip-path: inset(5% 0 68% 0);
  }

  61% {
    opacity: .75;
    transform: translateX(18px) scale(1.01);
    clip-path: inset(34% 0 42% 0);
  }

  64% {
    opacity: 1;
    transform: translateX(-14px) scale(1.03);
    clip-path: inset(62% 0 8% 0);
  }

  67% {
    opacity: .85;
    transform: translateX(26px) scale(1.02);
    clip-path: inset(15% 0 58% 0);
  }

  70% {
    opacity: 1;
    transform: translateX(-30px) scale(1.04);
    clip-path: inset(0 0 0 0);
  }

  73% {
    opacity: .65;
    transform: translateX(12px) scale(1);
    clip-path: inset(72% 0 4% 0);
  }

  76% {
    opacity: 0;
    transform: translateX(0) scale(1);
    clip-path: inset(0 0 0 0);
  }
}

.sasa-hero__logo {
  position: absolute;
  height: 90%;
  width: auto;
  aspect-ratio: 1 / 1;
  left: -2%;
  top: -1%;
  transform: translateX(800px);
  animation: sasaLogoRollIn 4s linear forwards;
  z-index: 5;
}
.sasa-hero__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 40%;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.5));
  animation: sasaLogoSpin 60s linear 4s infinite,
    sasaRgbGlitch 2.2s steps(2, end) 3.8s infinite;
} 
@keyframes sasaLogoRollIn {

  from {
    transform:
      translateX(1250px)
      rotate(0deg);
  }

  to {
    transform:
      translateX(-150px)
      rotate(-1080deg);
  }
}
@keyframes sasaLogoSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
@keyframes sasaRgbGlitch {

  0%, 90%, 100% {
    filter:
      drop-shadow(0 0 100px rgba(255,255,255,.5));
  }
  91% {
    filter:
      drop-shadow(-20px -4px #ff4fd2)
      drop-shadow(20px 2px #5cff83);
  }

  92% {
    filter:
      drop-shadow(25px 0 #ff4fd2)
      drop-shadow(-25px 0 #5cff83);
  }

  93% {
    filter:
      drop-shadow(-15px 0 #ff4fd2)
      drop-shadow(15px 0 #5cff83);
  }

  94% {
    filter:
      drop-shadow(0 0 10px rgba(176, 19, 197, 0.5));
  }
}

.sasa-hero__copy {
  position: relative;
  z-index: 4;
  width: min(56rem, 48vw);
  max-width: 56rem;
  padding-top: 35px;
  padding-bottom: 30px;
  margin: 0 auto;
  text-align: center;
  transform: translateX(25px);
  opacity: 60%;
}
.sasa-hero__title,
.sasa-hero__sub,
.sasa-hero__tag {
  margin: 0;
  text-transform: lowercase;
  font-family: "Jersey 10", sans-serif;
  font-weight: 900;
  letter-spacing: 3px;
  text-shadow:
    3px 3px 0 var(--sasa-purple),
    -1px -1px 0 rgba(255,255,255,.75);
  opacity: 0;
  white-space: nowrap;
}
@keyframes sasaTextRgbGlitch {
  0%, 88%, 100% {
    text-shadow:
      3px 3px 0 var(--sasa-purple),
      -1px -1px 0 rgba(255,255,255,.75);
  }

  89% {
    text-shadow:
      -8px 0 0 #ff4fd2,
      8px 0 0 #5cff83,
      3px 3px 0 var(--sasa-purple);
  }

  91% {
    text-shadow:
      10px 0 0 #ff4fd2,
      -10px 0 0 #5cff83,
      3px 3px 0 var(--sasa-purple);
  }

  93% {
    text-shadow:
      -5px -2px 0 #ff4fd2,
      5px 2px 0 #5cff83,
      3px 3px 0 var(--sasa-purple);
  }

  95% {
    text-shadow:
      3px 3px 0 var(--sasa-purple),
      -1px -1px 0 rgba(255,255,255,.75);
  }
}
.sasa-hero__title {
  font-size: clamp(60px, 6vw, 100px);
  line-height: .88;
  color: var(--sasa-green);
  animation:
    sasaGlitchIn 2s steps(2,end) 2.9s forwards,
    sasaTextRgbGlitch 2.2s steps(2,end) 3.8s infinite;
  transform: translateX(20px);
}
.sasa-hero__tag {
  margin-top: 10px;
  font-size: clamp(20px, 2vw, 35px);
  color: var(--sasa-yellow);
  animation: sasaGlitchIn 5s steps(2, end) 3s forwards,
    sasaTextRgbGlitch 2.2s steps(2,end) 3.8s infinite;
  transform: translateX(20px); 
}
.sasa-hero__sub {
  margin-top: 10px;
  font-size: clamp(34px, 3vw, 54px);
  color: var(--sasa-soft-pink);
  animation: sasaGlitchIn 8s steps(2, end) 3.5s forwards,
    sasaTextRgbGlitch 2.2s steps(2,end) 3.8s infinite;
  transform: translateX(20px);
}
@keyframes sasaGlitchIn {
  0% { opacity: 0; transform: translateX(-10px) skewX(10deg); filter: hue-rotate(70deg); }
  12% { opacity: .35; transform: translateX(8px) skewX(-8deg); }
  22% { opacity: .75; transform: translateX(-6px); }
  36% { opacity: .45; transform: translateX(5px); filter: hue-rotate(-35deg); }
  50% { opacity: 1; transform: translateX(-3px) skewX(4deg); }
  68% { opacity: .6; transform: translateX(3px); }
  82% { opacity: 1; transform: translateX(-1px); }
  100% { opacity: 1; transform: translateX(0) skewX(0); filter: none; }
}


.sasa-hero__actions {
  display: grid;
  justify-content: center;
  gap: clamp(4px, .5vw, 8px);
  margin-top: clamp(4px, .5vw, 8px);
  opacity: 0;
  transform: translateY(14px);
  animation: sasaFadeUp 1s ease 4s forwards;
}
@keyframes sasaFadeUp {
  to { opacity: 1; transform: translateY(0); }
}
.sasa-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(240px, 24vw, 340px);
  height: clamp(48px, 4vw, 60px);
  font-size: clamp(15px, 1vw, 18px);
  font-weight: 500;
  border: 3px solid var(--sasa-deep);
  border-radius: 8px;
  background: var(--primary);
  color: white;
  box-shadow: 5px 5px 0 var(--sasa-deep);
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
  margin-top: 12px;
}
.sasa-hero__btn:hover,
.sasa-hero__btn:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--sasa-deep);
}
.sasa-hero__btn--secondary {
  background: var(--sasa-cream);
  color: var(--primary);
}


.sasa-hero__hand {
  position: absolute;
  right: -20px;
  bottom: -40px;
  width: min(48%, 700px);
  transform: translateX(120%);
  animation: sasaHandSlideIn 3s cubic-bezier(.2,.9,.2,1) 3s forwards;
  z-index: 3;
}
.sasa-hero__hand-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  scale: 100%;
  filter: drop-shadow(0 12px 18px rgba(53,32,56,.25));
  animation:
      sasaHandRgb 2.2s steps(2, end) 3.8s infinite;
}
@keyframes sasaHandSlideIn {
  to { transform: translateX(0); }
}
@keyframes sasaHandRgb {

  0%, 88%, 100% {
    filter:
      drop-shadow(0 12px 18px rgba(53,32,56,.25));
  }

  89% {
    filter:
      drop-shadow(-10px 0 #ff4fd2)
      drop-shadow(10px 0 #7cff7c);
  }

  90% {
    filter:
      drop-shadow(15px 0 #ff4fd2)
      drop-shadow(-15px 0 #7cff7c);
  }

  91% {
    filter:
      drop-shadow(-5px 0 #ff4fd2)
      drop-shadow(5px 0 #7cff7c);
  }

  92% {
    filter:
      drop-shadow(0 12px 18px rgba(53,32,56,.25));
  }
}
.sasa-hero__nails {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}
.nail {
  position: absolute;
  width: 8%;
  height: auto;
  transform-origin: center center;
}
.nail--thumb {
  left: 43.3%;
  top: 17.5%;
  width: 5.7%;
}
.nail--index {
  left: 28.4%;
  top: 27.9%;
  width: 12%;
}
.nail--middle {
  left: 35.4%;
  top: 37.6%;
  width: 12.9%;
}
.nail--ring {
  left: 44%;
  top: 47.2%;
  width: 12.1%;
}
.nail--pinky {
  left: 52.7%;
  top: 53.7%;
  width: 10.3%;
}


.sasa-hero__sparkle {
  position: absolute;
  color: white;
  font-size: 34px;
  text-shadow: 0 0 10px #ff5bad;
  animation:
    sasaSparkle 1.6s ease-in-out infinite,
    sasaSparkleGlitch 2.2s steps(2, end) 3.8s infinite;
  z-index: 5;
}
.sasa-hero__sparkle--1 { 
  right: 8%; top: 18%; animation-delay: .3s; }
.sasa-hero__sparkle--2 { 
  left: 18%; bottom: 14%; animation-delay: .9s; }
@keyframes sasaSparkle {
  0%, 100% { opacity: .25; transform: scale(.8) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(10deg); }
}
@keyframes sasaSparkleGlitch {
  0%, 88%, 100% {
    filter: none;
  }

  89% {
    filter:
      drop-shadow(-8px 0 #ff4fd2)
      drop-shadow(8px 0 #5cff83);
  }

  90% {
    filter:
      drop-shadow(8px 0 #ff4fd2)
      drop-shadow(-8px 0 #5cff83);
  }

  91% {
    filter:
      drop-shadow(-4px 0 #ff4fd2)
      drop-shadow(4px 0 #5cff83);
  }

  92% {
    filter: none;
  }
}


@media (max-width: 650px) {
  .sasa-hero {
    width: min(100%, 630px);
    min-height: 400px;
    border-radius: 18px;
  }

  .sasa-hero__logo {
    height: 48%;
    width: auto;
    aspect-ratio: 1 / 1;
    left: 20%;
    top: -8%;
  }

  .sasa-hero__copy {
    width: 80%;
    text-align: center;
    top: 80px;
    padding-bottom: 60px;
  }
  .sasa-hero__title {
    font-size: clamp(34px, 10vw, 44px);
  }
  .sasa-hero__tag {
    font-size: clamp(20px, 5vw, 26px);
    margin-top: 4px;
  }
  .sasa-hero__sub {
    font-size: clamp(24px, 6vw, 32px);
    margin-top: 4px;
  }

  .sasa-hero__actions {
    width: 50%;
    margin-top: 35px;
    margin-left: 10px;
    gap: 3px;
  }

  .sasa-hero__btn {
    width: clamp(160px, 20vw, 190px);
    height: clamp(48px, 4vw, 60px);
    font-size: 14px;
    border-width: 2px;
    box-shadow: 3px 3px 0 var(--sasa-deep);
  }

  .sasa-hero__hand {
    width: 70%;
    bottom: 10px;
    right: -10px;
  }

  .sasa-hero__sparkle--2 {
    left: 18%;
    bottom: 40%;
  }
}
/* TABLET / SQUARE HERO */
@media (min-width: 651px) and (max-width: 1280px) {
  .sasa-hero {
    width: min(100%, 950px);
    min-height: clamp(500px, 72vw, 620px);
    border-radius: 18px;
  }

  .sasa-hero__logo {
    height: 75%;
    width: auto;
    left: clamp(-45px, -2vw, -15px);
    top: clamp(-35px, -3vw, -18px);
  }

  .sasa-hero__copy {
  width: min(70%, 680px);
  padding-top: clamp(60px, 9vw, 85px);
  margin-left: auto;
  margin-right: 10px;
  text-align: center;
  transform: none;
  }

  .sasa-hero__title {
    font-size: clamp(52px, 8vw, 72px);
  }

  .sasa-hero__tag {
    font-size: clamp(28px, 4.4vw, 38px);
    margin-top: 4px;
  }

  .sasa-hero__sub {
    font-size: clamp(34px, 5vw, 46px);
    margin-top: 4px;
  }

  .sasa-hero__actions {
    width: 50%;
    margin-top: clamp(90px, 14vw, 125px);
    margin-left: clamp(35px, 6vw, 75px);
    gap: 8px;
    justify-content: center;
  }

  .sasa-hero__btn {
    width: clamp(200px, 28vw, 270px);
    height: clamp(48px, 5vw, 56px);
    font-size: clamp(15px, 2.1vw, 18px);
    border-width: 2px;
    box-shadow: 4px 4px 0 var(--sasa-deep);
  }

  .sasa-hero__hand {
  width: clamp(430px, 68vw, 620px);
  right: clamp(-95px, -9vw, -45px);
  bottom: clamp(-10px, 0vw, 8px);
  bottom: -40px;
  }

  .sasa-hero__sparkle--2 {
    left: 20%;
    bottom: 38%;
  }
}

/* ==========================================
   REDUCED MOTION / LOW PERFORMANCE MODE
========================================== */

@media (prefers-reduced-motion: reduce) {

  .sasa-hero *,
  .sasa-hero *::before,
  .sasa-hero *::after {
    animation: none !important;
    transition: none !important;
  }

  .sasa-hero__logo,
  .sasa-hero__hand,
  .sasa-hero__copy {
    opacity: 1 !important;
    transform: none !important;
  }

}

/* ==========================================
   REDUCED MOTION / LOW PERFORMANCE MODE
   - everything appears immediately
   - no twitch, glitch, roll-in, slide-in, fade-in
   - low-motion skips purpleskies image and keeps static grid
========================================== */

/* User/system reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sasa-hero,
  .sasa-hero *,
  .sasa-hero *::before,
  .sasa-hero *::after {
    animation: none !important;
    transition: none !important;
  }

  .sasa-hero {
    transform: none !important;
    background-image: none !important;
    background-color: #f3d7ff;
  }

  .sasa-hero::before {
    display: block !important;
    opacity: 0.35 !important;
    mix-blend-mode: multiply !important;
  }

  .sasa-hero::after {
    display: none !important;
  }


  .sasa-hero__copy,
  .sasa-hero__title,
  .sasa-hero__tag,
  .sasa-hero__sub,
  .sasa-hero__actions,
  .sasa-hero__hand,
  .sasa-hero__hand-img,
  .sasa-hero__sparkle {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Manual slow-speed / low-motion mode */
html.low-motion .sasa-hero,
html.low-motion .sasa-hero *,
html.low-motion .sasa-hero *::before,
html.low-motion .sasa-hero *::after {
  animation: none !important;
  transition: none !important;
}

html.low-motion .sasa-hero {
  transform: none !important;
  background-image: none !important;
  background-color: #f3d7ff;
}

/* Keep static grid in low-motion */
html.low-motion .sasa-hero::before {
  display: block !important;
  opacity: 0.35 !important;
  mix-blend-mode: multiply !important;
}

/* Remove animated glitch overlay */
html.low-motion .sasa-hero::after {
  display: none !important;
}

html.low-motion .sasa-hero__copy,
html.low-motion .sasa-hero__title,
html.low-motion .sasa-hero__tag,
html.low-motion .sasa-hero__sub,
html.low-motion .sasa-hero__actions,
html.low-motion .sasa-hero__hand,
html.low-motion .sasa-hero__hand-img,
html.low-motion .sasa-hero__sparkle {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

html.low-motion .sasa-hero__nails {
  opacity: 0;
}

html.low-motion .sasa-hero__hand.is-loaded .sasa-hero__nails {
  opacity: 1;
}

html.low-motion .sasa-hero__logo {
  opacity: 0 !important;
}

html.low-motion .sasa-hero__hand.is-loaded ~ .sasa-hero__sparkle,
html.low-motion .sasa-hero.is-hand-loaded .sasa-hero__logo {
  opacity: 1 !important;
}

html.low-motion .sasa-hero.is-hand-loaded .sasa-hero__logo img {
  animation: sasaLogoSpin 60s linear infinite !important;
}