/**
 * Thalen animations, ported from the Thalen theme (assets/css/main.css).
 *
 * Every rule hangs off a thalen-* class added in Elementor under
 * Advanced > Layout > CSS Classes. Size, spacing, colors, borders, and
 * position stay in Elementor. Colors here read the Elementor global colors
 * first and fall back to the Thalen hex values.
 */

:root {
  --thalen-indigo: var(--e-global-color-primary, #43426A);
  --thalen-teal: var(--e-global-color-secondary, #1A7A6A);
  --thalen-botanical: var(--e-global-color-thalenbotanical, #3A6587);
  --thalen-orange: var(--e-global-color-accent, #E0803C);
  --thalen-coral: var(--e-global-color-thalencoral, #D4665A);
  --thalen-oat: var(--e-global-color-thalenoat, #DDD5C8);
  --thalen-cloud: var(--e-global-color-thalencloud, #FAF8F4);
  --thalen-ease: cubic-bezier(.22, .61, .36, 1);
}

html { scroll-behavior: smooth; }

/* Scroll reveal: fades up when scrolled into view. */
.thalen-reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s ease, transform 0.9s ease; }
.thalen-reveal.thalen-reveal-left { transform: translateX(-60px); }
.thalen-reveal.thalen-reveal-right { transform: translateX(60px); }
.thalen-reveal.is-visible { opacity: 1; transform: translate(0, 0); }
.thalen-delay-1 { transition-delay: 0.15s; }
.thalen-delay-2 { transition-delay: 0.3s; }
.thalen-delay-3 { transition-delay: 0.45s; }

/* Intro: fades up once on page load (hero headline, subtext, scroll cue). */
@keyframes thalenFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.thalen-intro, .thalen-intro-2, .thalen-intro-3 { opacity: 0; animation: thalenFadeUp 1.2s ease 0.3s forwards; }
.thalen-intro-2 { animation-delay: 0.7s; }
.thalen-intro-3 { animation-duration: 1s; animation-delay: 1.5s; }

/* Hero slideshow. Slides crossfade on top of each other, so they are stacked
   here; the slide images and the overlay are set on each slide in Elementor. */
.thalen-slideshow .thalen-slide { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 1.2s ease-in-out; }
.thalen-slideshow .thalen-slide.is-active,
.thalen-slideshow:not(.is-ready) .thalen-slide:first-child { opacity: 1; }
.thalen-slider-dots { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; gap: 0.75rem; }
.thalen-slider-dots button { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--thalen-oat); background: transparent; cursor: pointer; padding: 0; transition: background 0.3s, transform 0.3s; }
.thalen-slider-dots button.is-active { background: var(--thalen-orange); border-color: var(--thalen-orange); transform: scale(1.2); }
.thalen-slider-dots button:focus-visible { outline: 2px solid var(--thalen-orange); outline-offset: 3px; }

/* Scroll cue: vertical label with a pulsing line, hidden after the first scroll. */
@keyframes thalenPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.thalen-scroll-cue { writing-mode: vertical-rl; letter-spacing: 0.15em; transition: opacity 0.4s; }
.thalen-scroll-cue::after { content: ""; display: block; width: 1px; height: 40px; background: currentColor; margin: 0.75rem auto 0; animation: thalenPulse 2s ease infinite; }
.thalen-scroll-cue.is-hidden { opacity: 0 !important; }

/* Brand gradient: the four-color accent bar under the hero. Elementor's own
   gradient control only takes two colors. */
.thalen-brand-gradient { background: linear-gradient(90deg, var(--thalen-teal), var(--thalen-botanical), var(--thalen-coral), var(--thalen-orange)); }

/* Philosophy panels: the background sharpens and the overlay lifts as each
   panel scrolls into view. */
.thalen-panel .thalen-panel-bg { filter: blur(2px); transform: scale(1.05); transition: filter 1.2s ease, transform 1.2s ease; }
.thalen-panel.is-clearing .thalen-panel-bg { filter: blur(0); transform: scale(1); }
.thalen-panel .thalen-panel-overlay { opacity: 0.94; transition: opacity 1.5s ease; }
.thalen-panel.is-clearing .thalen-panel-overlay { opacity: 0.78; }

/* Progress track: created by the script for a thalen-passage container. */
.thalen-progress-track { position: fixed; left: 0; top: 0; bottom: 0; width: 4px; background: rgba(67, 66, 106, 0.15); z-index: 50; opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.thalen-progress-track.is-active { opacity: 1; }
.thalen-progress-fill { width: 100%; height: 0%; background: var(--thalen-orange); transition: height 0.1s linear; }

/* How We Work doors: an accent bar grows down the left edge and the body
   opens on hover (desktop) or on click/tap/Enter (all sizes). */
.thalen-door { --thalen-accent: var(--thalen-orange); cursor: pointer; }
.thalen-door::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 1; background: var(--thalen-accent); transform: scaleY(0); transform-origin: top; transition: transform 0.5s var(--thalen-ease); }
.thalen-door:hover::before, .thalen-door.is-open::before { transform: scaleY(1); }
.thalen-door .thalen-door-body { max-height: 0; overflow: hidden; transition: max-height 0.6s var(--thalen-ease); }
.thalen-door:hover .thalen-door-body, .thalen-door.is-open .thalen-door-body { max-height: 400px; }
.thalen-door:focus-visible { outline: 2px solid var(--thalen-orange); outline-offset: 4px; }

/* Accent colors for doors (and anything else that reads --thalen-accent). */
.thalen-accent-indigo { --thalen-accent: var(--thalen-indigo); }
.thalen-accent-teal { --thalen-accent: var(--thalen-teal); }
.thalen-accent-botanical { --thalen-accent: var(--thalen-botanical); }
.thalen-accent-orange { --thalen-accent: var(--thalen-orange); }
.thalen-accent-coral { --thalen-accent: var(--thalen-coral); }

/* Venture cards: a slight lift on hover, details fade in, and the photo card
   zooms out while its tint lifts. Tap opens a card on touch screens. */
.thalen-card { cursor: pointer; transition: transform 0.35s ease; }
.thalen-card:hover { transform: scale(1.01); z-index: 2; }
.thalen-card:focus-visible { outline: 2px solid var(--thalen-cloud); outline-offset: -6px; }
.thalen-card .thalen-card-detail { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.35s ease, max-height 0.45s ease; }
.thalen-card:hover .thalen-card-detail, .thalen-card.is-open .thalen-card-detail { opacity: 1; max-height: 300px; }
.thalen-card .thalen-card-photo { transform: scale(1.3); transition: transform 0.9s var(--thalen-ease); }
.thalen-card:hover .thalen-card-photo, .thalen-card.is-open .thalen-card-photo { transform: scale(1); }
.thalen-card .thalen-card-tint { opacity: 0.75; transition: opacity 0.5s ease; }
.thalen-card:hover .thalen-card-tint, .thalen-card.is-open .thalen-card-tint { opacity: 0.15; }

/* Tablet and mobile (Elementor's tablet breakpoint): no hover reveals, card
   details always show, doors open only on tap. */
@media (max-width: 1024px) {
  .thalen-reveal.thalen-reveal-left, .thalen-reveal.thalen-reveal-right { transform: translateY(40px); }
  .thalen-reveal.is-visible { transform: translate(0, 0); }
  .thalen-door:hover:not(.is-open)::before { transform: scaleY(0); }
  .thalen-door:hover:not(.is-open) .thalen-door-body { max-height: 0; }
  .thalen-card:hover { transform: none; }
  .thalen-card .thalen-card-detail { opacity: 1; max-height: none; }
  .thalen-card .thalen-card-tint { opacity: 0.35; }
  .thalen-card.is-open .thalen-card-tint { opacity: 0.2; }
  .thalen-scroll-cue { display: none; }
}

/* Inside the Elementor editor, show everything in its open state so it can be
   selected and edited. Slides still crossfade. */
.elementor-editor-active .thalen-reveal,
.elementor-editor-active .thalen-intro,
.elementor-editor-active .thalen-intro-2,
.elementor-editor-active .thalen-intro-3 { opacity: 1; transform: none; animation: none; }
.elementor-editor-active .thalen-door .thalen-door-body { max-height: none; }
.elementor-editor-active .thalen-door::before { transform: scaleY(1); }
.elementor-editor-active .thalen-card .thalen-card-detail { opacity: 1; max-height: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .thalen-reveal { opacity: 1; transform: none; transition: none; }
  .thalen-intro, .thalen-intro-2, .thalen-intro-3 { opacity: 1; animation: none; }
  .thalen-scroll-cue::after { animation: none; }
  .thalen-slideshow .thalen-slide, .thalen-card, .thalen-card .thalen-card-detail, .thalen-card .thalen-card-tint { transition: none; }
  .thalen-card .thalen-card-photo { transition: none; transform: scale(1); }
}