/* =====================================================
   ALMAROOF DESIGNS — animations.css
   Page-load, scroll reveals, hover + micro interactions,
   navigation, cursor. Transform/opacity only wherever possible.
   Hidden start states are scoped to .js so the site is
   fully visible if JavaScript is unavailable.
===================================================== */

/* ===============================
   KEYFRAMES
================================ */
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(3); opacity: 0; }
}

@keyframes scrollLine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ===============================
   PAGE LOAD — navigation + hero
================================ */
.header-wrap {
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.8s var(--ease-out),
    top 0.6s var(--ease-out),
    background-color 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.5s ease,
    backdrop-filter 0.5s ease,
    -webkit-backdrop-filter 0.5s ease;
}

.js .header-wrap {
  opacity: 0;
  transform: translateY(-28px);
}

.js.is-loaded .header-wrap {
  opacity: 1;
  transform: none;
}

/* Scroll down → slides up out of view; scroll up → slides back down */
.js.is-loaded .site-header.is-hidden .header-wrap {
  transform: translate3d(0, calc(-100% - var(--nav-top) - 24px), 0);
  box-shadow: none;
}

/* -------------------------------
   HERO INTRO SEQUENCE
   eyebrow → heading lines → paragraph → buttons
   Each step's start time is set inline with --d in index.html.
-------------------------------- */

/* Heading — line mask reveal */
.js .hero__title .line > span {
  transform: translate3d(0, 105%, 0);
  transition: transform 1.1s var(--ease-out);
  transition-delay: var(--d, 0s);
}

.js.is-loaded .hero__title .line > span {
  transform: none;
}

/* Eyebrow, paragraph, buttons, footer — fade + rise */
.js .load-fade {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.9s ease, transform 1s var(--ease-out);
  transition-delay: var(--d, 0s);
}

/* Buttons keep their hover colour transitions (without the intro delay) */
.js .btn.load-fade {
  transition:
    opacity 0.9s ease,
    transform 1s var(--ease-out),
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
  transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s, 0s;
}

.js.is-loaded .load-fade {
  opacity: 1;
  transform: none;
}

/* Portrait — fades up with the heading and gently settles into place */
.js .hero__portrait {
  opacity: 0;
  transform: translate3d(0, 60px, 0) scale(1.05);
  transform-origin: 50% 100%;
  transition:
    opacity 1.2s ease 0.3s,
    transform 1.8s var(--ease-out) 0.3s;
}

.js.is-loaded .hero__portrait {
  opacity: 1;
  transform: none;
}

.js .hero__glow {
  opacity: 0;
  transition: opacity 2s ease 0.6s;
}

.js.is-loaded .hero__glow {
  opacity: 1;
}

/* Hero portrait stays still — no float or scroll parallax */
.project__parallax {
  will-change: transform;
}

/* Status dot pulse */
.dot--pulse {
  position: relative;
}

.dot--pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: pulse 2.4s ease-out infinite;
}

/* Scroll cue */
.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--text);
  animation: scrollLine 2.2s var(--ease-smooth) infinite;
}

/* ===============================
   SCROLL REVEALS (IntersectionObserver adds .is-visible)
================================ */
.js .reveal,
.js .reveal-up,
.js .reveal-left,
.js .reveal-scale {
  opacity: 0;
  transition:
    opacity 0.9s ease,
    transform 1.1s var(--ease-out);
  transition-delay: var(--delay, 0s);
}

.js .reveal { transform: translate3d(0, 40px, 0); }
.js .reveal-up { transform: translate3d(0, 80px, 0); }
.js .reveal-left { transform: translate3d(-40px, 0, 0); }
.js .reveal-scale { transform: scale(0.94); }

.js .reveal.is-visible,
.js .reveal-up.is-visible,
.js .reveal-left.is-visible,
.js .reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

/* Heading line reveal */
.js .reveal-lines .line > span {
  transform: translate3d(0, 105%, 0);
  transition: transform 1.1s var(--ease-out);
}

.js .reveal-lines .line:nth-child(2) > span { transition-delay: 0.08s; }
.js .reveal-lines .line:nth-child(3) > span { transition-delay: 0.16s; }
.js .reveal-lines .line:nth-child(4) > span { transition-delay: 0.24s; }

.js .reveal-lines.is-visible .line > span {
  transform: none;
}

/* Letter reveal — footer wordmark ([data-letters], split by main.js).
   Each word masks its letters; they rise in one by one with a tilt.
   `translate` is kept separate for the hover lift so hover has no delay. */
.footer__word {
  display: inline-block;
  overflow: hidden;
  padding-block: 0.1em 0.04em;
  margin-block: -0.1em -0.04em;
  vertical-align: top;
}

.footer__word .char {
  display: inline-block;
  transform: translate3d(0, 115%, 0) rotate(12deg);
  transform-origin: 0% 100%;
  opacity: 0;
  transition:
    transform 1.1s var(--ease-out) calc(var(--i) * 0.045s),
    opacity 0.6s ease calc(var(--i) * 0.045s),
    translate 0.45s var(--ease-out),
    color 0.3s ease;
}

.footer__wordmark.is-visible .char {
  transform: none;
  opacity: 1;
}

.footer__wordmark.is-visible .char:hover {
  translate: 0 -0.08em;
  color: var(--accent);
}

/* ===============================
   BUTTONS + LINKS
================================ */
/* Arrow travels in the direction it points */
.btn:hover .icon,
.btn:focus-visible .icon,
.link-arrow:hover .icon,
.back-to-top:hover .icon {
  transform: rotate(var(--icon-rotate, 0deg)) translate(3px, -3px);
}

/* Original CTA: arrow turns 45° on hover (Let's Talk + matching buttons) */
.header-cta:hover .icon,
.header-cta:focus-visible .icon,
.btn:hover .icon--turn,
.btn:focus-visible .icon--turn {
  transform: rotate(45deg);
}

/* Underline reveal */
.link-underline::after,
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s var(--ease-out);
}

.link-arrow::after {
  transform: scaleX(1);
  opacity: 0.3;
  transition: transform 0.6s var(--ease-out), opacity 0.3s ease;
}

.link-underline:hover::after,
.link-underline:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.link-arrow:hover::after {
  opacity: 1;
}

/* ===============================
   SERVICES — row hover
================================ */
html:not(.has-custom-cursor) .service:hover::before,
.service.is-hover::before,
.service:focus-visible::before {
  transform: scaleY(1);
}

html:not(.has-custom-cursor) .service:hover .service__num,
.service.is-hover .service__num,
.service:focus-visible .service__num {
  color: var(--accent);
}

html:not(.has-custom-cursor) .service:hover .service__title,
.service.is-hover .service__title,
.service:focus-visible .service__title {
  transform: translateX(14px);
}

html:not(.has-custom-cursor) .service:hover .service__desc,
.service.is-hover .service__desc,
.service:focus-visible .service__desc {
  color: var(--text-body);
}

html:not(.has-custom-cursor) .service:hover .service__arrow,
.service.is-hover .service__arrow,
.service:focus-visible .service__arrow {
  background: var(--accent);
  border-color: var(--accent);
}

html:not(.has-custom-cursor) .service:hover .service__arrow .icon,
.service.is-hover .service__arrow .icon,
.service:focus-visible .service__arrow .icon {
  transform: rotate(45deg);
}

/* ===============================
   PROJECTS
================================ */
/* Stack scale/dim follow scroll directly (set per frame by js/projects.js) */
.project__card {
  will-change: transform;
  transition: border-color 0.5s ease;
}

html:not(.has-custom-cursor) .project__card:hover,
.project__card.is-hover,
.project__card:focus-visible {
  border-color: rgba(255, 255, 255, 0.26);
}

html:not(.has-custom-cursor) .project__card:hover .project__img,
.project__card.is-hover .project__img,
.project__card:focus-visible .project__img {
  transform: scale(1.03);
}

/* CTA behaves like the Let's Talk button: turns red, arrow turns 45° */
html:not(.has-custom-cursor) .project__card:hover .project__cta,
.project__card.is-hover .project__cta,
.project__card:focus-visible .project__cta {
  background: var(--accent);
  border-color: var(--accent);
}

html:not(.has-custom-cursor) .project__card:hover .project__cta .icon,
.project__card.is-hover .project__cta .icon,
.project__card:focus-visible .project__cta .icon {
  transform: rotate(45deg);
}

/* ===============================
   EXPERIENCE
================================ */
.exp__role,
.exp__years {
  transition: transform 0.6s var(--ease-out), color 0.4s ease;
}

html:not(.has-custom-cursor) .exp:hover .exp__role,
.exp.is-hover .exp__role {
  transform: translateX(10px);
}

html:not(.has-custom-cursor) .exp:hover .exp__years,
.exp.is-hover .exp__years {
  color: var(--text);
}

/* ===============================
   MOBILE MENU
================================ */
.menu-open .mobile-menu {
  visibility: visible;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path 0.8s var(--ease-out),
    opacity 0.3s ease,
    visibility 0s;
}

.mobile-menu__list li {
  overflow: hidden;
}

.mobile-menu__link {
  transform: translate3d(0, 100%, 0);
  opacity: 0;
  transition:
    transform 0.5s var(--ease-out),
    opacity 0.3s ease;
}

.menu-open .mobile-menu__link {
  transform: none;
  opacity: 1;
  transition:
    transform 0.9s var(--ease-out),
    opacity 0.6s ease;
  transition-delay: calc(0.18s + var(--i, 0) * 0.06s);
}

.mobile-menu__footer {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.menu-open .mobile-menu__footer {
  opacity: 1;
  transition: opacity 0.8s ease 0.55s;
}

.mobile-menu__link:hover .mobile-menu__num {
  color: var(--accent);
}

/* Toggle → close */
.menu-open .nav__toggle-lines span:first-child {
  top: calc(50% - 0.75px);
  transform: rotate(45deg);
}

.menu-open .nav__toggle-lines span:last-child {
  top: calc(50% - 0.75px);
  transform: rotate(-45deg);
}

/* ===============================
   CURSOR STATES
================================ */
.cursor__circle {
  transition:
    width 0.45s var(--ease-out),
    height 0.45s var(--ease-out),
    background-color 0.3s ease;
}

.cursor__label {
  transition: opacity 0.25s ease;
}

.cursor.is-link .cursor__circle {
  width: 48px;
  height: 48px;
}

.cursor.is-text .cursor__circle {
  width: 8px;
  height: 8px;
}

.cursor.is-view .cursor__circle {
  width: 92px;
  height: 92px;
  background: var(--text);
}

.cursor.is-view .cursor__label {
  opacity: 1;
  transition-delay: 0.1s;
}

.cursor.is-down .cursor__circle {
  width: 18px;
  height: 18px;
}

/* ===============================
   REDUCED MOTION
================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .js .header-wrap,
  .js .load-fade,
  .js .hero__glow,
  .js .reveal,
  .js .reveal-up,
  .js .reveal-left,
  .js .reveal-scale {
    opacity: 1;
    transform: none;
  }

  .js .hero__title .line > span,
  .js .reveal-lines .line > span {
    transform: none;
  }

  .js .hero__portrait,
  .footer__word .char {
    opacity: 1;
    transform: none;
  }

  .dot--pulse::after,
  .hero__scroll-line::after {
    animation: none;
  }
}