/* === snn34 Effects (auto-generated) === */

/* --- bg-noise-grain --- */
.snn34-noise::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}


/* --- text-stroke-outline --- */
.snn34-stroke{-webkit-text-stroke:1px var(--accent);-webkit-text-fill-color:transparent;font-weight:900}


/* --- cards-glass --- */
.snn34-glass{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius,12px);transition:all .3s ease}
.snn34-glass:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);box-shadow:0 8px 32px rgba(0,0,0,.3);transform:translateY(-4px)}


/* --- css-scroll-driven --- */
/* CSS Scroll-Driven Animations — NO JavaScript needed */
/* 2026 standard: Chrome 115+, Safari 18+. Graceful fallback with @supports */
/* Use for: minimal, elegant moods where JS overhead isn't wanted */

/* Fade-in on scroll into view */
@supports (animation-timeline: view()) {
  .snn34-scroll-reveal {
    animation: snn34-scroll-fade-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }

  @keyframes snn34-scroll-fade-in {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Slide from left */
  .snn34-scroll-slide-left {
    animation: snn34-scroll-left linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }

  @keyframes snn34-scroll-left {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
  }

  /* Scale up */
  .snn34-scroll-scale {
    animation: snn34-scroll-scale-up linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }

  @keyframes snn34-scroll-scale-up {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
  }

  /* Progress bar that fills based on page scroll */
  .snn34-scroll-progress {
    animation: snn34-progress-fill linear;
    animation-timeline: scroll(root);
  }

  @keyframes snn34-progress-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}

/* Fallback for browsers without scroll-driven animation support */
@supports not (animation-timeline: view()) {
  .snn34-scroll-reveal,
  .snn34-scroll-slide-left,
  .snn34-scroll-scale {
    /* GSAP ScrollTrigger handles these via script.js */
    opacity: 1;
    transform: none;
  }
}


/* --- rotating-rings --- */
.snn34-rings{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:400px;height:400px;pointer-events:none}
.snn34-rings::before,.snn34-rings::after{content:'';position:absolute;border:2px solid;border-radius:50%}
.snn34-rings::before{width:100%;height:100%;border-color:var(--accent) transparent var(--accent) transparent;animation:snn34-orbit 12s linear infinite}
.snn34-rings::after{width:75%;height:75%;top:12.5%;left:12.5%;border-color:transparent var(--accent-glow) transparent var(--accent-glow);animation:snn34-orbit 8s linear infinite reverse}
@keyframes snn34-orbit{from{transform:rotate(0)}to{transform:rotate(360deg)}}