/* ==========================================================================
   Site styles that sit on top of Tailwind: motion, form controls, print and
   presentation-mode behaviour.
   ========================================================================== */

:root {
  --ink: #0a1628;
  --solar: #f59e0b;
}

html { -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; }

/* ---------------------------------------------------------- scroll reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .07s; }
[data-reveal][data-delay="2"] { transition-delay: .14s; }
[data-reveal][data-delay="3"] { transition-delay: .21s; }
[data-reveal][data-delay="4"] { transition-delay: .28s; }
[data-reveal][data-delay="5"] { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* -------------------------------------------------------- energy diagram */
.flow-line {
  stroke-dasharray: 6 8;
  animation: flowdash 1.1s linear infinite;
}
@keyframes flowdash { to { stroke-dashoffset: -28; } }

.sun-rays { transform-origin: center; animation: sunspin 40s linear infinite; }
@keyframes sunspin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ range input */
input[type="range"].solar-range {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f59e0b var(--fill, 40%), #e6ecf5 var(--fill, 40%));
  outline: none;
}
input[type="range"].solar-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #0a1628;
  border: 4px solid #fff;
  box-shadow: 0 2px 10px rgba(10,22,40,.3);
  cursor: pointer;
}
input[type="range"].solar-range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #0a1628;
  border: 4px solid #fff;
  box-shadow: 0 2px 10px rgba(10,22,40,.3);
  cursor: pointer;
}

/* ------------------------------------------------------------- accordion */
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.acc-item.is-open .acc-body { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; }
.acc-item.is-open .acc-chevron { transform: rotate(180deg); }
.acc-chevron { transition: transform .25s ease; }

/* ------------------------------------------------------- before / after */
.ba-wrap { position: relative; overflow: hidden; user-select: none; touch-action: none; }
.ba-after { position: absolute; inset: 0; overflow: hidden; width: 50%; }
.ba-after img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-handle {
  position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; cursor: ew-resize;
  box-shadow: 0 0 0 1px rgba(10,22,40,.15);
}
.ba-handle::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 42px; height: 42px;
  transform: translate(-50%,-50%); border-radius: 50%; background: #fff;
  box-shadow: 0 4px 16px rgba(10,22,40,.3);
}

/* ------------------------------------------------------------- marquee */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------- presentation */
.deck-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transform: translateY(26px) scale(.99);
  transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1), visibility .45s;
  overflow-y: auto;
}
.deck-slide.is-active { opacity: 1; visibility: visible; transform: none; }
.deck-slide::-webkit-scrollbar { width: 6px; }
.deck-slide::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 99px; }

.deck-hide-cursor { cursor: none; }

/* stagger children of the active slide */
.deck-slide.is-active [data-stagger] { animation: deckIn .55s cubic-bezier(.16,1,.3,1) both; }
.deck-slide.is-active [data-stagger]:nth-child(1) { animation-delay: .08s; }
.deck-slide.is-active [data-stagger]:nth-child(2) { animation-delay: .16s; }
.deck-slide.is-active [data-stagger]:nth-child(3) { animation-delay: .24s; }
.deck-slide.is-active [data-stagger]:nth-child(4) { animation-delay: .32s; }
.deck-slide.is-active [data-stagger]:nth-child(5) { animation-delay: .40s; }
.deck-slide.is-active [data-stagger]:nth-child(6) { animation-delay: .48s; }
@keyframes deckIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- utilities */
.text-balance { text-wrap: balance; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------------------------------------------------------------- print */
@media print {
  header, footer, .print\:hidden, [data-menu-panel] { display: none !important; }
  body { background: #fff !important; }
  a[href]::after { content: ''; }
  .page-break { break-before: page; }
}