/*
 Theme Name:   Stan's Donut Race
 Theme URI:    https://donut5k.com
 Description:  Stan's Donut Race
 Author:       Randy Baum
 Author URI:   https://www.randybaumdesign.com
 Template:     generatepress
 Version:      0.1
*/

html {
	scroll-behavior: smooth;
}

body {
	background:
		radial-gradient(circle, rgb(255 255 255 / 90%) 0%, var(--base-3) 75%), url(/wp-content/uploads/2026/01/sprinkles.webp) center / auto no-repeat;
	background-attachment: fixed;
}

:where(.gb-navigation[data-gb-mobile-menu-type=full-overlay]) .gb-menu-container--mobile .gb-menu-toggle--clone {
	right: 1.5rem;
	top: 1rem;
}

section {
	scroll-margin-top: calc(4rem + var(--wp-admin--admin-bar--height, 0px));
}

img {
	vertical-align: top;
}

/* FADE-IN EFFECT */

@media screen and (prefers-reduced-motion:no-preference) {
	
	@keyframes fade-in {
		from { opacity: 0; transform: translateY(1.5rem)}
		to { opacity: 1; transform: none}
	}

	.fade-in {
		opacity: 0;
		animation: fade-in 1s cubic-bezier(.4, 0, .2, 1) forwards;
		animation-timeline: view();
		animation-range: entry 0% cover 30%
	}
	
}

/* UNORDERED LISTS */

:where(.editor-styles-wrapper) ol,
:where(.editor-styles-wrapper) ul {
	padding-left: 1.5em;
}

ul.wp-block-list {
	margin-left: 1.5em;
}

:where(.editor-styles-wrapper) ol li:not(:last-child),
:where(.editor-styles-wrapper) ul li:not(:last-child),
ul.wp-block-list li:not(:last-child) {
	margin-bottom: 0.75em;
}

:where(.editor-styles-wrapper) ul li::marker,
ul.wp-block-list li::marker {
	color: var(--accent-2);
}

:where(.editor-styles-wrapper) ol ol,
:where(.editor-styles-wrapper) ul ul,
ul.wp-block-list ul {
	margin-top: 1em;
}

/* WPFORMS */

div.wpforms-container-full .wpforms-form .wpforms-description {
	font-weight: inherit;
	font-size: inherit;
	line-height: inherit;
}

div.wpforms-container-full .wpforms-form .wpforms-head-container {
	padding-bottom: 1em;
}

div.wpforms-container-full:not(:empty) {
	margin: 0 auto;
}

html :where(.wp-block-wpforms-form-selector) {
	margin-top: 0;
	margin-bottom: 0;
}

.wpforms-field-container > *:first-child {
	padding-top: 0;
}

div.wpforms-container.wpforms-container-full button[type=submit]:not(:hover):not(:active) {
	background: var(--accent-2);
	color: var(--base-3);
}

div.wpforms-container.wpforms-container-full button[type=submit] {
	align-items: center;
	background-color: var(--accent-2);
	color: var(--base-3);
	display: inline-flex;
	font-family: var(--gp-font--tisa-sans-ot);
	font-size: 1.25rem;
	font-weight: 900;
	text-decoration: none;
	text-transform: uppercase;
	border-radius: 50vw;
	padding: 0.75rem 1.5rem;
	line-height: 1.5;
	height: auto;
}

div.wpforms-container.wpforms-container-full button[type=submit]:is(:hover, :active) {
	background: var(--accent-3-dk);
	color: var(--base-3);	
}

/* LOGO CAROUSEL */

.logo-carousel {
	mask-image: linear-gradient(var(--mask-direction, to right), hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 10%, hsl(0 0% 0% / 1) 90%, hsl(0 0% 0% / 0));
}

/* ROTATE ON SCROLL */

.rotate svg,
img.rotate {
  view-timeline-name: --rotate-timeline;
  view-timeline-axis: block;
  animation-name: rotate-on-scroll;
  animation-timeline: --rotate-timeline;
  animation-range: entry 0% exit 100%;
  animation-fill-mode: both;
  animation-duration: 1s;
  animation-timing-function: linear;
}

@keyframes rotate-on-scroll {
  from { transform: rotate(0deg);}
  to   { transform: rotate(360deg);}
}

/* ROTATE ON HOVER */

.spin img {
	transform: rotate(0);
	transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.spin:is(:hover, :focus) img {
	transform: rotate(0.25turn);
}

/* STRIPED BACKGROUND */

.striped-bg {
	background-image: linear-gradient(90deg, 
    var(--accent-2) 25%, 
    var(--accent) 25%, 
    var(--accent) 50%, 
    var(--accent-2) 50%, 
    var(--accent-2) 75%, 
    var(--accent) 75%, 
    var(--accent) 100%
  );
	background-size: 25% auto;
	background-repeat: repeat;
}

@keyframes pulse {
	from {
		transform: scale3d(1, 1, 1);
	}
	50% {
		transform: scale3d(1.1, 1.1, 1.1);
	}
	to {
		transform: scale3d(1, 1, 1);
	}
}

.gb-text-3f57010e:is(:hover, :focus) mark {
	display: inline-block;
	animation-name: pulse;
	animation-timing-function: ease-in-out;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}