/* Motion in the waterline register. Transform and opacity only. Expo-out. */

[data-reveal] {
  opacity: 1;
  transform: none;
}

body.js-ready [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}

body.js-ready [data-reveal].is-in {
  animation: ebb-reveal 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--stagger, 0) * 70ms);
}

@keyframes ebb-reveal {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes word-rise { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes word-sharp { from { opacity: 0; } to { opacity: 1; } }
@keyframes word-blur { from { opacity: 1; } to { opacity: 0; } }
@keyframes tide-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pic-ebb {
  0% { transform: scaleY(1); }
  40% { transform: scaleY(0.55); }
  100% { transform: scaleY(0.55); }
}
@keyframes pic-hold {
  0%, 100% { transform: none; }
  50% { transform: translate3d(0, 1px, 0); }
}
@keyframes pic-share {
  0% { transform: scaleY(0.4); }
  45% { transform: scaleY(1); }
  100% { transform: scaleY(1); }
}
@keyframes roll-up {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-100%); opacity: 0; }
}
@keyframes roll-in-up {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes roll-down {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(100%); opacity: 0; }
}
@keyframes roll-in-down {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes receipt-print {
  from { opacity: 0; transform: translate3d(0, -12px, 0) scaleY(0.92); }
  to { opacity: 1; transform: none; }
}
@keyframes nav-sweep {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes water-sheen {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.7; }
}
@keyframes gauge-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}
@keyframes tick-nudge {
  0%, 100% { transform: translate(-50%, 50%); }
  40% { transform: translate(-50%, 40%); }
}

.reveal-word { position: relative; display: inline-block; animation: word-rise 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--word-delay) both; }
.word-sharp { animation: word-sharp 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--word-delay) both; }
.word-blur { position: absolute; inset: 0; filter: blur(6px); pointer-events: none; animation: word-blur 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--word-delay) both; }

.factor-thumb { transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.cta-rise { transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1); }

body.js-ready .is-in .rule-draw .draw-stroke {
  animation: tide-draw 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.js-ready .is-in .rule-draw .draw-stroke:nth-of-type(2) { animation-delay: 80ms; }
body.js-ready .is-in .rule-draw .draw-stroke:nth-of-type(3) { animation-delay: 160ms; }
body.js-ready .is-in .rule-draw .draw-stroke:nth-of-type(4) { animation-delay: 240ms; }
body.js-ready .is-in .rule-draw .draw-fill {
  animation: word-sharp 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tide-pic--ebb .pic-water {
  transform-origin: center bottom;
  animation: pic-ebb 2400ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.tide-pic--hold .pic-rock--still {
  animation: pic-hold 1800ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.tide-pic--share .pic-share {
  transform-origin: center bottom;
  animation: pic-share 2200ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.left-tank__water { animation: water-sheen 3200ms ease-in-out infinite; }

.roll {
  display: inline-flex;
  align-items: baseline;
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.roll-digit {
  display: inline-grid;
  overflow: hidden;
  height: 1.15em;
  min-width: 0.65ch;
}
.roll-digit span { grid-area: 1 / 1; }
.roll-digit.is-up .roll-from { animation: roll-up 300ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.roll-digit.is-up .roll-to { animation: roll-in-up 300ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.roll-digit.is-down .roll-from { animation: roll-down 300ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.roll-digit.is-down .roll-to { animation: roll-in-down 300ms cubic-bezier(0.22, 1, 0.36, 1) both; }

.receipt-slip.is-in,
#labHistoryList li {
  animation: receipt-print 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.waterline, .tide-wash, .level-indicator {
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.js-ready.tide-scrubbing .waterline,
body.js-ready.tide-scrubbing .tide-wash,
body.js-ready.tide-scrubbing .level-indicator { transition: none; }

.left-tank__rock, .left-tank__water-live, .left-tank__held, .left-tank__water, .tide-gauge__marker {
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), bottom 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  [data-reveal], body.js-ready [data-reveal]:not(.is-in) {
    opacity: 1 !important;
    transform: none !important;
  }
  .reveal-word, .word-sharp { opacity: 1; transform: none; }
  .word-blur { display: none; }
  .cta-rise { transform: none !important; }
  .waterline, .tide-wash { transform: none !important; top: var(--waterline-origin) !important; }
  .rule-draw .draw-stroke { stroke-dashoffset: 0; }
  .rule-draw .draw-fill { opacity: 1; }
}