/* =========================================================================
   SPACE PALETTE — PREMIUM SCROLL MOTION LAYER
   -------------------------------------------------------------------------
   Purpose : Adds cinematic, minimal scroll motion on top of the existing
             design system. Does NOT change color, spacing, typography,
             or layout — only opacity/transform timing and easing.
   Load    : Include AFTER style.css so these rules can refine (not fight)
             the base rules that already exist (e.g. header transition).
   Safe    : Every rule here is additive. Nothing here overrides
             background, color, font, padding, or margin values.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Shared easing tokens
   Premium, cinematic curve used everywhere: slow settle, no overshoot,
   no bounce. This is the single source of truth for motion "feel".
   ------------------------------------------------------------------------- */
:root{
  --ease-premium: cubic-bezier(.22,.61,.36,1);
  --reveal-duration: .95s;
  --reveal-duration-fast: .75s;
  --reveal-duration-slow: 1.15s;
}

/* -------------------------------------------------------------------------
   1. Header — smoother opacity / blur transition, no flicker.
   We only refine the TIMING FUNCTION + add a dedicated backdrop-filter
   transition so the blur eases in independently and doesn't snap.
   Colors, height, padding, background values are untouched.
   ------------------------------------------------------------------------- */
header{
  transition:
    opacity .9s var(--ease-premium),
    transform .9s var(--ease-premium),
    backdrop-filter .7s var(--ease-premium),
    -webkit-backdrop-filter .7s var(--ease-premium);
  will-change: opacity, transform;
  /* translateZ(0) forces its own compositor layer so opacity/transform
     changes never trigger a repaint of content behind it */
  transform: translateZ(0) translateY(-30px);
}
header.show{
  transform: translateZ(0) translateY(0);
}

/* -------------------------------------------------------------------------
   2. Scroll reveal system (JS-driven via motion.js)
   Elements are tagged with .reveal-el (+ a modifier class) by motion.js.
   Wrapped in prefers-reduced-motion so users who opt out simply see the
   final state immediately, with zero motion and zero JS branching needed
   in the render path.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){

  body.projects-page .reveal-el{
    will-change:auto;
}

.reveal-el{
    will-change:opacity,transform;
}

  .reveal-el.is-visible{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

.reveal-heading{
    opacity:0;
    transform:translate3d(0,36px,0);

    transition:
        opacity var(--reveal-duration-slow) var(--ease-premium),
        transform var(--reveal-duration-slow) var(--ease-premium);
}

.reveal-heading.is-visible{
    opacity:1;
    transform:translate3d(0,0,0);
}

  .hero-content.reveal-el{
    opacity:0;
    transform:translate3d(0,60px,0);
    transition:
        opacity 1.2s var(--ease-premium),
        transform 1.2s var(--ease-premium);
}

.hero-content.reveal-el.is-visible{
    opacity:1;
    transform:translate3d(0,0,0);
}

.btn.reveal-el{
    transition-delay:.20s;
}

  /* Paragraphs — lighter travel, arrives just after its heading */
  .reveal-para{
    transform: translate3d(0, 18px, 0);
    transition-duration: var(--reveal-duration-fast);
    transition-delay: calc(var(--reveal-delay, 0s) + .08s);
  }
  .reveal-para.is-visible{
    transform: translate3d(0, 0, 0);
  }

  /* Cards — soft reveal with a whisper of scale, never a "pop" */
  .reveal-card{
    transform: translate3d(0, 26px, 0) scale(.98);
    transition-duration: var(--reveal-duration);
  }
  .reveal-card.is-visible{
    transform: translate3d(0, 0, 0) scale(1);
  }

  /* Image wrappers — gentle scale-down-into-place as they enter view.
     Applied to the WRAPPER (.thumb), never the <img> itself, so it never
     collides with the image's own :hover scale transform. */
  .reveal-thumb{
    opacity: 0;
    transform: translateZ(0) scale(1.06);
    transition:
      opacity var(--reveal-duration) var(--ease-premium),
      transform 1.15s var(--ease-premium);
  }
  .reveal-thumb.is-visible{
    opacity: 1;
    transform: translateZ(0) scale(1);
  }
}

/* -------------------------------------------------------------------------
   3. Image hover polish
   Upgrades the existing hover-scale transitions (already present in the
   site's own CSS) to the same premium easing curve, GPU-accelerated.
   Only touches transition timing — not size, position, or color.
   ------------------------------------------------------------------------- */
.thumb img,
.card img,
.gallery-img{
  transition: transform .6s var(--ease-premium);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* -------------------------------------------------------------------------
   4. Reduce paint cost while idle
   will-change is expensive if left on forever, so we only keep it while
   an element is still animating; motion.js strips it via 'transitionend'.
   This selector simply gives JS something predictable to target.
   ------------------------------------------------------------------------- */
.reveal-el{
  will-change: opacity, transform;
}

/* -------------------------------------------------------------------------
   5. Respect reduced motion fully
   No custom smooth-scroll, no reveal transforms — everything is visible
   in its natural resting state immediately.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .reveal-el, .reveal-heading, .reveal-para, .reveal-card, .reveal-thumb{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  header{
    transition: opacity .3s ease, transform .3s ease !important;
  }
}

/* logo section */
.trust-track-wrap.reveal-el{
    opacity:0;
    transform:translateY(70px);

    transition:
        opacity 3.8s cubic-bezier(.16,1,.3,1),
        transform 3.8s cubic-bezier(.16,1,.3,1);
}

.trust-track-wrap.reveal-el.is-visible{
    opacity:1;
    transform:translateY(0);
}

.trust-logo.reveal-el{
    opacity:0;
    transform:translateY(50px) scale(.94);

    transition:
        opacity 1.6s cubic-bezier(.22,.61,.36,1),
        transform 1.6s cubic-bezier(.22,.61,.36,1);
}

.trust-logo.reveal-el.is-visible{
    opacity:1;
    transform:translateY(0) scale(1);
}

/* ========================================= 
   ABOUT PAGE - SCROLL REVEAL
=========================================== */

/* body.about-page{
    overflow:auto;
} */

/* Header visible immediately */
/* body.about-page header{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
} */


/* =========================================
   ABOUT HERO HEADING
========================================= */

body.about-page .about-hero h1{
    opacity:0;
    transform:translateY(55px);

    transition:
        opacity 1.3s cubic-bezier(.16,1,.3,1),
        transform 1.3s cubic-bezier(.16,1,.3,1);
}

body.about-page.page-loaded .about-hero h1{
    opacity:1;
    transform:translateY(0);
}


/* =========================================
   ABOUT HERO TAGLINE
========================================= */

body.about-page .about-hero .tagline{
    opacity:0;
    transform:translateY(40px);

    transition:
        opacity 1.2s cubic-bezier(.16,1,.3,1),
        transform 1.2s cubic-bezier(.16,1,.3,1);

    transition-delay:.20s;
}

body.about-page.page-loaded .about-hero .tagline{
    opacity:1;
    transform:translateY(0);
}


/* =========================================
   ABOUT HERO DIVIDER
========================================= */

body.about-page .about-hero .divider{
    opacity:0;
    transform:scaleX(.75);

    transition:
        opacity 1s cubic-bezier(.16,1,.3,1),
        transform 1s cubic-bezier(.16,1,.3,1);

    transition-delay:.35s;
}

body.about-page.page-loaded .about-hero .divider{
    opacity:1;
    transform:scaleX(1);
}



/* =========================================
   STORY PARAGRAPHS
========================================= */

body.about-page .story p{
    opacity:0;
    transform:translateY(35px);

    transition:
        opacity 1.15s cubic-bezier(.16,1,.3,1),
        transform 1.15s cubic-bezier(.16,1,.3,1);
}

body.about-page .story p.is-visible{
    opacity:1;
    transform:translateY(0);
}



/* Logo animates on page load */
body.about-page .logo{
    opacity:0;
    transform:translate3d(0,110vh,0);

    transition:
        opacity 1.5s cubic-bezier(.16,1,.3,1),
        transform 1.5s cubic-bezier(.16,1,.3,1);

    z-index:9999;
}

/* Scroll reveal for about sections */
body.about-page .about-hero.reveal-el{
    opacity:0;
    transform:translate3d(0,50px,0);
    transition: opacity 1.2s var(--ease-premium), transform 1.2s var(--ease-premium);
}

body.about-page .about-hero.reveal-el.is-visible{
    opacity:1;
    transform:translate3d(0,0,0);
}

body.about-page .founder-photo.reveal-el{
    opacity:0;
    transform:translate3d(-80px,0,0);
    transition: opacity 1.2s var(--ease-premium), transform 1.2s var(--ease-premium);
}

body.about-page .founder-photo.reveal-el.is-visible{
    opacity:1;
    transform:translate3d(0,0,0);
}

body.about-page .founders-copy.reveal-el{
    opacity:0;
    transform:translate3d(80px,0,0);
    transition: opacity 1.2s var(--ease-premium), transform 1.2s var(--ease-premium);
}

body.about-page .founders-copy.reveal-el.is-visible{
    opacity:1;
    transform:translate3d(0,0,0);
}

/* Team copy animation */
body.about-page .team-copy.reveal-el{
    opacity:0;
    transform:translate3d(0,40px,0);
    transition: opacity 1.2s var(--ease-premium), transform 1.2s var(--ease-premium);
}

body.about-page .team-copy.reveal-el.is-visible{
    opacity:1;
    transform:translate3d(0,0,0);
}

/* Services section animation */
body.about-page .services.reveal-el{
    opacity:0;
    transform:translate3d(0,40px,0);
    transition: opacity 1.2s var(--ease-premium), transform 1.2s var(--ease-premium);
}

body.about-page .services.reveal-el.is-visible{
    opacity:1;
    transform:translate3d(0,0,0);
}

/* Service cards within about page */
body.about-page .service-card.reveal-el{
    opacity:0;
    transform:translate3d(0,26px,0) scale(.98);
    transition: opacity var(--reveal-duration) var(--ease-premium), transform var(--reveal-duration) var(--ease-premium);
}

body.about-page .service-card.reveal-el.is-visible{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
}

/* ========================================= 
   PROJECTS PAGE - PAGE LOAD
========================================= */

body.projects-page{
    overflow:hidden;
}

body.projects-page.page-loaded{
    overflow:auto;
}

/* Projects page logo animation */
body.projects-page .logo{
    opacity:0;
    transform:translate3d(0,110vh,0);

    transition:
        opacity 1.5s cubic-bezier(.16,1,.3,1),
        transform 1.5s cubic-bezier(.16,1,.3,1);

    z-index:9999;
}

body.projects-page.page-loaded .logo{
    opacity:1;
    transform:translate3d(0,0,0);
}

/* team pic animation */
.team-photo.reveal-el{
    opacity:0;
    transform:translateY(55px) scale(.96);

    transition:
        opacity 1.2s cubic-bezier(.16,1,.3,1),
        transform 1.2s cubic-bezier(.16,1,.3,1);

    transition-delay:var(--reveal-delay,0s);
}

.team-photo.reveal-el.is-visible{
    opacity:1;
    transform:translateY(0) scale(1);
}

/* Project image */

body.projects-page .project-image.reveal-el{
    opacity:0;
    transform:translateY(60px) scale(.96);

    transition:
        opacity 1s cubic-bezier(.16,1,.3,1),
        transform 1s cubic-bezier(.16,1,.3,1);

    will-change:opacity,transform;
}

body.projects-page .project-image.reveal-el.is-visible{
    opacity:1;
    transform:translateY(0) scale(1);
}


/* Project info */

body.projects-page .project-info.reveal-el{
    opacity:0;
    transform:translateY(28px);

    transition:
        opacity .9s cubic-bezier(.16,1,.3,1),
        transform .9s cubic-bezier(.16,1,.3,1);

    transition-delay:.12s;
}

body.projects-page .project-info.reveal-el.is-visible{
    opacity:1;
    transform:translateY(0);
}

/* Contact page setup */

/* body.contact-page{
    overflow:hidden;
}

body.contact-page.page-loaded{
    overflow:auto;
} */

/* Contact page hero heading animation */

body.contact-page .contact-hero h1{
    opacity:0;
    transform:translateY(55px);

    transition:
        opacity 1.3s cubic-bezier(.16,1,.3,1),
        transform 1.3s cubic-bezier(.16,1,.3,1);
}

body.contact-page.page-loaded .contact-hero h1{
    opacity:1;
    transform:translateY(0);
}

/* Contact page logo animation */
body.contact-page .logo{
    opacity:0;
    transform:translate3d(0,110vh,0);

    transition:
        opacity 1.5s cubic-bezier(.16,1,.3,1),
        transform 1.5s cubic-bezier(.16,1,.3,1);

    z-index:9999;
}

body.contact-page.page-loaded .logo{
    opacity:1;
    transform:translate3d(0,0,0);
}

/* Contact page left/right reveal */

body.contact-page .studio-info{
    opacity:0;
    transform:translateX(-250px);
    transition:1.1s cubic-bezier(.22,1,.36,1);
}

body.contact-page .contact-form{
    opacity:0;
    transform:translateX(250px);
    transition:1.1s cubic-bezier(.22,1,.36,1);
}

body.contact-page.page-loaded .studio-info{
    opacity:1;
    transform:translateX(0);
}

body.contact-page.page-loaded .contact-form{
    opacity:1;
    transform:translateX(0);
}

/* Contact page hero paragraph animation */
body.contact-page .contact-hero p{
    opacity:0;
    transform:translateY(40px);

    transition:
        opacity 1.2s cubic-bezier(.16,1,.3,1),
        transform 1.2s cubic-bezier(.16,1,.3,1);

    transition-delay:.3s;
}

body.contact-page.page-loaded .contact-hero p{
    opacity:1;
    transform:translateY(0);
}

/* =========================================
   PROJECTS INTRO
========================================= */

body.projects-page .projects-intro{
    opacity:0;
    transform:translateY(40px);

    transition:
        opacity 1.15s cubic-bezier(.16,1,.3,1),
        transform 1.15s cubic-bezier(.16,1,.3,1);
}

body.projects-page.page-loaded .projects-intro{
    opacity:1;
    transform:translateY(0);
}

/* Grid Split Animation */

body.projects-page .card{
    opacity:0;
    transition:
        opacity 1.1s cubic-bezier(.16,1,.3,1),
        transform 1.1s cubic-bezier(.16,1,.3,1);
}

/* Left column */
body.projects-page .card:nth-child(3n+1){
    transform:translateX(-90px);
}

/* Middle column */
body.projects-page .card:nth-child(3n+2){
    transform:translateY(60px);
}

/* Right column */
body.projects-page .card:nth-child(3n){
    transform:translateX(90px);
}

body.projects-page.page-loaded .card{
    opacity:1;
    transform:translate(0);
}