/**
 * CEC Patterns — Companion Stylesheet
 *
 * @package CEC_Page_Publisher
 * @version 1.4.0
 */

/* -------------------------------------------------------------------------
   Section layout
   padding-top + padding-bottom with no margin so sections sit flush.
   Add --cec-section-gap to :root if you want a gap between sections.
   ------------------------------------------------------------------------- */

:root {
	--cec-section-gap: 0px;
}

section.alignfull {
	padding-top:    clamp(40px, 6vw, 72px);
	padding-bottom: clamp(40px, 6vw, 72px);
	padding-left:   clamp(16px, 4vw, 48px);
	padding-right:  clamp(16px, 4vw, 48px);
	margin-bottom:  0;
	box-sizing: border-box;
}

section.alignfull.bg-purple-grad {
	background: linear-gradient(135deg, #2D1151 0%, #6b2d9e 100%);
	color: #fff;
}
section.alignfull.bg-white { background: #ffffff; }
section.alignfull.bg-warm  { background: #F5F0EB; }

/* -------------------------------------------------------------------------
   .inner — centered content container
   ------------------------------------------------------------------------- */

.inner {
	margin-left:  auto;
	margin-right: auto;
	width: 100%;
	box-sizing: border-box;
}

/* CTA wrap — used by wave, stat_strip, and cta sections for centered content */
.cta-wrap {
	text-align: center;
}
.cta-wrap p {
	margin-bottom: 1.5rem;
	color: #ffffff;
}
.cta-wrap h2 {
	color: #FFD200;
}

/* -------------------------------------------------------------------------
   Button system — .btn base + variants
   These were previously in .cec-page-wrap boilerplate.
   Now global since shortcodes render outside that wrapper.
   ------------------------------------------------------------------------- */

a.btn, .btn {
	display:         inline-block;
	font-family:     var(--wp--preset--font-family--montserrat, 'Montserrat', sans-serif);
	font-weight:     900;
	font-size:       clamp(0.85rem, 1.2vw, 1rem);
	text-transform:  uppercase;
	letter-spacing:  0.04em;
	padding:         0.8em 2em;
	border-radius:   50px;
	text-decoration: none;
	cursor:          pointer;
	border:          2px solid transparent;
	transition:      transform 0.15s ease, box-shadow 0.15s ease;
	white-space:     nowrap;
}

a.btn:hover, .btn:hover {
	transform:  translateY(-2px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

a.btn-yellow, .btn-yellow {
	background:   #FFD200;
	color:        #2D1151;
	border-color: #FFD200;
}

a.btn-red, .btn-red {
	background:   #E80016;
	color:        #ffffff;
	border-color: #E80016;
}

a.btn-outline-white, .btn-outline-white {
	background:   transparent;
	color:        #FFD200;
	border-color: #FFD200;
}

a.btn-outline-white:hover, .btn-outline-white:hover {
	background: rgba(255,210,0,0.12);
}

/* -------------------------------------------------------------------------
   Token coin list items
   ------------------------------------------------------------------------- */

[data-cec-token] {
	flex:      0 0 clamp(140px, 20%, 200px);
	max-width: 200px;
	text-align: center;
}

[data-cec-token] p {
	white-space:  normal;
	word-break:   normal;
	max-width:    160px;
	margin-left:  auto;
	margin-right: auto;
	text-align:   center;
}

@keyframes cec-confetti-drift {
	0%   { transform: translateY(0)    rotate(0deg);   opacity: 0.45; }
	33%  { transform: translateY(-18px) rotate(15deg);  opacity: 0.7;  }
	66%  { transform: translateY(-8px)  rotate(-8deg);  opacity: 0.55; }
	100% { transform: translateY(-24px) rotate(22deg);  opacity: 0;    }
}

.cec-confetti-burst--active [data-cec-confetti-piece] {
	animation: cec-confetti-drift 1.4s ease-out forwards;
}

/* Stagger each piece by its index — shortcode sets --cec-piece-index */
.cec-confetti-burst--active [data-cec-confetti-piece] {
	animation-delay: calc( var( --cec-piece-index, 0 ) * 60ms );
}

/* -------------------------------------------------------------------------
   Speech bubble tail wobble — plays once on entrance
   ------------------------------------------------------------------------- */

@keyframes cec-bubble-settle {
	0%   { transform: scale(0.85); }
	60%  { transform: scale(1.04); }
	80%  { transform: scale(0.98); }
	100% { transform: scale(1);    }
}

/* Applied by the JS after the opacity/transform transition completes */
.cec-bubble--settled {
	animation: cec-bubble-settle 300ms ease forwards;
}

/* -------------------------------------------------------------------------
   Score leaderboard blink dot
   (Moved here from inline <style> in the pattern HTML so it's cached)
   ------------------------------------------------------------------------- */

@keyframes cec-blink {
	50% { opacity: 0.3; }
}

[data-cec-blink] {
	animation: cec-blink 1s infinite;
}

@media ( prefers-reduced-motion: reduce ) {
	[data-cec-blink] {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
   Polaroid perspective container
   (Enables 3D tilt — must be on a parent, not the card itself)
   ------------------------------------------------------------------------- */

[data-cec-pattern="polaroid"] {
	perspective: 800px;
}

[data-cec-polaroid-card] {
	transform-style: preserve-3d;
	/* Base transition is set by JS on mouseenter/mouseleave;
	   this is the resting default (no transition lag on page load). */
	transition: none;
}

/* -------------------------------------------------------------------------
   Parallax layer
   The JS sets --cec-parallax-y; this applies it.
   Using transform here (not top/left) keeps the effect on the
   compositor thread and avoids layout thrashing.
   ------------------------------------------------------------------------- */

[data-cec-pattern="parallax"] {
	transform: translateY( var( --cec-parallax-y, 0px ) );
	will-change: transform;
}

/* -------------------------------------------------------------------------
   Reduced motion: hard-override all our pattern transitions/animations
   ------------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	[data-cec-pattern],
	[data-cec-polaroid-card],
	[data-cec-bubble],
	[data-cec-score-row],
	[data-cec-token],
	[data-cec-confetti-piece] {
		animation:  none !important;
		transition: none !important;
	}

	[data-cec-pattern="parallax"] {
		transform:    none !important;
		will-change:  auto !important;
	}
}