/* JuniorAI homepage-only layer: hero blobs, rotating word, sliders, and bespoke motion. */

body { font-family: 'Plus Jakarta Sans', sans-serif; }
    .organic-blob {
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    .organic-blob-2 {
      border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
    .hero-microbit-badge--mobile {
      width: min(58vw, 12rem);
      padding: 0.65rem 0.8rem 0.7rem;
      border-radius: 0.85rem;
      background: #ffffff;
      box-shadow: 0 18px 36px rgba(124, 45, 18, 0.16), 0 6px 14px rgba(124, 45, 18, 0.1);
      backdrop-filter: blur(6px);
      transform-origin: center;
    }
    .hero-microbit-badge--mobile > [aria-hidden="true"] {
      top: -0.45rem;
      right: -0.35rem;
      border-radius: 9999px;
    }
    .hero-microbit-badge--mobile p:first-of-type {
      font-size: 0.68rem;
      line-height: 1.12;
      margin-bottom: 0.2rem;
      padding-right: 1.55rem;
    }
    .hero-microbit-badge--mobile p:not(:first-of-type) {
      font-size: 0.6rem;
      line-height: 1.22;
    }
    .hero-microbit-badge--desktop {
      width: 18rem;
      border-radius: 1rem;
      background: #ffffff;
      box-shadow: 0 24px 55px rgba(124, 45, 18, 0.18), 0 8px 18px rgba(124, 45, 18, 0.08);
      transform-origin: center;
    }
    .dark .hero-microbit-badge--desktop {
      background: #18181b;
      box-shadow: 0 24px 55px rgba(0, 0, 0, 0.32), 0 8px 18px rgba(0, 0, 0, 0.2);
    }
    .dark .hero-microbit-badge--mobile {
      background: #18181b;
      box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28), 0 6px 14px rgba(0, 0, 0, 0.18);
    }
    .animate-bounce-slow {
      animation: bounce-slow 3s infinite;
    }
    @keyframes bounce-slow {
      0%, 100% { transform: translateY(-5%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
      50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
    }
    /* Staggered fade-in for pillars */
    @keyframes pillar-in {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .pillar-item {
      opacity: 0;
      animation: pillar-in 0.5s ease-out forwards;
    }
    .pillar-item:nth-child(1) { animation-delay: 0.1s; }
    .pillar-item:nth-child(2) { animation-delay: 0.25s; }
    .pillar-item:nth-child(3) { animation-delay: 0.4s; }
    .pillar-item:nth-child(4) { animation-delay: 0.55s; }
    .pillar-item:nth-child(5) { animation-delay: 0.7s; }
    .pillar-item:nth-child(6) { animation-delay: 0.85s; }
    .pillar-item:nth-child(7) { animation-delay: 1.0s; }

    /* Handwritten tagline */
    @keyframes tagline-in {
      from { opacity: 0; transform: rotate(-3deg) translateY(8px); }
      to   { opacity: 1; transform: rotate(-1.5deg) translateY(0); }
    }
    @keyframes scribble-draw {
      from { stroke-dashoffset: 200; }
      to   { stroke-dashoffset: 0; }
    }
    .tagline-handwritten {
      font-family: 'Caveat', cursive;
      animation: tagline-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
    }
    .tagline-handwritten svg {
      animation: scribble-draw 0.8s ease-out 0.9s both;
    }

    /* A) Shimmer na badge kursu */
    @keyframes shimmer {
      0% { background-position: -200% center; }
      100% { background-position: 200% center; }
    }
    .badge-shimmer {
      background-image: linear-gradient(
        110deg,
        transparent 25%,
        rgba(255,255,255,0.4) 37%,
        rgba(255,255,255,0.6) 50%,
        rgba(255,255,255,0.4) 63%,
        transparent 75%
      );
      background-size: 200% 100%;
      background-repeat: no-repeat;
      background-color: #ff6b00;
      animation: shimmer 4.5s ease-in-out 1s infinite;
    }

    /* Hero rotating word */
    .hero-rotating-wrapper {
      position: relative;
      display: inline-block;
    }
    .hero-rotating-word {
      display: inline-block;
      animation: hero-word-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    .hero-rotating-word.out {
      animation: hero-word-out 0.35s ease-in both;
    }
    .hero-cursor {
      display: inline-block;
      width: 0.6em;
      height: 4px;
      background: #ff6b00;
      margin-right: 0.1em;
      vertical-align: baseline;
      border-radius: 2px;
      animation: hero-cursor-blink 1s step-end infinite;
    }
    .section-cursor {
      background: #1a120b;
    }
    .dark .section-cursor {
      background: #fb923c;
    }
    @keyframes hero-cursor-blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }
    @keyframes hero-word-in {
      from { opacity: 0; transform: translateY(30px) rotateX(-20deg); filter: blur(4px); }
      to   { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
    }
    @keyframes hero-word-out {
      from { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
      to   { opacity: 0; transform: translateY(-30px) rotateX(20deg); filter: blur(4px); }
    }
    /* Slider */
    .slides-track {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      gap: 1rem;
      padding-bottom: 4px;
    }
    .slides-track::-webkit-scrollbar { display: none; }
    .slide-card {
      scroll-snap-align: start;
      flex: 0 0 auto;
      transition: opacity 0.3s;
    }

    /* Mobile menu overlay */
    .mobile-menu-overlay {
      transform: translateX(100%);
      transition: transform 0.3s ease-in-out;
    }
    .mobile-menu-overlay.active {
      transform: translateX(0);
    }
    .video-play-overlay {
      transition: opacity 0.3s ease;
    }
    .opacity-0 {
      opacity: 0;
    }
    /* Rotujące słowo zawsze w nowej linii na wszystkich breakpointach */
    .hero-rotating-wrapper {
      display: block !important;
    }
    @media (max-width: 639px) {
      #heroRotatingText,
      .hero-rotating-prefix {
        font-size: 2rem;
      }
    }
    /* Desktop: lekko mniejszy font — rotating word ma własną linię, wygląda jak accent */
    @media (min-width: 1024px) {
      #heroRotatingText,
      .hero-rotating-prefix {
        font-size: 3.5rem;
      }
    }
    /* Section sliders — mobile horizontal scroll, desktop grid */
    .section-slider-track {
      display: flex;
      align-items: stretch;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      gap: 1rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      padding-bottom: 4px;
      margin-left: -1.5rem;
      margin-right: -1.5rem;
    }
    .section-slider-track::-webkit-scrollbar { display: none; }
    .section-slider-card {
      scroll-snap-align: start;
      flex-shrink: 0;
      width: 82vw;
      display: flex;
      flex-direction: column;
    }
    @media (min-width: 768px) {
      .section-slider-track.desktop-slider {
        display: flex;
        align-items: stretch;
        overflow-x: auto;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        gap: 1.5rem;
      }
      .section-slider-track.desktop-slider .section-slider-card {
        width: calc((100% - 3rem) / 3);
      }
    }
    @media (min-width: 768px) {
      .section-slider-track.md-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        overflow-x: visible;
        padding-left: 0; padding-right: 0;
        margin-left: 0; margin-right: 0;
        gap: 1.5rem;
      }
      .section-slider-track.md-grid .section-slider-card { width: auto; }
    }
    @media (min-width: 1024px) {
      .section-slider-track.lg-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        overflow-x: visible;
        padding-left: 0; padding-right: 0;
        margin-left: 0; margin-right: 0;
        gap: 2rem;
      }
      .section-slider-track.lg-grid .section-slider-card { width: auto; }
    }