/* =====================================================================
   PARTNER SUMMIT — MASTER CSS  (SplashThat Dev Tools injection)
   HiBob Partner Summit US 2026 · Four Seasons Palm Beach · Oct 5–6 2026
   ---------------------------------------------------------------------
   Paste this whole file into: Layout tab → wrench → Dev Tools CSS box.
   Injected CSS renders on the PUBLISHED/PREVIEW page only (eye icon),
   never on the editor canvas — always judge in preview.

   VALIDATOR RULES (Splash rejects these — do NOT add):
     ✗ CSS custom properties (--vars)   ✗ @media   ✗ @supports
   ALLOWED:  ✓ @keyframes   ✓ @import   ✓ animation-timeline/-range/view()
   → all colors hardcoded hex; no conditional at-rules; no prefers-reduced-motion.

   Custom classes are applied per element via Properties → Custom Classes
   (no dot, space-separated). Splash injects per-block #g-xxxxx !important
   selectors + inline styles that outrank plain classes — beat them by
   clearing the native panel value or raising specificity.

   SECTIONS
     1. Backgrounds (gradient / fixed / scroll)
     2. Date strip (marquee loop)
     3. Scroll reveal (fade-in on viewport enter)
     4. Keyframes (all animations collected here)
   ===================================================================== */


/* =====================================================================
   1. BACKGROUNDS
   ===================================================================== */

.map-bg {
  background-size: 100% auto !important;
  background-position: center top !important;
  background-repeat: repeat-y !important;
  background-origin: border-box !important;
}

/* Brand gradient fill. The `background:red` line is a deliberate fallback
   flash — if the gradient ever fails to parse, the block goes red so it's
   obvious in preview rather than silently transparent. */
.custom-gradient-bg {
  background: red !important;
  background: linear-gradient(135deg, #F7E7CE 15%, #F88400 70%, #EE164F 100%) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

/* NOTE: background-attachment:fixed is unreliable inside Splash's
   transformed page container (same wrapper that breaks position:fixed).
   Test .fixed-bg in preview before relying on it; fall back to .scroll-bg
   if it doesn't stick. */
.fixed-bg {
  background-attachment: fixed !important;
  background-size: cover;      /* or 100% 100%, or specific dimensions */
  background-position: center; /* viewport-relative */
}

.scroll-bg {
  background-attachment: scroll !important;
  background-size: cover;      /* or 100% 100%, or specific dimensions */
  background-position: center; /* viewport-relative */
}


/* =====================================================================
   2. DATE STRIP — horizontal marquee loop
   ---------------------------------------------------------------------
   ID-scoped to the specific block (#g-75298949). Content is tripled and
   the track translates -33.333% so the loop is seamless. Width:120% gives
   the overflow room to scroll. Adjust speed via the 50s duration below.
   ===================================================================== */

#g-75298949.date-strip {
  overflow: hidden !important;
  width: 120% !important;
  max-width: none !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  animation: dateStripLoop 50s linear infinite !important;
}

#g-75298949.date-strip > .grp {
  flex: 0 0 auto !important;
}


/* =====================================================================
   3. SCROLL REVEAL — fade-in on viewport enter (CSS-only, no JS)
   ---------------------------------------------------------------------
   Add "reveal" to any BELOW-THE-FOLD block to fade + rise as it scrolls
   in. Use "reveal-soft" for opacity-only (no rise).

   FAIL-SAFE: base state is fully VISIBLE; the hidden→visible motion lives
   only in the keyframes, driven by animation-timeline:view(). Browsers
   without scroll-timeline support (older Firefox) just show the element
   normally — it can NEVER get stuck invisible.

   VERIFIED LIVE (2026-07-10): validator passes all three lines; timelines
   resolve as real ViewTimeline anchored to #main-canvas with live
   per-element progress. Confirmed working.

   LIMITATION: first-screen blocks won't visibly animate — they've already
   completed "entry" at load and forwards-fill holds the end state. Only
   tag blocks that start below the fold. (For above-the-fold motion you'd
   need a load-time timed animation, a separate mechanism — not added yet.)

   TUNING:
     • Rise distance ....... translateY() in @keyframes ps-fadein
     • Fade duration/linger  the `cover %` end of animation-range
                             (bigger % = fade spans more scroll = more visible)
     • Stagger siblings .... give each block its own class w/ shifted range
   ===================================================================== */

.reveal {
  animation: ps-fadein linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

.reveal-soft {
  animation: ps-fadesoft linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}


/* =====================================================================
   4. KEYFRAMES  (@keyframes is validator-safe)
   ===================================================================== */

@keyframes ps-fadein {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ps-fadesoft {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dateStripLoop {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}

/* Full-bleed: break a block out of Splash's centered container so it spans
   the whole viewport. Apply to the block/row that holds the iframe
   (Properties → Custom Classes → full-bleed). If a gutter still shows,
   add the class to that block's PARENT too. */
.full-bleed{
  width:100vw!important;
  max-width:100vw!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  padding-left:0!important;
  padding-right:0!important;
}
.full-bleed.grp{padding:0!important}
.full-bleed iframe{
  width:100%!important;
  display:block!important;
  border:0!important;
}

/* the specific iframe container that's holding the .5em gutter */
#sfid-3907319533{ padding:0 !important; }
#sfid-3907319533, #sfid-3907319533 .grp{ padding:0 !important; }