@font-face {
    font-family: 'Abordage';
    src: url(' https://lolplaylab.ca/wp-content/uploads/2026/03/Abordage-Regular.woff2') format('woff2'),
         url(' https://lolplaylab.ca/wp-content/uploads/2026/03/Abordage-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* These variables control Blocksy's core typography */
    --theme-font-family: 'Abordage', sans-serif !important;
    --theme-heading-font-family: 'Abordage', sans-serif !important;
    
    /* This overrides the standard WP "System" stack */
    --wp--preset--font-family--system-font: 'Abordage', sans-serif !important;
}

/* This is the 'Nuclear Option' to force the root document font */
html, body {
    font-family: 'Abordage', sans-serif !important;
}

.soft-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    /* Keeps rounded corners from flickering during animation */
    backface-visibility: hidden; 
}

.soft-lift:hover {
    transform: translateY(-12px) !important;
  
    z-index: 99;
    position: relative;
}

.pop-grow {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.pop-grow:hover {
    transform: scale(1.05); /* Grows by 5% */
    z-index: 10; /* Ensures it stays on top of neighbors */
}


.squishy-button {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.squishy-button:active {
    transform: scale(0.9); /* Squeezes down when clicked */
}

.squishy-button:hover {
    transform: scale(1.05); /* Pops up when hovered */
}
@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.float-animation {
    animation: floating 4s ease-in-out infinite;
}

@keyframes wiggle {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-1deg); }
  75% { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}

.hover-wiggle:hover {
  animation: wiggle 0.5s infinite;
}
/* 1. Define the Timeline */
@keyframes pulse-and-pause {
  0% { transform: scale(1); }
  33% { transform: scale(1.1); } /* Grow halfway through movement */
  66% { transform: scale(1); }   /* Back to normal at 2 seconds */
  100% { transform: scale(1); }  /* Stay at normal for the last 1 second */
}

/* 2. Apply it to your class */
.pausing-pulse {
  display: inline-block; /* Required for transform to work on some elements */
  animation: pulse-and-pause 3s linear infinite;
}

.scallop-top {
    height: 40px;
    background-color: #AEE6D7;

    -webkit-mask-image: radial-gradient(circle at 50% 100%, black 70%, transparent 72%);
    -webkit-mask-size: 80px 40px;
    -webkit-mask-repeat: repeat-x;

    mask-image: radial-gradient(circle at 50% 100%, black 70%, transparent 72%);
    mask-size: 80px 40px;
    mask-repeat: repeat-x;
}

.scallop-top-cream {
    height: 40px;
    background-color: #FFE2E2;

    -webkit-mask-image: radial-gradient(circle at 50% 100%, black 70%, transparent 72%);
    -webkit-mask-size: 80px 40px;
    -webkit-mask-repeat: repeat-x;

    mask-image: radial-gradient(circle at 50% 100%, black 70%, transparent 72%);
    mask-size: 80px 40px;
    mask-repeat: repeat-x;
}
.scallop-bottom {
    height: 40px;
    background-color: #AEE6D7;

    -webkit-mask-image: radial-gradient(circle at 50% 0%, black 70%, transparent 72%);
    -webkit-mask-size: 80px 40px;
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-position: bottom;

    mask-image: radial-gradient(circle at 50% 0%, black 70%, transparent 72%);
    mask-size: 80px 40px;
    mask-repeat: repeat-x;
    mask-position: bottom;
}
.scallop-bottom-cream {
    height: 40px;
    background-color: #FEFAEC;

    -webkit-mask-image: radial-gradient(circle at 50% 0%, black 70%, transparent 72%);
    -webkit-mask-size: 80px 40px;
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-position: bottom;

    mask-image: radial-gradient(circle at 50% 0%, black 70%, transparent 72%);
    mask-size: 80px 40px;
    mask-repeat: repeat-x;
    mask-position: bottom;
}


.scallop-debug {
	 transform: translateX(-45px); /* adjust this */
   
    position: relative;
    --bubble-size: 80px;
    --bubble-width: 60px;

    width: var(--bubble-width);
    flex: 0 0 var(--bubble-width); /* prevents shrinking */

    align-self: stretch; /* key line */

    background-color: #FEFAEC;

    -webkit-mask-image: radial-gradient(circle at 100% 50%, black 60%, transparent 62%);
    -webkit-mask-size: var(--bubble-width) var(--bubble-size);
    -webkit-mask-repeat: repeat-y;

    mask-image: radial-gradient(circle at 100% 50%, black 60%, transparent 62%);
    mask-size: var(--bubble-width) var(--bubble-size);
    mask-repeat: repeat-y;
}

.illustrative-stripes {
    --stripe-pink: #FFB2B2;
    --stripe-white: #FEFAEC; 
    --stripe-width: 80px;

    background: repeating-linear-gradient(
        90deg,
        var(--stripe-white),
        var(--stripe-white) var(--stripe-width),
        var(--stripe-pink) var(--stripe-width),
        var(--stripe-pink) calc(var(--stripe-width) * 2)
    );
   
}

.stripe-caps-top {
    height: 80px;
    width: 100%;

    --stripe-width: 80px;
    --stripe-pink: #FFB2B2;

    background-image: radial-gradient(
        circle calc(var(--stripe-width) / 2) at 50% 100%, 
        var(--stripe-pink) 99%, 
        transparent 100%
    );

    background-size: calc(var(--stripe-width) * 2) 100%;
    background-repeat: repeat-x;

    background-position: calc(var(--stripe-width) / 2) 0; /* 👈 KEY */

    margin-bottom: -1px;
}
.stripe-caps-bottom {
    height: 80px;
    width: 100%;

    --stripe-width: 80px;
    --stripe-pink: #FFB2B2;

    background-image: radial-gradient(
        circle calc(var(--stripe-width) / 2) at 50% 0%, /* 👈 flipped */
        var(--stripe-pink) 99%,
        transparent 100%
    );

    background-size: calc(var(--stripe-width) * 2) 100%;
    background-repeat: repeat-x;

    background-position: calc(var(--stripe-width) / 2) 0; /* 👈 SAME offset */

    margin-top: -1px;
}
.illustrative-stripes-blue {
    --stripe-blue: #AAE6DD;
    --stripe-white: #FEFAEC; 
    --stripe-width: 80px;

    background: repeating-linear-gradient(
        90deg,
        var(--stripe-white),
        var(--stripe-white) var(--stripe-width),
        var(--stripe-blue) var(--stripe-width),
        var(--stripe-blue) calc(var(--stripe-width) * 2)
    );
   
}
.stripe-caps-top-blue {
    height: 80px;
    width: 100%;

    --stripe-width: 80px;
    --stripe-pink: #AAE6DD;

    background-image: radial-gradient(
        circle calc(var(--stripe-width) / 2) at 50% 100%, 
        var(--stripe-pink) 99%, 
        transparent 100%
    );

    background-size: calc(var(--stripe-width) * 2) 100%;
    background-repeat: repeat-x;

    background-position: calc(var(--stripe-width) / 2) 0; /* 👈 KEY */

    margin-bottom: -1px;
}

.stripe-caps-bottom-blue {
    height: 80px;
    width: 100%;

    --stripe-width: 80px;
    --stripe-pink: #AAE6DD;

    background-image: radial-gradient(
        circle calc(var(--stripe-width) / 2) at 50% 0%, /* 👈 flipped */
        var(--stripe-pink) 99%,
        transparent 100%
    );

    background-size: calc(var(--stripe-width) * 2) 100%;
    background-repeat: repeat-x;

    background-position: calc(var(--stripe-width) / 2) 0; /* 👈 SAME offset */

    margin-top: -1px;
}

#sticky-hours-text-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    max-width: 350px;
    pointer-events: none; /* Allows clicks to pass through if it covers a button */
}

/* Optional: Hide it on very small phones if it blocks content */
@media (max-width: 480px) {
    #sticky-hours-text-container {
        width: 80%;
        bottom: 10px;
        right: 10px;
    }
}