/* ============================================================
   AVENTRA INTERIORS — MOTION LAYER
   Scroll reveals, image reveals, hover micro-interactions,
   preloader, lightbox, form-field polish.
   Everything here is progressive enhancement:
   - nothing is hidden unless JS is running (html.js) AND the
     visitor hasn't asked for reduced motion
   - motion.js only hides elements that start BELOW the fold, so
     there is never a flash of hidden content at the top of a page
   ============================================================ */

/* ---------------------------------------------------- SCROLL REVEAL -- */
html.js .reveal {
  opacity: 0; transform: translateY(34px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
html.js .reveal.is-visible { opacity: 1; transform: none; }
html.js .reveal--zoom { transform: scale(0.94) translateY(20px); }
html.js .reveal--left { transform: translateX(-34px); }
html.js .reveal--right { transform: translateX(34px); }

/* Image "curtain" reveal: the frame wipes open while the photo settles in */
html.js .reveal--media {
  opacity: 1; transform: none;
  clip-path: inset(0 0 99.9% 0); /* not 100%: a fully clipped element is never reported as visible */
  transition: clip-path 1.25s cubic-bezier(0.77, 0, 0.18, 1);
  transition-delay: var(--reveal-delay, 0s);
}
html.js .reveal--media.is-visible { clip-path: inset(0 0 0 0); }
html.js .reveal:not(.is-visible) img { transform: scale(1.14); }

/* ------------------------------------------------ HOVER INTERACTIONS -- */
.project-card-media, .media-placeholder { isolation: isolate; }
.project-card:hover .project-card-media img,
.idea-tile:hover .media-placeholder img,
.sub-service-media:hover .media-placeholder img,
.gallery-grid .media-placeholder:hover img,
.idea-grid .media-placeholder:hover img { transform: scale(1.07); }

/* "View project" chip that rises on card hover */
.project-card-media::before {
  content: "View project  \2192"; position: absolute; left: 50%; bottom: 1rem; z-index: 3;
  transform: translate(-50%, 14px); opacity: 0; pointer-events: none;
  background: rgba(247, 243, 238, 0.95); color: var(--ink);
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  padding: 0.7em 1.3em; border-radius: 999px; white-space: nowrap;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.project-card:hover .project-card-media::before,
.project-card:focus-visible .project-card-media::before { opacity: 1; transform: translate(-50%, 0); }

.service-tile { position: relative; transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.5s var(--ease), background-color 0.4s var(--ease); }
.service-tile:hover { transform: translateY(-6px); background: #fff; }
.service-tile-media svg { transition: transform 0.6s var(--ease); }
.service-tile:hover .service-tile-media svg { transform: scale(1.1) rotate(-3deg); }
.service-tile-link svg, .text-link svg { transition: transform 0.35s var(--ease); transform: rotate(-90deg); }
.service-tile:hover .service-tile-link svg, .text-link:hover svg { transform: rotate(-90deg) translateY(4px); }

.why-card { transition: background-color 0.4s var(--ease); }
.why-card:hover { background: #fff; }
.why-card h3 { transition: color 0.3s var(--ease); }
.why-card:hover h3 { color: var(--aventurine); }

.testimonial-card { transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.testimonial-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.team-card { transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.team-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }

.process-step { transition: padding-left 0.5s var(--ease), background-color 0.4s var(--ease); }
.process-step:hover { padding-left: 0.8rem; }
.process-step-number { transition: color 0.4s var(--ease), transform 0.5s var(--ease); }
.process-step:hover .process-step-number { color: var(--aventurine); transform: translateX(2px); }

.calc-preview-bar span { transform-origin: left; }
html.js .calc-preview-card.reveal:not(.is-visible) .calc-preview-bar span { transform: scaleX(0); }
.calc-preview-bar span { transition: transform 1.6s var(--ease) 0.4s; }

.video-play-btn { position: relative; transition: transform 0.4s var(--ease), background-color 0.3s ease; }
.video-play-btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--gold-fleck); animation: play-ring 2.4s ease-out infinite; }
.video-facade:hover .video-play-btn { transform: scale(1.1); background: var(--gold-fleck-light); }
@keyframes play-ring { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.7); opacity: 0; } }

.faq-item summary { transition: color 0.3s var(--ease); }
.faq-item summary:hover { color: var(--aventurine); }
.faq-icon svg { transition: transform 0.4s var(--ease); }

/* -------------------------------------------------------------- FORMS -- */
.form-field input, .form-field select, .form-field textarea {
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
}
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--gold-fleck); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { background: #fff; }
/* placeholder text eases out when you start interacting */
.form-field input::placeholder, .form-field textarea::placeholder {
  color: #9A9186; opacity: 1; transition: opacity 0.4s var(--ease), color 0.4s var(--ease), letter-spacing 0.4s var(--ease);
}
.form-field input:focus::placeholder, .form-field textarea:focus::placeholder { opacity: 0.35; letter-spacing: 0.06em; }
.form-field label { transition: color 0.3s var(--ease); }
.form-field:focus-within label { color: var(--aventurine); }
.form-error:not(:empty) { animation: form-shake 0.4s var(--ease); }
@keyframes form-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* --------------------------------------------------- SCROLL PROGRESS -- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 600; pointer-events: none;
  background: linear-gradient(90deg, var(--aventurine), var(--gold-fleck-light));
  transform: scaleX(0); transform-origin: left;
}

/* ---------------------------------------------------------- PRELOADER -- */
.preloader { display: none; }
html.js:not(.intro-seen) .preloader {
  display: flex; position: fixed; inset: 0; z-index: 10000; background: var(--ink);
  flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem;
  animation: preloader-lift 0.85s cubic-bezier(0.77, 0, 0.18, 1) 1.55s forwards;
}
.preloader-logo { width: min(340px, 70vw); height: auto; opacity: 0; transform: translateY(14px) scale(0.98); animation: preloader-logo 0.9s var(--ease) 0.15s forwards; }
.preloader-line { display: block; width: min(220px, 50vw); height: 1px; background: var(--gold-fleck); transform: scaleX(0); transform-origin: left; animation: preloader-line 1.1s var(--ease) 0.5s forwards; }
@keyframes preloader-logo { to { opacity: 1; transform: none; } }
@keyframes preloader-line { to { transform: scaleX(1); } }
@keyframes preloader-lift { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); visibility: hidden; } }
/* hero copy waits for the curtain on a first visit */
html.js:not(.intro-seen) .hero-eyebrow { animation-delay: 1.85s; }
html.js:not(.intro-seen) .hero-headline { animation-delay: 1.95s; }
html.js:not(.intro-seen) .hero-sub { animation-delay: 2.05s; }
html.js:not(.intro-seen) .hero-actions { animation-delay: 2.15s; }
html.js:not(.intro-seen) .hero-trust { animation-delay: 2.25s; }

/* ----------------------------------------------------------- LIGHTBOX -- */
.lightbox {
  position: fixed; inset: 0; z-index: 9000; background: rgba(20, 18, 16, 0.94);
  display: flex; align-items: center; justify-content: center; padding: 2rem;
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(1200px, 100%); max-height: 84vh; object-fit: contain; border-radius: var(--radius-s); transform: scale(0.96); transition: transform 0.5s var(--ease); }
.lightbox.is-open img { transform: scale(1); }
.lightbox-btn {
  position: absolute; background: none; border: 1px solid rgba(243, 234, 224, 0.3); color: var(--text-on-dark);
  width: 46px; height: 46px; border-radius: 50%; font-size: 1.2rem; display: flex; align-items: center; justify-content: center;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lightbox-btn:hover { background: rgba(243, 234, 224, 0.12); border-color: var(--gold-fleck-light); }
.lightbox-close { top: 1.2rem; right: 1.2rem; }
.lightbox-prev { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1.2rem; top: 50%; transform: translateY(-50%); }
.lightbox-count { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); color: var(--text-on-dark-muted); font-size: 0.72rem; letter-spacing: 0.2em; }
.gallery-grid .photo-slot.is-loaded, .idea-grid .photo-slot.is-loaded { cursor: zoom-in; }

/* ------------------------------------------------ HEADER ENTRANCE ------ */
html.js .site-header { animation: header-in 0.8s var(--ease) both; }
@keyframes header-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------- LANDING LOGO BAR -- */
.landing-brand { background: var(--stone); padding: 1.6rem 1.5rem 0; display: flex; justify-content: center; }
.landing-brand img { height: 56px; width: auto; }

/* --------------------------------------------------- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .reveal--media { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  html.js .reveal:not(.is-visible) img { transform: none; }
  .wa-float::before, .video-play-btn::before, .photo-slot:not(.is-loaded)::after { animation: none; }
  .preloader { display: none !important; }
  html.js .site-header { animation: none; }
  .scroll-progress { display: none; }
}