/* doubleblack motion language: signal, interference, resolution.
   Shared behavior lives here; each page keeps its own composition. */
:root {
  --db-motion-ease: cubic-bezier(.16, 1, .3, 1);
  --db-motion-fast: 180ms;
  --db-motion-response: 420ms;
  --db-motion-reveal: 760ms;
  --db-motion-depth: 18px;
}

.db-field-host { position: relative; isolation: isolate; }
.db-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .66; }
.db-field-host > :not(.db-field) { z-index: 1; }
.db-field-host .h05-topo { z-index: 1; }
.db-field-host .h05-in, .db-field-host .h06-in { z-index: 2; }
.vp main > section:first-child h1 { animation: db-title-resolve 850ms var(--db-motion-ease) both; }
@keyframes db-title-resolve { from { opacity: .15; filter: blur(12px); transform: translateY(18px) scaleY(1.06); clip-path: inset(0 0 25% 0); } to { opacity: 1; filter: none; transform: none; clip-path: inset(0); } }

/* An optical second edge makes the existing radial-fill button feel dimensional. */
.btn { transition: color var(--db-motion-response) var(--db-motion-ease), translate var(--db-motion-response) var(--db-motion-ease), box-shadow var(--db-motion-response) var(--db-motion-ease); }
.btn::after { content: ""; position: absolute; inset: 2px; border: 1px solid currentColor; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity var(--db-motion-fast) ease, inset var(--db-motion-response) var(--db-motion-ease); }
.btn:is(:hover, :focus-visible)::after { inset: 5px; opacity: .5; }
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.vp .btn[data-db-magnetic="true"] { translate: var(--db-pull-x, 0px) var(--db-pull-y, 0px); }

.db-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.db-art--terrain { opacity: .45; filter: grayscale(.25) contrast(1.18); mix-blend-mode: screen; }
.db-art--performance { opacity: .52; filter: saturate(.8) contrast(1.22); }
.db-art--light { opacity: .42; filter: saturate(.7) contrast(1.12); }
.db-art-mask { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.78), transparent 75%), linear-gradient(0deg, rgba(0,0,0,.63), transparent 70%); }
.h05 .db-art, .h06 .db-art { z-index: 0; }
.h05 .db-art-mask, .h06 .db-art-mask { z-index: 1; }
.h05 .h05-topo { z-index: 2; }
.h05 .h05-in, .h06 .h06-in { z-index: 3; }
.h05 .db-field, .h06 .db-field { z-index: 2; }
.h06 .db-field { opacity: .95; mix-blend-mode: screen; }
.h06:has(.db-light-toggle[aria-pressed="true"]) .db-art--performance { opacity: .75; filter: saturate(1.45) contrast(1.3); transform: scale(1.035); }
.h06 .db-art--performance { transition: opacity 900ms var(--db-motion-ease), filter 900ms var(--db-motion-ease), transform 3s var(--db-motion-ease); }
.db-light-toggle { border: 1px solid rgba(255,255,255,.6); border-radius: 999px; color: white; background: rgba(0,0,0,.45); backdrop-filter: blur(12px); padding: 10px 16px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: 44px; text-transform: uppercase; letter-spacing: .07em; transition: background 300ms ease, border-color 300ms ease, box-shadow 500ms ease; }
.db-light-toggle:hover, .db-light-toggle:focus-visible, .db-light-toggle[aria-pressed="true"] { background: rgba(0,67,74,.75); border-color: #bceff0; box-shadow: 0 0 24px rgba(126,196,187,.28); }
.db-light-toggle:focus-visible { outline: 2px solid white; outline-offset: 4px; }
.db-light-toggle__icon { width: 16px; height: 16px; border: 1px solid currentColor; transform: rotate(45deg); box-shadow: 0 0 12px currentColor; }
.db-light-toggle[aria-pressed="true"] .db-light-toggle__icon { animation: db-light-pulse 1.2s ease-in-out infinite alternate; }
@keyframes db-light-pulse { to { transform: rotate(135deg) scale(1.3); box-shadow: 0 0 20px #bceff0; } }

/* The generated light image is a material behind the homepage's grid, not a second headline. */
[data-golden-hero] { position: relative; }
[data-golden-hero] .db-art--light { z-index: 0; opacity: .2; mix-blend-mode: multiply; mask-image: radial-gradient(ellipse at center, black 10%, transparent 78%); }
[data-golden-hero] .db-field { z-index: 1; }
[data-golden-hero] .headline { position: relative; z-index: 2; }

/* Page-specific rhythm without a new animation library per landing page. */
html[data-page="01"] .h01-art { transition: transform var(--db-motion-reveal) var(--db-motion-ease); transform: perspective(700px) rotateY(var(--db-rotate, 0deg)); }
html[data-page="01"] .h01-plate:hover .h01-art { --db-rotate: -10deg; }
html[data-page="02"] .c02-weeks li { transition: transform var(--db-motion-response) var(--db-motion-ease), background var(--db-motion-response) ease; }
html[data-page="02"] .c02-weeks li:hover { transform: translateX(8px); }
html[data-page="03"] .c03-pane:not([hidden]), html[data-page="07"] [role="tabpanel"]:not([hidden]) { animation: db-resolve 520ms var(--db-motion-ease) both; }
html[data-page="04"] .h04 { background-position: var(--db-bg-x, 50%) var(--db-bg-y, 50%); transition: background-position 800ms var(--db-motion-ease); }
html[data-page="05"] .h05-topo { transition: transform 1.2s var(--db-motion-ease); transform: translate3d(var(--db-parallax-x, 0px), var(--db-parallax-y, 0px), 0) scale(1.05); }
html[data-page="07"] .c07-compare { perspective: 1000px; }
html[data-page="07"] .h07-shot { transform: perspective(1100px) rotateX(var(--db-tilt-y, 0deg)) rotateY(var(--db-tilt-x, 0deg)); transition: transform 700ms var(--db-motion-ease), box-shadow 700ms var(--db-motion-ease); transform-style: preserve-3d; }
html[data-page="07"] .h07-shot:hover { box-shadow: 18px 24px 0 rgba(0, 67, 74, .12); }
html[data-page="07"] .h07-shot .pin { transition: transform 480ms var(--db-motion-ease), box-shadow 480ms var(--db-motion-ease); }
html[data-page="07"] .h07-shot:hover .pin { transform: translateZ(14px) scale(1.16); box-shadow: 0 0 0 6px rgba(234, 122, 76, .18); }
html[data-page="07"] .c07-toggle button:focus-visible, html[data-page="07"] .c07-opts button:focus-visible { outline: 2px solid var(--db-primary, #006770); outline-offset: 3px; }
html[data-page="07"] .c07-frame { position: relative; overflow: hidden; }
html[data-page="07"] .c07-compare:has(#b-built[aria-selected="true"]) .c07-frame::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; pointer-events: none; background: var(--db-primary, #006770); box-shadow: 0 0 24px 8px rgba(126, 196, 187, .4); animation: db-compare-scan 750ms var(--db-motion-ease) both; }
@keyframes db-compare-scan { from { left: 0; opacity: 0; } 12% { opacity: 1; } to { left: 100%; opacity: 0; } }
html[data-page="08"] .c08-quote { position: relative; isolation: isolate; overflow: hidden; }
html[data-page="08"] .c08-quote::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at var(--db-bg-x, 50%) var(--db-bg-y, 50%), rgba(234, 122, 76, .33), transparent 38%); transition: opacity 500ms ease; opacity: .42; }
html[data-page="08"] .c08-quote .vp-wrap { position: relative; z-index: 1; }
html[data-page="08"] .c08-quote.is-field-active::before { opacity: 1; }
html[data-page="08"] .c08-row { position: relative; transition: padding-left 420ms var(--db-motion-ease), background 420ms ease; }
html[data-page="08"] .c08-row:hover { padding-left: 16px; background: rgba(126, 196, 187, .1); }
@keyframes db-resolve { from { opacity: .35; filter: blur(8px); transform: translateY(12px) scale(.985); } to { opacity: 1; filter: none; transform: none; } }

@media (hover: none), (pointer: coarse) { .btn::after { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .db-field { display: none; }
  .db-light-toggle { display: none; }
  .btn, .btn::after, .h01-art, .h05-topo,
  html[data-page="02"] .c02-weeks li, html[data-page="04"] .h04,
  html[data-page="07"] .h07-shot, html[data-page="07"] .h07-shot .pin,
  html[data-page="08"] .c08-quote, html[data-page="08"] .c08-row { animation: none !important; transition: none !important; transform: none !important; translate: none !important; }
  html[data-page="07"] .c07-frame::after { display: none; }
  html[data-page="03"] .c03-pane:not([hidden]), html[data-page="07"] [role="tabpanel"]:not([hidden]) { animation: none !important; }
  .vp main > section:first-child h1, .db-light-toggle__icon, .h06 .db-art--performance { animation: none !important; transition: none !important; transform: none !important; }
}