/* Reset styles */
@layer reset {

*, 
*::before, 
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

@media (prefers-reduced-motion: no-preference) {

  * {
    scroll-behavior: smooth; 
  }

 }

}


@layer accessibility {

  /* Skip to main content link */
  .skip-to-main {
    position: absolute;
    top: calc(-8 * var(--md)); 
    left: 50%;
    transform: translateX(-50%);
    background: var(--secondary);
    color: var(--secondary);
    border-radius: var(--md);
    padding: var(--sm) var(--md);
    transition: background var(--fx-short),
                transform var(--fx-smooth),
                top var(--fx-short);

    font-size: var(--fs-small);
    white-space: nowrap;

    box-shadow: 0 0 0 var(--one) var(--primary-l);
    outline: var(--sm-border) solid transparent;
    outline-offset: var(--sm-border);

    z-index: 9999;
  }

  .skip-to-main:focus {
    top: var(--md);
    transform: translate(-50%, 0);
    outline-color: var(--accent);
    background: var(--secondary);
    color: var(--accent);
    box-shadow: 0 0 0 var(--sm-border) var(--accent);
  }

  .skip-to-main:focus-visible {
    outline: var(--sm-border) solid var(--accent);
  }

  .skip-to-main:active {
    transform: scale(0.9) translateX(-50%);
  }

  /* Role-based selector—keep element */
  [role="dialog"]:focus-within {
    outline: none;
    box-shadow: 0 0 0 var(--sm-border) var(--accent);
  }

  /* Global focus-visible — keep */
  :focus-visible {
    box-shadow: 0 var(--one) calc(2 * var(--two)) var(--primary-l);
    outline: var(--one) solid var(--accent);
    outline-offset: var(--sm-border);
    transition: box-shadow var(--fx-short),
                outline-color var(--fx-short), 
                outline-offset var(--fx-short);
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  canvas {
    pointer-events: none;
  }

  /* Generic interactive selector */
  :is(a, button, input, select, textarea):focus-visible {
    box-shadow: 0 var(--one) 0 var(--primary-l);
    outline: var(--one) solid var(--accent);
    outline-offset: var(--sm-border);
    transition: box-shadow var(--fx-short),
                outline var(--fx-short);
  }

  /* nav a → nav :focus-visible */
  nav :focus-visible {
    color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 var(--sm-border) var(--accent);
  }

  /* button stays as is — element, no class */
  button:focus-visible {
    color: var(--primary); 
    outline-offset: calc(var(--two) * var(--two));
  }

  @media (prefers-color-scheme: dark) {
    :focus-visible {
      outline-color: var(--secondary);
    }
  }

  /* Role/attribute selectors — keep */
  [role="button"]:focus-visible,
  [tabindex="0"]:focus-visible {
    outline: var(--one) solid var(--accent);
    outline-offset: var(--md-space);
    transform: translateY(calc(-2 * var(--three)));
    transition: transform var(--fx-short);
  }

  [aria-expanded="true"] {
    background: var(--accent);
  }

  [role="button"],
  [tabindex="0"] {

    transition: transform var(--fx-short);
  }

  /* Inputs — keep */
  input:focus-visible,
  textarea:focus-visible {
    box-shadow: 0 0 0 var(--one) var(--primary-l);
    outline: var(--sm-border) solid var(--accent);
    outline-offset: 0;
  }

  [data-contrast="high"] {
    color: var(--primary);
    background: var(--secondary);
  }

}


/* ============================================================
   Register Custom Properties (Animatable + Typed)
   ============================================================ */

@property --primary-hex {
  syntax: "<color>";
  inherits: false;
  initial-value: #101616;
}

@property --secondary-hex {
  syntax: "<color>";
  inherits: false;
  initial-value: #fbfbff;
}

@property --accent-hex {
  syntax: "<color>";
  inherits: false;
  initial-value: #C09562;
}

@property --surface-hex {
  syntax: "<color>";
  inherits: false;
  initial-value: #033431;
}

/* Forms additional colors */
@property --check-hex {
  syntax: "<color>";
  inherits: false;
  initial-value: #870b09;
}

/* ============================================================
   THEME LAYER
   ============================================================ */

@layer theme {

:root {

  /* Modern Solid OKLCH Color Palettes */
  --primary: oklch(from var(--primary-hex) calc(l - 30) calc(c * 10) calc(h * 10));
  --secondary: oklch(from var(--secondary-hex) calc(l * 15) calc(c * 5) calc(h + 20));
  --accent: oklch(from var(--accent-hex) l calc(c * 1.5) calc(h - 3));
  --surface: oklch(from var(--surface-hex) l calc(c * 3) calc(h + 5));
  --check: oklch(from var(--check-hex) calc(l * 15) calc(c * 5) h);

  /* Modern 75% Alpha OKLCH Color Palettes */
  --primary-o: oklch(from var(--primary) l c h / 0.75);
  --secondary-o: oklch(from var(--secondary) l c h / 0.75);
  --accent-o: oklch(from var(--accent) l c h / 0.75);

  /* Modern 25% Alpha OKLCH Color Palettes */
  --primary-l: oklch(from var(--primary) l c h / 0.25);
  --secondary-l: oklch(from var(--secondary) l c h / 0.25);
  --accent-l: oklch(from var(--accent) l c h / 0.25);

  /* ------------------------------------------------------------
   Fluid Sizes & Spacing (Responsive, Clamp-based)
   ------------------------------------------------------------
   --ultra       : Hero / Display titles            ~40px – 70px
   --jumbo       : Extra-large headings (H1)        ~30px – 58px
   --xx-large    : Large headings (H2)              ~25px – 48px
   --x-large     : Medium headings (H3)             ~20px – 38px
   --large       : Sub-headings (H4)                ~17px – 33px

   --body        : Body text / paragraphs           ~14px – 22px
   --small       : Small text / captions            ~12px – 17px

   --icon        : SVG icons                        ~30px – 40px
   --md-space    : Medium spacing                   ~10px – 20px
   --sm-space    : Small spacing                    ~5px – 10px
   --md-border   : Medium border                    ~2px – 3px
   --sm-border   : Small border                     ~1px – 2px
  ------------------------------------------------------------ */

  --ultra: clamp(2.5rem, calc(1.75rem + 3dvw), 4.375rem);
  --jumbo: clamp(1.875rem, calc(1.175rem + 2.8dvw), 3.625rem);
  --xx-large: clamp(1.5625rem, calc(0.9875rem + 2.3dvw), 3rem);
  --x-large: clamp(1.25rem, calc(0.8rem + 1.8dvw), 2.375rem);
  --large: clamp(1.0625rem, calc(0.6625rem + 1.6dvw), 2.0625rem);

  --body: clamp(0.875rem, calc(0.675rem + 0.8dvw), 1.375rem);
  --small: clamp(0.75rem, calc(0.625rem + 0.5dvw), 1.0625rem);

  --icon: clamp(1.875rem, calc(1.625rem + 1dvw), 2.5rem);
  --md-space: clamp(0.625rem, calc(0.375rem + 1dvw), 1.25rem);
  --sm-space: clamp(0.313rem, calc(0.063rem + 1dvw), 0.938rem);
  --md-border: clamp(0.125rem, calc(0.0998rem + 0.1008dvw), 0.188rem);
  --sm-border: clamp(0.063rem, calc(0.0382rem + 0.0992dvw), 0.125rem);

  /* ------------------------------------------------------------
    Fixed sizes and spacing
  ------------------------------------------------------------
    --one                                            ~1px
    --two                                            ~2px
    --three                                          ~3px
    --xs                                             ~5px
    --sm                                             ~10px
    --sp                                             ~15px
    --md                                             ~20px
  ------------------------------------------------------------ */
  --one: 0.063rem;
  --two: 0.125rem;
  --three: 0.188rem;
  --xs: 0.313rem;
  --sm: 0.625rem;
  --sp: 0.938rem;
  --md: 1.25rem;

  /* Typography scale */
  --fs-h1: var(--jumbo);
  --fs-h2: var(--xx-large);
  --fs-h3: var(--x-large);
  --fs-h4: var(--large);
  --fs-body: var(--body);
  --fs-small: var(--small);

  /* Length variables already registered via @property
     will use their initial-values, so we do NOT redefine them here. */

  --lh-tight: clamp(1.1, calc(1 + 0.2dvw), 1.3);
  --lh-normal: clamp(1.4, calc(1.3 + 0.2dvw), 1.55);
  --lh-comfy: clamp(1.5, calc(1.4 + 0.3dvw), 1.8);

  /* ------------------------------------------------------------
    Duration Scale (short → long)
  ------------------------------------------------------------ */
  --dur-1: 250ms;
  --dur-2: 350ms;
  --dur-3: 500ms;
  --dur-4: 800ms;
  --dur-5: 1200ms;
  --dur-6: 2000ms;
  --dur-7: 4000ms;

  /* ------------------------------------------------------------
    Easing Curves (modern motion curves)
  ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      
  --ease-in: cubic-bezier(0.32, 0, 0.67, 0);     
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);    
  --ease-linear: linear;

  /* ------------------------------------------------------------
    Advanced Custom Curves (your style preserved)
  ------------------------------------------------------------ */
  --curve-fast: cubic-bezier(0.42, 0.05, 0.14, 0.9);
  --curve-short: cubic-bezier(0.4, 0.05, 0.13, 0.88);
  --curve-long: cubic-bezier(0.38, 0.05, 0.12, 0.86);

  /* ------------------------------------------------------------
    Combined Motion Tokens (duration + easing)
  ------------------------------------------------------------ */
  --fx-fast: var(--dur-1) var(--ease-in);
  --fx-short: var(--dur-2) var(--ease-out);
  --fx-smooth: var(--dur-3) var(--ease-in-out);
  --fx-long: var(--dur-4) var(--ease-linear);
  --fx-xlong: var(--dur-5) var(--ease-in-out);
  --fx-due: var(--dur-7) var(--ease-linear);

  /* Advanced curves */
  --fx-cv-fast:  var(--dur-5) var(--curve-fast);
  --fx-cv-short: var(--dur-6) var(--curve-short);
  --fx-cv-long: var(--dur-7) var(--curve-long);

  }

}



@layer base {

:is(button, input, textarea){
  all: unset;
}

:is(a, b, button, em, span, strong){
  letter-spacing: 0.005rem;
}

:is(a, abbr){
  color: inherit;
  font-weight: 500;
  text-decoration: none;
}

:is(h1, h2, h3){
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.02rem; 
  line-height: var(--lh-tight);
  text-wrap: balance;
  word-break: keep-all;
}

:is(a, b, button, em, span, small, p, li, label, input, strong, textarea){
  font-family: "Inter", system-ui, sans-serif;
  line-height: var(--lh-comfy);
}

:is(small, p, li){
  font-weight: 400;
  hyphens: auto;                  /* allow proper hyphenation */
  letter-spacing: 0.03rem;
  text-wrap: pretty;              /* modern: better text flow */
  overflow-wrap: anywhere;        /* softer break when needed */
  word-break: normal;             /* natural word-breaking */
  max-inline-size: 60ch;          /* ideal measure (45–75 chars per line) */
}

:is(p, li){
  font-size: var(--fs-body);
}

p + p{
  margin-block-start: 1lh;        
}

li{
  list-style: none;
}


/* ===========================
   Modern Media Defaults
   =========================== */

:is(img, svg) {
  aspect-ratio: 1 / 1;

  /* UX & interaction */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;

  /* Performance & scaling */
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  contain: layout style;
  interpolate-size: allow-keywords;
  -ms-interpolation-mode: nearest-neighbor; 
  will-change: opacity, transform;
  block-size: auto;
  max-inline-size: 100%;

  /* Accessibility */
  forced-color-adjust: auto; 
  print-color-adjust: exact; 
  color-adjust: exact;       
}

img {
  aspect-ratio: attr(width) / attr(height);
  content-visibility: auto; 
  contain-intrinsic-size: auto calc(5 * var(--ultra));
  color-scheme: light dark; 

  /* Future-friendly fallback rendering */
  filter: contrast(1.1) saturate(1.1) 
          drop-shadow(calc(-1 * var(--one)) var(--one) var(--one) var(--primary-o));
  image-orientation: from-image; 

  transform: translateZ(0);
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* Vector rendering fidelity */
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
  vector-effect: non-scaling-stroke;

  /* Predictable transforms */
  transform-box: fill-box;
  paint-order: stroke fill markers;
}


/* ==========================================
   GLOBAL ROOT SETTINGS
   ========================================== */
:where(html, body) {
  /* Smooth scrolling */
  scroll-behavior: smooth;

  /* Font rendering (cross-browser) */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-stroke: 0 transparent; 

  /* Touch & scroll performance */
  touch-action: manipulation;
  overflow-anchor: auto;
  will-change: scroll-position;

  /* Full viewport height & safe areas */
  min-block-size: 100dvb;
  min-block-size: 100svh; 
  /* iOS fallback */

  max-inline-size: 100%;
}

/* ==========================================
   🧱 HTML BASELINE
   ========================================== */
html {
  /* Modern, readable font stack */
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
               "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji",
               "Noto Color Emoji", sans-serif;

  font-synthesis: none;
  font-feature-settings: "liga" 1, "kern" 1;
  font-variant-ligatures: common-ligatures contextual;
  font-optical-sizing: auto;
  font-kerning: normal;
  hanging-punctuation: first last;

  /* Accessibility & scaling */
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;

  /* High-quality text rendering */
  text-rendering: geometricPrecision;
  image-rendering: auto;

  /* Scroll & layout stability */
  scrollbar-gutter: stable both-edges;
  scroll-padding-top: var(--md);
  -webkit-overflow-scrolling: touch;

  /* Theming & visual consistency */
  accent-color: var(--surface);
  forced-color-adjust: auto;

  cursor: url("../img/pointer/cursor.webp") 6 6, auto;
}

/* ==========================================
   🧍 BODY STYLING
   ========================================== */
body {
  margin: 0;
  padding: 0;
  background: var(--secondary);
  color: var(--primary);

  /* Modern text flow & wrapping */
  overflow-wrap: anywhere;

  /* Modern layout improvements */
  line-height-step: calc(var(--xs) + var(--md));

  /* Touch optimization */
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;

  /* Font rendering hint */
  font-display: swap;
  font-smooth: always;

  /* Modern layout hints */
  inline-size: 100%;
  }



/* ============================================================
   🖱️ Modern Custom Cursor System
   Purpose: Enhances interaction visuals while maintaining UX
   ============================================================ */

/* 1️⃣ Base Interaction: Standard interactive targets */
:where(a, abbr, article, button, li, form, label, input, textarea, select, img, svg, [role="button"], [tabindex]:not([tabindex="-1"])) {
  cursor: pointer;
  touch-action: manipulation; 
  -webkit-tap-highlight-color: transparent; 
  transition: filter var(--fx-fast), 
              transform var(--fx-short);
}

/* 2️⃣ Custom Cursor (Desktop only, when motion is preferred) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :where(a, abbr, article, button, li, form, label, input, textarea, select, img, svg, [role="button"]) {
    cursor: url("../img/pointer/thumb.webp") 6 6, pointer;
  }

  /* Retina / HiDPI: double-res cursor for crispness */
  @media (min-resolution: 2dppx) {
    :where(a, abbr, article, button, li, form, label, input, textarea, select, img, svg, [role="button"]) {
      cursor: url("../img/pointer/thumb.webp") 6 6, pointer;
    }
  }
}

/* 3️⃣ Accessibility: System fallback in forced-color environments */
@media (forced-colors: active) {
  :where(a, abbr, article, button, li, form, label, input, textarea, select, img, svg, [role="button"]) {
    cursor: pointer!important;
  }
}


:is(header, main, section, footer) {
  display: flow-root;
  position: relative;
  isolation: isolate;
  block-size: fit-content;
  min-inline-size: 31.25rem;
  inline-size: 100%;
  z-index: 5;
}

/* ============================================================
   🧩 MAIN SECTIONS (main, section)
   ------------------------------------------------------------
   Purpose: Optimized for zero layout shifts, minimal INP delay,
   and ultra-smooth visual performance across browsers.
   ============================================================ */
:is(main, section) {
  /* ================= Layout & Structure ================= */
  inset: 0;                           /* stretch element to its container */
  container-type: inline-size;        /* allows container queries */
  container-name: layout-block;       /* gives a name for container queries */
  interpolate-size: allow-keywords;   /* smooth size interpolation for container queries */

  /* ================= Rendering & Performance ================= */
  contain: strict;                     /* isolates layout, paint, and style to reduce reflow */
  content-visibility: auto;            /* skips off-screen painting, helps INP */
  contain-intrinsic-size: auto calc(10 * var(--ultra)); /* reserves space before content loads (prevents CLS) */
  will-change: opacity, transform;     /* hints GPU to prepare layer for smooth transitions */

  /* ================= Scrolling & Overflow ================= */
  overflow: clip;                       /* clip overflowing content */
  overflow-anchor: none;                /* prevents unwanted scroll jumps */
  overscroll-behavior: contain;         /* disables scroll chaining */
  scroll-behavior: smooth;              /* smooth scrolling for anchors & JS */
  scroll-snap-type: y proximity;        /* gentle scroll snap without jank */
  scroll-padding-block-start: var(--sp); /* reserves padding to avoid jumps */
  -webkit-overflow-scrolling: touch;    /* smooth scroll on iOS */

  /* ================= Layout Stability & Transitions ================= */
  contain-intrinsic-block-size: calc(10 * var(--ultra)); /* reserves block space for stable layout */
  contain-intrinsic-inline-size: 100%;   /* reserves inline space early */
  view-transition-name: main-section;    /* improves visual consistency on transitions */
  transform-box: border-box;             /* avoids subpixel drift in transforms */
  transition: opacity var(--fx-short),
              transform var(--fx-smooth); /* smooth predictable transitions */
  transform-origin: center;              /* pivot point for transforms if used */

  /* ================= Visual & Theming ================= */
  forced-color-adjust: auto;             /* respects user forced color mode */
  color-scheme: light dark;              /* declares light/dark theme */
  caret-color: currentColor;             /* caret matches text color */
  background-clip: padding-box;          /* prevents bleed on animated backgrounds */

  /* ================= Print & Layout Integrity ================= */
  break-inside: avoid;                   /* avoids breaking content in multi-column layout */
  page-break-inside: avoid;              /* avoids breaking content on printed pages */
  -webkit-print-color-adjust: exact;     /* keeps printed colors accurate */
}


/* Smooth transition entry (prevents INP spikes on hover/click) */
:is(header, main, section, footer):has(:focus-visible, :hover, :active) {
  transition: var(--fx-short);
}

}


/* =========================================
   PERFORMANCE, MOTION & SCROLL BEHAVIOR
   Enhanced, Modern, Stable Fallbacks
   ========================================= */
@layer perf {

  /* ------------------------------
     1. Respect user motion preferences
     ------------------------------ */
  @media (prefers-reduced-motion: no-preference) {
    :where(html, body) {
      scroll-behavior: smooth !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where(html, body) {
      backface-visibility: visible;
      transform: none !important;
      scroll-behavior: auto !important;
    }

    *, *::before, *::after {
      transition: none !important;
      will-change: auto !important;
      transform: none !important;
    }
  }

  /* Hint for smooth painting where allowed */
  @media (prefers-reduced-motion: no-preference) {
    * {
      will-change: opacity, transform;
    }
  }

  /* Prevent overuse of GPU compositing layers by default */
  * {
    will-change: auto;
  }

  /* Disable heavy image filters unless explicitly allowed */
  img, picture, video, canvas {
    filter: none !important;
    -webkit-filter: none !important;
    will-change: auto !important;
    image-rendering: auto !important;
    transform: none;
    backface-visibility: visible;
  }

  /* ------------------------------
     2. Scroll-driven animation (modern & optimized)
     ------------------------------ */
  @supports (animation-timeline: scroll()) {

    div.scroll-watcher {
      display: block;
      position: fixed;
      inset: 0 auto auto 0;
      transform-origin: left center;
      contain: strict;
      will-change: transform;
      background: var(--accent);
      block-size: calc(var(--md-border) * 3);
      inline-size: 100%;
      z-index: 9999;
      animation: scroll-watcher-progress var(--ease-linear) forwards;
      animation-timeline: scroll(root);
      animation-range: entry 0% exit 100%;
    }

    @keyframes scroll-watcher-progress {

      from { 
        transform: scaleX(0); 
      }

      to { 
        transform: scaleX(1); 
      }

    }

  }

  /* Fallback for browsers without scroll-timeline */
  @supports not (animation-timeline: scroll()) {

    div.scroll-watcher {
      position: fixed;
      background: var(--accent);
      inset-block-start: 0;
      transform-origin: left center;
      transform: scaleX(var(--scroll-progress, 0));
      transition: transform var(--fx-short);
      contain: strict;
      block-size: calc(var(--md-border) * 3);
      inline-size: 100%;
    }

  }

  /* Motion safety for accessibility */
  @media (prefers-reduced-motion: reduce) {
    div.scroll-watcher {
      transition: none;
      animation: none;
      transform: none;
    }
  }

  /* ------------------------------
     3. Modern container & progressive rendering
     ------------------------------ */
  @supports (container-type: block-size) or (container-type: inline-size) {
    :is(main, section) {
      container-type: block-size inline-size;
      container-name: layout-block;
      contain: content;
    }
  }

  @supports (content-visibility: auto) {
    :is(main, section) {
      content-visibility: auto;
      contain-intrinsic-size: auto 62.5rem; /* fallback height */
      contain: content;
      will-change: contents, opacity, transform;
      scroll-padding-block-start: var(--sp);
      transition: opacity var(--fx-short), transform var(--fx-short);
      opacity: 1;
      transform: none;
    }

    :is(main, section) [style*="content-visibility"] {
      animation: fadeInUp var(--fx-smooth) both;
    }

    @keyframes fadeInUp {

      from { 
        opacity: 0; 
        transform: translateY(var(--sp)); 
      }

      to { 
        opacity: 1; 
        transform: translateY(0); 
      }

    }
  }

  @supports (interpolate-size: allow-keywords) {
    :is(header, main, section, footer) {
      interpolate-size: allow-keywords;
    }
  }

  @supports (view-transition-name: none) {
    :is(main, section) {
      view-transition-name: layout-block;
    }
  }

  /* ------------------------------
     4. Accessibility & Contrast
     ------------------------------ */
  @supports (font-synthesis-weight: none) {
    html {
      font-synthesis-weight: none;
      font-synthesis-style: none;
      font-synthesis-small-caps: none;
    }
  }

  @media (prefers-contrast: more) {
    body { outline: var(--sm-border) solid currentColor; }
    :is(a, button, span, small, p, li, label, input, textarea) {
      color: CanvasText;
    }
  }

  /* ------------------------------
     5. Modern Scrollbar Styling (desktop)
     ------------------------------ */
  @supports selector(::-webkit-scrollbar) {
    ::-webkit-scrollbar,
    ::-webkit-scrollbar:horizontal {
      block-size: calc(var(--md-border) * 3);
      inline-size: calc(var(--md-border) * 3);
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--accent-o);
      cursor: url("../img/pointer/thumb.webp") 6 6, pointer;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--accent);
    }
  }

  /* ------------------------------
     6. Touch & Pointer Optimizations
     ------------------------------ */
  @media (pointer: coarse) {
    * {
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    :where(html, body) {
      overscroll-behavior: none;
      -webkit-touch-callout: none;
      -webkit-text-size-adjust: 100%;
      scrollbar-gutter: stable both-edges;
    }

    :is( a, abbr, button, input, textarea) {
      cursor: default;
    }

    ::-webkit-scrollbar { 
      background: transparent; 
      inline-size: 0; 
    }
  }

  /* ------------------------------
     7. Motion & Scroll Animations (optional fade-out)
     ------------------------------ */
  @supports (animation-timeline: view()) {
    :is(main, section, footer) > div.control {
      animation: fade-out var(--fx-xlong) both;
      animation-timeline: view(block);
      animation-range: exit 0%;
    }

    @keyframes fade-out {

      from { 
        filter: grayscale(0); 
      }

      to { 
        filter: grayscale(100%); 
      }

    }

  }

}


/* Animations per Section */
section {
  animation: slide var(--fx-cv-fast) both;
}

section:nth-of-type(odd){
  transform-origin: left center;
}

section:nth-of-type(even){
  transform-origin: right center;
}

section:not(:nth-of-type(1), :nth-of-type(2),
            :nth-of-type(11), :nth-of-type(12)){
  background: var(--secondary);
}

:is(header, main, section, footer) > .control {
  display: grid;
  position: relative;
  place-items: center;
  block-size: fit-content;
  max-inline-size: 90.625rem;
  inline-size: inherit;
  z-index: 3;
}

/* Spacing, Margin */
section :is(.control, .run-left, .run-right) {
  padding-block: var(--ultra);
}

:is(main, section) .control > .container {
  display: inherit;
  position: inherit;
  place-items: inherit;
  min-block-size: 100%;
}

.control :is(nav, .container) {
  inline-size: calc(100% - var(--ultra));
}

/* Container Block-Sizes */
:is(.bento-grid > .flexy > .ter:nth-of-type(1),
    .bento-grid > .flexy > .ter:nth-of-type(2),
    .bento-grid > .flexy:nth-of-type(2),
    .hare > .rear,
    .slider,
    .dex:nth-of-type(2) > .content,
    .ect:nth-of-type(1) > .pala,
    .cumb:nth-of-type(1) > .oms,
    .inquire > .contact-info:nth-of-type(1)) {

  min-block-size: clamp(18.75rem, calc(15rem + 15dvw), 28.125rem);
}

/* Grid Layout Columns */
:is(.box > .levi,
    .bento-grid > .flexy:nth-of-type(1),
    .fut > .dex:nth-of-type(2),
    .qir:nth-of-type(2) > .ect:nth-of-type(1),
    .vant:nth-of-type(2) > .cumb:nth-of-type(1),
    .container > .inquire){

  grid-template-columns: repeat(auto-fit, minmax(clamp(18.75rem,
                         calc(15rem + 15dvw), 28.125rem), 1fr));
}

/* Gaps */
:is(.collab,
    .container > .grid,
    .container > .hare,
    .rear:nth-of-type(2) > .freq,
    .ras:nth-of-type(2) > .daz,
    .boxet > .paq:nth-of-type(1),
    .fut > .dex:nth-of-type(2),
    .rol:nth-of-type(2),
    .qir:nth-of-type(2) > .ect:nth-of-type(1),
    .vant:nth-of-type(2) > .cumb:nth-of-type(1),
    .lay:nth-of-type(2) > .bento-grid,
    .bento-grid > .flexy,
    .flexy:nth-of-type(1) > .ter:nth-of-type(2),
    .ter:nth-of-type(2) > .col-up),
    .bento-grid > .flexy {

  gap: var(--large);
}

section :is(.pep, .serv, .proj, .cert):target h1 {
  animation: ShadowWave var(--fx-cv-short) infinite alternate;
}

@keyframes ShadowWave {

  0% {
    text-shadow: var(--sm-border) var(--sm-border) 
                 var(--accent);
  }

  25% {
    text-shadow: var(--sm-border) var(--sm-border) 
                 var(--secondary-o);
  }

  50% {
    text-shadow: var(--sm-border) var(--sm-border)
                 var(--accent);
  }

  75% {
    text-shadow: var(--sm-border) var(--sm-border) 
                 var(--secondary-o);
  }

  100% {
    text-shadow: var(--sm-border) var(--sm-border)
                 var(--accent);
  }

}

/* GoTop */
.back-to-top {
  display: grid;
  position: fixed;
  place-items: center;
  bottom: max(var(--jumbo), env(safe-area-inset-bottom));
  right: max(var(--xx-large), env(safe-area-inset-right));
  background: var(--primary);
  box-shadow: 0 0 0 var(--one) var(--primary-l);
  border-radius: 50%;
  color: var(--secondary);

  /* Fade & slide in/out */
  opacity: 0;
  transform: translateY(0);
  visibility: hidden;
  transition: background var(--fx-smooth),
              color var(--fx-smooth),
              opacity var(--fx-short),
              transform var(--fx-short);

  /* Important rendering stability fixes */
  backface-visibility: hidden;
  will-change: opacity, transform;

  block-size: calc(3 * var(--three) + var(--icon));
  inline-size: calc(3 * var(--three) + var(--icon));
  z-index: 100;
}

/* Floating animation */
@keyframes Floating {

  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(calc(-1 * var(--sm)));
  }

}


/* Show state */
.back-to-top.show {
  opacity: 1;
  transform: translateY(calc(-2 * var(--three)));
  visibility: visible;
  animation: Floating var(--fx-cv-long) infinite;
}

/* Hover and focus (no flicker) */
.back-to-top:is(:hover, :focus-visible) {
  color: var(--primary);
  background: var(--primary-l);
  animation-play-state: paused;
}

/* SVG container */
.back-to-top > .tap {
  display: grid;
  position: relative;
  place-items: center;
  transition: transform var(--fx-smooth);
  block-size: 100%;
  inline-size: 100%;
  z-index: 2;
}

.back-to-top > .tap:hover{
  animation: jelly var(--fx-long);
}

/* Glowing ring */
.back-to-top > .tap::before {
  content: " ";
  position: absolute;
  inset: 0;
  background: var(--accent-o);
  border-radius: 50%;
  scale: 0;
  transition: opacity var(--fx-fast),
              scale var(--fx-short);
  transform-origin: center;
}

/* Hover effect */
.back-to-top > .tap:hover::before {
  scale: 1.3;
}


/* SVG itself */
.back-to-top svg {
  stroke: currentColor;
  transition: transform var(--fx-short);
  inline-size: clamp(1.563rem, calc(1.313rem + 1dvw), 2.188rem);
}

.back-to-top:hover svg {
  transform: translateY(calc(-1.5 * var(--three)));
}


.ui {
  display: grid;
  position: fixed;
  inset: 0;
  background: var(--secondary);
  align-content: space-around;
  padding: var(--jumbo);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  
  /* Early paint trigger for faster LCP */
  isolation: isolate;
  will-change: opacity, transform;

  /* Optimized containment – no layout blocking */
  contain: content;
  content-visibility: auto;
  contain-intrinsic-size: 100dvb auto;

  min-block-size: 100dvb;
  inline-size: 100%;
  z-index: 999;

  /* Non-blocking transition and animation */
  transition: opacity var(--fx-cv-fast);
  animation: intro var(--fx-cv-fast) 1100ms both;
}

/* ================================
   FIREFOX + SAFARI STABILITY FIXES
   ================================ */
@supports (-moz-appearance: none) {

  .ui,
  .ui > .land{
    will-change: opacity, transform;
  }

}

@keyframes intro {

  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(100cqi, 0, 0);
  }

}

.ui > .land{
  display: inherit;
  position: relative;
  will-change: opacity, transform;
  block-size: 100%;
  inline-size: inherit;
}

.ui > .land:nth-of-type(1){
  place-items: start;
  contain: paint style;
}

.ui > .land:nth-of-type(2){
  place-items: end;
  contain: layout style;
}

.ui > .land :is(h1, span){
  color: var(--primary);
  font-size: var(--ultra);
  will-change: transform;
} 

.ui > .land:nth-of-type(2) span{
  animation: moves var(--fx-smooth) infinite;
}


/* ================================
   3D UX BACKGROUND CONTAINER (Optimized for LCP)
   ================================ */
.ux {
  display: grid;
  position: fixed;
  inset: 0;
  background: var(--secondary);
  align-content: space-around;
  padding: var(--jumbo);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  
  /* Early paint trigger for faster LCP */
  isolation: isolate;
  will-change: opacity, transform;

  /* Optimized containment – no layout blocking */
  contain: content;
  content-visibility: auto;
  contain-intrinsic-size: 100dvb auto;

  min-block-size: 100dvb;
  inline-size: 100%;
  z-index: 999;

  /* Non-blocking transition and animation */
  transition: opacity var(--fx-cv-fast);
  animation: Core var(--fx-cv-long) 400ms both;
}

/* ================================
   FIREFOX + SAFARI STABILITY FIXES
   ================================ */
@supports (-moz-appearance: none) {
  .ux,
  .ux > .land {
    will-change: opacity, transform;
  }
}

/* ================================
   LAND SECTIONS
   ================================ */
.ux > .land {
  display: inherit;
  position: relative;
  will-change: opacity, transform;
  block-size: 100%;
  inline-size: inherit;
}

.ux > .land:nth-of-type(1) {
  place-items: start;
  contain: paint style;
}

.ux > .land:nth-of-type(2) {
  place-items: end;
  contain: layout style;
}

/* ================================
   TEXT ELEMENTS (ensure early text render)
   ================================ */
.ux > .land :is(h1, span) {
  color: var(--primary);
  font-size: var(--ultra);
  will-change: transform;
}

.ux > .land:nth-of-type(2) span {
  max-inline-size: 20ch;
  animation: moves var(--fx-smooth) infinite;
}

/* ================================
   3D CORE ANIMATION
   ================================ */
@keyframes Core {

  0%, 30% {
    opacity: 1;
    transform: translate3d(-100cqi, 0, 0);
  }

  40%, 85% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(100cqi, 0, 0);
  }

}


/* optional cleanup */
.last {
  position: fixed;
  inset: 0;
  contain: paint; 
  content-visibility: auto;
  contain-intrinsic-size: 100dvb auto;
  perspective: calc(15 * var(--ultra)); 
  perspective-origin: center;
  isolation: isolate;
  transform-style: preserve-3d;
  will-change: transform; 
  overflow: hidden;
  min-block-size: 100dvb;
  inline-size: 100%;
}

.last::before {
  content: " ";
  position: absolute;
  inset: 0; 
  background: linear-gradient(230deg, 
              color-mix(in oklch, var(--primary-l) 70%, var(--secondary-o)) 25%,
              color-mix(in oklch, var(--secondary-l) 25%, var(--secondary)) 70%);

  pointer-events: none;
  contain: layout style;
  backface-visibility: hidden;
  transform-origin: top center;
  will-change: transform;
  block-size: 100%;
  inline-size: 100%;
  animation: Scailing var(--fx-xlong) 4500ms both;
  z-index: 999;
}


/* Keep same visual animation */
@keyframes Scailing{

  from{
    transform: perspective(calc(15 * var(--ultra)))
               scale3d(0, 0, 0);
  }
 
  to {
    transform: perspective(0)
               scale3d(2, 1.5, 1);
  }

}


/* Vanta JS */
#background{
  position: absolute;
  inset: 0;
  min-block-size: 300dvb;
  inline-size: 100%;
  z-index: -1;
}

/* Notification container */
.appear {
  display: grid;
  position: fixed;
  top: var(--md); left: 0;
  pointer-events: none; 
  block-size: fit-content;
  inline-size: 100%;
  z-index: 1000;
}

.appear > #formMessage {
  font-size: var(--fs-small);
  font-weight: 500;
  background: var(--secondary-o);
  backdrop-filter: blur(var(--sm));
  border-radius: 0 3.125rem 3.125rem 0; 
  box-shadow: 0 0 0 var(--sm-border) var(--primary);
  padding: 0.75rem 1.875rem 0.75rem 1.25rem; 

  opacity: 0;
  transition: opacity var(--fx-fast),
              transform var(--fx-short);
  transform: translateX(-100%);
  pointer-events: auto; 
  /* enable interaction on message */
  inline-size: max-content;
}

/* Active / shown state */
.appear > #formMessage.show {
  opacity: 1;
  transform: translateX(0);
}


.banner {
  display: grid;
  position: relative;
  place-items: center;
  padding-block: var(--sp);
  z-index: 100;
}

.banner > .control{
  
}

.control > nav{
  display: grid;
  position: relative;
  place-items: center;
}

nav > .select{
  display: inherit;
  position: inherit;
  place-items: inherit;
  padding-block: var(--sm);
  inline-size: 100%;

  contain: layout;
  content-visibility: auto;
  will-change: opacity, transform;
}

.select > .pat{
  display: flex;
  position: relative;
  align-items: center;
  overflow: clip;
  will-change: transform;

  /* ⚡ GPU-layer early promotion */
  contain: layout;

  block-size: 100%;
  inline-size: 100%;
  animation: straightU var(--fx-cv-fast) 7500ms both;
}

.pat > .cox{
  display: inherit;
  position: inherit;
  align-items: inherit;
  block-size: 100%;
  inline-size: 100%;
}

@starting-style {
  .pat > .cox:is(:nth-of-type(1), :nth-of-type(3)) {
    opacity: 0;
  }
}

.pat > .cox:is(:nth-of-type(1), :nth-of-type(3)){
  justify-content: space-evenly;

  transition: display var(--dur-1),
              opacity var(--fx-fast);
  transition-behavior: allow-discrete;
}

.pat > .cox:nth-of-type(2){
  justify-content: center;
  will-change: transform;
  animation: straightD var(--fx-cv-fast) 8000ms both;
}

.cox:nth-of-type(2) a{
  display: inherit;
  position: inherit;
  block-size: 100%;
}

.cox:nth-of-type(2) svg {
  transition: scale var(--fx-fast);
  inline-size: var(--icon);
  will-change: transform; 
}

.cox:nth-of-type(2) svg.briefcase-icon:hover {
  scale: 1.1;
}

svg path.briefcase-lid {
  transition: transform var(--fx-short);
  will-change: transform; 
}

svg.briefcase-icon:hover svg path.briefcase-lid {
  transform: translateY(calc(-1 * var(--three)));
}


/* Anchor as container */
.cox:not(:nth-of-type(2)) a {
  display: inline-flex;
  position: relative;
  align-items: center;
  overflow: clip;
  transition: transform var(--fx-smooth);
  transform: skew(0);
  will-change: transform;
  z-index: 0;
}

.cox:not(:nth-of-type(2)) a:hover{
  transform: skew(-10deg); 
}

/* Shared pseudo setup */
.cox:not(:nth-of-type(2)) a::before,
.cox:not(:nth-of-type(2)) a::after {
  content: " ";
  position: absolute;
  background: var(--accent);
  border-radius: var(--md);
  transform: scaleX(0); 
  transition: transform var(--fx-smooth);
  block-size: var(--md-border); 
  inline-size: var(--md-space);
  z-index: -1;
}  

/* Left */
.cox:not(:nth-of-type(2)) a::before {
  inset-block-start: 0;
  inset-inline-end: 0;
  transform-origin: right;  
}

/* Right */
.cox:not(:nth-of-type(2)) a::after {
  inset-block-end: 0;
  inset-inline-start: 0;
  transform-origin: left; 
}

/* Hover state — smoothly expand */
.cox:not(:nth-of-type(2)) a:hover::before,
.cox:not(:nth-of-type(2)) a:hover::after {
  transform: scaleX(1);
}

.cox:not(:nth-of-type(2)) a span{
  display: grid;
  position: relative;
  place-items: center;
  font-size: var(--fs-body); 
  font-weight: 500;
  padding: var(--xs) var(--sm); 
  overflow: clip;
  white-space: nowrap; 
  block-size: 100%;
  z-index: 0;
}

/* Shared pseudo setup */
.cox:not(:nth-of-type(2)) a span::before,
.cox:not(:nth-of-type(2)) a span::after {
  content: " ";
  position: absolute;
  background: var(--accent);
  border-radius: var(--md);
  transform: scaleY(0); 
  transition: transform var(--fx-smooth);
  block-size: var(--md-space);
  inline-size: var(--md-border); 
  z-index: -1;
} 

/* Left */
.cox:not(:nth-of-type(2)) a span::before {
  inset-block-start: 0;
  inset-inline-end: 0;
  transform-origin: top;  
}

/* Right */
.cox:not(:nth-of-type(2)) a span::after {
  inset-block-end: 0;
  inset-inline-start: 0;
  transform-origin: bottom; 
}

/* Hover state — smoothly expand */
.cox:not(:nth-of-type(2)) a span:hover::before,
.cox:not(:nth-of-type(2)) a span:hover::after {
  transform: scaleY(1);
}


/* First Section */
.overview {

}

/* Main Container */
.overview > .control{
  padding-block: clamp(1.5625rem, calc(-0.1875rem + 7dvw), 5.9375rem)
                 clamp(0.938rem, calc(-0.2368rem + 4.6992dvw), 3.875rem);
  /* 25px << 95px = start */ /* 15px << 62px = end*/
} 

.overview > .control > .container{
  gap: clamp(4.375rem, calc(3.625rem + 3dvw), 6.25rem);
  /* 70px << 100px */
  content-visibility: auto;
  contain-intrinsic-size: 0.0625rem 312.5rem; 
  contain: layout;
  overflow: hidden;
  z-index: 5;
}

.container > .heading{
  display: inherit;
  position: inherit;
  place-items: inherit;
  block-size: 100%;
  inline-size: 100%;
  z-index: 5;
}

.heading > .ani{
  display: grid;
  position: relative;
  place-items: center;
  gap: var(--large);
  overflow: hidden;
  block-size: fit-content;
  inline-size: 100%;
}

.ani > .est{
  display: grid;
  position: relative;
  place-items: center;
  gap: var(--sm);
  overflow: clip;
  inline-size: 100%;
}

.est > .name{
  
}

.name > .align{
  display: grid;
  position: relative;
  place-items: center;
  color: var(--primary);
  padding-block-start: calc(var(--three) + var(--xs));
  will-change: transform;
}

.align p{
  display: inline-flex;
  font-size: var(--fs-h1);
  gap: var(--sm-space);
  will-change: opacity, transform; 
  animation: straightU var(--fx-cv-fast) 6000ms both;
}

.align p span.back,
.align p span.front{
  display: grid;
  position: relative;
}

.align p span.front{
  color: var(--secondary);
  white-space: nowrap;
}

.align p span.back::before,
.align p span.front::before{
  content: " ";
  position: absolute;
  inset: 0;
  box-shadow: 0 0 0 var(--one) var(--primary-l);
  block-size: 100%;
  inline-size: 100%;
  z-index: -1;
}

.align p span.back::before{
  background: var(--accent);
  rotate: -4deg;
}

.align p span.front::before{
  background: var(--primary);
  rotate: 4deg;
}

.align > .pon {
  display: inline-flex;
  position: relative;
  align-items: center;
  overflow: hidden;

  /* Modern containment */
  contain: content;

  /* 3D context */
  perspective: calc(15 * var(--ultra));
  perspective-origin: center;
  transform-style: preserve-3d;
}

.pon > .name-wrap{
  transform-origin: center;
  will-change: opacity, transform;
  animation: shown var(--fx-cv-short) 4800ms both;
}

@starting-style{

  .pon > .name-wrap{
    transform: perspective(calc(15 * var(--ultra)))
               rotate3d(1, 0, 0, 90deg)
               scale3d(0, 0, 1)
               translate3d(0, calc(2 * var(--sp)), 0);
  }
  
}

@keyframes shown {

  from {
    opacity: 0;
    transform: perspective(calc(10 * var(--ultra)))
               rotate3d(1, 0, 0, 1deg)
               scale3d(0, 0, 1)
               translate3d(0, var(--sp), 0);
  }

  to {
    opacity: 1;
    transform: perspective(0)
               rotate3d(1, 0, 0, 0deg)
               scale3d(1, 1, 1)
               translate3d(0, 0, 0);
  }
  
}


.name-wrap h1 {
  font-size: clamp(3rem, calc(0.7rem + 9.2dvw), 8.75rem);
  /* 48px << 140px */
}

.align strong{
  font-weight: 600;
  white-space: nowrap;
}

.est > .sub{
  display: grid;
  position: relative;
  place-items: center;
  overflow: hidden;
  inline-size: 100%;
}

.sub > .zen{
  display: inline-flex;
  position: relative;
}

.zen p {
  color: var(--primary);
  text-align: center;
  will-change: opacity, transform;
  animation: straightD var(--fx-cv-fast) 6500ms both;
  max-inline-size: clamp(35ch, 50dvw, 40ch);
}

.zen :is(strong, b, em){
  white-space: nowrap;
  animation: change var(--fx-cv-short) infinite alternate;
}

.zen :is(strong, b){
  font-weight: 600;
  animation-duration: 7000ms;
}

.zen em{
  font-style: oblique;
  animation-duration: 9000ms;
}


@keyframes change{

  0% {
    color: var(--primary);
  }

  50% {
    color: var(--accent);
  }

  100% {
    color: var(--primary);
  }

}

.collab {
  display: flex;
  position: relative;
  justify-content: center;
  padding: var(--sm);
  overflow: clip;
  contain: content; 

  block-size: fit-content;
  inline-size: 100%;
}

.ov {
  position: relative;
  padding: var(--one);
  will-change: opacity, transform;
  animation: var(--fx-cv-fast) 7000ms both;
}

.ov:nth-of-type(1) {
  animation-name: straightU;
}

.ov:nth-of-type(2) {
  animation-name: straightD;
}

.ov:is(:nth-of-type(1), :nth-of-type(2))  > .btn {
  display: grid;
  position: relative;
  place-items: center;
  border-radius: calc(2 * var(--md));
  /* Avoid layout recalculation during hover or transform */
  contain: paint style;
  container-type: block-size;
  overflow: hidden;
  transition: background var(--fx-short),
              box-shadow var(--fx-short),
              scale var(--fx-smooth),
              transform var(--fx-fast);
  will-change: transform;
  z-index: 10;
}

.ov:nth-of-type(1) > .btn {
  --shadow-color: var(--primary);
  backdrop-filter: blur(var(--sm));
  box-shadow: 0 0 0 var(--sm-border) var(--shadow-color);
}

.ov:nth-of-type(1) > .btn:hover {
  --shadow-color: var(--accent);
}

.ov:nth-of-type(2) .btn{
  background: var(--primary);
}

.ov .btn:hover {
  animation-play-state: paused;
}


.ov:nth-of-type(2) > .btn::before {
  content: " ";
  position: absolute;
  background: var(--accent);
  backface-visibility: hidden;
  transform: scaleX(0); 
  transform-origin: left; 
  transition: transform var(--fx-fast);
  will-change: transform;
  block-size: 100%;
  inline-size: 100%;
  z-index: 1;
}

.ov:nth-of-type(2) > .btn:hover::before {
  transform: scaleX(1); 
}

.btn:active{
  scale: 0.9;
}

.btn a {
  display: grid;
  position: relative;
  place-items: center;
  overflow: hidden;
  padding: calc(3 * var(--md-border)) var(--x-large);
  block-size: 100%;
  inline-size: 100%;
  z-index: 2;
}  

.btn > a span{
  display: flex;
  align-items: center;
  color: var(--primary);
  font-size: var(--fs-body); 
  container-type: block-size;
  transition: transform var(--fx-smooth);
  block-size: 100%;
}

.ov > .btn > a span::before {
  display: grid;
  position: absolute;
  place-items: center;
  inset: 0;
  transition: transform var(--fx-smooth);
  white-space: nowrap;
}

/* Button Colors */
.ov:nth-of-type(1) >.btn a 
span:nth-of-type(1)::before {
  color: var(--primary);
}

.ov:nth-of-type(2) > .btn a 
span:nth-of-type(1)::before {
  color: var(--secondary);
}

/* Button Labels */
.ov:is(:nth-of-type(1), :nth-of-type(2)) > 
.btn a span:nth-of-type(1)::before{
  content: attr(data-label);
}

/* Hover Effects for Span 1 */
.ov:nth-of-type(1) > .btn:hover 
a span:nth-of-type(1)::before{
  transform: translateY(100cqi);
}

.ov:nth-of-type(2) > .btn:hover 
a span:nth-of-type(1)::before{
  transform: translateY(calc(-1 * 100cqi));
}

:is(.btn a span:nth-of-type(2), span.arrow) {
  color: var(--primary);
}

.ov > .btn a 
span:nth-of-type(2) {
  gap: var(--xs);
}

/* Hover Effects for Span 2 */
.ov:nth-of-type(1) > .btn a 
span:nth-of-type(2) {
  transform: translateY(calc(-1 * 100cqi));
}

.ov:nth-of-type(1) > .btn:hover 
span:nth-of-type(2) {
  transform: translateY(0);
}

.ov:nth-of-type(2) > .btn 
a span:nth-of-type(2) {
  transform: translateY(100cqi);
}

.ov:nth-of-type(2) > .btn:hover 
span:nth-of-type(2) {
  transform: translateY(0);
}

.ov > .btn a span:nth-of-type(2) > .arrow{
  display: inline-flex;       
  align-items: center;
  block-size: 100%;
  animation: moves var(--fx-smooth) infinite;
}

@keyframes moves {

  0% {
    transform: translate3d(0, 0, 0);  /* pause at start */
  }

  50% {
    transform: translate3d(50%, 0, 0); /* move right */
  }

  100% {
    transform: translate3d(0, 0, 0);   /* pause at end */
  }

}

.container > .grid{
  display: inherit;
  position: inherit;
  place-items: inherit;
  padding-block: var(--x-large);
  overflow: clip;
  block-size: 100%;
  inline-size: 100%;
}

.grid > .box{
  display: grid;
  position: relative;
  place-items: center;
  block-size: fit-content; 
  inline-size: 100%;
}

/* Start of the container */
.box > .levi {
  display: grid;
  position: relative;  
  gap: var(--xx-large);
  place-items: center;
  block-size: 100%;
  inline-size: 100%;
}

.levi > .ion{
  display: grid;
  position: relative;
  place-items: center;
  overflow: hidden;
  will-change: transform;
  block-size: 100%;
  inline-size: 100%;  
}

.levi > .ion:nth-of-type(1){
  padding-block: var(--sm) var(--large);
  animation: Reveal var(--fx-cv-fast) 8500ms both;
}

@keyframes Reveal {

  from{
    transform: scaleY(0);
  }

  to{
     transform: scaleY(1);
  }

}

.ion:nth-of-type(1) > .mail{
  display: grid;
  position: relative;
  place-items: center;
  will-change: transfrom;
  block-size: fit-content;
  inline-size: max-content;  
}

.ion:nth-of-type(1) > .mail >
.mail-icon {
  stroke: var(--primary);
  overflow: visible;
  inline-size: var(--icon);
  animation: bounce 3000ms infinite;
}

/* Envelope bounce */
@keyframes bounce {

  0%, 100% { 
    transform: translateY(0); 
  }

  10%, 30%, 50%, 70%, 90% { 
    transform: translateY(calc(-2 * var(--three))); 
  }

  20%, 40%, 60%, 80% { 
    transform: translateY(0); 
  }

}

/* Envelope flap opens instead of swings */
svg path.flap {
  transform-origin: 50% 8%; 
  animation: flapOpen var(--fx-smooth) infinite alternate;
}

/* Flap opening keyframes */
@keyframes flapOpen {

  0%   { 
    transform: rotate3d(0, 1, 0, 0deg); 
  }       

  50%  { 
    transform: rotate3d(0, 1, 0, -35deg); 
  }     

  100% {
    transform: rotate3d(0, 1, 0, 0deg); 
  }       

}

/* Star outline */
polygon.star {
  opacity: 0;
  stroke: var(--accent);
  transform-origin: center;
  animation: starPop var(--fx-xlong) infinite;
}

/* Star pop animation */
@keyframes starPop {

  0%, 40%   { 
    opacity: 0; 
    transform: translateY(0) scale(0.5); 
  }

  50%, 70%  {  
    opacity: 1; 
    transform: translateY(calc(-3 * var(--two))) scale(1); 
  }

  80%, 100% { 
    opacity: 0; 
    transform: translateY(0) scale(0.5); 
  }

}

/* Pause on hover */
.ion:nth-of-type(1):hover:is(path.flap, polygon.star) {
  animation-play-state: paused;
}

.ion:nth-of-type(1) > .mail svg {
  transition: transform var(--fx-smooth);
  inline-size: var(--icon);
}

.ion:nth-of-type(1) > .mail em{
  font-size: var(--fs-h3);
  font-weight: 600;
  text-decoration: underline wavy var(--two) var(--surface);
  text-underline-offset: var(--sm);
}

.levi > .ion:nth-of-type(2){
  animation: straightR var(--fx-cv-fast) 8500ms both;
}

.ion:nth-of-type(2) > .quote{
  display: grid;
  position: relative;
  place-items: center;
  gap: var(--sp);
  inline-size: max-content;
}

.ion:nth-of-type(2) > .quote > :is(div, blockquote){
  display: grid;
  position: relative;
  max-inline-size: clamp(30ch, 50dvw, 45ch);
  inline-size: 100%;
}

.ion:nth-of-type(2) > .quote >
div:nth-of-type(1){
  place-items: start;
}

.ion:nth-of-type(2) > .quote >
blockquote{
  place-items: center;
}

.ion:nth-of-type(2) > .quote >
blockquote p{
  color: var(--primary);
  font-style: oblique;
  text-align: center;
}

.ion:nth-of-type(2) > .quote >
div:nth-of-type(2){
  place-items: end;
}

.ion:nth-of-type(2) > .quote >
div svg{
  color: var(--primary);
  inline-size: var(--body);
}


/* Second Section */
.character {
  animation-delay: 9000ms;
}

.character > .run-left{

}

:is(.run-left, .run-right) {
  position: relative;
  overflow: hidden;
  inline-size: 100%;
}

:is(.run-left, .run-right) > .infinite-scroll {
  display: flex;
  position: relative;
  align-items: center;
  border-top: var(--two) dashed var(--primary);
  border-bottom: var(--two) dashed var(--primary);
  padding-block: var(--md-space);    

  overflow: hidden;
  clip-path: inset(0);  

  backface-visibility: hidden;
  contain: layout;
  will-change: transform;
  block-size: fit-content; 
  inline-size: 100%;

  mask-composite: intersect;
  -webkit-mask-composite: destination-in;

  mask-image: linear-gradient(to right,
    color-mix(in oklch, var(--secondary) 0%, transparent) 0%, 
                        var(--secondary) 10%, var(--secondary) 90%, 
    color-mix(in oklch, var(--secondary) 0%, transparent) 100%
  );

  -webkit-mask-image: linear-gradient(to right,
    color-mix(in oklch, var(--secondary) 0%, transparent) 0%, 
                        var(--secondary) 10%, var(--secondary) 90%, 
    color-mix(in oklch, var(--secondary) 0%, transparent) 100%
  );
}

.run-left > .infinite-scroll {
  transform: rotate(355deg) translateZ(0);
}

:is(.run-left, .run-right) > .infinite-scroll > .list {
  display: flex;
  align-items: center;
  contain: paint;
  will-change: transform; 
  max-inline-size: fit-content;
}


.run-left > .infinite-scroll > .list {
  animation: scrollL 25000ms var(--ease-linear) infinite;
}

/* smooth infinite scroll */
@keyframes scrollL {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%); 
  }

}

:is(.run-left, .run-right) > 
.infinite-scroll > .list > .item {
  display: flex;
  align-items: center;
  flex: 0 0 var(--ultra);
  gap: var(--ultra);
  padding-inline-end: var(--ultra);
}

/* Apply font styles to h1 and span inside .item */
:is(.run-left, .run-right) >
.infinite-scroll > .list > .item :is(h1, span) {
  font-size: var(--fs-h3);
  user-select: none;
  -webkit-user-select: none;
}

:is(.run-left, .run-right) >
.infinite-scroll > .list > .item h1{
  white-space: nowrap;
}

:is(.run-left, .run-right) > .infinite-scroll >
.list > .item:nth-of-type(odd) h1{
  font-weight: 600;
}

:is(.run-left, .run-right) > .infinite-scroll >
.list > .item:nth-of-type(even) h1{
  font-weight: 500;
}

:is(.run-left, .run-right) > 
.infinite-scroll > .list > .item span {
  color: var(--accent);
  animation: spin var(--dur-6) var(--ease-linear) infinite; 
}

@keyframes spin {

  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }

}

/* Hover effects */ /* Pause on hover */
:is(.run-left, .run-right) > .infinite-scroll:hover :is(.list, .item span) {
  filter: grayscale(1);
  animation-play-state: paused;
}


/* Third Section */
.about{
  background: linear-gradient(360deg, var(--secondary) 35%,
              color-mix(in oklch, transparent 50%, transparent 50%));
  animation-delay: 9500ms;
}

.about > .control {
  content-visibility: auto; 
  contain-intrinsic-size: calc(var(--three) * var(--ultra)); 
}

.container > .lines{
  display: inherit;
  position: inherit;
  place-items: inherit;
  gap: var(--xx-large);
  min-block-size: 100%;
  inline-size: 100%;
}

.lines > .lay{
  display: flex;
  position: relative;
  align-items: center;
  block-size: 100%;
  inline-size: 100%;
}

.lines > .lay:nth-of-type(1){
  gap: var(--xx-large);
}

.lay > .dos{
  display: grid;
  position: relative;
  block-size: 100%;
  inline-size: 100%;
}

.lay > .dos:nth-of-type(1){
  /* -------------  */
}

.dos:nth-of-type(1) > .pep{
  position: relative;
}

.lay > .dos:nth-of-type(2){
  place-items: end;  
  contain: paint;
}

.dos:nth-of-type(2) > .real{
  display: inline-flex;
  position: relative;
  align-items: center;
  gap: var(--large);
}

.real > .cald{
  display: grid;
  position: relative;
  place-items: center;
  overflow: clip;
  transform-origin: left center;
  will-change: opacity, transform;
  inline-size: max-content;
}

.cald p{
  color: var(--primary);
  font-size: var(--fs-body);
  white-space: nowrap;  
}

.real > .cald:nth-of-type(1){
  animation: slide var(--fx-cv-long) 1200ms both;
  animation-timeline: view(block);
  animation-range: entry 0% cover 20%;  
}

.real > .cald:nth-of-type(2){
  animation: slide var(--fx-cv-long) 3200ms both;
  animation-timeline: view(block);
  animation-range: entry 0% cover 30%;
}

.real > .cald:nth-of-type(3){
  animation: slide var(--fx-cv-long) 5200ms both;
  animation-timeline: view(block);
  animation-range: entry 0% cover 40%; 
}

.cald > .will{
  display: inline-flex;
  gap: var(--xs);
}

.will h1{
  font-size: var(--fs-h1);
  font-weight: 600;
  white-space: nowrap;
}

.will svg {
  color: var(--primary);
  inline-size: var(--x-large);
}

.plus-icon {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw-plus var(--fx-cv-short) forwards, 
             pulse var(--dur-6) infinite var(--dur-6);
}

/* Draw the plus */
@keyframes draw-plus {

  to {
    stroke-dashoffset: 0;
  }
  
}

/* Gentle pulse after drawing */
@keyframes pulse {

  0%, 100% { 
    scale: 1;
  }

  50% { 
    scale: 1.3;
  }

}


:is(.lay > .dos:nth-of-type(1),
    .fut > .dex:nth-of-type(1),
    .container > .qir:nth-of-type(1),
    .container > .vant:nth-of-type(1)){

  place-items: center start;
}

:is(.dos:nth-of-type(1) > .pep,
    .dex:nth-of-type(1) > .serv,
    .qir:nth-of-type(1) > .proj,
    .vant:nth-of-type(1) > .cert){

  display: grid;
  place-items: center;
  will-change: opacity, transform;
  inline-size: max-content;
  animation: straightL var(--fx-cv-long) 3200ms both;
  animation-timeline: view(block);
  animation-range: entry 0% cover 30%;
}


/* Per Section H1 Font & Sizes */
:is(.pep, .serv, .proj, .cert) h1 {
  display: grid;
  font-size: var(--fs-h1);
  font-weight: 600;
  user-select: none;
  -webkit-user-select: none;
}

:is(.pep, .serv, .proj, .cert) h1 span{
  color: var(--secondary);
  position: relative;
}

:is(.pep, .serv, .proj, .cert) h1::before,
:is(.pep, .serv, .proj, .cert) h1 span::before{
  content: " ";
  position: absolute;
  inset: 0;
  box-shadow: 0 0 0 var(--one) var(--primary-l);
  block-size: 100%;
  inline-size: 100%;
  z-index: -1;
}

:is(.pep, .serv, .proj, .cert) h1::before{
  background: var(--accent);
  rotate: -4deg;
}

:is(.pep, .serv, .proj, .cert) h1 span::before{
  background: var(--primary);
  rotate: 4deg;
}

:is(.pep, .serv, .proj, .cert) h1 span::first-letter {
  font-size: var(--ultra);
}

.lines > .lay:nth-of-type(2){
  inline-size: 100%;
}

.lay:nth-of-type(2) > .bento-grid{
  display: grid;
  position: relative;
  place-items: center;
  block-size: fit-content;
  inline-size: 100%;
}

.bento-grid > .flexy{
  display: grid;
  position: relative;
  place-items: center;
  min-block-size: 100%;
  inline-size: 100%;
}

.flexy:nth-of-type(1) > .ter:nth-of-type(1){
  display: grid;
  position: relative;
  place-items: center;
  transform-origin: top right;
  animation: slide var(--fx-cv-long) 1200ms both;
  animation-timeline: view(block);
  animation-range: entry 0% cover 30%;
}

.flexy:nth-of-type(1) > .ter:nth-of-type(1) > .ht {
  display: grid;
  position: relative;
  place-items: center;
  block-size: 100%;
  inline-size: 100%;
  z-index: 3;
}

.ht > .intro {
  align-content: space-between;
  container-type: inline-size;
  gap: var(--sm);
  transform: translateX(0);
}

.flexy:nth-of-type(1) > .ter:nth-of-type(1) > 
.ht:hover .intro {
  transform: translateX(-100%);
}

.intro > .ler{
  display: grid;
  position: relative;
  inline-size: 100%;
}

.intro > .ler:nth-of-type(1){
  place-items: start;
}

.intro > .ler:nth-of-type(1) h2{
  padding-block-end: var(--sm);
}

.intro > .ler:nth-of-type(2){
  place-items: end;
}
 
:is(.intro, .ces, .rew) {
  padding: var(--x-large);
}

:is(.ler:nth-of-type(2), .yet:nth-of-type(2), .rew) svg{
  color: var(--secondary);
  inline-size: var(--x-large);
}

/* Bento Grid Fonts */
:is(.intro, .story) p{
  color: var(--secondary-o);
}

.story p{
  white-space: nowrap;
}

.rew strong{
  font-size: var(--fs-h1);
  font-weight: 500;
}

.rew h2{
  max-inline-size: 20ch;
}

.rew span{
  white-space: nowrap;
}
.rew span:nth-of-type(1){
  font-size: var(--fs-h2);
}
.rew span:nth-of-type(2){
  font-size: var(--fs-h3);
}

:is(.intro, .ces, .rew,
    .ode, .kedo, .lol) h2 {

  color: var(--secondary);
  font-weight: 500;
}

:is(.intro, .ode, .kedo, .lol) h2{
  font-size: var(--fs-h3);
}

:is(.ode, .kedo, .lol) h2{
  letter-spacing: 0.06rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.ces h2{
  font-size: var(--fs-h4);
}


/* Smooth and Transform for Bento Grid */
:is(.flexy:nth-of-type(1) > .ter:nth-of-type(1),  
    .col-up >  .ha:nth-of-type(1),
    .col-up > .ha:nth-of-type(2),
    .ter:nth-of-type(2) > .col-down,
    .flexy:nth-of-type(2) > .das:nth-of-type(1),
    .flexy:nth-of-type(2) > .das:nth-of-type(2)){

  position: relative;
  border-radius: var(--md);
  isolation: isolate;
  transform: translateZ(0);
  overflow: clip;
  will-change: opacity, transform;
  block-size: 100%;
  inline-size: 100%;
}

/* Images for Bento Grid */
:is(.ter:nth-of-type(1) > .ht,  
    .col-up > .ha:nth-of-type(1),
    .col-up > .ha:nth-of-type(2),
    .ter:nth-of-type(2) > .col-down,
    .flexy:nth-of-type(2) > .das:nth-of-type(1),
    .flexy:nth-of-type(2) > .das:nth-of-type(2))::before{

  content: " ";
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: filter var(--fx-short), 
              scale var(--fx-smooth);
  will-change: transform;
  z-index: 0; 
}

:is(.ter:nth-of-type(1) > .ht,  
    .flexy:nth-of-type(2) > .das:nth-of-type(1),
    .flexy:nth-of-type(2) > .das:nth-of-type(2))::before{

  filter: contrast(1) brightness(1) saturate(1) grayscale(1);
  scale: 1;
}

/* Hover Effects */
:is(.ter:nth-of-type(1) > .ht,  
    .flexy:nth-of-type(2) > .das:nth-of-type(1),
    .flexy:nth-of-type(2) > .das:nth-of-type(2)):hover::before{

  filter: contrast(1.1) brightness(1.1) saturate(1.1) grayscale(0);
  scale: 1.1;
}

:is(.col-up > .ha:nth-of-type(1),
    .col-up > .ha:nth-of-type(2),
    .ter:nth-of-type(2) > .col-down)::before{

  filter: contrast(1.1) brightness(1.1) saturate(1.1);
  scale: 1.1;
}

/* Hover Effects */
:is(.col-up > .ha:nth-of-type(1),
    .col-up > .ha:nth-of-type(2),
    .ter:nth-of-type(2) > .col-down):hover::before{

  filter: contrast(1) brightness(1) saturate(1) grayscale(1);
  scale: 1;
}

/* Images ------------ */
.ter:nth-of-type(1) > .ht::before{
  background-image: url("https://cube-interactive.com/libe-storage/2022/08/WebsiteMock-Up01copy.jpg");
}

.col-up > .ha:nth-of-type(1)::before{
  background-image: url("https://lvivity.com/wp-content/uploads/2020/09/ui-ux-principles.jpg");
}

.col-up > .ha:nth-of-type(2)::before{
  background-image: url("https://cdn.dribbble.com/userupload/37467353/file/original-c25282e8f0652481868618b75759c9cd.jpg?resize=1600x1200");
}

.ter:nth-of-type(2) > .col-down::before{
  background-image: url("https://www.webstacks.com/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fq9c9g16o%2Fproduction%2F666ddc1a3dcf6c58a032acc127b1737b34aea06c-1600x841.webp&w=3840&q=100");
}

.flexy:nth-of-type(2) > .das:nth-of-type(1)::before{
  background-image: url("https://images.unsplash.com/photo-1515879218367-8466d910aaa4?q=80&w=869&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
}

.flexy:nth-of-type(2) > .das:nth-of-type(2)::before{
  background-image: url("https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
}

/* Smooth and Transform for Bento Grid */
:is(.ht > .intro, .kas > .ode,
    .kas > .kedo, .gaft > .lol,
    .desi > .ces, .sef > .rew){
 
  display: grid;
  position: relative;
  overflow: hidden;
  transition: scale var(--fx-smooth),
              transform var(--fx-smooth);
  will-change: transform; 
  block-size: 100%;
  inline-size: 100%;
}

:is(.ht > .intro, .kas > .ode,
    .kas > .kedo, .gaft > .lol,
    .desi > .ces, .sef > .rew)::before {

  content: " ";
  position: absolute;
  inset: 0;
  block-size: 100%;
  inline-size: 100%;
  z-index: -1;
}

/*Background for each Bento Grid Design Before */
:is(.ht > .intro, .desi > .ces, .sef > .rew)::before{
  background: var(--primary);
}

:is(.kas > .ode, .kas > .kedo, .gaft > .lol)::before{
  background: var(--surface);
}


.flexy:nth-of-type(1) > .ter:nth-of-type(2){
  display: grid;
  position: relative;
  place-items: center;
  block-size: 100%;
  inline-size: 100%;
}

.ter:nth-of-type(2) > .col-up{
  display: flex;
  position: relative;
  align-items: center;
  block-size: 100%;
  inline-size: 100%;
}

.col-up > .ha{
  display: grid;
  will-change: opacity, transform;
}

.col-up > .ha:nth-of-type(1){
  place-items: end;
  transform-origin: top left;
  animation: slide var(--fx-cv-long) 3200ms both;
  animation-timeline: view(block);
  animation-range: entry 0% cover 30%;
}

.ha:is(:nth-of-type(1), 
       :nth-of-type(2)) .kas {
  
  display: grid;
  position: relative;
  place-items: center;
  block-size: 100%;
  inline-size: 100%;
}

.kas > .ode {
  place-items: center;
  container-type: inline-size;
  padding: var(--md);
  transform: translateX(100%);
}

.col-up > .ha:nth-of-type(1):hover .ode {
  transform: translateX(0);
}


.col-up > .ha:nth-of-type(2){
  place-items: center;
  transform-origin: top left;
  animation: slide var(--fx-cv-long) 5200ms both;
  animation-timeline: view(block);
  animation-range: entry 0% cover 30%;
}

.kas > .kedo {
  place-items: center;
  container-type: block-size;
  padding: var(--md);
  transform: translateY(100%);
}

.col-up > .ha:nth-of-type(2):hover .kedo {
  transform: translateY(0);
}

.ter:nth-of-type(2) > .col-down{
  display: grid;
  place-items: center;
  transform-origin: top left;
  animation: slide var(--fx-cv-long) 1200ms both;
  animation-timeline: view(block);
  animation-range: entry 0% cover 30%;
}

.col-down > .gaft{
  display: inherit;
  position: relative;
  place-items: inherit;
  block-size: 100%;
  inline-size: 100%;
}

.gaft > .lol {
  container-type: block-size;
  place-items: center;
  padding: var(--md);
  transform: translateY(-100%);
}

.ter:nth-of-type(2) > .col-down:hover .lol {
  transform: translateY(0);
}


.bento-grid > .flexy:nth-of-type(2){
  display: grid;
  position: relative;
  place-items: center;
  grid-template-columns: minmax(clamp(10rem, calc(9.25rem + 3dvw), 11.875rem), 2fr)
                         minmax(clamp(8rem, calc(7.45rem + 2.2dvw), 9.375rem), 1.5fr);
  inline-size: 100%;
}

.flexy:nth-of-type(2):is(:nth-of-type(1),
                            :nth-of-type(2)) .das {

  display: flex;
  align-items: center;
  transform-origin: center;
}

.flexy:nth-of-type(2) > .das:nth-of-type(1){
  transform-origin: top right;
  animation: slide var(--fx-cv-long) 3200ms both;
  animation-timeline: view(block);
  animation-range: entry 0% cover 30%;
}

.das:nth-of-type(1) > .desi{
  display: grid;
  position: relative;
  place-items: center;
  block-size: 100%;
  inline-size: 100%;
}

.desi > .ces {
  place-items: center;
  gap: var(--sm);
  scale: 1;
  transform-origin: center;
}

.flexy:nth-of-type(2) > .das:nth-of-type(1):hover .ces {
  scale: 0;
}

.ces > .story{
  display: grid;
  position: relative;
  align-content: space-between;
  block-size: 100%;
  inline-size: 100%;
}

.story > .yet{
  display: grid;
  position: relative;
  inline-size: 100%;
}

.story > .yet:nth-of-type(1){
  place-items: start;
  gap: var(--md-space);
}

.yet:nth-of-type(1) :is(div, blockquote){
  display: grid;
  position: relative;
  inline-size: 100%;
}

.story > .yet:nth-of-type(1) svg{
  color: var(--secondary);
  inline-size: var(--body);
}

.yet:nth-of-type(1) div:nth-of-type(1){
  place-items: start;
}

.yet:nth-of-type(1) blockquote{
  place-items: center;
  text-align: center;
}

.yet:nth-of-type(1) div:nth-of-type(2){
  place-items: end;
}

.story > .yet:nth-of-type(2){
  place-items: end;
}

.yet:nth-of-type(2) > .learn{
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
}

.flexy:nth-of-type(2) > .das:nth-of-type(2){
  transform-origin: top left;
  animation: slide var(--fx-cv-long) 5200ms both;
  animation-timeline: view(block);
  animation-range: entry 0% cover 30%;
}

.das:nth-of-type(2) > .sef{
  display: grid;
  position: relative;
  place-items: center;
  block-size: 100%;
  inline-size: 100%;
}

.sef > .rew {
  align-content: space-between;
  transform: scaleY(1); 
}

.flexy:nth-of-type(2) > .das:nth-of-type(2):hover .rew {
  transform: scaleY(0);
}

.rew > .kop{
  display: grid;
  position: relative;
  inline-size: 100%;
}

.rew > .kop:nth-of-type(1){
  place-items: start;
}

.rew > .kop:nth-of-type(2){
  place-items: end;
}


/* Fourth Section */
.talent {
  animation-delay: 10000ms;
}

.talent > .run-right{
  
}

.run-right > .infinite-scroll {
  transform: rotate(-355deg) translateZ(0);
}

.run-right > .infinite-scroll > .list {
  animation: scrollR 25000ms var(--ease-linear) infinite;
}

@keyframes scrollR {

  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }

}


/* Fifth Section */
.hire{
  animation-delay: 10500ms;
}

.hire > .control{
 
}

.container > .hare{
  display: inherit;
  position: inherit;
  place-items: inherit;
  grid-template-columns: repeat(auto-fit, minmax(clamp(18.75rem, 
                         calc(11.25rem + 30dvw), 37.5rem), 1fr)); 
  /* 300px x 600px */
  block-size: 100%;
  inline-size: 100%;
}

.hare > .rear {
  display: grid;
  place-items: center;       
  position: relative;
  overflow: hidden;         
  isolation: isolate;        
  block-size: 100%;
  inline-size: 100%;
}

.hare > .rear:nth-of-type(1) {
  background: var(--secondary);
  animation: slidePushBack var(--fx-cv-long) 3200ms both;
  animation-timeline: view(block);
  animation-range: entry 0% cover 30%;
}

.hare > .rear:nth-of-type(1)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("https://media.licdn.com/dms/image/v2/D5612AQGOmwfIE5mlWA/article-cover_image-shrink_720_1280/article-cover_image-shrink_720_1280/0/1674617947228?e=2147483647&v=beta&t=L-J1EFIJzlFXa-2bu5K-SqOT0PXYAaPZgXxnpneoF0U")
              center / contain no-repeat;
  filter: contrast(1.1) saturate(1.1);
  mix-blend-mode: multiply;
  will-change: opacity, transform; 
}

.hare > .rear:nth-of-type(2) {
  padding: var(--x-large);
  animation: slidePushBack var(--fx-cv-long) 5200ms both;
  animation-timeline: view(block);
  animation-range: entry 0% cover 30%;
  will-change: transform;  
}


@keyframes slidePushBack {

  0% {
    opacity: 0;
    transform: translateX(-100cqi);
  }

  60% {
    transform: translateX(20cqi);
  }

  80% {
    transform: translateX(-30cqi);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }

}


.rear:nth-of-type(2) > .freq{
  display: grid;
  place-items: center start; 
}

.rear:nth-of-type(2) h1{
  color: var(--primary);
  font-size: var(--fs-h2);
  font-weight: 500;
}

.rear:nth-of-type(2) > .freq > .ans{
  display: grid;
  position: relative;
  inline-size: 100%;
}

.hare > .rear:nth-of-type(2) li{
  color: var(--primary);
  padding-inline-start: var(--jumbo); 
  margin-block-start: 1lh;        
  max-inline-size: 45ch;
}

.hare > .rear:nth-of-type(2) li::before {
  content: "➠";
  position: absolute;
  left: 0; 
  color: var(--primary);
  transition: color var(--fx-fast);
}

.hare > .rear:nth-of-type(2) li:hover::before{
  color: var(--accent);
}


/* Sixth Section */
.testimonials {
  animation-delay: 11000ms;
}

.testimonials > .control{
  
}

.testimonials > .control > .container{
  gap: var(--xx-large);
} 

.headline {
  display: grid;
  position: relative;
  place-items: start;
  gap: var(--md);
  inline-size: 100%;
}

.ras{
  display: grid;
  position: relative;
  gap: var(--sm);
}

.ras:nth-of-type(1) p {
	font-size: var(--fs-body);
}

.ras:nth-of-type(2){
  display: flex;
  position: relative;
  align-items: center;
  block-size: 100%;
  inline-size: 100%;
}

.ras:nth-of-type(2) .daz{
  display: grid;
  position: relative;
  block-size: 100%;
}

.ras:nth-of-type(2) > 
.daz:nth-of-type(1){
  place-items: start;
  inline-size: max-content;
}

.ras:nth-of-type(2) > 
.daz:nth-of-type(1) h1 {
	font-size: var(--fs-h3);
  font-weight: 500;
  white-space: nowrap;
}

.ras:nth-of-type(2) > 
.daz:nth-of-type(2){
  place-items: center;
  inline-size: 100%;
}

.ras:nth-of-type(2) > 
.daz:nth-of-type(2)::before {
  content: " ";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%); 
  background: var(--primary);
  border-radius: var(--md);
  block-size: var(--sm-border);
  inline-size: 100%;
}

.cover {
  display: grid;
  position: relative;
  place-items: center;
  container-type: inline-size;
  padding: var(--xs);
  overflow: clip auto; 
  inline-size: 100%;
}

/* Shared styles for both buttons */
.cover :is(.rev, .ext) {
  display: grid;
  position: absolute;
  place-items: center;
  background: var(--accent-o);
  box-shadow: 0 0 0 var(--one) var(--accent);
  pointer-events: none; 
  transition: scale var(--fx-smooth);
  scale: 0;
  transform-origin: center;
  block-size: var(--jumbo);
  inline-size: var(--x-large);
  z-index: 3;
}

/* position the buttons */
.cover > .rev { 
  left: 0; 
}

.cover > .ext { 
  right: 0; 
}

.cover :is(.rev, .ext) svg {
  color: var(--primary);
  inline-size: calc(var(--three) * var(--sm));
}

/* reveal when hovering the cover */
.cover:hover :is(.rev, .ext) {
  pointer-events: auto; 
  scale: 1;
}

/* active press feedback */
.cover :is(.rev, .ext):active {
  scale: 0.9;
}


.slider{
  position: relative;
  block-size: 100%;
  inline-size: 100%;
}

.slider-item {
  display: grid;
  position: absolute;
	inset: 0;
	border-radius: var(--md);
  outline: var(--one) solid var(--primary);
  outline-offset: var(--three);
  transition: transform var(--fx-smooth);
	overflow: hidden;
  backface-visibility: hidden;
  contain: layout;
  transform: translateZ(0);
  will-change: transform;
  --card-width: clamp(18.75rem, calc(15rem + 15dvw), 28.125rem);
  /* fluid between 300px – 450px */
  block-size: 100%;
  inline-size: var(--card-width);
}  

.slider-item::before,
.slider-item::after{
  content: " ";
  position: absolute;
  z-index: -1;
}

/* Overlays for slider before */
.slider-item::before{
  inset: 0;
  block-size: 100%;
  inline-size: 100%;
}

.slider-item:nth-of-type(odd)::before{
  background: var(--primary);
}

.slider-item:nth-of-type(even)::before{
  background: var(--surface);
}

/* Overlays for slider after */
.slider-item::after{
  top: 0;
  background: var(--accent);
  transition: transform var(--fx-smooth);
  transform: scaleX(0);
  transform-origin: center;
  block-size: var(--xs);
  inline-size: 100%;
}

.slider-item:hover::after{
  transform: scaleX(1);
}

/* Fluid size & spacing */
.slider-item:nth-of-type(1){
  transform: translateX(calc(-1 * (var(--card-width) + var(--md-space))));
}

.slider-item:nth-of-type(2){
  transform: translateX(0);
}

.slider-item:nth-of-type(3){
  transform: translateX(calc(var(--card-width) + var(--md-space)));
}

.slider-item:nth-of-type(4){
  transform: translateX(calc((var(--card-width) + var(--md-space)) * 2));
}

.slider-item:nth-of-type(5){
  transform: translateX(calc((var(--card-width) + var(--md-space)) * 3));
}

.slider-item:nth-of-type(6){
  transform: translateX(calc((var(--card-width) + var(--md-space)) * 4));
}

.slider-item:nth-of-type(7){
  transform: translateX(calc((var(--card-width) + var(--md-space)) * 5));
}

.slider-item:nth-of-type(8){
  transform: translateX(calc((var(--card-width) + var(--md-space)) * 6));
}


.slider-item > .ved{
  display: grid;
  position: relative;
  padding: var(--x-large);
  block-size: 100%;
  inline-size: 100%;
}

.ved > .boxet{
  display: grid;
  position: relative;
  align-content: space-between;
  block-size: 100%;
  inline-size: 100%;
}

.boxet > .paq{
  position: relative;
  block-size: fit-content;
  inline-size: 100%;
}

.boxet > .paq:nth-of-type(1) {
  display: flex;
  align-items: start;
}

.paq:nth-of-type(1) > .rate{
  display: grid;
  position: relative;
  place-items: start;
  block-size: 100%;
}

.paq:nth-of-type(1) > .rate:nth-of-type(1){
  inline-size: 100%;
}

.paq:nth-of-type(1) > .rate:nth-of-type(2){
  gap: var(--sm); 
  inline-size: fit-content;
}

.paq:nth-of-type(1) > .rate:nth-of-type(2) svg{
  color: var(--secondary);
  fill: currentColor;
  inline-size: var(--large);
}

/* Fonts Sizes and Style */
.boxet > .paq:nth-of-type(1) > .rate p{
  color: var(--secondary-o);
  font-style: oblique;
  max-inline-size: 45ch;
}

.boxet > .paq:nth-of-type(2) {
  display: grid;
  place-items: start;
  gap: var(--sm);
}

.boxet > .paq:nth-of-type(2) h2{
  color: var(--secondary);
  font-size: var(--fs-h4);
  font-weight: 500;
}

.boxet > .paq:nth-of-type(2) p{
 color: var(--secondary-o);
}

/* Seventh Section */
.services{
  animation-delay: 11500ms;
  perspective: calc(15 * var(--ultra));
  perspective-origin: center;
}

.services::after {
  content: " ";
  position: absolute;
  inset: 0;
  block-size: 100%;
  inline-size: 100%;
  z-index: -1;
}

.services::after {
  background: url("../img/services/Blobs.svg") center / cover no-repeat;
  
  /* Performance optimizations */
  mix-blend-mode: multiply;
  transform: scale3d(0, 0, 0);
  transform-origin: center;
  transition: transform var(--fx-smooth) var(--dur-4);
  will-change: transform;
}

/* ✅ On hover — reveal from center */
.services:has(.content:hover)::after {
  transform: scale3d(1, 1, 1);
}

.services > .control{
  
}

.container > .fut{
  display: inherit;
  position: inherit;
  place-items: inherit;
  gap: var(--xx-large);
  min-block-size: 100%;
  inline-size: 100%;
}

.fut > .dex{
  display: inherit;
  position: inherit;
  inline-size: 100%;
}

.fut > .dex:nth-of-type(1){
 
}

.dex:nth-of-type(1) > .serv{
  position: relative;
}

.fut > .dex:nth-of-type(2){ 
  place-items: center;
  min-block-size: 100%;
}

.dex:nth-of-type(2) > .content {
  display: inherit;
  position: inherit;
  place-items: center;
  backdrop-filter: blur(var(--sm));
  box-shadow: 0 0 0 var(--one) var(--primary-l);
  overflow: clip;
  contain: paint; 
  isolation: isolate;
  will-change: opacity, transform;
  inline-size: 100%;
}       

.content:nth-of-type(-n+5)::before,
.content:nth-of-type(-n+5)::after {
  content: " ";
  position: absolute;
  inset: 0;
  transition: background var(--fx-smooth),
              scale var(--fx-smooth);
  block-size: 100%;
  inline-size: 100%;
}

/* Background colors before*/
.content:nth-of-type(odd)::before{
  background: var(--primary);
}

.content:nth-of-type(even)::before{
  background: var(--surface);
}


/* Make scaling start from bottom-right */
.content:nth-of-type(odd)::before,
.content:nth-of-type(odd)::after{
  scale: 1;
  transform-origin: bottom right;  
}

/* Hover Effects for odd items */
.content:nth-of-type(odd):hover::before,
.content:nth-of-type(odd):hover::after{
  scale: 0;
}

/* Make scaling start from bottom-left */
.content:nth-of-type(even)::before,
.content:nth-of-type(even)::after{
  scale: 1;
  transform-origin: bottom right;
}

/* Hover Effects for even items */
.content:nth-of-type(even):hover::before,
.content:nth-of-type(even):hover::after{
  scale: 0;
}

/* Scroll Animation & Design for Contents */
.dex:nth-of-type(2) > 
.content:nth-of-type(odd){
  animation: leftS var(--fx-cv-long) 1200ms both;
  animation-timeline: view(block);
  animation-range: entry 30% contain 50%;
}

.dex:nth-of-type(2) > 
.content:nth-of-type(even){
  animation: rightS var(--fx-cv-long) 3200ms both;
  animation-timeline: view(block);
  animation-range: entry 30% contain 50%;
}

@keyframes leftS {

  from {
    opacity: 0;
    transform: translate3d(calc(-10 * var(--md)), calc(10 * var(--md)), 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

}

@keyframes rightS {

  from {
    opacity: 0;
    transform: translate3d(calc(10 * var(--md)), calc(10 * var(--md)), 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

}

.content > .helm{
  display: grid;
  position: relative;
  place-items: center;
  padding: var(--x-large);
  block-size: 100%;
  inline-size: 100%;
}

.content > .helm::before{
  content: " ";
  position: absolute;
  inset: 0;
  background: var(--secondary-o);
  block-size: 100%;
  inline-size: 100%;
  z-index: -1;
}


/* Base erp style */
.helm > .erp {
  display: inherit;
  position: inherit;
  block-size: inherit;
  inline-size: inherit;

  overflow: hidden;
  align-content: space-between;
  z-index: 2;
}

/* Start of Rol */
.erp > .rol{
  position: inherit;
  contain: layout style;
  will-change: transform;
  inline-size: inherit;
} 

.rol:nth-of-type(1){
  display: grid;
  place-items: center;
  transition: padding var(--fx-smooth);
  min-block-size: fit-content;
} 

.rol :is(h2, p){
  transition: color var(--fx-short),
              scale var(--fx-smooth);
}

/* Unhover Effect Colors */
.rol h2{
  color: var(--primary);
}

.rol p{
  color: var(--secondary-o);
}

/* Hover Effect Colors */
.content:hover .rol p{
  color: var(--primary-o);
}

.content:hover .rol:nth-of-type(1){
  padding: var(--sm) var(--large);
}

.content:hover .rol:nth-of-type(1) p{
  scale: 1.1;
}

.rol:nth-of-type(2) > .lave:nth-of-type(1) h2{
  font-size: var(--fs-h4);
  font-weight: 500;
  transition: opacity var(--fx-short), 
              scale var(--fx-smooth);
  opacity: 0;
  scale: 0;
  transform-origin: right center;
  will-change: transform;
}

.content:hover .rol:nth-of-type(2) h2{
  opacity: 1;
  scale: 1;
}

.rol:nth-of-type(2){
 display: flex;
 align-items: center;
 block-size: 100%;
} 

.rol:nth-of-type(2) > .lave{
  display: grid;
  position: relative;
  --tlave: clamp(6.25rem, calc(5rem + 5dvw), 9.375rem);
}

.rol:nth-of-type(2) > .lave:nth-of-type(1){
  place-items: end;
  overflow: hidden;
  block-size: fit-content;
  inline-size: 100%;
}

.rol:nth-of-type(2) > .lave:nth-of-type(2){
  place-items: center;
  block-size: var(--tlave);
  inline-size: var(--tlave);
}

/* Background for lave 2 */
.rol:nth-of-type(2) > .lave:nth-of-type(2)::before{
  content: " ";
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.5;
  transition: opacity var(--fx-short),
              transform var(--fx-smooth);
  transform: rotate3d(0, 0, 0, 0) scale3d(1, 1, 1); 
  transform-origin: center;
  will-change: opacity, transform; 
  block-size: 100%;
  inline-size: 100%;
}

.content:hover .rol:nth-of-type(2) > .lave:nth-of-type(2)::before{
  opacity: 1;
  transform: rotate3d(0.56, 0.83, 0, 18deg) scale3d(1.2, 1.2, 1.2);
}

.content:nth-of-type(1) > .helm > .erp >
.rol:nth-of-type(2) > .lave:nth-of-type(2)::before{
  background-image: url("../img/services/ux.webp");
}

.content:nth-of-type(2) > .helm > .erp >
.rol:nth-of-type(2) > .lave:nth-of-type(2)::before{
  background-image: url("../img/services/target.webp");
}

.content:nth-of-type(3) > .helm > .erp >
.rol:nth-of-type(2) > .lave:nth-of-type(2)::before{
  background-image: url("../img/services/bulb.webp");
}

.content:nth-of-type(4) > .helm > .erp >
.rol:nth-of-type(2) > .lave:nth-of-type(2)::before{
   background-image: url("../img/services/fire.webp");
}

.content:nth-of-type(5) > .helm > .erp >
.rol:nth-of-type(2) > .lave:nth-of-type(2)::before{
  background-image: url("../img/services/pencil.webp");
}


/* Eight Section */
.techstack{
  animation-delay: 12000ms;
}

.techstack > .control{
 
}

.container > .jil{
  display: flex;
  position: inherit;
  align-items: center;
  gap: var(--xx-large);
  overflow: hidden;
  block-size: clamp(28.125rem, calc(26.875rem + 5dvw), 31.25rem);
  /* 450px << 500px */
  inline-size: 100%; 
}

.jil > .bun{
  position: relative;
  block-size: 100%;
} 

/* 1st Bun */
.jil > .bun:nth-of-type(1){
  display: flex;
  gap: var(--xx-large);
  inline-size: max-content;
}

.bun:nth-of-type(1) > :is(.up, .down){
  position: relative;
}

@starting-style {
  .bun:nth-of-type(1) > :is(.up, .down) > .ud-scroll {
    opacity: 0;
  }
}

/* First UD-Scroll */
.bun:nth-of-type(1) > :is(.up, .down) > .ud-scroll {
  display: grid;
  position: relative;
  place-items: center;
 
  overflow: hidden;
  clip-path: inset(0);  
  
  backface-visibility: hidden;
  contain: layout; 
  will-change: transform;

  transition: display var(--dur-1),
              opacity var(--fx-fast);
  transition-behavior: allow-discrete;

  block-size: 100%; 
  inline-size: max-content;

  mask-composite: intersect;
  -webkit-mask-composite: destination-in;

  mask-image: linear-gradient(to top,
    color-mix(in oklch, var(--secondary) 0%, transparent) 0%, 
                        var(--secondary) 10%, var(--secondary) 90%, 
    color-mix(in oklch, var(--secondary) 0%, transparent) 100%
  );

  -webkit-mask-image: linear-gradient(to top,
    color-mix(in oklch, var(--secondary) 0%, transparent) 0%, 
                        var(--secondary) 10%, var(--secondary) 90%, 
    color-mix(in oklch, var(--secondary) 0%, transparent) 100%
  );
}

:is(.up, .down) > .ud-scroll > .group {
  display: grid;
  place-items: center;
  gap: var(--xx-large);
  padding-block-end: var(--xx-large);
  contain: paint;
  will-change: transform; 
  max-inline-size: fit-content; 
}

.up > .ud-scroll > .group {
  animation: scrollU 25000ms var(--ease-linear) infinite;
}

@keyframes scrollU {

  from { 
    transform: translateY(0); 
  }

  to { 
    transform: translateY(-100%); 
  }

}

:is(.up, .down) > .ud-scroll > 
.group > .stack {
  display: inherit;
  position: relative;
  place-items: inherit;
  cursor: url("../img/pointer/thumb.webp") 6 6, auto;
  opacity: 0.7;
  transition: filter var(--fx-short), 
              opacity var(--fx-smooth);
  --scroll: clamp(3.125rem, calc(0.625rem + 10dvw), 9.375rem);
  /* 50px << 150px */
  block-size: var(--scroll);
  inline-size: var(--scroll);
}

:is(.up, .down) > .ud-scroll > 
.group > .stack:hover{
  filter: contrast(1.1) saturate(1.3);
  opacity: 1;
}

:is(.up, .down) > .ud-scroll:hover .group{
  animation-play-state: paused;
}

:is(.up, .down) > .ud-scroll > 
.group > .stack::before{
  content: " ";
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  block-size: 100%;
  inline-size: 100%;
  z-index: 1;
}

/* Bckgrounds for UD-scroll */
:is(.up, .down) > .ud-scroll > .group > .stack:nth-of-type(1)::before {
  background-image: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/python/python-original.svg");
}

:is(.up, .down) > .ud-scroll > .group > .stack:nth-of-type(2)::before {
  background-image: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/react/react-original.svg");
}

:is(.up, .down) > .ud-scroll > .group > .stack:nth-of-type(3)::before {
  background-image: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/nodejs/nodejs-original.svg");
}

:is(.up, .down) > .ud-scroll > .group > .stack:nth-of-type(4)::before {
  background-image: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/javascript/javascript-original.svg");
}

:is(.up, .down) > .ud-scroll > .group > .stack:nth-of-type(5)::before {
  background-image: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/typescript/typescript-original.svg");
}

:is(.up, .down) > .ud-scroll > .group > .stack:nth-of-type(6)::before {
  background-image: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/html5/html5-original.svg");
}

:is(.up, .down) > .ud-scroll > .group > .stack:nth-of-type(7)::before {
  background-image: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/css3/css3-original.svg");
}

:is(.up, .down) > .ud-scroll > .group > .stack:nth-of-type(8)::before {
  background-image: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/tailwindcss/tailwindcss-original.svg");
}

:is(.up, .down) > .ud-scroll > .group > .stack:nth-of-type(9)::before {
  background-image: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/postgresql/postgresql-original.svg");
}

:is(.up, .down) > .ud-scroll > .group > .stack:nth-of-type(10)::before {
  background-image: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/mongodb/mongodb-original.svg");
}

:is(.up, .down) > .ud-scroll > .group > .stack:nth-of-type(11)::before {
  background-image: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/docker/docker-original.svg");
}

:is(.up, .down) > .ud-scroll > .group > .stack:nth-of-type(12)::before {
  background-image: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/git/git-original.svg");
}

:is(.up, .down) > .ud-scroll > .group > .stack:nth-of-type(13)::before {
  background-image: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/github/github-original.svg");
}

:is(.up, .down) > .ud-scroll > .group > .stack:nth-of-type(14)::before {
  background-image: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/vscode/vscode-original.svg");
}

:is(.up, .down) > .ud-scroll > .group > .stack:nth-of-type(15)::before {
  background-image: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/linux/linux-original.svg");
}

:is(.up, .down) > .ud-scroll > .group > .stack:nth-of-type(16)::before {
  background-image: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/figma/figma-original.svg");
}

:is(.up, .down) > .ud-scroll > .group > .stack:nth-of-type(17)::before {
  background-image: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/sass/sass-original.svg");
}

:is(.up, .down) > .ud-scroll > .group > .stack:nth-of-type(18)::before {
  background-image: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/webpack/webpack-original.svg");
}

:is(.up, .down) > .ud-scroll > .group > .stack:nth-of-type(19)::before {
  background-image: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/firebase/firebase-original.svg");
}

:is(.up, .down) > .ud-scroll > .group > .stack:nth-of-type(20)::before {
  background-image: url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/graphql/graphql-plain.svg");
}


/* Second UD-Scroll */
.down > .ud-scroll > .group {
  animation: scrollD 25000ms var(--ease-linear) infinite;
}

@keyframes scrollD {

  from { 
    transform: translateY(-100%); 
  }

  to { 
    transform: translateY(0);
  }

}

/* Second Bun */
.jil > .bun:nth-of-type(2){
  display: grid;
  place-items: center;
  inline-size: 100%;
}

.bun:nth-of-type(2) > .context{
  display: grid;
  position: relative;
  place-items: center;
  block-size: 100%;
  inline-size: 100%;
}

.context > .cose {
  display: grid;
  position: relative;
  place-items: start;
  gap: var(--large);
  block-size: fit-content;
  inline-size: 100%;
}

.cose > .stacks{
  display: grid;
  position: relative;
  place-items: start;
  min-block-size: fit-content;
  inline-size: 100%;
}

.cose > .stacks:nth-of-type(1){
  gap: var(--sm);
}

/*Tech stacks Font-size and  Styles */
.cose > .stacks:nth-of-type(1) h1{
  color: var(--primary);
  font-size: var(--fs-h2);
  max-inline-size: 35ch;
}

.cose > .stacks:nth-of-type(1) em{
  color: var(--accent);
  font-size: var(--fs-body);
}

.cose > .stacks:nth-of-type(2) p{
  color: var(--primary);
  font-size: var(--fs-body);
}

.cose > .stacks:nth-of-type(2){

}


/* Nineth Section */
.projects{
  animation-delay: 12500ms;
}

.projects > .control{
 
}

.projects > .control > .container{
  gap: var(--xx-large);
}  

.container > .qir{
  display: inherit;
  position: inherit;
  inline-size: 100%;
}

.container > .qir:nth-of-type(1){

}

.qir:nth-of-type(1) > .proj{
  position: relative;
}

.container > .qir:nth-of-type(2){
  place-items: center;
  gap: var(--xx-large); 
  min-block-size: 100%;
}  

.qir:nth-of-type(2) > .ect{
  display: grid;
  position: relative;
  inline-size: 100%;
}

.qir:nth-of-type(2) > .ect:nth-of-type(1){
  min-block-size: 100%;
}


.ect:nth-of-type(1) > .pala{
  display: grid;
  position: relative;
  place-items: center;
  background: var(--primary);
  border-radius: var(--md);
  container-type: block-size;
  overflow: clip;
  padding: var(--x-large);
  inline-size: 100%;
}

.ect:nth-of-type(1) > .pala::before{
  content: " ";
  position: absolute;
  inset: 0;
  block-size: var(--xs);
  inline-size: 100%;
  z-index: -1;
}

/* Default (for desktop / hover-capable devices) */
.ect:nth-of-type(1) > .pala::before {
  background: var(--accent);
  transition: transform var(--fx-smooth);
  transform: scalex(0); 
  transform-origin: top; 
}

/* Hover effect only for non-touch devices */
.ect:nth-of-type(1) > .pala:hover::before {
  transform: scaleX(1);
}

/* Scroll Animation for each Project */
.ect:nth-of-type(1) > .pala:nth-of-type(1){
  animation: matrixPop var(--fx-cv-long) 1200ms both;
  animation-timeline: view(block);
  animation-range: entry 0% cover 30%;
}

.ect:nth-of-type(1) > .pala:nth-of-type(2){
  animation: matrixPop var(--fx-cv-long) 3200ms both;
  animation-timeline: view(block);
  animation-range: entry 0% cover 30%;
}

.ect:nth-of-type(1) > .pala:nth-of-type(3){
  animation: matrixPop var(--fx-cv-long) 1200ms both;
  animation-timeline: view(block);
  animation-range: entry 0% cover 30%;
}

.ect:nth-of-type(1) > .pala:nth-of-type(4){
  animation: matrixPop var(--fx-cv-long) 3200ms both;
  animation-timeline: view(block);
  animation-range: entry 0% cover 30%;
}

.ect:nth-of-type(1) > .pala:nth-of-type(5){
  animation: matrixPop var(--fx-cv-long) 1200ms both;
  animation-timeline: view(block);
  animation-range: entry 0% cover 30%;
}

.pala > .kolp{
  display: grid;
  place-items: center;
  block-size: 100%;
  inline-size: 100%;
}

/* Overlay (hidden by default) */
.pala > .kolp:nth-of-type(1) {
  position: absolute;
  inset: 0;
  background: var(--primary);
  transform: translateY(calc(-1 * 100cqi));
  pointer-events: none;
  transition: opacity var(--fx-short),
              transform var(--fx-smooth);
  z-index: 3;
}

/* Active (show overlay smoothly) */
.pala.active > .kolp:nth-of-type(1):not(:has(.waq:nth-of-type(2))) {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}


.kolp:nth-of-type(1) > .grat{
  display: grid;
  position: relative;
  align-content: space-between;
  padding: var(--x-large);
  block-size: 100%;
  inline-size: 100%;
}

.grat > .sax{
  display: grid;
  position: relative;
}

/* Start of first Layer sax */
.grat > .sax:nth-of-type(1){
  place-items: start;
  gap: var(--sm);
}

.sax:nth-of-type(1) > .pelm{
  display: flex;
  position: relative;
  justify-content: space-between;
  overflow: clip;
  inline-size: 100%;
}

.sax:nth-of-type(1) > .pelm svg{
  color: var(--secondary);
  transition: transform var(--fx-smooth);
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
  inline-size: var(--icon);
}

.sax:nth-of-type(1) > .pelm svg:hover{
  color: var(--accent);
  transform: rotate(90deg);
}

.sax:nth-of-type(1) > .pelm h2{
  color: var(--secondary);
  font-size: var(--fs-h4);
  font-weight: 500;
}

.sax:nth-of-type(1) p{
  color: var(--secondary-o);
}

.pelm > .exit{
  display: grid;
  position: relative;
  place-items: center;
  block-size: fit-content;
}


/* Start of second Layer sax */
.grat > .sax:nth-of-type(2){
  block-size: fit-content;
}

.sax:nth-of-type(2) > .yeq{
  display: grid;
  position: relative;
  place-items: center;
  block-size: 100%;
  inline-size: 100%;
}

.yeq > .crim{
  display: flex;
  position: relative;
  align-items: center;
  overflow: hidden;
  block-size: fit-content; 
  inline-size: 100%;
}

.crim > .scroll {
  display: flex;
  position: relative;
  align-items: center;
  padding-block: var(--xs);    

  overflow: hidden;
  clip-path: inset(0);  

  backface-visibility: hidden;
  contain: layout;
  will-change: transform;
  block-size: fit-content; 
  inline-size: 100%;


  mask-composite: intersect;
  -webkit-mask-composite: destination-in;

  mask-image: linear-gradient(to right,
    color-mix(in oklch, var(--secondary) 0%, transparent) 0%, 
                        var(--secondary) 10%, var(--secondary) 90%, 
    color-mix(in oklch, var(--secondary) 0%, transparent) 100%
  );

  -webkit-mask-image: linear-gradient(to right,
    color-mix(in oklch, var(--secondary) 0%, transparent) 0%, 
                        var(--secondary) 10%, var(--secondary) 90%, 
    color-mix(in oklch, var(--secondary) 0%, transparent) 100%
  );
}

.crim > .scroll > .listing {
  display: flex;
  align-items: center;
  gap: var(--large);
  padding-inline-end: var(--large);
  will-change: transform; 
  max-inline-size: fit-content;
  animation: scrollL 15000ms var(--ease-linear) infinite;
}

/* Pause on hover of the scroll container */
.crim > .scroll:hover .listing {
  animation-play-state: paused;
}

.crim > .scroll > .listing > .item {
  display: flex;
  flex: 0 0 var(--large);
  border-radius: var(--md);
  box-shadow: 0 0 0 var(--sm-border) var(--accent-o);
  padding: var(--sm) var(--md-space);
  transition: transform var(--fx-smooth);
}


/* Apply font styles to h1 and span inside .item */
.scroll > .listing > .item span{
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.yeq > .crim span{
  position: relative; 
  color: var(--secondary);   
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;   
}

.pala > .kolp:nth-of-type(2){
  position: relative;
  gap: var(--md);
  grid-template-rows: 1fr auto;
}

/* Projects Font Styles */
.visit > .got p{
  color: var(--secondary);
  font-weight: 500;
  white-space: nowrap;
}

.kolp:nth-of-type(2) > .waq {
  display: grid;
  position: relative;
  place-items: center;
  overflow: hidden;
  block-size: 100%;
  inline-size: 100%;
}


/* Start of first Layer waq*/
.kolp:nth-of-type(2) > .waq:nth-of-type(1){
  border-radius: var(--sm);
}

/* base ::before setup */
.kolp:nth-of-type(2) >
.waq:nth-of-type(1)::before {
  content: " ";
  background-position: 20% center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: contrast(1.1) saturate(1.1);
  block-size: 100%;
  inline-size: 100%;
  z-index: 0;
}

/* Unique backgrounds for each Projects */
.pala:nth-of-type(1) > .kolp:nth-of-type(2) >
.waq:nth-of-type(1)::before {
  background-image: url("../img/projects/ComMix.webp");
}

.pala:nth-of-type(2) > .kolp:nth-of-type(2) >
.waq:nth-of-type(1)::before {
  background-image: url("../img/projects/Madison.webp");
}

.pala:nth-of-type(3) > .kolp:nth-of-type(2) >
.waq:nth-of-type(1)::before {
  background-image: url("../img/projects/KeePect.webp");
}

.pala:nth-of-type(4) > .kolp:nth-of-type(2) >
.waq:nth-of-type(1)::before {
  background-image: url("../img/projects/DailyKitchen.webp");
}

/* Start of second layer waq*/
.kolp:nth-of-type(2) > .waq:nth-of-type(2) {
  
}

.waq:nth-of-type(2) > .hey{
  display: grid;
  position: relative;
  place-items: center;
  block-size: 100%;
  inline-size: 100%;
}

.hey > .juy{
  display: flex;
  position: relative;
  justify-content: space-between;
  block-size: fit-content;
  inline-size: 100%;
}

.juy > .visit{
  display: inline-flex;
  position: relative;
  align-items: center;
}

.juy > .visit:nth-of-type(1){
  gap: var(--md);
}

.visit:nth-of-type(1) > .got {
  display: inline-flex;
  position: relative;
  align-items: center;
  gap: var(--sm);
}

.juy > .visit:nth-of-type(2){
  
}

.visit:nth-of-type(2) a{
  display: inline-flex;
  position: relative;
  align-items: center;
  block-size: 100%;
}

.live-viewer {
  stroke: var(--accent);
  animation: pulseGlow var(--fx-xlong) infinite;
  filter: drop-shadow(0 0 0.375rem var(--accent));
}

/* glowing pulse effect */
@keyframes pulseGlow {

  0%, 100% {
    filter: drop-shadow(0 0 0.3125rem var(--accent));
    scale: 1;
    stroke-opacity: 0.7;
  }

  50% {
    filter: drop-shadow(0 0 0.75rem var(--accent));
    scale: 1.1;
    stroke-opacity: 1;
  }

}

.live-viewer:hover {
  animation-play-state: paused;
}

.visit svg{
  inline-size: var(--large); 
}

.visit:nth-of-type(2) svg{
  opacity: 1;
}


/* Eye Animation */
.eye {
  color: var(--secondary);
  transform-origin: center;
  animation: blink var(--dur-7) infinite;
}

.eye path.pupil {
  color: var(--secondary-o);
  transform-origin: center;
  animation: pupil-dilate 3000ms infinite alternate;
}

/* Blink animation (eye squinting) */
@keyframes blink {

  0%, 90%, 100% { 
    transform: scaleY(1); 
  }

  92%, 98% { 
    transform: scaleY(0.1); 
  }
  
}

/* Pupil dilation */
@keyframes pupil-dilate {

  from { 
    scale: .8;
  }

  to { 
    scale: 1.25;
  }

}

/* Heart Animation */
.heart {
  color: var(--secondary);
  fill: currentColor;
  transform-origin: center;
  animation: heartbeat 1300ms infinite;
}

/* Heartbeat animation */
@keyframes heartbeat {

  0%, 100% { 
    scale: 1;
  }

  14% {
    scale: 1.3;
  }

  28% { 
    scale: .9;
  }

  42% { 
    scale: 1.25;
  }

  70% { 
    scale: .9;
  }

}


.qir:nth-of-type(2) > .ect:nth-of-type(2){
  block-size: fit-content;
}

.ect:nth-of-type(2) > .others{
  display: grid;
  position: relative;
  place-items: center;
  padding: var(--md-space);
  inline-size: 100%;
}

/* Anchor as container */
.others > .show-more {
  display: inline-flex;
  position: relative;
  align-items: center;
  overflow: clip;
  transition: transform var(--fx-smooth);
  transform: skew(0);
  will-change: transform;
  z-index: 0;
}

.others > .show-more:hover{
  transform: skew(-10deg); 
}

/* Shared pseudo setup */
.others > .show-more::before,
.others > .show-more::after {
  content: " ";
  position: absolute;
  background: var(--accent);
  border-radius: var(--md);
  transition: transform var(--fx-smooth);
  transform: scaleX(0); 
  block-size: var(--md-border); 
  inline-size: var(--md-space);
  z-index: -1;
}

/* Left */
.others > .show-more::before {
  inset-block-start: 0;
  inset-inline-end: 0;
  transform-origin: right; 
}

/* Right */
.others > .show-more::after {
  inset-block-end: 0;
  transform-origin: left; 
}

/* Hover state — smoothly expand */
.others > .show-more:hover::before,
.others > .show-more:hover::after {
  transform: scaleX(1);
}

.show-more span{
  display: grid;
  position: relative;
  place-items: center;
  color: var(--primary);
  font-size: var(--fs-body);
  padding: var(--xs) var(--sm); 
  white-space: nowrap;  
  overflow: clip;
  block-size: 100%;
  z-index: 0;
}

/* Shared pseudo setup */
.show-more span::before,
.show-more span::after {
  content: " ";
  position: absolute;
  background: var(--accent);
  border-radius: var(--md);
  transform: scaleY(0); 
  transition: transform var(--fx-smooth);
  block-size: var(--md-space);
  inline-size: var(--md-border);
  z-index: -1;
}

/* Left */
.show-more span::before {
  inset-block-start: 0;
  inset-inline-end: 0;
  transform-origin: top;  
}

/* Right */
.show-more span::after {
  inset-block-end: 0;
  inset-inline-start: 0;
  transform-origin: bottom; 
}

/* Hover state — smoothly expand */
.show-more span:hover::before,
.show-more span:hover::after {
  transform: scaleY(1);
}


/* Tenth Section */
.certificates{
  animation-delay: 13000ms;
}

.certificates > .control{
  
}

.certificates > .control > .container{
  gap: var(--xx-large);
}  

.container > .vant{
  display: inherit;
  position: inherit;
  block-size: 100%;
  inline-size: 100%;
}

.vant:nth-of-type(1) > .cert{
  position: relative;
}

.container > .vant:nth-of-type(2){
  place-items: inherit;
}

.vant:nth-of-type(2) > .cumb{
  display: inherit;
  position: inherit;
  inline-size: 100%;
}

.vant:nth-of-type(2) > .cumb:nth-of-type(1){
  min-block-size: 100%;
}

.cumb > .oms{
  display: grid;
  position: relative;
  place-items: center;
  background: var(--primary);
  padding: var(--x-large);
  overflow: hidden;
  inline-size: 100%;
}

.cumb > .oms::before{
  content: " ";
  position: absolute;
  inset: 0;
  block-size: var(--xs);
  inline-size: 100%;
  z-index: -1;
}

/* Default (for desktop / hover-capable devices) */
.cumb > .oms::before {
  background: var(--accent);
  transition: transform var(--fx-smooth);
  transform: scaleX(0); 
  transform-origin: left; 
}

/* Hover effect only for non-touch devices */
.cumb > .oms:hover::before {
  transform: scaleX(1);
}


/* Scroll Animation for each Certificates */
.cumb > .oms:nth-of-type(1){
  animation: matrixPop var(--fx-cv-long) 1200ms both;
  animation-timeline: view(block);
  animation-range: entry 0% cover 30%;
}

.cumb > .oms:nth-of-type(2){
  animation: matrixPop var(--fx-cv-long) 3200ms both;
  animation-timeline: view(block);
  animation-range: entry 0% cover 30%;
}

.oms > article{
  display: grid;
  position: relative;
  place-items: center;
  overflow: clip;
  block-size: 100%;
  inline-size: 100%;
}

.oms > article::before,
.oms > article::after{
  content: " ";
  position: absolute;
  inset: 0;
  block-size: 100%;
  inline-size: 100%;
  z-index: 2;
}

/* Base ::before for mavs */
.oms > article::before {
  background-position: center 40%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: contrast(1.1) saturate(1.1);
  transition: scale var(--fx-smooth);
  scale: 1;
  transform-origin: top right;
}

/* Unique backgrounds for each Certificates */
.oms:nth-of-type(1) > article::before {
  background-image: url("../img/certificates/DataScience.webp");
}

.oms:nth-of-type(2) > article::before {
  background-image: url("../img/certificates/CyberSecurity.webp");
}

/* Hover effect */
.oms:hover article::before {
  scale: 0;  
}

article > .mavs{
  display: grid;
  position: relative;
  place-items: start;
  gap: var(--sm);
  transition: scale var(--fx-smooth);
  scale: 0;
  transform-origin: bottom left;
  block-size: fit-content;
  inline-size: 100%;
}

.oms:hover .mavs{
  scale: 1;
}

.mavs h2{
  color: var(--secondary);
  font-size: var(--fs-h3);
}

.mavs p{
  color: var(--secondary-o);
}


/* Eleventh Section */
.note{
  animation-delay: 13500ms;
}

.note > .control{
  
}

.note > .control > .container{
  gap: var(--xx-large);
}

.container > .qas{
  display: inherit;
  position: inherit;
  place-items: inherit;
  gap: var(--x-large);
  block-size: fit-content;
  inline-size: 100%;
}

.qas > .uty{
  display: inherit;
  position: inherit;
  place-items: inherit;
  will-change: opacity, transform;
}

.qas > .uty:nth-of-type(1){
  transform-origin: top center;
  animation: slide var(--fx-cv-long) 1200ms both;
  animation-timeline: view(block);
  animation-range: entry 30% contain 50%;
}

.uty:nth-of-type(1) > .cut{
  display: grid;
  position: relative;
  place-items: center;
  gap: var(--sm);
  inline-size: max-content;
}

.uty:nth-of-type(1) > .cut em{
  color: var(--accent);
  font-size: var(--fs-body);
}

.uty:nth-of-type(1) > .cut h1{
  color: var(--primary);
  font-size: var(--fs-h3);
  text-align: center;
  max-inline-size: 25ch;
}

.qas > .uty:nth-of-type(2){
  transform-origin: bottom center;
  animation: slide var(--fx-cv-long) 3200ms both;
  animation-timeline: view(block);
  animation-range: entry 30% contain 50%;
}

.uty:nth-of-type(2) > .action {
  display: grid;
  position: relative;
  place-items: center;
  background: var(--primary);
  border-radius: calc(2 * var(--md));
  overflow: clip;
  transition: scale var(--fx-smooth), 
              transform var(--fx-smooth);
  will-change: transform;
}

.action:hover {
  transform: translateY(calc(-2 * var(--three)));
}

.action a {
  display: grid;
  position: relative;
  place-items: center;
  color: var(--secondary);
  font-size: var(--fs-body);
  padding: calc(3 * var(--md-border)) calc(var(--three) + var(--md));
  z-index: 2;
}

.action::before {
  content: " ";
  position: absolute;
  background: var(--surface);
  transition: transform var(--fx-smooth);
  transform: scaleY(0); 
  transform-origin: bottom; 
  block-size: 100%;
  inline-size: 100%;
  z-index: 1;
}

.action:hover::before {
  transform: scaleY(1); 
}

.action:active{
  scale: 0.9;
}


/* Twelveth Section */
.concern{
  background: linear-gradient(180deg, var(--secondary) 40%,
              color-mix(in oklch, var(--accent) 60%, var(--accent) 40%));
  animation-delay: 14000ms;
}

.concern > .control{
  
}

.concern > .control > .container{

}

.container > .inquire{
  display: inherit;
  position: inherit;
  place-items: inherit;
  gap: var(--xx-large);
  overflow: clip;
  block-size: fit-content;
  inline-size: 100%;
}

/* Start of Left container */
.inquire > .contact-info{
  display: inherit;
  position: inherit;
  place-items: inherit;
  container-type: inline-size;
  overflow: hidden;
}

.inquire > .contact-info:nth-of-type(1){
  gap: var(--xx-large);
  inline-size: 100%;
}
 
.contact-info:nth-of-type(1) > .info{
  display: grid;
  position: relative;
  place-items: center;
  block-size: 100%;
  inline-size: 100%;
}

.info > .bip {
  position: relative;
  background: var(--primary-l);
  isolation: isolate;
  block-size: 100%;
  inline-size: 100%;
  overflow: hidden;
}

.info > .bip::before {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  animation: travel calc(5 * var(--dur-7)) var(--ease-linear) infinite;
}


@keyframes travel {

  0%, 24.99%{
    background-image: url("https://images.unsplash.com/photo-1627398242454-45a1465c2479?q=80&w=774&auto=format&fit=crop&ixlib=rb-4.1.0");
  }

  25%, 49.99%{
    background-image: url("https://images.unsplash.com/photo-1672309558498-cfcc89afff25?q=80&w=435&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  }

  50%, 74.99%{
    background-image: url("https://images.unsplash.com/photo-1687603921109-46401b201195?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  }

  75%, 100%{
    background-image: url("https://images.unsplash.com/photo-1654375408506-d46c2b43308f?q=80&w=1030&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  }

}


/* Start of Right container */
.inquire > .contact-info:nth-of-type(2){
  block-size: 100%;
  inline-size: 100%; 
}

.contact-info:nth-of-type(2) > form {
  display: grid;
  position: relative;
  place-items: center;
  background: var(--primary);
  border-radius: var(--md);
  padding: var(--x-large);
  block-size: fit-content;
  inline-size: 100%;
}

.contact-info:nth-of-type(2) > form > .imp{
  display: grid;
  position: relative;
  gap: calc(3 * var(--sm));
  block-size: fit-content;
  inline-size: 100%;
}

.imp > .filled{
  display: grid;
  position: relative;
  block-size: 100%;
}

.imp > .filled:not(:nth-of-type(3)){
  inline-size: 100%;
}

.imp > .filled:nth-of-type(1) h2{
  color: var(--secondary);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.imp > .filled:nth-of-type(1){
  place-items: start;
}

.imp > .filled:nth-of-type(2){
  place-items: center;
  gap: calc(var(--xs) + var(--md));
}


.filled:nth-of-type(2) > .assign{
  display: flex;
  position: relative;
  align-items: center;
  block-size: fit-content;
  inline-size: 100%;
}

.filled:nth-of-type(2) > .assign:not(:nth-of-type(3)){
  gap: var(--md-space);
}

.assign > .input-container{
  display: grid;
  position: relative;
  block-size: fit-content;
  inline-size: 100%;
}

.assign:nth-of-type(1) > .input-container{
  
}

.assign:nth-of-type(2) > .input-container{
  
}

.assign:nth-of-type(3) > .input-container{
  
}

.assign > .input-container :is(input, textarea){
  display: grid;
  position: relative;
  box-sizing: border-box;
  color: var(--secondary);
  font-size: var(--fs-small);
  box-shadow: 0 0 0 var(--one) var(--secondary-l);
  border-radius: var(--sm);
  padding: var(--sm);
  transition: box-shadow var(--fx-fast);
  inline-size: 100%;
}

.assign > .input-container :is(input, textarea):focus-visible {
  box-shadow: 0 0 0 var(--two) var(--secondary-o);
}

.assign > .input-container :is(input, textarea)::placeholder {
  color: var(--secondary-l);
  transition: color var(--fx-fast);
  user-select: none;
}

/* Hide placeholder on focus or when input has value */
.assign > .input-container 
:is(input, textarea):is(:focus-visible, :not(:placeholder-shown))::placeholder {
  color: transparent;
}

.assign > .input-container > 
:is(input, textarea):not(:placeholder-shown):user-valid  {
  box-shadow: 0 0 0 var(--two) var(--surface);
}

.assign > .input-container > 
:is(input, textarea):not(:placeholder-shown):user-invalid {
  box-shadow: 0 0 0 var(--two) var(--check);
  animation: incorrect var(--fx-fast) 1000ms 3;
}

@keyframes incorrect {

  0% { 
    transform: translateX(0); 
  }

  25%  { 
    transform: translateX(var(--xs)); 
  } 

  75%  { 
    transform: translateX(calc(-1 * var(--xs))); 
  } 

  100% { 
    transform: translateX(0); 
  }

}

.assign > .input-container 
:is(input, textarea):not(:placeholder-shown):user-invalid ~ small{
  color: var(--check);
}

.assign > .input-container > small{
 color: var(--secondary);
 padding-block-start: var(--xs);
}

.assign > .input-container > input{
  block-size: fit-content;
}

.assign > .input-container > textarea {
  resize: none;
  min-block-size: 10rem; 
  /* 160px */
}

/* Label base style */
.input-container > label {
  display: flex;
  position: absolute;
  top: var(--sm); 
  background: var(--primary);
  color: var(--secondary-o);
  font-size: var(--fs-small);
  gap: var(--three); 
  padding-inline: var(--sm);
  transition: color var(--fx-fast),
              padding var(--fx-short),
              translate var(--fx-short);
  pointer-events: none;
  user-select: none;
}

label > em{
  color: var(--check);
}

/* Floating label for both input and textarea */
.assign > .input-container 
:is(input, textarea):focus-visible ~ label,
.assign > .input-container 
:is(input, textarea):not(:placeholder-shown) ~ label {
  color: var(--secondary);
  translate: calc(var(--sp)) calc(-2 * var(--sm) - var(--one));
}

.imp > .filled:nth-of-type(3){
  inline-size: calc(100% - var(--ultra) * 3);
}

.filled:nth-of-type(3) > .send{
  display: grid;
  position: relative;
  place-items: center;
  background: var(--accent);
  border-radius: var(--sm);
  transition: scale var(--fx-smooth);
  overflow: clip;
  block-size: fit-content;
  inline-size: 100%;
}

.filled:nth-of-type(3) > .send:active{
  scale: 0.9;
}

.filled:nth-of-type(3) > .send::before{
  content: " ";
  position: absolute;
  inset: 0;
  background: var(--surface);
  transition: transform var(--fx-short);
  transform: scaleX(0);
  transform-origin: left;
  block-size: 100%;
  inline-size: 100%;
}

.filled:nth-of-type(3) > .send:hover::before {
  transform: scaleX(1);
}

.send > span{
  display: grid;
  position: relative;
  place-items: center;
  color: var(--primary);
  font-size: var(--fs-small);
  font-weight: 500;
  gap: var(--sm);
  padding-block: calc(3 * var(--md-border));
  transition: color var(--fx-short);
  block-size: 100%;
  inline-size: 100%;
   z-index: 2;
}

.send:hover span{
  color: var(--secondary);
}


/* Thirteenth Section */
.sea{
  background: var(--accent);
  animation-delay: 14500ms;
}

.sea > .wavy {
  animation-timing-function: linear;
  position: relative;
  overflow: hidden;
  contain: layout;
  isolation: isolate;
  block-size: calc(15 * var(--sm));
  inline-size: 100%;
}

.wavy > .wave {
  position: absolute;
  bottom: 0; left: 0;
  background: url("../img/others/wave.webp") repeat-x;
  background-size: 160rem calc(12 * var(--sm)); 
  will-change: transform;
  block-size: calc(12 * var(--sm));
  inline-size: 100%;
}

.wavy > .wave.wave1 {
  bottom: 0;
  opacity: 0.9;
  animation: wave1 30000ms linear infinite;
  z-index: 10;
}

.wavy > .wave.wave2 {
  bottom: 0;
  opacity: 0.5;
  animation: wave2 15000ms linear infinite;
  z-index: 9;
}

.wavy > .wave.wave3 {
  bottom: var(--sp);
  opacity: 0.2;
  animation: wave2 10000ms linear -2000ms infinite;
  z-index: 8;
}

.wavy > .wave.wave4 {
  bottom: var(--md);
  opacity: 0.7;
  animation: wave2 5000ms linear -5000ms infinite;
  z-index: 7;
}

/* Smooth forward wave */
@keyframes wave1 {  /* x, y */

  from  { 
    background-position: 0 0; 
  }

  to { 
    background-position: 160rem 0;
   }

}

/* Smooth backward wave */
@keyframes wave2 {  /* x, y */

  from { 
    background-position: 0 0; 
  }

  to { 
    background-position: -160rem 0; 
  }

}


footer{
  overflow: hidden;
}

footer > .control{
  background: var(--secondary);
  gap: var(--xx-large);
  padding-block: var(--md-space);
  will-change: transform;
  animation: straightU var(--fx-cv-fast) 15000ms both;
}

.control > .copy{
  display: grid;
  position: relative;
  place-items: center;
  block-size: 100%;
  inline-size: 100%;
}

.control > .copy:nth-of-type(1){
  
}

.copy:nth-of-type(1) > .social{
  display: inline-flex;
  position: relative;
  align-items: center;
  gap: var(--md-space);
}

.social a{
  display: grid;
  position: relative;
  place-items: center;
  border-radius: 50%;
  color: var(--primary);
  --showy: var(--primary-l);
  box-shadow: 0 var(--one) 0 var(--showy);
  padding: var(--sm);
  transition: box-shadow var(--fx-short),
              color var(--fx-short),
              transform var(--fx-smooth);
  block-size: 100%;
  inline-size: 100%;
}

.social a:hover{
  color: var(--primary-o);
  --showy: var(--accent);
  --one: var(--two);
  transform: translateY(calc(-2 * var(--three)));
}

.social svg{
  inline-size: calc(var(--xs) + var(--md-space));
}

.control > .copy:nth-of-type(2){
  gap: var(--xs);
}

.control > .copy:nth-of-type(2) span{
  font-size: var(--fs-body);
  font-weight: 500;
}

.control > .copy:nth-of-type(2) small{
  font-style: oblique;
  font-size: var(--fs-small);
}



/* Buttons Animations */
@keyframes jelly {

  0% {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }

}


/*  

PATTERN for Matrix

matrix(a, b, c, d, tx, ty)

a → scaleX

b → skewY

c → skewX

d → scaleY

tx → translateX

ty → translateY

*/


@keyframes matrixPop {

  from {
    opacity: 0;
    transform: matrix(0.7, 0.2, -0.2, 0.8, -50, 50);
    /* scaled down to 80%, skewed, shifted bottom-left */
  }


  to {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
  }

}


/* Other Animations */
@keyframes slide{

  from{
    opacity: 0;
    scale: 0;
  }

  to{
    opacity: 1;
    scale: 1;
  }

}

@keyframes slideUD{

  from{
    transform: scaleY(0);
  }

  to{
    transform: scaleY(1);
  }

}

@keyframes slideLR{

  from{
    transform: scaleX(0);
  }

  to{
    transform: scaleX(1);
  }

}

@keyframes straightU{

  from{
    transform: translateY(-100cqi);
  }

  to{
    transform: translateY(0);
  }

}

@keyframes straightD{

  from{
    transform: translateY(100cqi);
  }

  to{
    transform: translateY(0);
  }

}

@keyframes straightL{

  from{
    transform: translateX(-100cqi);
  }

  to{
    transform: translateX(0);
  }

}

@keyframes straightR{

  from{
    transform: translateX(100cqi);
  }

  to{
    transform: translateX(0);
  }

}



/* Responsive Layout Design */
@media (width <= 75rem) 
       and (prefers-reduced-motion: no-preference) { 
       /* 1200px */

  .lines > .lay{
    flex-direction: column;
  }

  :is(.lay > .dos:nth-of-type(1),
      .lay > .dos:nth-of-type(2),
      .fut > .dex:nth-of-type(1),
      .container > .qir:nth-of-type(1),
      .container > .vant:nth-of-type(1)){
    place-items: center;
  }

}


@media (width <= 54.688rem) 
       and (prefers-reduced-motion: no-preference) { 
       /* max-875px */

  .pat > .cox:is(:nth-of-type(1), :nth-of-type(3)){
    display: none;
    opacity: 0;
  }

  .heading > .ani{
    padding: 0;
  }

  .jil > .bun:nth-of-type(1){
    gap: 0;
  }

  .bun:nth-of-type(1) > .up > 
  .ud-scroll{
    display: none;
    opacity: 0;
  }

}


/* Base query: all phones in this range */
@media (21.25rem <= width <= 30rem) 
       and (30rem <= height <= 61.25rem) 
       and (orientation: portrait) 
       and (prefers-reduced-motion: no-preference)
       and (pointer: coarse) {  /* 340px x 480px x 980px */

  :is(header, main, section, footer) {
    min-inline-size: unset; 
  }

  .levi > .ion{
    padding-inline: var(--md);
  }

}

/* Retina-only override: same devices, but HiDPI */
@media (21.25rem <= width <= 30rem) 
       and (30rem <= height <= 61.25rem) 
       and (orientation: portrait) 
       and (prefers-reduced-motion: no-preference) 
       and (min-resolution: 2dppx) {
  

  img {
    /* Modern image rendering */
    image-rendering: crisp-edges;              
    image-rendering: pixelated;                

    /* High-DPI friendliness */
    image-resolution: from-image 2dppx; 
    /* Better clarity on very high DPI (future-safe) */
    -ms-interpolation-mode: nearest-neighbor; 
  }

}


@media (height <= 30.625rem) 
       and (width <= 62.5rem) 
       and (orientation: landscape)
       and (prefers-reduced-motion: no-preference) {  
       /* 490px x 1000px */

}


@media (height <= 30.625rem) 
       and (width <= 59.375rem) 
       and (orientation: landscape)
       and (prefers-reduced-motion: no-preference) 
       and (min-resolution: 2dppx)
       and (pointer: fine)
       and (hover: hover) {

  img {
    /* Modern image rendering */             
    image-rendering: crisp-edges;               /* Chrome/Edge/Firefox */
    image-rendering: pixelated;                 /* Future keyword for scaling */
    -ms-interpolation-mode: nearest-neighbor;   /* Legacy IE/EdgeHTML (optional) */

    /* Performance */
    content-visibility: auto;                   /* skips offscreen images */
    contain-intrinsic-size: auto 10rem;         /* fallback size for layout stability */
  }
}


/* ==========================================================
   HiDPI / Retina-Grade SVG Rendering (Modernized - 2025)
   ========================================================== */
@media (resolution >= 2dppx),
       (-webkit-min-device-pixel-ratio: 2) { 

  svg path {
    /* === Visual Fidelity === */
    fill-rule: evenodd;                           /* Predictable fill behavior */
    vector-effect: non-scaling-stroke;            /* Keep strokes crisp on scale */
    stroke-width: 1.5;
    paint-order: stroke fill markers;             /* Priority rendering */

    /* === Precision Rendering === */
    shape-rendering: geometricPrecision;          /* Smoother vector curves */
    text-rendering: geometricPrecision;           /* Crisper SVG text */
    image-rendering: crisp-edges;                 /* Sharpen raster hybrids */

    /* === Transform & Animation Stability === */
    transform-box: fill-box;                      /* Scoped transform area */
    transform-origin: center;                     /* Consistent motion pivot */
    will-change: opacity, transform;              /* GPU acceleration hint */
    translate: 0;                                 /* Hardware compositing kickstart */

    /* === Theming & Accessibility === */
    color-scheme: light dark;                     /* Adaptive to OS theme */
    forced-color-adjust: auto;                    /* Respect high-contrast modes */
    contain: layout style;                        /* Isolate for perf and safety */
  }

  /* === Precision for Primitives === */
  svg line,
  svg circle,
  svg rect,
  svg polygon {
    shape-rendering: crispEdges;                  /* Pixel-perfect edges */
    vector-effect: non-scaling-stroke;
  }

  /* === Optional: Smooth Transition for Dynamic SVG States === */
  svg path,
  svg line,
  svg circle {
    transition: fill var(--fx-fast),
                stroke var(--fx-short),
                opacity var(--fx-short),
                transform var(--fx-smooth);
  }

}