/* ==========================================================================
   "BEYOND THE SURFACE" HERO + "GET OUT OF YOUR DAILY RHYTHM" - moved here
   from journey-overview.html's hero (background + header text, not its
   "Begin Your Journey" button, which stayed there) and the video section
   that used to follow it.

   Same reasoning as day-cards.css: journey-app.css's class names collide
   with the rest of index.html sitewide, so it isn't loaded here directly.
   Every rule below was extracted straight out of the loaded stylesheet in
   the browser (via document.styleSheets, matched against the actual moved
   elements with Element.matches()), so the values are exact - but scoped
   under #jo-hero-migrated so none of it can leak outside this section.
   ========================================================================== */
#jo-hero-migrated * { box-sizing: border-box; border-width: 0px; border-style: solid; border-color: rgb(229, 231, 235); }
#jo-hero-migrated h1 { font-size: inherit; font-weight: inherit; }
#jo-hero-migrated h1, #jo-hero-migrated p { margin: 0px; }
#jo-hero-migrated svg, #jo-hero-migrated video, #jo-hero-migrated canvas { display: block; vertical-align: middle; }
#jo-hero-migrated video { max-width: 100%; height: auto; }
#jo-hero-migrated .pointer-events-none { pointer-events: none; }
#jo-hero-migrated .absolute { position: absolute; }
#jo-hero-migrated .relative { position: relative; }
#jo-hero-migrated .inset-0 { inset: 0px; }
#jo-hero-migrated .bottom-10 { bottom: 2.5rem; }
#jo-hero-migrated .left-0 { left: 0px; }
#jo-hero-migrated .right-0 { right: 0px; }
#jo-hero-migrated .top-0 { top: 0px; }
#jo-hero-migrated .top-32 { top: 8rem; }
#jo-hero-migrated .z-10 { z-index: 10; }
#jo-hero-migrated .z-30 { z-index: 30; }
#jo-hero-migrated .z-50 { z-index: 50; }
#jo-hero-migrated .-mt-1 { margin-top: -0.25rem; }
#jo-hero-migrated .block { display: block; }
#jo-hero-migrated .flex { display: flex; }
#jo-hero-migrated .h-40 { height: 10rem; }
#jo-hero-migrated .h-full { height: 100%; }
#jo-hero-migrated .h-screen { height: 100vh; }
#jo-hero-migrated .w-full { width: 100%; }
#jo-hero-migrated .flex-col { flex-direction: column; }
#jo-hero-migrated .items-center { align-items: center; }
#jo-hero-migrated .justify-center { justify-content: center; }
#jo-hero-migrated .overflow-hidden { overflow: hidden; }
#jo-hero-migrated .whitespace-nowrap { white-space: nowrap; }
#jo-hero-migrated .bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); }
#jo-hero-migrated .bg-black\/30 { background-color: rgba(0, 0, 0, 0.3); }
#jo-hero-migrated .bg-gradient-to-b { background-image: linear-gradient(to bottom,var(--tw-gradient-stops)); }
#jo-hero-migrated .from-black { --tw-gradient-from: #000 var(--tw-gradient-from-position); --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
#jo-hero-migrated .to-transparent { --tw-gradient-to: transparent var(--tw-gradient-to-position); }
#jo-hero-migrated .bg-contain { background-size: contain; }
#jo-hero-migrated .bg-center { background-position: center center; }
#jo-hero-migrated .bg-no-repeat { background-repeat: no-repeat; }
#jo-hero-migrated .object-cover { object-fit: cover; }
#jo-hero-migrated .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
#jo-hero-migrated .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
#jo-hero-migrated .text-center { text-align: center; }
#jo-hero-migrated .font-bold { font-weight: 700; }
#jo-hero-migrated .font-normal { font-weight: 400; }
#jo-hero-migrated .italic { font-style: italic; }
#jo-hero-migrated .not-italic { font-style: normal; }
#jo-hero-migrated .leading-\[1\.1\] { line-height: 1.1; }
#jo-hero-migrated .leading-snug { line-height: 1.375; }
#jo-hero-migrated .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); }
#jo-hero-migrated .font-serif { font-family: "Cormorant Garamond", serif; }
#jo-hero-migrated .hero-anim { opacity: 0; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
#jo-hero-migrated .hero-reveal { animation-name: heroReveal; animation-duration: 1.1s; }
#jo-hero-migrated .hero-fade { animation-name: heroFadeUp; animation-duration: 1s; }
#jo-hero-migrated .hero-zoom { animation: 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards running heroZoom; }
@media (prefers-reduced-motion: reduce) {
  #jo-hero-migrated .hero-anim, #jo-hero-migrated .hero-zoom { animation: auto ease 0s 1 normal none running none; opacity: 1; }
}
@media (min-width: 640px) {
  #jo-hero-migrated .sm\:bottom-14 { bottom: 3.5rem; }
  #jo-hero-migrated .sm\:top-28 { top: 7rem; }
  #jo-hero-migrated .sm\:h-56 { height: 14rem; }
  #jo-hero-migrated .sm\:bg-cover { background-size: cover; }
}

@keyframes heroReveal {
  0% { opacity: 0; transform: translateY(28px); filter: blur(12px); }
  100% { opacity: 1; transform: translateY(0px); filter: blur(0px); }
}
@keyframes heroFadeUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@keyframes heroZoom {
  0% { transform: scale(1.12); }
  100% { transform: scale(1); }
}