/* ===============================================================
   🏄‍♂️🛹S-Web 6: Viewport Animations (fade, slide etc.)
   📁 s-web-6-1.css | By o3 & 4o Added: 25 July  2025
   ============================================================== */
/* === S-Web 6 universal viewport-delayed effects ================= */

/* starter state for every delayed element */
.delay-base { opacity: 0; }

/* ⬅️🏄‍♂️🛹 — Slide left 200 pixels (adjustable H-Tag)*/
.effect-slide-left { transform: translateX(200px); transition: opacity .8s ease-out, transform .8s ease-out; }
.effect-slide-left.show { opacity: 1; transform: translateX(0); }

/* Slide right 40 pixels (adjustable H-Tag ) — 🏄‍♂️🛹➡️ */
.effect-slide-right { transform: translateX(-40px); transition: opacity .8s ease-out, transform .8s ease-out; }
.effect-slide-right.show { opacity: 1; transform: translateX(0); }


/* Slide up 40 pixels 🏄‍♂️🛹⬆️ (adjustable H-Tag) */
.effect-slide-up       { transform: translateY(40px);  transition: opacity .8s ease-out, transform .8s ease-out; }
.effect-slide-up.show  { opacity: 1; transform: translateY(0); }

/* ⚠️ Slide down 40 pixels 🏄‍♂️🛹⬇️ (adjustable H-Tag) */
.effect-slide-down       { transform: translateY(-40px); transition: opacity .8s ease-out, transform .8s ease-out; }
.effect-slide-down.show  { opacity: 1; transform: translateY(0); }

/* Micro slide-down + fade-in (!For Div) 🏄‍♂️🛹⬇️ (safe, reusable on any element) */
.effect-slide-down-soft {
  opacity: 0;
  transform: translateY(-40px);   /* exaggerate start offset so it’s obvious */
  transition: opacity 1.5s ease-out, transform 1.5s ease-out; /* slower */
}
.effect-slide-down-soft.show {
  opacity: 1;
  transform: translateY(0);       /* settle into place */
}

.effect-slide-down-soft.show { opacity: 1; transform: translateY(0); /* settle into place */}


/* Zoom in from 0.8× 🔍➕👁️‍🗨️ (adjustable H-Tag) */
.effect-zoom-in        { transform: scale(.8);  transition: opacity .8s ease-out, transform .8s ease-out; }
.effect-zoom-in.show   { opacity: 1; transform: scale(1); }

/* Fade in ease-in-out 2.0 slow 👻👀 (adjustable H-Tag) */
.effect-fade-in { transition: opacity 2.0s ease-in-out;}
.effect-fade-in.show { opacity: 1;}

/* 🏃‍♀️⌨️🏃‍♀️ Lightweight AI speed paragraph typewriter (hides each character until JS reveals it) */
.effect-typewriter span {
  opacity: 0;
  white-space: pre;           /* keep spaces */
  display: inline-block;
  transition: opacity .15s linear;
}
.effect-typewriter.show { opacity: 1; }

/* ===============================================================
   🏃‍♀️⌨️🏃‍♀️ S-Web 6: Viewport Animations - rich-typewriter Rich Typewriter JS.)
   📁 s-web-6-1.css | By 4o Added: 28 July  2025
   ============================================================== */

    .rich-typewriter {
    /*font-size: 1.3rem;
      line-height: 1.7;
      max-width: 700px;
      border-left: 4px solid #27a4ec;
      padding-left: 1rem;*/
    /*margin-top: 140vh; /* force scroll for test */
      opacity: 0;
      transition: opacity 0.5s ease-in;
    }

    .rich-typewriter.show {
      opacity: 1;
    }

    .rich-typewriter span {
      opacity: 0;
      transition: opacity 0.2s ease-in-out;
    }
/*
    .rich-typewriter a {
      color: #27a4ec;
      text-decoration: underline;
    }
*/
    .rich-typewriter b,
    .rich-typewriter strong {
      font-weight: bold;
    }

    .delay-base {
      opacity: 0;
    }

.typewriter-box {
  height: 50px;         /* Reserve vertical space */
  overflow: hidden;      /* Prevent spillover */
  position: relative;
}
.typewriter-box-50px {
  height: 50px;
  overflow: hidden;
  position: relative;
}

.typewriter-box-75px { height: 75px; overflow: hidden; position: relative; }
.typewriter-box-100px { height: 100px; overflow: hidden; position: relative; }
.typewriter-box-125px { height: 125px; overflow: hidden; position: relative; }
.typewriter-box-150px { height: 150px; overflow: hidden; position: relative; }
.typewriter-box-175px { height: 175px; overflow: hidden; position: relative; }
.typewriter-box-200px { height: 200px; overflow: hidden; position: relative; }
.typewriter-box-225px { height: 225px; overflow: hidden; position: relative; }
.typewriter-box-250px { height: 250px; overflow: hidden; position: relative; }
.typewriter-box-275px { height: 275px; overflow: hidden; position: relative; }
.typewriter-box-300px { height: 300px; overflow: hidden; position: relative; }
.typewriter-box-325px { height: 325px; overflow: hidden; position: relative; }
.typewriter-box-350px { height: 350px; overflow: hidden; position: relative; }
.typewriter-box-375px { height: 375px; overflow: hidden; position: relative; }
.typewriter-box-400px { height: 400px; overflow: hidden; position: relative; }
.typewriter-box-425px { height: 425px; overflow: hidden; position: relative; }
.typewriter-box-450px { height: 450px; overflow: hidden; position: relative; }
.typewriter-box-475px { height: 475px; overflow: hidden; position: relative; }
.typewriter-box-500px { height: 500px; overflow: hidden; position: relative; }
.typewriter-box-425px { height: 525px; overflow: hidden; position: relative; }
.typewriter-box-550px { height: 550px; overflow: hidden; position: relative; }
.typewriter-box-475px { height: 575px; overflow: hidden; position: relative; }
.typewriter-box-600px { height: 600px; overflow: hidden; position: relative; }
.typewriter-box-425px { height: 625px; overflow: hidden; position: relative; }
.typewriter-box-650px { height: 650px; overflow: hidden; position: relative; }
.typewriter-box-475px { height: 675px; overflow: hidden; position: relative; }
.typewriter-box-700px { height: 700px; overflow: hidden; position: relative; }
.typewriter-box-425px { height: 725px; overflow: hidden; position: relative; }
.typewriter-box-750px { height: 750px; overflow: hidden; position: relative; }
.typewriter-box-475px { height: 775px; overflow: hidden; position: relative; }


/* ===============================================================
   👻👀 disappearing-div (adjustable H-Tag) */
/*      📁 s-web-6-1.css | By 4o Added: 1 August 2025
   ============================================================== */

/*
.disappearing-div {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.disappearing-div.hidden {
  opacity: 0;
  transform: translateY(-60px); /* slide up */
  /*
  pointer-events: none;
}
*/
.disappearing-div {
  opacity: 1;
/*  height: 100px;                 /* 👈 Match estimated height of content */
  padding: 20px 0;               /* 👈 Padding makes it feel natural */
  overflow: hidden;
  transition:
    opacity 0.8s ease,
    height 0.8s ease,
    padding 0.8s ease;
}

.disappearing-div.hidden {
  opacity: 0;
  height: 0;
  padding: 0;
}

.screen-height-100 {
  min-height: 100vh;
}


/* ⚠️ End of section - End of section - End of section - End of section ⚠️ */







/* ===============================================================
   📱 Hide or show 👀 only on mobile (devices < 768px wide)
   📁 s-web-6-1.css | Added: 26 July  2025
   ============================================================== */
/* 📱 Hide on mobile */
.hide-on-mobile {
  display: none !important;
}

@media (min-width: 768px) {
  .hide-on-mobile {
    display: block !important;
  }
}

/* 📱 Show only on mobile */
.show-on-mobile-only {
  display: block !important;
}

@media (min-width: 768px) {
  .show-on-mobile-only {
    display: none !important;
  }
}

/* ⚠️ End of section - End of section - End of section - End of section ⚠️ */






/* ===============================================================
   📜🎥📐⌨️ The Cinematic Scale Typewriter Effect 🎬
   📁 s-web-6-1.css | Added: 7 April 2025
   ============================================================== */

  /* 🎨 TEXT STYLES */
        .header-text-ctr-1 {
            font-family: "Arial Black", sans-serif;
            font-size: 60px;
            text-align: center;
        }
        /* 🎬 Cinematic H2-Like Header (Work Sans, 800 weight) */
        .header-text-ctr-2 {
          font-family: 'Work Sans', sans-serif;
          font-size: 30px;
          font-weight: 800; /* HEAVY */

        }

        .tag-text-ctr-1 {
            font-family: "Open Sans", sans-serif;
            font-size: 28px;
            font-weight: 300; /* Light */
            text-align: center;
        }
        /* 💡 CONTAINER (Restores Normal Page Flow & Centering) */
        /* 💡 CONTAINER (Ensures Proper Wrapping & Centering) */
        /* 💡 CONTAINER (Ensures Proper Wrapping & Centering) */
        .scale-effect-text-container {
            display: flex; /* ✅ Enables centering */
            flex-wrap: wrap; /* ✅ Allows text to break into multiple lines */
            justify-content: center; /* ✅ Centers text horizontally */
            align-items: center; /* ✅ Centers text vertically */
            max-width: 90vw; /* ✅ Prevents text from extending off-screen */
            white-space: normal; /* ✅ Allows wrapping */
            word-break: break-word; /* ✅ Ensures text wraps correctly */
            overflow-wrap: break-word; /* ✅ Alternative wrapping fix */
            margin-bottom: 10px; /* ✅ Adds spacing between text blocks */
            visibility: hidden; /* ✅ Prevents pre-rendering issues */
            color: transparent; /* ✅ Stops black text flash before animation */
            text-align: center; /* ✅ Ensures text stays centered */
}

        .scale-effect-text-container.left {
          justify-content: flex-start !important;
          text-align: left !important;
}
        .no-margin {
            margin-top: calc(-0.1em - 5px); /* ✅ Scales dynamically */
            line-height: 1; /* ✅ Keeps spacing natural */
            padding-top: 0; /* ✅ No extra padding */
}

        /* ✨ Show Text When Animation Begins */
        .scale-effect-text-container.show {
            color: inherit !important; /* ✅ Restores correct text color */

}
        /* ✨ LETTER EFFECTS - Snappy Keyframe Animation */
        .scale-effect-letter-js {
            display: inline-block; /* ✅ Ensures letters stay together */
            white-space: nowrap; /* ✅ Prevents individual letter wrapping */
            opacity: 0;
            animation: scaleAppear 0.1s ease-in forwards;
        }


        /* 🎬 Keyframe Animation - Snappy Scale Effect */
        @keyframes scaleAppear {
            0% {
                transform: scale(4);
                opacity: 0;
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
        /* ✨ Fade-in effect */
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        .fade-in.show {
            opacity: 1;
            transform: translateY(0);
        }




/*new 40 update on 19 July 2025 Dash Supposed to keep words together*/

/* ──────────────────────────────────────────────────────────────
   GOV-COMMS cinematic header — stop mid-word line-breaks
   (Overrides earlier rules)                                   
   ────────────────────────────────────────────────────────────── */

/* 1️⃣  Hold each word together but still allow line breaks at spaces */
.scale-effect-text-container{
    word-break: keep-all !important;   /* never split inside words   */
    overflow-wrap: normal !important;  /* but let spaces wrap        */
}

/* 2️⃣  Keep letters glued so browser can only break *between* words */
.scale-effect-letter-js{
    display:inline-block !important;   /* one unbreakable “brick”    */
}

/* Gap between words inside flex-typewriter headers */
.space-letter{
    display:inline-block;
    width:0.42em;          /* tweak if the space looks too tight / wide */
}

/* ----- MOBILE TYPOGRAPHY TWEAKS ------------------------------ */
/* Applies when viewport width ≤ 550 px (tweak as you like)      */
@media (max-width: 550px) {

  /* Target every big cinematic header that already uses
     .header-text-ctr-1 (no HTML edits needed)                  */
  .header-text-ctr-1 {
    /* default was: font-size: clamp(28px, 8vw, 42px);          */
    font-size: clamp(28px, 12vw, 42px);   /* fluid but capped   */
    line-height: 1.15;                   /* a bit tighter       */
  }


  /* Helper: keep chosen headers BIG on phones
     (add  big-on-mobile  in the HTML)                        */
  [class*="header-text-ctr-"].big-on-mobile {
    font-size: clamp(32px, 20vw, 60px);   /* tweak as desired */
  }

/* Optional: shrink the smaller tag line too                  */
.tag-text-left-1,
.tag-text-ctr-1 {
  /* clamp(MIN, IDEAL, MAX)
     ─ MIN  = 18 px  → never let the font drop below this.
     ─ IDEAL = 5vw   → scale with 5 % of the viewport width on phones/tablets.
     ─ MAX  = 24 px  → cap growth so it never exceeds this on large screens. */
   /* color: hotpink !important; */   /* temporary test */
  font-size: clamp(20px, 7vw, 24px);
}

}

/* ⚠️ End of section - End of section - End of section - End of section ⚠️ */








/* ===============================================================
   🛹 The image slider collection 🎬🛹 
   📁 s-web-6-1.css | By Sienna 4o 26 July 2025 Updated by o3-Wan Kenobi: 27 July  2025
   ============================================================== */


/* 📦 Container that defines the visible slider area */
.slider-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
}


/* 🧱 Flex row of images (scrolls horizontally) */
.slider-track {
  display: flex;
  transition: transform 0.8s ease-in-out;
}


/* 🖼️ Each image block */
.slider-track a {
  flex-shrink: 0;
  width: 1000px;               /* Image width (desktop default) */
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}

/* 🖼️ Responsive image scaling + alignment fix */
.slider-track img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 0;            /* 👁️ remove circular corners */
  vertical-align: top !important;
  line-height: 0 !important;
}


/* 📱 Mobile Handling: stack single image full-width */
@media (max-width: 768px) {
  .slider-wrapper {
    width: 100vw;
  }

  .slider-track a {
    margin: 0;
    width: 100vw;              /* Show one full image at a time */
  }
}