/* Ellen Tewkesbury — motion layer (v2)
   Sits on top of the original theme CSS. Everything degrades to the
   original static layout when JS is off or reduced motion is requested. */

:root {
  --et-teal: #32849d;
  --et-cream: #faf0ca;
  --et-oxford: #001242;
  --et-blue: #033399;
  --et-tomato: #f95738;
  --et-ease: cubic-bezier(.22, 1, .36, 1);
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Navigation: fixed, hides on scroll down, returns on scroll up ---------- */
.js-motion .top-nav {
  position: fixed;
  transition: transform .6s var(--et-ease), background-color .4s ease, padding .4s var(--et-ease);
  will-change: transform;
}
.js-motion .top-nav.is-solid { padding-top: 22px; padding-bottom: 22px; background: var(--et-oxford); }
.js-motion .top-nav.dark-nav.is-solid { background: var(--et-cream); }
.js-motion .top-nav.is-hidden { transform: translateY(-110%); }

/* Underline that grows from the left on nav links */
.top-nav ul li a:not(.button) { position: relative; }
.top-nav ul li a:not(.button)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--et-ease);
}
.top-nav ul li a:not(.button):hover::after,
.top-nav ul li a:not(.button):focus-visible::after,
.top-nav ul li a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.top-nav ul li a:hover { color: inherit !important; }

/* Ghost button: colour sweeps in from below */
.button--ghost {
  position: relative; overflow: hidden; display: inline-block; isolation: isolate;
  transition: color .45s var(--et-ease), border-color .45s var(--et-ease);
}
.button--ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: #fff;
  transform: translateY(101%); transition: transform .5s var(--et-ease);
}
.button--ghost:hover, .button--ghost:focus-visible { color: var(--et-blue) !important; }
.button--ghost:hover::before, .button--ghost:focus-visible::before { transform: translateY(0); }
.dark-nav .button--ghost::before { background: var(--et-oxford); }
.dark-nav .button--ghost:hover { color: #fff !important; }

/* ---------- Intro statements ---------- */
.intro-1 .line-mask { overflow: hidden; padding-bottom: .35em; margin-bottom: -.35em; }
.intro-1 .word { display: inline-block; }
.intro-1 strong { position: relative; white-space: nowrap; }
.et-scribble {
  position: absolute; left: -4%; bottom: -.22em; width: 108%; height: .42em;
  overflow: visible; pointer-events: none;
}
.et-scribble path { fill: none; stroke: var(--et-cream); stroke-width: 3; stroke-linecap: round; }

.et-scroll-cue {
  position: absolute; left: 50%; bottom: 36px; width: 1px; height: 56px;
  background: rgba(255,255,255,.25); overflow: hidden; transform: translateX(-50%);
}
.et-scroll-cue::after {
  content: ""; position: absolute; inset: 0; background: #fff;
  animation: et-cue 2.2s var(--et-ease) infinite;
}
@keyframes et-cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
.home .background-black:first-child { position: relative; }

/* ---------- Logos ---------- */
.selected-work .logo { transition: transform .5s var(--et-ease); }
.selected-work .logo:hover { transform: translateY(-4px) scale(1.04); }

/* ---------- Services ---------- */
#services .col-md-6.mb-30 { position: relative; padding-top: 18px; }
#services .col-md-6.mb-30::before {
  content: ""; position: absolute; top: 0; left: 15px; right: 15px; height: 1px;
  background: rgba(250,240,202,.35); transform-origin: left; transform: scaleX(var(--rule, 1));
}

/* ---------- Testimonials ---------- */
#testimonials .slick-dots li button::before { transition: opacity .3s ease, transform .3s var(--et-ease); }
#testimonials .slick-dots li.slick-active button::before { transform: scale(1.4); }

/* ---------- Contact: "Let's ___" written like someone editing a draft ---------- */
.et-edit { position: relative; display: inline-block; margin-left: 0; color: var(--et-blue); white-space: nowrap; }
.et-edit__text { position: relative; }
.et-edit__text.is-selected { background: rgba(3, 51, 153, .16); }
.et-caret {
  display: inline-block; width: 2px; height: .9em; margin-left: 3px; vertical-align: -.08em;
  background: var(--et-blue); animation: et-blink 1s steps(1) infinite;
}
.et-edit.is-typing .et-caret { animation: none; }
@keyframes et-blink { 50% { opacity: 0; } }

#contact a[href^="mailto"] {
  display: inline-block; position: relative; font-family: ivypresto-display, serif;
  font-size: clamp(26px, 4vw, 48px); font-weight: 300; color: var(--et-blue); text-decoration: none;
  margin-top: 10px; will-change: transform;
}
#contact a[href^="mailto"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: currentColor;
  transform-origin: left; transform: scaleX(.12); transition: transform .6s var(--et-ease);
}
#contact a[href^="mailto"]:hover::after, #contact a[href^="mailto"]:focus-visible::after { transform: scaleX(1); }

/* ---------- Work page ---------- */
.work-sample__image { overflow: hidden; }
.work-sample__image img { will-change: transform; }
.work-sample__content a, .work-sample__testimonial a {
  text-decoration: none; color: var(--et-blue);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .45s var(--et-ease), color .3s ease;
}
.work-sample__content a:hover, .work-sample__content a:focus-visible {
  background-size: 100% 100%; color: #fff;
}
.simple-banner .title .char { display: inline-block; }

/* Focus visibility */
a:focus-visible, button:focus-visible { outline: 2px solid var(--et-tomato); outline-offset: 4px; }

/* Pre-hide only when JS motion is running (prevents a flash before GSAP sets states) */
.js-motion.is-loading .top-nav,
.js-motion.is-loading .home .intro-1,
.js-motion.is-loading .simple-banner .title { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .et-scroll-cue::after, .et-caret { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}