/* ==========================================================================
   Hiro Flap campaign page (page-hiro-flap.php) — loaded on that page only.
   ========================================================================== */

/* ---------- Hero: Hiro mid-swim between two golden gates ---------- */
.flap-hero {
	position: relative; overflow: hidden;
	padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)) 0 clamp(7rem, 13vw, 12rem);
	background: linear-gradient(180deg, var(--sky) 0%, var(--ocean) 70%, var(--ocean-deep) 100%);
	color: var(--white);
}
.flap-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
.flap-hero__kicker { font-weight: 900; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; opacity: .95; }
.flap-hero__title { margin-top: .4rem; font-size: clamp(2.8rem, 8vw, 6.5rem); line-height: .95; }
.flap-hero__lead { max-width: 46ch; margin-top: 1rem; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.6; }
.flap-hero__actions { margin-top: clamp(1.4rem, 2.5vw, 2rem); }
.flap-hero__note { margin-top: .9rem; font-size: .9rem; opacity: .9; }
.flap-hero__edge { position: absolute; z-index: 3; left: 0; right: 0; bottom: -1px; color: #FFF7EC; }

.flap-hero__hiro { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.flap-hero__fish { position: relative; z-index: 2; width: min(62%, 320px); height: auto; filter: drop-shadow(0 16px 30px rgba(0, 40, 90, .35)); }
.flap-hero__sea { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.flap-bubble { position: absolute; bottom: -8%; border-radius: 50%; background: rgba(255, 255, 255, .28); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.flap-bubble--1 { left: 12%; width: 26px; height: 26px; }
.flap-bubble--2 { left: 28%; width: 14px; height: 14px; }
.flap-bubble--3 { right: 18%; width: 34px; height: 34px; }
.flap-bubble--4 { right: 36%; width: 18px; height: 18px; }

/* ---------- How to play ---------- */
.flap-how { background: #FFF7EC; padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(3.5rem, 7vw, 6.5rem); text-align: center; }
.flap-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.4vw, 2.2rem); max-width: 1100px; margin: clamp(2rem, 4vw, 3.5rem) auto 0; text-align: left; }
.flap-step {
	position: relative; padding: clamp(1.4rem, 2.6vw, 2.2rem) clamp(1.3rem, 2.4vw, 2rem) clamp(1.5rem, 2.6vw, 2.2rem);
	background: var(--white); border: 3px solid var(--ink); border-radius: 26px; box-shadow: 0 8px 0 var(--ink);
}
.flap-step__n {
	display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: .9rem;
	font-family: var(--font-display); font-size: 1.5rem; color: var(--ink);
	background: var(--yellow); border: 3px solid var(--ink); border-radius: 50%;
}
.flap-step__title { font-weight: 900; font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.15; }
.flap-step p { margin-top: .6rem; font-size: .96rem; line-height: 1.6; }

/* ---------- Tries ---------- */
.flap-tries { position: relative; background: var(--ocean); color: var(--white); padding: clamp(3.5rem, 7vw, 6.5rem) 0; text-align: center; }
.flap-tries__lead, .flap-tries__signup { max-width: 60ch; margin: 1rem auto 0; font-size: clamp(.98rem, 1.15vw, 1.1rem); line-height: 1.6; }
.flap-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.4vw, 2.2rem); max-width: 1100px; margin: clamp(2rem, 4vw, 3.5rem) auto 0; text-align: left; }
.flap-card { padding: clamp(1.4rem, 2.6vw, 2rem); color: var(--ink); background: var(--white); border-radius: 26px; }
.flap-card__title { font-weight: 900; font-size: clamp(1.1rem, 1.5vw, 1.35rem); }
.flap-card p { margin-top: .6rem; font-size: .95rem; line-height: 1.6; }
.flap-tries__signup { margin-top: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; }

/* ---------- Prizes ---------- */
.flap-prizes { background: #FFF7EC; padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(4rem, 8vw, 7rem); text-align: center; }
.flap-prizes__lead { max-width: 64ch; margin: 1rem auto 0; font-size: clamp(.98rem, 1.15vw, 1.1rem); line-height: 1.6; }
.flap-prize-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.4vw, 2.2rem); max-width: 1000px; margin: clamp(2rem, 4vw, 3.5rem) auto 0; }
.flap-prize { padding: clamp(1.3rem, 2.4vw, 1.9rem); background: var(--white); border: 3px solid var(--ink); border-radius: 28px; box-shadow: 0 8px 0 var(--ink); }
.flap-prize__photo {
	position: relative; display: grid; place-items: center; gap: .5rem; aspect-ratio: 1.3; margin-bottom: 1rem;
	background: repeating-linear-gradient(45deg, #FFF3E6, #FFF3E6 12px, #FFE9CE 12px, #FFE9CE 24px);
	border-radius: 18px;
}
.flap-prize--gold .flap-prize__photo { background: repeating-linear-gradient(45deg, #FFF6DF, #FFF6DF 12px, #FFECBC 12px, #FFECBC 24px); }
.flap-prize--pink .flap-prize__photo { background: repeating-linear-gradient(45deg, #FFF0F2, #FFF0F2 12px, #FFE0E6 12px, #FFE0E6 24px); }
.flap-prize--blue .flap-prize__photo { background: repeating-linear-gradient(45deg, #EDF7FF, #EDF7FF 12px, #DCEEFF 12px, #DCEEFF 24px); }
.flap-prize__fish { width: 42%; max-width: 120px; height: auto; opacity: .9; }
.flap-prize__soon { font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #8a7a63; }
.flap-prize__rank { font-weight: 900; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: #a04f00; }
.flap-prize__name { margin-top: .2rem; font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.1; }
.flap-prize__count { margin-top: .3rem; font-weight: 700; font-size: .92rem; color: #4a4036; }

.flap-when { max-width: 60ch; margin: clamp(2rem, 4vw, 3rem) auto 0; padding: clamp(1.1rem, 2vw, 1.5rem); background: var(--yellow); border: 3px solid var(--ink); border-radius: 22px; font-size: 1rem; line-height: 1.6; }
.flap-when__start { margin-top: .5rem; font-weight: 700; font-size: .92rem; }
.flap-prizes__cta { margin-top: clamp(1.8rem, 3vw, 2.6rem); }

/* ---------- Draft terms ---------- */
.flap-terms { background: var(--white); padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem); scroll-margin-top: 7rem; }
.flap-terms .container { max-width: 820px; }
.flap-draft {
	display: inline-block; padding: .5rem .9rem; font-weight: 900; font-size: .82rem; letter-spacing: .06em;
	color: #7a3b00; background: #FFE9A8; border: 2px dashed #C58A00; border-radius: 12px;
}
.flap-terms__title { margin-top: 1rem; font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.flap-terms__body h3 { margin-top: 1.8rem; font-weight: 900; font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.flap-terms__body ul { margin-top: .6rem; padding-left: 1.2rem; list-style: disc; }
.flap-terms__body li { margin-top: .45rem; font-size: .96rem; line-height: 1.6; }
.flap-terms__links { margin-top: 2rem; font-weight: 700; }

@media (prefers-reduced-motion: no-preference) {
	.flap-hero__fish { animation: flap-swim 3.2s ease-in-out infinite; }
	.flap-bubble { animation: flap-rise 9s linear infinite; }
	.flap-bubble--2 { animation-duration: 7s; animation-delay: 1.5s; }
	.flap-bubble--3 { animation-duration: 11s; animation-delay: 3s; }
	.flap-bubble--4 { animation-duration: 8s; animation-delay: 4.5s; }
}
@keyframes flap-swim {
	0%, 100% { translate: 0 0; rotate: -7deg; }
	50% { translate: 0 -5%; rotate: 7deg; }
}
@keyframes flap-rise {
	0% { translate: 0 0; opacity: 0; }
	10% { opacity: .55; }
	100% { translate: 20px -120vh; opacity: 0; }
}

@media (max-width: 900px) {
	.flap-steps, .flap-cards, .flap-prize-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.flap-hero { padding-top: calc(var(--header-h) + 1.5rem); text-align: center; }
	.flap-hero__inner { grid-template-columns: 1fr; }
	.flap-hero__lead { margin-inline: auto; }
	.flap-hero__hiro { order: -1; aspect-ratio: 1.4; }
	.flap-hero__fish { width: min(52%, 200px); }
}