/* =====================================================================
   DALOREN GROUP — SHOWPIECE STYLES (WordPress / Elementor)
   Loaded only by the hidden HTML widgets in the three showpiece
   sections. Everything these sections display is native Elementor
   content; these rules position the motion layers behind it and define
   the animated states. Targets are container IDs and widget classes.
   ===================================================================== */

.dg-code, .elementor-widget-html.dg-code { position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; }

/* ---------- 1. Hero ---------- */
#hero { position: relative; overflow: hidden; }
#hero:not(.hero--short) { min-height: calc(100vh - var(--dg-header-h, 76px)); min-height: calc(100svh - var(--dg-header-h, 76px)); }
#hero.hero--short { min-height: 72vh; min-height: 72svh; }
#hero::before {
  z-index: 1 !important; opacity: 1 !important; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(20,24,26,0.92) 0%, rgba(20,24,26,0.72) 38%, rgba(20,24,26,0.28) 72%, rgba(20,24,26,0.45) 100%),
    linear-gradient(0deg, rgba(20,24,26,0.96) 0%, rgba(20,24,26,0) 46%) !important;
}
#hero > .elementor-background-video-container { z-index: 0; }
#hero .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
#hero > .e-con, #hero > .elementor-widget:not(.dg-code) { position: relative; z-index: 3; }
#hero .hero-headline .elementor-heading-title { max-width: 11em; }
#hero .hero-lede p { max-width: 600px; }
#hero .hero-caption { position: absolute !important; z-index: 3; top: 24px; right: 32px; width: auto !important; }
@media (max-width: 960px) { #hero .hero-caption { display: none; } #hero .hero-canvas { opacity: 0.45; } }

.hl-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hl-word__inner { display: inline-block; transform: translateY(105%); transition: transform 900ms cubic-bezier(0.2, 0.7, 0.1, 1); }
.hero-is-in .hl-word__inner { transform: none; }
.hero-fade { opacity: 0; transform: translateY(14px); transition: opacity 800ms var(--dg-ease), transform 800ms var(--dg-ease); }
.hero-is-in .hero-fade { opacity: 1; transform: none; }
#hero > .hero-media { animation: hero-media-in 2400ms var(--dg-ease) both; transform-origin: center; }
@keyframes hero-media-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }

/* ---------- 2. Phase explorer (Nested Tabs #phase-explorer) ---------- */
#phase-explorer .e-n-tabs { --n-tabs-title-padding-inline-start: 0; }
#phase-explorer .e-n-tabs-heading { position: sticky; top: calc(var(--dg-header-h, 76px) + 40px); align-self: flex-start; padding-right: 32px; border-top: 0; }
#phase-explorer .e-n-tabs-heading > .e-n-tab-title {
  justify-content: flex-start; gap: 18px; background: none !important; border: 0 !important; border-bottom: 1px solid var(--e-global-color-dgbinv) !important;
  border-radius: 0 !important; padding: 20px 0 !important; color: var(--e-global-color-dginvm); position: relative; width: 100%;
  transition: color var(--dg-fast) var(--dg-ease), padding-left var(--dg-state) var(--dg-ease);
}
#phase-explorer .e-n-tabs-heading > .phase-rail-head + .e-n-tab-title { border-top: 1px solid var(--e-global-color-dgbinv) !important; }
#phase-explorer .e-n-tab-title::before {
  content: attr(data-phase-code); font-family: var(--e-global-typography-accent-font-family), monospace; font-size: 12px; letter-spacing: 0.14em;
  color: var(--e-global-color-dgslate); flex: 0 0 28px; position: static; transform: none; background: none; width: auto;
}
#phase-explorer .e-n-tab-title::after { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px; background: var(--e-global-color-accent); transform: scaleY(0); transition: transform var(--dg-state) var(--dg-ease); }
#phase-explorer .e-n-tab-title:hover { color: var(--e-global-color-dgpaper); }
#phase-explorer .e-n-tab-title[aria-selected="true"] { color: var(--e-global-color-dgpaper); padding-left: 20px !important; }
#phase-explorer .e-n-tab-title[aria-selected="true"]::after { transform: scaleY(1); }
#phase-explorer .e-n-tab-title[aria-selected="true"]::before { color: var(--e-global-color-accent); }
#phase-explorer .e-n-tab-title.is-cleared::before { color: var(--e-global-color-dgmoss); }
#phase-explorer .e-n-tab-title-text { color: inherit !important; }

.phase-rail-head { width: 100%; }
.phase-counter { display: flex; align-items: baseline; gap: 10px; font-weight: 600; letter-spacing: -0.05em; line-height: 0.9; margin: 0; }
.phase-counter__now { font-size: clamp(88px, 9vw, 148px); color: var(--e-global-color-dgpaper); }
.phase-counter__sep, .phase-counter__total { font-size: clamp(28px, 2.4vw, 36px); color: var(--e-global-color-dgslate); letter-spacing: -0.02em; }
.phase-ladder { display: flex; height: 10px; margin: 28px 0 36px; }
.phase-ladder__cell { flex: 1; margin-right: 4px; background: var(--e-global-color-dgbinv); position: relative; overflow: hidden; }
.phase-ladder__cell:last-child { margin-right: 0; }
.phase-ladder__fill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: var(--e-global-color-dgmoss); transition: transform 420ms var(--dg-ease), background-color 180ms var(--dg-ease); transition-delay: var(--cell-delay, 0ms); }
.is-in-view .phase-ladder__cell.is-cleared .phase-ladder__fill, .is-in-view .phase-ladder__cell.is-active .phase-ladder__fill { transform: scaleX(1); }
.phase-ladder__cell.is-active .phase-ladder__fill { background: var(--e-global-color-accent); }

#phase-explorer .e-n-tabs-content > .e-con.e-active { animation: phase-in 520ms var(--dg-ease) both; }
#phase-explorer[data-dir="back"] .e-n-tabs-content > .e-con.e-active { animation-name: phase-in-back; }
#phase-explorer .e-n-tabs-content > .e-con.e-active .phase-fact { animation: phase-in 520ms var(--dg-ease) both; }
#phase-explorer .e-n-tabs-content > .e-con.e-active .phase-fact:nth-child(2) { animation-delay: 60ms; }
#phase-explorer .e-n-tabs-content > .e-con.e-active .phase-fact:nth-child(3) { animation-delay: 120ms; }
#phase-explorer .e-n-tabs-content > .e-con.e-active .phase-fact:nth-child(4) { animation-delay: 180ms; }
@keyframes phase-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes phase-in-back { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@media (max-width: 960px) {
  /* Tablet + phone: phase list stacks above the panel (design), no accordion. */
  #phase-explorer .e-n-tabs { flex-direction: column !important; }
  #phase-explorer .e-n-tabs-heading { position: static; width: 100% !important; flex-basis: auto !important; padding-right: 0; flex-direction: column !important; flex-wrap: nowrap !important; }
  #phase-explorer .e-n-tabs-content { margin-top: 40px; width: 100%; }
  #phase-explorer .e-n-tabs-content > .e-n-tab-title { display: none !important; }
  .phase-counter__now { font-size: 88px; }
}
/* Previous / Next (native buttons, tablet + phone only) */
#phase-nav .elementor-button { min-height: 48px; width: 100%; justify-content: center; border-color: var(--e-global-color-dgbinv) !important; cursor: pointer; }
#phase-nav .elementor-button:hover:not(.is-disabled) { border-color: var(--e-global-color-dgpaper) !important; background: transparent !important; }
#phase-nav .elementor-button.is-disabled { opacity: 0.4; cursor: default; pointer-events: none; }
#phase-nav .elementor-widget-button { flex: 1 1 0; }


/* ---------- 3. Pathway scroll (#tiers) ---------- */
.pathway__count-now { font-size: clamp(96px, 10vw, 168px); }
.pathway__count-sep, .pathway__count-total { font-size: 36px; color: var(--e-global-color-dgslate); letter-spacing: -0.02em; }
.dg-pathway-count { margin-top: 56px !important; }
.dg-pathway-count .elementor-heading-title { display: flex; align-items: baseline; gap: 10px; line-height: 1; padding-top: 0.06em; }
.pathway__ladder { display: flex !important; flex-direction: row !important; height: 44px; }
#tiers .pathway__cell, #tiers .pathway__cell:focus { flex: 1; margin-right: 4px; position: relative; overflow: hidden; background: var(--e-global-color-dgmist); border: 0; padding: 0; cursor: pointer; border-radius: 0; box-shadow: none; min-height: 0; }
#tiers .pathway__cell:last-child { margin-right: 0; }
.pathway__fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--fill, 0)); }
.pathway__cell[data-tone="1"] .pathway__fill { background: var(--e-global-color-dgsage); }
.pathway__cell[data-tone="2"] .pathway__fill { background: var(--e-global-color-dgmoss); }
.pathway__cell[data-tone="3"] .pathway__fill { background: var(--e-global-color-accent); }
.pathway__cell[data-tone="4"] .pathway__fill { background: var(--e-global-color-secondary); }
#tiers .pathway__cell.is-active { outline: 2px solid var(--e-global-color-primary); outline-offset: 2px; }
#tiers .pathway__cell:hover { background: var(--e-global-color-dghair); }

.dg-tier-list .elementor-icon-list-items { display: flex; flex-wrap: wrap; border-top: 1px solid var(--e-global-color-dghair); }
.dg-tier-list .elementor-icon-list-item { flex: 0 0 50%; max-width: 50%; padding: 14px 16px 14px 0 !important; margin: 0 !important; border-bottom: 1px solid var(--e-global-color-dghair); align-items: flex-start !important; }
.dg-tier-list .elementor-icon-list-item::after { display: none !important; }
.dg-tier-list .elementor-icon-list-text { font-weight: 500; }
@media (max-width: 600px) { .dg-tier-list .elementor-icon-list-item { flex-basis: 100%; max-width: 100%; } }

.pathway.is-static .tier-item + .tier-item { margin-top: 72px; padding-top: 72px; border-top: 1px solid var(--e-global-color-dghair); }
.pathway.is-static .dg-pathway-count { display: none; }

.pathway.is-pinned { height: calc(var(--tiers, 4) * 80vh + 100vh); }
.pathway.is-pinned .pathway__sticky { position: sticky !important; top: var(--dg-header-h, 76px); height: calc(100vh - var(--dg-header-h, 76px)); display: flex; align-items: center; padding-top: 0 !important; padding-bottom: 0 !important; overflow: hidden; }
.pathway.is-pinned .pathway__inner { align-items: center; width: 100%; }
.pathway.is-pinned .pathway__stage { height: min(640px, calc(100vh - var(--dg-header-h, 76px) - 80px)); position: relative; }
.pathway.is-pinned .tier-item { position: absolute !important; left: 0; right: 0; top: 50%; margin: 0; padding: 0; border: 0; opacity: 0; transform: translateY(-50%) translateY(48px); transition: opacity 520ms var(--dg-ease), transform 620ms var(--dg-ease); pointer-events: none; }
.pathway.is-pinned .tier-item.is-before { transform: translateY(-50%) translateY(-48px); }
.pathway.is-pinned .tier-item.is-active { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.pathway.is-pinned .tier-item.is-active .elementor-icon-list-item { animation: phase-in 500ms var(--dg-ease) both; }
.pathway.is-pinned .tier-item.is-active .elementor-icon-list-item:nth-child(2) { animation-delay: 50ms; }
.pathway.is-pinned .tier-item.is-active .elementor-icon-list-item:nth-child(3) { animation-delay: 100ms; }
.pathway.is-pinned .tier-item.is-active .elementor-icon-list-item:nth-child(4) { animation-delay: 150ms; }
.pathway.is-pinned .tier-item.is-active .elementor-icon-list-item:nth-child(5) { animation-delay: 200ms; }
.pathway.is-pinned .tier-item.is-active .elementor-icon-list-item:nth-child(6) { animation-delay: 250ms; }

@media (prefers-reduced-motion: reduce) {
  .hl-word__inner, .hero-fade { transform: none !important; opacity: 1 !important; }
}