.elementor-widget-section .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-section .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-14673 .elementor-element.elementor-element-28e1d3f > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:flex-start;align-items:flex-start;}.elementor-14673 .elementor-element.elementor-element-28e1d3f:not(.elementor-motion-effects-element-type-background), .elementor-14673 .elementor-element.elementor-element-28e1d3f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;background:url("https://cubitrevolution.com/wp-content/uploads/2025/10/Imagine-screen.png") 50% 50%;background-size:cover;}.elementor-14673 .elementor-element.elementor-element-28e1d3f > .elementor-background-overlay{background-color:var( --e-global-color-secondary );opacity:0.65;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-14673 .elementor-element.elementor-element-28e1d3f{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;z-index:0;}.elementor-widget-html .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-html .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-14673 .elementor-element.elementor-element-ff7394a{width:var( --container-widget-width, 51% );max-width:51%;--container-widget-width:51%;--container-widget-flex-grow:0;align-self:center;z-index:0;}.elementor-14673 .elementor-element.elementor-element-23dd484 > .elementor-background-overlay{background-color:transparent;background-image:linear-gradient(180deg, var( --e-global-color-secondary ) 0%, var( --e-global-color-b29d497 ) 100%);opacity:0.5;}.elementor-14673 .elementor-element.elementor-element-23dd484{z-index:1;}@media(max-width:767px){.elementor-14673 .elementor-element.elementor-element-28e1d3f{z-index:0;}.elementor-14673 .elementor-element.elementor-element-ff7394a{align-self:flex-end;}}/* Start custom CSS for html, class: .elementor-element-ff7394a *//* ===== Layout & Typography ===== */
.hero-seq{
  position: relative;
  width: min(1100px, 92%);
  margin: 0 auto;
  text-align: center;
  color: var(--c-text, #F1F2F3); /* falls back if site vars aren't present */
  pointer-events: none; /* prevents accidental selection */
}
.hero-seq h1{
  margin: 0 0 1rem;
  font-family: "Montserrat", "Open Sans", Roboto, Calibri, Arial, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .3px;
  font-size: clamp(2rem, 4vw, 3.5rem);
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
/* Keep your existing .hero-video, .hero-seq, .messages, and .msg rules as-is */

/* Controls row ABOVE the messages */
.hero-video .controls{
  order: -1;                         /* show above the text */
  display: flex;
  gap: .75rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  z-index: 10;
  pointer-events: auto;              /* clickable */
}

/* Shared base style for both buttons */
.hero-video .controls .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .3px;
  padding: .6rem 1.2rem;
  border-radius: 10px;
  border: none;
  transition: filter .2s ease, transform .06s ease, background .2s ease;
  text-decoration: none;
  background: var(--c-primary, #92D050);   /* CuBit green */
  color: #0b1709;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

/* Shared hover effect */
.hero-video .controls .btn:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
}


/* Skip: subtle translucent green */
.hero-video .controls .skip-btn{
  background: rgba(146,208,80,0.3);   /* translucent CuBit green */
  color: #fff;
  border: 1px solid rgba(146,208,80,0.6);
  border-radius: 999px;
  backdrop-filter: blur(6px) saturate(130%);
}
.hero-video .controls .skip-btn:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* Join: CuBit green CTA */
.hero-video .controls .join-btn{
  background: var(--c-primary, #92D050);
  color: #0b1709;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.hero-video .controls .join-btn:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* Mobile: stack buttons and keep everything in view */
@media (max-width: 767px){
  .hero-video .controls{
    flex-wrap: wrap;
    row-gap: .5rem;
    margin-bottom: .75rem;
  }
}

/* ===== Sequenced messages ===== */
.msg{
  opacity: 0;
  /* Visible time per message (non-final) and fade duration */
  --dur: 5.5s;
  --fade: .5s;
  animation: msg-inout calc(var(--dur) + var(--fade) * 2) ease-in-out both;
  animation-delay: var(--delay, 0s);
  pointer-events: none;
}
@keyframes msg-inout{
  0%   { opacity: 0; transform: translateY(10px); }
  10%  { opacity: 1; transform: translateY(0); }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-8px); }
}

/* Final message stays on screen */
.msg.final{
  animation: msg-final var(--fade) ease-out both;
  animation-delay: var(--delay, 0s);
}
@keyframes msg-final{
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* CTA button appears with the final */
.btn-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  margin-top: 1rem;
  border-radius: 10px;
  font-weight: 700;
  border: 1px solid transparent;
  background: var(--c-primary, #92D050); /* CuBit green */
  color: #0b1709;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  opacity: 0;
  transform: translateY(8px);
  transition: filter .2s ease, transform .06s ease;
  pointer-events: auto; /* clickable */
  animation: cta-in .7s ease-out both;
  animation-delay: var(--delay, 0s);
}
.btn-cta:hover{ filter: brightness(1.06); transform: translateY(6px); }
@keyframes cta-in{
  from{ opacity: 0; transform: translateY(12px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* Skip button */
.skip{
  position: absolute;
  top: 18px; right: 18px;
  background: rgba(0,0,0,.45);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: .4rem .8rem;
  font-size: .9rem; font-weight: 600;
  letter-spacing: .3px;
  backdrop-filter: blur(6px) saturate(130%);
  pointer-events: auto; /* clickable */
}

/* Small screens */
@media (max-width: 480px){
  .hero-seq h1{ font-size: clamp(1.5rem, 6vw, 2.2rem); }
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce){
  .msg, .msg.final, .btn-cta{ animation: none !important; opacity: 1; }
  .hero-seq h1{ transform: none !important; }
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-28e1d3f *//* ======================================================
   CUBIT HERO VIDEO SECTION — FINAL CSS
   ====================================================== */

/* 1) Make this section a positioning context */
/* Full-screen section */
.hero-video{ position:relative; min-height:100vh; overflow:hidden; }

/* Center content; stack vertically */
.hero-video .hero-seq{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:0 2rem;
  color:var(--c-text, #F1F2F3);
  pointer-events:none; /* only button clickable */
}

/* Messages stage (centered overlay) */
.hero-video .hero-seq .messages{ position:relative; width:100%; max-width:1000px; min-height:clamp(56px,10vh,280px); }
.hero-video .hero-seq .messages .msg{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); width:90%; margin:0;
}

/* One element: Skip (pre) → CTA (post) */

/* ===== Shared button styling (Skip + CTA) ===== */
.hero-video .skip{
  position: static;            /* participate in layout */
  align-self: center;          /* center horizontally */
  order: -1;                   /* appear ABOVE the text block */
  margin-bottom: 1rem;         /* space below button */
  z-index: 10;
  pointer-events: auto;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .3px;
  border-radius: 999px;
  padding: .6rem 1.2rem;
  transition: all .4s ease;
}

/* ===== Default (Skip) look ===== */
.hero-video .skip:not(.cta-style){
  background: rgba(0,0,0,.45);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(6px) saturate(130%);
}

/* ===== Morph to CTA (green) ===== */
.hero-video .skip.cta-style{
  background: var(--c-primary, #92D050) !important;  /* CuBit green */
  color: #0b1709 !important;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.hero-video .skip.cta-style:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
}


/* Admin bar nudge (optional) */
@media (min-width:783px){ .logged-in .hero-video{ min-height:calc(100vh - 32px); } }
/* ---------- Mobile fixes: keep Skip/CTA visible ---------- */
@media (max-width: 767px){
  /* Instead of perfect vertical centering, start content a bit lower */
  .hero-video .hero-seq{
    justify-content: flex-start;                       /* start from top */
    padding-top: calc(env(safe-area-inset-top, 0px) + 72px); /* room for button + notches */
  }

  /* Keep button above the text and centered, with breathing room */
  .hero-video .skip{
    order: -1;                 /* above the messages */
    margin-bottom: 14px;       /* space between button and headline */
  }

  /* Give the message "stage" a smaller minimum height on phones */
  .hero-video .hero-seq .messages{
    min-height: 38vh;          /* prevents stage from pushing button offscreen */
  }
}

/* If you also want slightly smaller headings on very small phones */
@media (max-width: 420px){
  .hero-video .hero-seq .messages .msg{
    width: 94%;
  }
}/* End custom CSS */