/*
  imageStyles.css — cleaned & updated
  Notes:
  - Uses CSS vars --vvh and --bottom-ui for iOS bottom toolbar clearance.
    Be sure the small helper JS sets them (see chat).
*/

/* =====================
   Root variables
   ===================== */
:root{
  /* Sky motion */
  --sky-rot: 0deg;      /* rotation around fixed pivot below horizon */
  --sky-scale: 1.26;    /* constant base scale; JS may bump once per device */

  /* Color/tint */
  --tint-hue: 0deg;
  --tint-sat: 1;
  --tint-bright: 1;

  /* Foreground parallax */
  --fore-y: 0vh;        /* dynamic (NEGATIVE = up) */
  --fore-base: 0vh;     /* computed base offset, POSITIVE (down) */

  --fore-bright: 0.25;  /* start dark */
  --fore-sat: 0.15;     /* nearly desaturated */
  --fore-contrast: 1;   /* slight punch near the end */
  --fore-hue: 0deg;     /* tiny warm shift near the end */

  /* UI chrome reserves (safe-area aware) */
  --chrome-top:    calc(env(safe-area-inset-top, 0px) + 56px);
  --chrome-bottom: calc(env(safe-area-inset-bottom, 0px) + 64px);
}

@media (max-width: 640px){
  :root{
    --chrome-top:    calc(env(safe-area-inset-top, 0px) + 64px);
    --chrome-bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
  }
}
@media (min-width: 1024px){
  :root{
    --chrome-top:    calc(env(safe-area-inset-top, 0px) + 48px);
    --chrome-bottom: calc(env(safe-area-inset-bottom, 0px) + 56px);
  }
}

/* =====================
   Background stack
   ===================== */
#bg{
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
  contain: size layout style paint;
}
#bg .bg-sky, #bg .bg-fore{ position:absolute; inset:0; }

/* Center wrapper for the sky image */
#bg .sky-wrap{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%); /* centering only happens here */
  will-change: transform;
}

/* The sky image rotates/scales around a fixed pivot */
#bg .sky-img{
  display:block;
  width: 210vw;          /* horizontal headroom */
  min-height: 180vh;     /* vertical headroom */
  height: auto;
  object-fit: cover;

  transform-origin: center 112%;
  transform: rotateZ(var(--sky-rot)) scale(var(--sky-scale));
  will-change: transform;
  backface-visibility: hidden;

  filter: hue-rotate(var(--tint-hue)) saturate(var(--tint-sat)) brightness(var(--tint-bright));
}
/* Extra-tall portrait screens: a touch shallower pivot for top-edge safety */
@media (orientation: portrait) and (max-aspect-ratio: 9/19) {
  #bg .sky-img { transform-origin: center 108%; }
}

/* Tints + noise */
#bg .bg-tint{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light; }
#bg .bg-tint.zenith{
  background: radial-gradient(120% 80% at 50% -10%, rgba(90,120,255,0.05), rgba(0,0,0,0) 60%);
}
#bg .bg-tint.horizon{
  background: linear-gradient(to top, rgba(255,180,120,0.04), rgba(0,0,0,0) 40%);
}
#bg .bg-noise{
  position:absolute; inset:0; opacity:0.015;
  background-image: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.5) 0% 0.5%, transparent 0.5% 1%);
  background-size:200px 200px;
}

/* =====================
   Foreground (desert strip)
   ===================== */
#bg .bg-fore{ position:absolute; inset:0; pointer-events:none; }

/* Base: anchored to bottom; JS moves only upward via --fore-y */
#bg .bg-fore .fore-wrap{
  position:absolute;
  left:50%;
  bottom:0;                 /* hard pin to bottom by default */
  transform:translateX(-50%);
  will-change:transform;
}
#bg .bg-fore .fore-img{
  display:block;
  transform-origin:50% 100%;
  transform: translateY(calc(var(--fore-base) + var(--fore-y)));
  will-change: transform;

  width:140vw;
  max-width:none;
  height:auto;
  max-height:48vh;          /* keeps composition; see wide override below */
  object-fit:contain;

  filter:
    brightness(var(--fore-bright))
    saturate(var(--fore-sat))
    contrast(var(--fore-contrast))
    hue-rotate(var(--fore-hue));
}

/* 1px insurance to avoid sub-pixel gaps on some DPIs */
#bg .bg-fore::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:1px; background:#000;
}

/* Optional: tiny gradient ground to hide any bottom seam */
#bg .bg-fore .fore-groundfill{
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2.5vh;
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
}

/* Wide/aspect-ratio case –
   Keep top fixed, ensure full width, and auto-fill to the viewport bottom.
   Extra height extends below the fold and is clipped. */
@media (min-aspect-ratio: 16/9) {
  #bg .bg-fore .fore-wrap{
    position: absolute;
    top: 0;               /* anchor from top */
    bottom: auto;         /* override base bottom:0 */
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100vh;        /* viewport-tall stage */
    overflow: hidden;     /* anything extra is hidden below */
  }
  #bg .bg-fore .fore-img{
    width: 100vw;
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: contain;           /* keep composition */
    object-position: top center;   /* top stays put */
    transform-origin: 50% 0%;

    /* If image is shorter than the stage, push it down by the shortfall. */
    --fore-btmfill: clamp(0px, calc(100vh - 100%), 100vh);
    transform: translateY(calc(var(--fore-btmfill) + var(--fore-base) + var(--fore-y)));
  }
}

/* =====================
   Section layout (Pageable)
   ===================== */
main, section{ position:relative; }

/* Reserve space for top/bottom chrome and size sections to the visible viewport. */
/*main > section{ padding-block: var(--chrome-top) var(--chrome-bottom); } */
main > section > .text{
  min-height: calc(var(--vvh, 100dvh) - var(--chrome-top) - var(--chrome-bottom));
  height: auto;            /* neutralize any earlier height:100% rules */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@supports not (height: 100dvh) {
  main > section > .text{
    min-height: calc(100svh - var(--chrome-top) - var(--chrome-bottom));
  }
}

/* CTA sits at the bottom of the safe area; add measured clearance for iOS toolbar */
.download-cta{
  display: flex; justify-content: center;
  margin-top: auto;
  margin-bottom: var(--bottom-ui, 0px);
}

/* =====================
   Navigation buttons
   ===================== */
.page-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.22s ease;
}
.page-nav--top    { top:    calc(env(safe-area-inset-top, 0px) + 10px); }
.page-nav--bottom { bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); }
.page-nav.is-hidden { opacity: 0; pointer-events: none; }

.page-nav__btn{
  font: 600 12px/1.1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 999px;
  border: 0;
  background: #7b1113;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, opacity .22s ease;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.page-nav__btn .arrow { font-size: 16px; line-height: 1; }
.page-nav__btn:hover  { background: #5f0d0f; }
.page-nav__btn:active { transform: translateY(0); }

/* Compact prev/next on mobile */
@media (max-width: 640px){
  .page-nav .page-nav__btn,
  .page-nav__btn--mobile{
    font-size: 13px;
    padding: 10px 14px;
    min-height: 44px;
    min-width: 120px;
  }
  .page-nav .page-nav__btn .arrow { font-size: 16px; }
  .page-nav--top { top: calc(env(safe-area-inset-top, 0px) + 10px); }
}

/* =====================
   In-flow Action Button (Download)
   ===================== */
.action-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 12px/1.1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 0.85em 1.2em;
  border-radius: 999px; border: 0;
  background: rgba(0,0,0,.65); color:#fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, opacity .22s ease;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  text-decoration: none; /* anchors look like buttons */
  font-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.0625rem);
  line-height: 1;
}
.action-btn:hover  { background: rgba(0,0,0,.78); }
.action-btn:active { transform: translateY(0); }
.action-btn .icon { width: 1.1em; height: 1.1em; }
.action-btn--download { background:#7b1113; }
.action-btn--download:hover { background:#5f0d0f; }
.action-btn--download:active { background:#4c0a0c; }

@media (max-width: 640px){
  .action-btn { min-height: 48px; }
}
@media (min-width: 641px){
  .action-btn { font-size: 14px; padding: 16px 22px; }
  .action-btn .icon { width: 1.2em; height: 1.2em; }
}

/* =====================
   Typography (fluid)
   ===================== */
html { font-size: 16px; }
body { font-size: 1rem; line-height: 1.5; }

:root{
  --step--1: clamp(0.875rem, 0.82rem + 0.4vw, 1rem);  /* small text */
  --step-0:  1rem;                                    /* body */
  --step-1:  clamp(1.125rem, 1rem + 0.7vw, 1.5rem);   /* subhead/CTA */
  --step-2:  clamp(1.5rem,   1.2rem + 1.8vw, 3rem);   /* h2 range */
  --step-3:  clamp(3.875rem, 2rem + 5.5vw, 9.625rem); /* h1 range */
}

h1{
  font-size: var(--step-3);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.05;
}

h2{
  font-size: clamp(3rem, 1.4rem + 3vw, 5.75rem); /* ~48px → 92px */
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
}

h3{
  font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem); /* ~20px → 32px */
  text-align: center;
  margin-bottom: 0.3em;
}

.display-3{
  font-size: clamp(2rem, 1.2rem + 2.8vw, 5.75rem);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  /*padding: 0 15px;*/
}

.content, .copy { max-width: 65ch; margin-inline: auto; }


 #page-3 .text {
  /*padding-top:100px;*/
  text-align: center;
}



/*@media screen and (max-width:768px) {
#page-3 img {
  max-width: 50%;
}
}
*/

/* tune once; these are just the clearances for your fixed UI */
:root{
  --top-safe: 56px;  /* progress + PREVIOUS + a little gap */
  --bot-safe: 88px;  /* NEXT button + a little gap (iOS/SE friendly) */
}

/* Last page layout: auto (h3) / flex (image) / auto (button) */
section[data-anchor="Page 3"] > .text{
  height: calc(100dvh - var(--top-safe) - var(--bot-safe));  /* visible viewport only */
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* 1) Heading: intrinsic height, never gets pushed under PREVIOUS */
section[data-anchor="Page 3"] > .text > h3{
  flex: 0 0 auto;
  margin: 0 0 8px;
}

/* 2) IMAGE SLOT: this <p> becomes the flexible middle row */
section[data-anchor="Page 3"] > .text > p{
  flex: 1 1 auto;          /* takes leftover space */
  min-height: 0;           /* <-- critical: allows the slot to shrink */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

/* the image itself: as big as possible, but never bigger than the slot */
section[data-anchor="Page 3"] > .text > p .book-img{
  max-height: 100%;        /* cap to slot height (prevents pushing button off) */
  height: auto;
  width: auto;
  max-width: min(92vw, 1100px);
  object-fit: contain;     /* keep full image, no crop */
  display: block;
}

/* 3) Download button: intrinsic height, stays inside the stage */
section[data-anchor="Page 3"] > .text .download-cta{
  flex: 0 0 auto;
  margin: 8px auto 10px;
}

/*
.titleHe {
    font-size: 172px;
    font-weight: 300;
  }

@media screen and (max-width:768px) {
  .titleHe {
    font-size: 84px;
    font-weight: 300;
  }
}
*/