@charset "utf-8";
/* CSS Document */


.shana-tova-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  opacity: 0;
  animation: shanaOverlayIn 0.6s ease forwards, shanaOverlayOut 1s ease 7.8s forwards;
}

.shana-tova-inner {
  position: relative;
  width: min(900px, 92vw);
  height: auto;
}

.shana-tova-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.spark-trail {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  opacity: 0.95;
  filter: drop-shadow(0 0 6px rgba(231, 195, 90, 0.55));
  animation: drawTrail 1.9s ease forwards;
}

.glow-trail {
  opacity: 0.45;
  animation-delay: 0.08s;
}

.shana-text-fill {
  font-family: "Calistoga", serif;
  font-size: 68px;
  font-weight: 700;
  fill: rgba(255,255,255,0);
  animation: textFillIn 0.7s ease 1.35s forwards;
}

.shana-text-stroke {
  font-family: "Calistoga", serif;
  font-size: 68px;
  font-weight: 700;
  fill: transparent;
  stroke: #f1d57a;
  stroke-width: 1.5;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  filter: drop-shadow(0 0 10px rgba(241, 213, 122, 0.35));
  animation: drawText 1.25s ease 0.9s forwards;
}

.shana-subtext {
  font-family: "Architects Daughter", cursive;
  font-size: 32px;
  fill: #f3e2a0;
  opacity: 0;
  animation: fadeSubText 0.8s ease 2.2s forwards;
}

.sparkles .sp {
  position: absolute;
  color: #f5d97c;
  font-size: 16px;
  opacity: 0;
  text-shadow: 0 0 10px rgba(245, 217, 124, 0.7);
  animation: twinkle 1.5s ease-in-out infinite;
}

.sp1 { top: 42%; left: 20%; animation-delay: 0.1s; }
.sp2 { top: 31%; left: 31%; animation-delay: 0.5s; }
.sp3 { top: 48%; left: 44%; animation-delay: 0.8s; }
.sp4 { top: 24%; left: 58%; animation-delay: 1.1s; }
.sp5 { top: 38%; left: 72%; animation-delay: 1.4s; }
.sp6 { top: 20%; left: 80%; animation-delay: 1.7s; }

@keyframes shanaOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes shanaOverlayOut {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; }
}

@keyframes drawTrail {
  from { stroke-dashoffset: 900; }
  to   { stroke-dashoffset: 0; }
}

@keyframes drawText {
  from { stroke-dashoffset: 600; opacity: 0.3; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes textFillIn {
  from { fill: rgba(255,255,255,0); }
  to   { fill: rgba(255,255,255,0.95); }
}

@keyframes fadeSubText {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes twinkle {
  0%   { opacity: 0; transform: scale(0.6); }
  50%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.6); }
}
/* ============================================
   SHANA TOVA - RESPONSIVE POSITION
   ============================================ */

/* DESKTOP 1241+ */
@media (min-width: 1241px) {

    .shana-tova-inner {
        position: absolute;
        width: min(640px, 42vw);

        top: 120px;
        right: 7vw;

        transform: none;
    }

    .shana-text-fill,
    .shana-text-stroke {
        font-size: 48px;
    }

    .shana-subtext {
        font-size: 18px;
    }

    .spark-trail {
        stroke-width: 2;
    }

    .glow-trail {
        stroke-width: 3.5;
        opacity: 0.22;
    }
}


/* HAMBURGER / TABLET 576-1240 */
@media (min-width: 576px) and (max-width: 1240px) {

    .shana-tova-inner {
        position: absolute;
        width: min(600px, 88vw);

        top: 78px;
        left: 50%;

        transform: translateX(-50%);
    }

    .shana-text-fill,
    .shana-text-stroke {
        font-size: 42px;
    }

    .shana-subtext {
        font-size: 16px;
    }

    .spark-trail {
        stroke-width: 2;
    }

    .glow-trail {
        stroke-width: 3.5;
        opacity: 0.22;
    }
}


/* MOBILE */
@media (max-width: 575px) {

    .shana-tova-inner {
        position: absolute;
        width: 96vw;

        top: 68px;
        left: 50%;

        transform: translateX(-50%);
    }

    .shana-text-fill,
    .shana-text-stroke {
        font-size: 36px;
    }

    .shana-subtext {
        font-size: 14px;
    }

    .spark-trail {
        stroke-width: 1.7;
    }

    .glow-trail {
        stroke-width: 3;
        opacity: 0.2;
    }
}