/* =============================================================================
   Big Churro Energy — Event Page 2 (scoped, independent of Spin & Win)
   Brand palette (San Churro Brand Guidelines V1):
     Churro Orange #E87722 / homepage #F57E29 | Terracotta #963821
     Sandstone #EFE4CE | Medium Blue #303AB2 | Icing Sugar #FFFFFF
   Fonts: Archer (serif) / Brandon (sans) — already loaded by the theme.
   Everything is scoped under .bce-page.
============================================================================= */

@font-face {
    font-family: 'Minion Pro';
    src: url('../fonts/MinionPro-Regular.eot');
    src: url('../fonts/MinionPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/MinionPro-Regular.woff2') format('woff2'),
        url('../fonts/MinionPro-Regular.woff') format('woff'),
        url('../fonts/MinionPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



.bce-page {
    --bce-orange: #E87722;
    --bce-orange2: #F57E29;
    --bce-terra: #963821;
    --bce-sand: #EFE4CE;
    --bce-blue: #0d727c;
    --bce-white: #FFFFFF;
    color: #1a1a1a;
    overflow-x: hidden;
    font-family: 'Brandon', Arial, sans-serif;
}
.bce-page * { box-sizing: border-box; }
.bce-page img { max-width: 100%; height: auto; display: block; }

/* ---------- Buttons (matched to homepage hero-banner .btn) ---------- */
.bce-page .bce-btn {
    display: inline-block;
    font-family: 'Brandon', Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: normal;
    padding: 12px 30px;
    border: 0;
    border-radius: 25px;
    cursor: pointer;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    transition: 0.15s linear;
}
.bce-page .bce-btn--white { background: var(--bce-white); color: var(--bce-orange2); }
.bce-page .bce-btn--white:hover, .bce-page .bce-btn--white:focus { background: var(--bce-orange2); color: var(--bce-white); outline: none; }
.bce-page .bce-btn--orange { background: var(--bce-orange2); color: var(--bce-white); }
.bce-page .bce-btn--orange:hover, .bce-page .bce-btn--orange:focus { background: var(--bce-terra); color: var(--bce-white); outline: none; }

/* ---------- HERO (full-bleed campaign photo) ---------- */
.bce-page .bce-hero {
    position: relative;
    min-height: 100vh;
    background-color: var(--bce-orange);
    background-size: cover;

    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    padding: 90px 24px 40px 24px;
    overflow: hidden;
    background-position-x: center;
    background-position-y: -11vw;
}
@media only screen and (max-width: 1400px) {
	.bce-page .bce-hero {background-position-y: -5vw;}
}
@media only screen and (max-width: 1200px) {
	.bce-page .bce-hero {background-position-y: 5vw;}
}
.bce-page .bce-hero__scrim {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.2);
    pointer-events: none;
}
.bce-page .bce-hero__inner { position: relative; z-index: 2; max-width: 900px; padding: 70px 0;}
.bce-page .bce-eyebrow {
    font-family: 'Brandon', Arial, sans-serif;
    font-style: italic;
    font-size: clamp(16px, 2vw, 22px);
    letter-spacing: 1px;
    color: var(--bce-white);
    margin: 0 0 12px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.bce-page .bce-title {
    margin: 0 0 22px;
    color: var(--bce-white);
    text-transform: uppercase;
    line-height: 0.82;
    letter-spacing: 1px;
    text-shadow: 0 6px 28px rgba(0,0,0,0.32);
    display: none !important;
}
.logo-box{
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	margin-bottom: 30px;
}
.logo-box img{
	width: 100%;
}
.bce-page .bce-title span {
	 display: block; 
	 font-family: 'Minion Pro' !important;
	 font-weight: 600;
	  }
.bce-page .bce-title__l1,.bce-page .bce-title__l2{

    font-size: clamp(64px, 13vw, 166px);
    line-height: 0.78;
    
    font-family: 'Minion Pro' !important;
   
}


@media only screen and (min-width: 768px) {
	@media only screen and (max-height: 768px) {
		
	}
}

@media only screen and (max-width: 768px) {
	.bce-page .bce-title__l1,.bce-page .bce-title__l2{
		font-size: 84px;
	}
}
.bce-page .bce-title__l3 { font-size: clamp(30px, 5.2vw, 76px); letter-spacing: 6px;font-weight: 400 !important; }
.bce-page .bce-hero__lead {
    font-size: clamp(17px, 2.2vw, 24px);
    color: var(--bce-white);
    max-width: 620px;
    margin: 0 auto 8px;
    line-height: 1.4;
    text-shadow: 0 2px 14px rgba(0,0,0,0.4);
}

/* ---------- PRIZE (San Churro blue) ---------- */
.bce-page .bce-prize { position: relative; background: #CA375D; color: var(--bce-white); padding: clamp(70px,9vw,130px) 24px; }
.bce-page .bce-prize__inner {
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px,5vw,72px);
    align-items: center;
}
.bce-page .bce-prize__eyebrow {
    font-family: 'Brandon', Arial, sans-serif; font-style: italic;
    font-size: clamp(16px,2vw,22px); letter-spacing: 1px; color: var(--bce-sand); margin: 0 0 14px;
}
.bce-page .bce-prize__title {
    font-family: 'Brandon', Arial, sans-serif; font-weight: 700;
    font-size: clamp(34px,4.6vw,64px); line-height: 1.02; text-transform: uppercase;
    letter-spacing: 1px; margin: 0 0 20px;
}
.bce-page .bce-prize__text { font-size: clamp(17px,2vw,22px); line-height: 1.5; margin: 0 0 18px; max-width: 36ch; }
.bce-page .bce-prize__terms { font-family:'Brandon',Arial,sans-serif; font-style:italic; font-size: 15px; opacity: 0.8; margin: 0; }
.bce-page .bce-prize__media { display: flex; flex-direction: column; gap: clamp(18px,2.4vw,30px); align-items: center; }
.bce-page .bce-smuggler {
    width: 100%;
    max-width: 440px;
}
.bce-page .bce-smuggler--a { transform: rotate(-3deg); }
.bce-page .bce-smuggler--b { transform: rotate(3deg); }

/* ---------- PLAY / WHEEL (sandstone) ---------- */
.bce-page .bce-play {
    position: relative;
    background: radial-gradient(70% 90% at 50% 0%, #fff7e8 0%, var(--bce-sand) 70%), var(--bce-sand);
    padding: clamp(80px,10vw,150px) 24px; text-align: center; overflow: hidden;
}
.bce-page .bce-play__inner { position: relative; z-index: 3; max-width: 760px; margin: 0 auto; }
.bce-page .bce-play__title {
    font-family:'Brandon',Arial,sans-serif; font-weight:700;
    font-size: clamp(36px,5.4vw,72px); line-height: 1; text-transform: uppercase;
    letter-spacing: 1px; color: var(--bce-terra); margin: 0 0 14px;
}
.bce-page .bce-play__lead { font-size: clamp(17px,2vw,21px); color: var(--bce-terra); margin: 0 0 40px; line-height: 1.5; }
.bce-page .bce-play__actions {
    display: flex; align-items: center; justify-content: center; gap: clamp(28px,5vw,64px); flex-wrap: wrap;
}
.bce-page .bce-scan { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bce-page .bce-scan__qr {
    width: 132px; height: 132px; background:#fff; padding: 10px; border-radius: 16px;
    box-shadow: 0 14px 34px rgba(150,56,33,0.18);
}
.bce-page .bce-scan__label {
    font-family:'Brandon',Arial,sans-serif; font-weight:700; font-size: 13px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--bce-terra);
}

/* floating mini churros */
.bce-page .bce-mini {
    position: absolute; z-index: 1; pointer-events: none; user-select: none;
    filter: drop-shadow(0 16px 30px rgba(0,0,0,0.22));
    animation: bceFloat 10s ease-in-out infinite;
}
.bce-page .bce-mini--1 { top: 6%;  left: -3%;  width: clamp(150px,18vw,300px); transform: rotate(-14deg); animation-delay: 0s; }
.bce-page .bce-mini--2 { top: 10%; right: -2%; width: clamp(150px,17vw,290px); transform: rotate(20deg);  animation-delay: -1.5s; }
.bce-page .bce-mini--3 { bottom: 4%; left: 2%;  width: clamp(130px,15vw,250px); transform: rotate(10deg);  animation-delay: -3s; }
.bce-page .bce-mini--4 { bottom: -4%; right: 4%; width: clamp(140px,16vw,270px); transform: rotate(-12deg); animation-delay: -4.5s; }
.bce-page .bce-mini--5 { top: 44%; left: -5%;  width: clamp(110px,12vw,210px); transform: rotate(28deg);  animation-delay: -6s; }
.bce-page .bce-mini--6 { top: 40%; right: -5%; width: clamp(120px,13vw,230px); transform: rotate(-22deg); animation-delay: -7.5s; }
@keyframes bceFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -20px; } }

/* ---------- CLOSING ---------- */
.bce-page .bce-closing {
    background: radial-gradient(120% 100% at 50% 0%, #f08c44 0%, var(--bce-orange) 55%, #c2611a 100%);
    color: var(--bce-white); text-align: center; padding: clamp(80px,10vw,140px) 24px;
}
.bce-page .bce-closing__title {
    font-family:'Brandon',Arial,sans-serif; font-weight:700;
    font-size: clamp(32px,5vw,68px); line-height: 1.05; text-transform: uppercase;
    letter-spacing: 1px; margin: 0 0 32px; text-shadow: 0 4px 22px rgba(0,0,0,0.25);
}

/* ---------- MODAL (popup wheel) ---------- */
.bce-modal {
    position: fixed; inset: 0; z-index: 100000;
  
    opacity: 0; transition: all 0.3s ease;
    visibility: hidden;
}
.bce-modal.is-open { opacity: 1; visibility: visible;}
.bce-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.bce-modal__dialog {
    position: relative; z-index: 1; width: 100%; height: 100%;max-width: 800px;
    background: #fff; border-radius: 0;
    overflow: hidden; transform: translateY(-16px,0); transition: transform .25s ease;
}
.bce-modal.is-open .bce-modal__dialog { transform: none; }
.bce-modal__close {
    position: absolute; top: 10px; right: 14px; z-index: 2; width: 40px; height: 40px;
    border: 0; padding: 0; letter-spacing: 0; margin: 0; border-radius: 999px;
    background: rgba(0,0,0,0.06); color: #E67632; font-size: 26px; line-height: 1; cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.bce-modal__close:hover, .bce-modal__close:focus { background: #E67632; color: #fff; outline: none; transform: scale(1.05); }
.bce-modal__body {
    position: relative;width: 100%; height: 100%; overflow: auto;
}
.bce-modal__body iframe, .bce-modal__body > div:not(.bce-modal__placeholder) { width: 100%; height: 100%; border: 0; display: block; }
.bce-modal__placeholder {
    text-align: center; color: #8a6a3f; border: 2px dashed rgba(13,114,124,0.4);
    border-radius: 16px; padding: 40px 24px; width: 86%;
}
.bce-modal__placeholder span { display: block; font-family:'Brandon',sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--bce-blue); }
.bce-modal__placeholder small { display: block; font-size: 13px; margin-top: 8px; opacity: 0.7; }
body.bce-modal-open { overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .bce-page .bce-prize__inner { grid-template-columns: 1fr; text-align: center; }
    .bce-page .bce-prize__text { max-width: none; }
    .bce-page .bce-prize__media { max-width: 460px; margin: 8px auto 0; }
    .bce-page .bce-smuggler { max-width: 360px; }
}
@media (max-width: 720px) {
    .bce-page .bce-hero { min-height: 100vh; padding: 80px 20px 30px 20px; background-position: center top; }
    .bce-page .bce-mini--1, .bce-page .bce-mini--5 { left: -10%; }
    .bce-page .bce-mini--2, .bce-page .bce-mini--6 { right: -10%; }
}
@media (prefers-reduced-motion: reduce) { .bce-page .bce-mini { animation: none; } }

/* ---------- Color overrides (theme main.css sets h1-h6/p/span to grey #707070) ---------- */
.bce-page .bce-title,
.bce-page .bce-title span { color: var(--bce-white); }
.bce-page .bce-hero__lead,
.bce-page .bce-hero__lead span,
.bce-page .bce-eyebrow { color: var(--bce-white); }
.bce-page .bce-prize__title,
.bce-page .bce-prize__title span,
.bce-page .bce-prize__text,
.bce-page .bce-prize__text span,
.bce-page .bce-prize__terms { color: var(--bce-white); }
.bce-page .bce-prize__eyebrow { color: var(--bce-sand); }
.bce-page .bce-closing__title,
.bce-page .bce-closing__title span { color: var(--bce-white); }
.bce-page .bce-play__title { color: var(--bce-terra); }
.bce-page .bce-play__lead,
.bce-page .bce-play__lead span,
.bce-page .bce-scan__label { color: var(--bce-terra); }
.bce-page .bce-modal__placeholder span { color: var(--bce-blue); }

/* unify font */
.bce-page, .bce-page button, .bce-modal, .bce-modal button { font-family: 'Brandon', Arial, sans-serif; }

/* ---------- HERO floating churros (around the text) ---------- */
.bce-page .bce-hero-mini {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 14px 26px rgba(0,0,0,0.32));
    animation: bceFloat 10s ease-in-out infinite;
}
.bce-page .bce-hero-mini--1 { top: 13%; left: 4%;  width: clamp(92px,11vw,182px); transform: rotate(-18deg); animation-delay: 0s; }
.bce-page .bce-hero-mini--2 { top: 9%;  right: 5%; width: clamp(96px,12vw,196px); transform: rotate(22deg);  animation-delay: -1.4s; }
.bce-page .bce-hero-mini--3 { top: 45%; left: 1%;  width: clamp(80px,9vw,150px);  transform: rotate(12deg);  animation-delay: -2.8s; }
.bce-page .bce-hero-mini--4 { top: 49%; right: 2%; width: clamp(80px,9vw,150px);  transform: rotate(-14deg); animation-delay: -4.2s; }
.bce-page .bce-hero-mini--5 { bottom: 9%; left: 8%;  width: clamp(86px,10vw,168px); transform: rotate(16deg);  animation-delay: -5.6s; }
.bce-page .bce-hero-mini--6 { bottom: 7%; right: 9%; width: clamp(90px,10vw,174px); transform: rotate(-20deg); animation-delay: -7s; }

@media (max-width: 720px) {
    .bce-page .bce-hero-mini--1 { top: 9%;  left: -4%; width: 110px; }
    .bce-page .bce-hero-mini--2 { top: 7%;  right: -4%; width: 120px; }
    .bce-page .bce-hero-mini--3,
    .bce-page .bce-hero-mini--4 { display: none; }
    .bce-page .bce-hero-mini--5 { bottom: 4%; left: -5%; width: 110px; }
    .bce-page .bce-hero-mini--6 { bottom: 3%; right: -5%; width: 115px; }
}

/* ---------- Font-weight lock (fix font shift when OptiMonk queues popup) ----------
   Brandon's regular face is registered at weight 500; there is NO 400 face
   (only 300/500/700). Text left at 400 has no exact match, so the browser
   re-resolves it whenever later font activity happens (e.g. OptiMonk's
   "Queued campaign for display"), causing a visible font shift. Defaulting
   all normal text to 500 = exact match = stable (headings/buttons stay 700). */
.bce-page { font-weight: 500; }
.bce-page .bce-hero__lead,
.bce-page .bce-prize__text,
.bce-page .bce-prize__terms,
.bce-page .bce-prize__eyebrow,
.bce-page .bce-play__lead { font-weight: 500; }

.bce-page .bce-hero__lead{
	font-weight: 700;
	
}

.bce-page .bce-hero__lead_2{
	 font-size: clamp(15px, 1.8vw, 20px);
    color: var(--bce-white);
    max-width: 620px;
    margin: 0 auto 14px;
    line-height: 1.4;
    text-shadow: 0 2px 14px rgba(0,0,0,0.4);
    font-weight: 500;
}

.terms_and_conditions{
	font-size: clamp(13px, 1.5vw, 15px);
    color: var(--bce-white);
    max-width: 620px;
    margin: 0 auto;
    margin-top: 30px;
    line-height: 1.4;
    text-shadow: 0 2px 14px rgba(0,0,0,0.4);
    font-weight: 500;
}
/* ---------- Scroll reveal (WOW-style: text fadeInUp, images fadeIn) ---------- */
.bce-anim .bce-page .wow { opacity: 0; transition: opacity .7s ease, transform .7s ease; }
.bce-anim .bce-page .wow.fadeInUp { transform: translateY(32px); }
.bce-anim .bce-page .wow.fadeInUp.is-in { transform: none; }
.bce-anim .bce-page .wow.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .bce-anim .bce-page .wow { opacity: 1; transform: none; transition: none; }
}

/* ---------- Logo badge straddling the Hero / Prize seam (backend-replaceable) ---------- */
.bce-page .bce-seam-logo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    width: clamp(96px, 11vw, 128px);
    height: auto;
    border-radius: 50%;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

#churro div{
	height: auto !important;
	display: flex !important;
	align-items: center !important;
	padding-left: 8px;
	justify-content: center;
	padding-top: 9px;
}
#churro div span{
	position: static !important;
	transform-origin: center !important;
	letter-spacing: 3px;
}

#churro div span:nth-child(1){
	transform:rotate(-11deg) translate(0,35px) !important;
}
#churro div span:nth-child(2){
	transform:rotate(-7deg) translate(0,12px) !important;
}
#churro div span:nth-child(3){
	transform:rotate(-4deg) translate(0,0px) !important;
}
#churro div span:nth-child(4){
	transform:rotate(3deg) translate(0,-2px) !important;
}
#churro div span:nth-child(5){
	transform:rotate(7deg) translate(3px,9px) !important;
}
#churro div span:nth-child(6){
	transform:rotate(11deg) translate(0,32px) !important;
}



@media only screen and (max-width: 768px) {
	#churro div span:nth-child(1){
		transform:rotate(-11deg) translate(0,20px) !important;
	}
	#churro div span:nth-child(2){
		transform:rotate(-7deg) translate(0,7px) !important;
	}
	#churro div span:nth-child(3){
		transform:rotate(-4deg) translate(0,0px) !important;
	}
	#churro div span:nth-child(4){
		transform:rotate(3deg) translate(0,0px) !important;
	}
	#churro div span:nth-child(5){
		transform:rotate(7deg) translate(3px,6px) !important;
	}
	#churro div span:nth-child(6){
		transform:rotate(11deg) translate(0,20px) !important;
	}
}