/* =========================================
   CHILD SEASONS REUSABLE CARD SECTIONS
========================================= */

.cs-card-section,
.cs-card-section * {
    box-sizing: border-box;
}

.cs-card-section {
    position: relative;
    max-width: 100%;
    padding: 80px 20px 100px;
    overflow: hidden;
    background: #ffffff;
    font-family: "Poppins", sans-serif;
}

.cs-section-container {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0 auto;
}

.cs-section-label {
    display: block;
    margin-bottom: 8px;
    color: #86a16d;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.cs-main-heading {
    margin: 0 0 16px;
    color: #000000;
    font-family: "Poppins", sans-serif;
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 900;
    line-height: 1.15;
}

.cs-accent {
    color: #86a16d;
}

.cs-intro {
    max-width: 680px;
    margin: 0 0 48px;
    color: #444444;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
}

.cs-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.cs-feature-card {
    position: relative;
    z-index: 2;
    padding: 36px 28px 32px;
    border: 1px solid rgba(134, 161, 109, 0.12);
    border-radius: 18px;
    background: #f9faf8;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    opacity: 0;
    text-align: center;
    transform: translateY(50px);
    transition:
        opacity 0.55s ease,
        transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.4s ease,
        background 0.3s ease,
        border-color 0.3s ease;
    will-change: transform, opacity;
}

.cs-feature-card.cs-visible {
    opacity: 1;
    transform: translateY(0);
}

.cs-feature-card.cs-visible:hover {
    border-color: #86a16d;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(134, 161, 109, 0.18);
    transform: translateY(-10px) scale(1.01);
}

.cs-delay-1 {
    transition-delay: 0.05s;
}

.cs-delay-2 {
    transition-delay: 0.1s;
}

.cs-delay-3 {
    transition-delay: 0.15s;
}

.cs-delay-4 {
    transition-delay: 0.2s;
}

.cs-delay-5 {
    transition-delay: 0.25s;
}

.cs-delay-6 {
    transition-delay: 0.3s;
}

.cs-delay-7 {
    transition-delay: 0.35s;
}

.cs-delay-8 {
    transition-delay: 0.4s;
}

.cs-delay-9 {
    transition-delay: 0.45s;
}

.cs-delay-10 {
    transition-delay: 0.5s;
}

.cs-delay-11 {
    transition-delay: 0.55s;
}

.cs-delay-12 {
    transition-delay: 0.6s;
}

.cs-delay-13 {
    transition-delay: 0.65s;
}

.cs-delay-14 {
    transition-delay: 0.7s;
}

.cs-delay-15 {
    transition-delay: 0.75s;
}

.cs-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: rgba(134, 161, 109, 0.1);
    color: #86a16d;
    font-size: 34px;
    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cs-feature-card:hover .cs-card-icon {
    background: #86a16d;
    color: #ffffff;
    transform: scale(1.08) rotate(-3deg);
}

.cs-card-title {
    margin: 0 0 12px;
    color: #000000;
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
    transition: color 0.3s ease;
}

.cs-feature-card:hover .cs-card-title {
    color: #86a16d;
}

.cs-card-divider {
    width: 38px;
    height: 3px;
    margin: 0 auto 16px;
    border-radius: 4px;
    background: #86a16d;
    transition: width 0.4s ease;
}

.cs-feature-card:hover .cs-card-divider {
    width: 56px;
}

.cs-card-text {
    max-width: 280px;
    margin: 0 auto;
    color: #333333;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;
}

/* =========================================
   HANDPRINT ANIMATION SUPPORT
========================================= */

.handprint-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.handprint {
    position: absolute;
    width: 100%;
    height: initial;
    opacity: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    animation: floatHand linear forwards;
    will-change: transform, opacity;
}

@keyframes floatHand {
    0% {
        opacity: 0;
        transform:
            translateY(30px)
            rotate(var(--rotation))
            scale(0.85);
    }

    10% {
        opacity: 0.1;
    }

    50% {
        opacity: 0.5;
    }

    90% {
        opacity: 0.9;
    }

    100% {
        opacity: 1;
        transform:
            translateY(-120px)
            rotate(calc(var(--rotation) + 28deg))
            scale(1.05);
    }
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1024px) {
    .cs-cards-grid {
        gap: 24px;
    }

    .cs-card-text {
        font-size: 14px;
    }
}

@media (max-width: 820px) {
    .cs-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .cs-main-heading {
        font-size: clamp(28px, 4.5vw, 40px);
    }

    .cs-feature-card {
        padding: 30px 20px 26px;
    }
}

@media (max-width: 540px) {
    .cs-card-section {
        padding: 50px 16px 70px;
    }

    .cs-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cs-main-heading {
        font-size: 28px;
    }

    .cs-intro {
        margin-bottom: 32px;
        font-size: 16px;
    }

    .cs-feature-card {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
        padding: 28px 18px 24px;
    }

    .cs-card-text {
        max-width: 100%;
        font-size: 14px;
    }

    .cs-card-icon {
        width: 64px;
        height: 64px;
        font-size: 28px;
    }
}

/* Respect visitors who disable animation */

@media (prefers-reduced-motion: reduce) {
    .cs-feature-card,
    .handprint {
        animation: none;
        transition: none;
    }

    .cs-feature-card {
        opacity: 1;
        transform: none;
    }
}






/* =========================
   FRAME (viewport mask)
========================= */

.season-frame{
    width:100%;
    
    height: 160px;
    position:relative;
    overflow:hidden;
}


@media (min-width: 400px){
.season-frame{
    width:100%;
    height:180px;
}
}


@media (min-width: 480px){
.season-frame{
    width:100%;
    height:230px;
}
}

@media (min-width: 550px){
    .season-frame{
        height:240px;
    }
}

@media (min-width: 680px){
    .season-frame{
        height:300px;
    }
}

@media (min-width: 700px){
    .season-frame{
        height:325px;
    }
}

@media (min-width: 800px){
    .season-frame{
        height:375px;
    }
}

@media (min-width: 900px){
    .season-frame{
        height:430px;
    }
}

@media (min-width: 1000px) {
  .season-frame {
    height: 530px;
  }
}


@media (min-width: 1300px) {
  .season-frame {
    height: 630px;
  }
}

@media (min-width: 1500px){
    .season-frame{
        height:700px;
    }
}

/* =========================
   PIVOT ANCHOR (bottom centre)
========================= */

.season-anchor{
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
}

/* =========================
   RESPONSIVE CIRCLE SYSTEM
========================= */

.season-circle{
    position:relative;

    width:100vw;
    max-width:2000px;

    aspect-ratio:1;

    transform:translateY(50%);
}

/* =========================
   WHEEL + LEAVES LAYERS
========================= */

.season-wheel,
.season-leaves,
.season-leaves-small,
.season-clouds{
    position:absolute;
    inset:0;
}

/* images fill container */
.season-wheel img,
.season-leaves img,
.season-leaves-small img,
.season-clouds img{
    width:100%;
    height:100%;
    display:block;
}

/* =========================
   ROTATION ONLY (NO POSITION TRANSFORMS HERE)
========================= */

.season-wheel{
    transform-origin:center;
    animation:spin 50s reverse linear infinite;
    z-index:2;
}

.season-leaves{
    transform-origin:center;
    animation:spin 70s linear infinite reverse;
    z-index:1;
}

.season-leaves-small{
    transform-origin:center;
    animation:spin 80s linear infinite reverse;
    z-index:5;
}

/* =========================
   SPIN
========================= */

@keyframes spin{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

/* =========================
   PAPER PLANE (unchanged)
========================= */

.paper-plane {
    position:absolute;

    width: 45%;
  aspect-ratio: 1;
  left: 19%;
  top: 50%;

    background:url("../images/paper-plane.svg") no-repeat center;
    background-size:contain;

    z-index:3;

    animation:windBobbing 5s ease-in-out infinite;
}

.season-clouds{
    position:absolute;

   
  aspect-ratio: 1;
 

    background:url("../images/season-clouds.svg") no-repeat center;
    background-size:contain;

    z-index:10;

    
    animation: windBobbing 10s ease-in-out infinite;
  top: 46%;
}

@keyframes windBobbing{
    0%   { transform:translate(0,0) rotate(0deg) scale(1); }
    20%  { transform:translate(12%, -6%) rotate(8deg) scale(1.03); }
    40%  { transform:translate(22%, 3%) rotate(14deg) scale(1.06); }
    60%  { transform:translate(15%, 10%) rotate(6deg) scale(1.02); }
    80%  { transform:translate(6%, 4%) rotate(-6deg) scale(0.99); }
    100% { transform:translate(0,0) rotate(0deg) scale(1); }
}