/* ====================
HERO SECTION IMAGE AND TEXT BOX (homepage-specific arrangement)
==================== */
.site-header {
width: 97%;
}

.hero-section {
margin-top: 3px;
margin-bottom: 5px;
}

.hero-container {
max-width: 1000px;
height: 426px;
margin: 0 auto;
display: flex;
align-items: stretch;
gap: 7px;
}

.hero-image {
flex: 0 0 auto;
width: 60%;
height: 100%;
overflow: visible;
}

.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.hero-text-stack {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 9px;
min-height: 0;
overflow: visible;
}

.text-box {
flex: 1;
min-height: 0;
border-radius: 20px;
border-width: 4px;
border-style: solid;
padding: 5px 10px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
overflow: visible;
}

.text-box p {
margin: 0;
font-family: 'Sniglet', arial, sans-serif;
font-size: 2.3rem;
line-height: 1.2;
text-align: center;
}

/* Individual color palettes */
.text-box-1 {
background: #edf1b8;
border-color: #b33b1e;
flex: .7;
}

.text-box-1 p {
color: #b85a2b;
font-size: 2.5rem;
letter-spacing: 0.06em;
line-height: 1.1;
}

.text-box-2 {
background: #dfe7f7;
border-color: #4d5ca8;
transform: scaleX(-1);
transition: transform 0.5s ease;
}

.text-box-2 p {
color: #5960b2;
font-size: 2.22rem;
letter-spacing: 0.04em;
line-height: 1.2;
}

.text-box-2:hover {
transform: scaleX(1);
}

.text-box-2.flipped {
transform: scaleX(1);
}

.text-box-3 {
background: #edf0c7;
border-color: #2f7c25;
transform: rotate(180deg);
transition: transform 0.4s ease;
}

.text-box-3 p {
color: #77611d;
font-size: 2.4rem;
letter-spacing: 0.03em;
line-height: 1.09;
}

.text-box-3:hover {
transform: rotate(0deg);
}

.text-box-1, .text-box-2, .text-box-3 {
box-shadow: 0 0 4px 2px rgba(255, 245, 150, 0.84);
}

/* ====================
COIN ROLL EFFECT
==================== */
.coin-link {
display: inline-block;
cursor: pointer;
}

.coin-link img {
display: block;
width: 100%;
height: auto;
}

@keyframes coin-roll {
0%   { transform: rotate(0deg) translateX(0px); }
25%  { transform: rotate(-90deg) translateX(-4px); }
50%  { transform: rotate(-180deg) translateX(0px); }
75%  { transform: rotate(-270deg) translateX(4px); }
100% { transform: rotate(-360deg) translateX(0px); }
}

.coin-link .coin-rolling {
animation: coin-roll 4s linear infinite;
}

/* ====================
WOBBLE EFFECT (renamed from duplicate "jello" — see note below)
==================== */
@keyframes wobble {
0%, 100% { transform: scaleX(1) scaleY(1); }
20% { transform: scaleX(1.2) scaleY(0.8); }
40% { transform: scaleX(0.9) scaleY(1.1); }
60% { transform: scaleX(1.1) scaleY(0.9); }
80% { transform: scaleX(0.95) scaleY(1.05); }
}

.hairy-bunny:hover img {
animation: wobble 0.8s ease-in-out;
}

/* ====================
WOBBLE LINK SECTION (circle rows)
==================== */
.circle-container {
display: flex;
flex-direction: column;
align-items: center;
max-width: 1000px;
width: 100%;
box-sizing: border-box;
margin: 0 auto;
margin-top: 5px;
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

.circle-row {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
width: 100%;
max-width: 1000px;
gap: 4px;
margin-bottom: 5px;
}

/* Row 1 — three links */
.row-1 { gap: 4px; }
.row-1 a { flex: 1; }
.row-1 a img {
width: 100%;
max-width: 333px;
height: auto;
display: block;
}

.row-1 a:hover img { transform: scale(1.03); }

/* Row 2 — four links */

.row-2 { gap: 4px; }
.row-2 a { flex: 1 1 auto; }
.row-2 a img {
width: 244px;
height: auto;
display: block;
}
.row-2 a:hover img { transform: scale(1.03); }

/* Row 3 — seven links */
.row-3 {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
width: 100%;
gap: 4px;
}
.row-3 a img {
width: 149px;
height: auto;
display: block;
}

.row-3 a:hover img { transform: scale(1.03); }

/* ====================
MOBILE RESPONSIVE
==================== */
@media (max-width: 768px) {

html {
overflow-x: hidden;
overflow-y: auto;
}

body {
background-size: var(--bg-size-mobile);
}

.hero-container {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
height: auto;
max-width: 100%;
padding: 0 2px;
box-sizing: border-box;
}

.hero-image {
width: 100%;
height: auto;
max-width: none;
flex: none;
margin: 0 auto;
padding-right: 0;
margin-bottom: 4px;
}

.hero-image img {
width: 99%;
height: auto;
margin: 0 auto;
object-fit: contain;
}

.hero-text-stack {
width: 100%;
height: auto;
flex: none;
gap: 9px;
padding: 0 2px;
}

.text-box {
flex: none;
height: auto;
min-height: 80px;
padding: 6px 10px;
border-width: 3px;
}

.text-box p {
font-size: clamp(1.2rem, 5vw, 1.8rem);
}

.text-box-1 p { font-size: clamp(2.1rem, 6.5vw, 2.7rem); }
.text-box-2 p { font-size: clamp(1.9rem, 6vw, 2.6rem); }
.text-box-3 p { font-size: clamp(2rem, 6vw, 2.3rem); }

.circle-container {
display: flex;
align-items: center;
width: 100%;
margin: 0 auto;
margin-bottom: 7px;
}

.circle-row {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 7px;
margin-bottom: 4px;
margin: 0 auto;
}

.circle-row a {
flex: 1;
}

.row-1 a img { width: 100%; max-width: 115px; height: auto; margin-bottom: 4px; }
.row-2 a img { width: 100%; max-width: 80px; height: auto; }

.row-3 a img { width: 47px; height: auto; }
}