* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

@font-face {
font-family: "Galano Regular";
font-weight: 100;
font-display: auto;
src: url("/-global-assets/fonts/GalanoGrotesqueRegular.otf")
format("OpenType");
}
@font-face {
font-family: "Galano Medium";
font-weight: 100;
font-display: auto;
font-fallback: Roboto;
src: url("/-global-assets/fonts/GalanoGrotesque-Medium.ttf")
format("truetype");
}

@font-face {
font-family: "Galano Bold";
font-weight: 100;
font-display: auto;
font-fallback: roboto;
src: url("/-global-assets/fonts/GalanoGrotesqueDEMO-Bold.ttf")
format("truetype");
}

@font-face {
font-family: "Uhudscript";
font-weight: 200;
font-display: auto;
src: url("/-global-assets/fonts/Uhudscript-Demo.ttf");
}

:root {
--galano-regular: "Galano Regular", Sans-serif;
--galano-medium: "Galano Medium", Sans-serif;
--galano-bold: "Galano Bold", Sans-serif;
--brand-navy: #02253d;
--brand-gradient: linear-gradient(
90deg,
#02bcdd 0%,
#06d1e5 22.09%,
#64eda8 51.94%,
#d0f88d 100%
);
--brand-gradient-angle: linear-gradient(
45deg,
#02bcdd 0%,
#06d1e5 22.09%,
#64eda8 51.94%,
#d0f88d 100%
);

--brand-depth-gradient:
linear-gradient(90deg, #000000 -50%, #02253d 50%, #000000 150%),
var(--brand-gradient);
--brand-depth-gradient-left-to-right:
linear-gradient(90deg, #02253d 40%, #000 100%), var(--brand-gradient);
--brand-depth-gradient-right-to-left:
linear-gradient(-90deg, #02253d 40%, #000 100%), var(--brand-gradient);

--linear-gradient:
rgba(2, 188, 221, 1), rgba(6, 209, 229, 1), rgba(100, 237, 168, 1),
rgba(208, 248, 141, 1);
}

.mascot-stage {
position: fixed;
inset: 0;
overflow: hidden;
}

.mascot-slide {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: 50% 50%;
opacity: 0;
visibility: hidden;
pointer-events: none;
}

.mascot-slide.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.mascot-slide::after {
content: "";
position: absolute;
left: 50%;
top: 0;
width: 2px;
height: 100%;
background: var(--brand-gradient-angle);
opacity: 0.3;
transform: translateX(-50%);
z-index: 30;
}

/* ================= LEFT ================= */

/* .mascot-left {
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
} */

/* ================= LEFT ================= */

.left-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.mascot-left {
position: relative;
overflow: hidden;
}

.mascot-character {
position: absolute;
left: var(--mascot-left, 50%);
bottom: var(--mascot-bottom, clamp(55px, 10vh, 110px));

width: var(--mascot-size, clamp(210px, 15vw, 279px));

transform: translateX(var(--mascot-translate-x, -50%));
will-change: transform;
}

.welcome-doit {
display: block;
width: var(--gif-width, 100%);
height: auto;
object-fit: contain;
position: relative;
z-index: 2;

transform: translate(var(--gif-x, 0%), var(--gif-y, 0%));
}

/* ================= Slide 1 ================= */

.mascot-slide1 {
--mascot-size: clamp(230px, 16.5vw, 315px);
--mascot-left: 50%;
--mascot-bottom: clamp(95px, calc(15vh - 10px), 165px);
--gif-width: 100%;
--gif-x: 0%;
--gif-y: -8%;
}

/* ================= Slide 2 ================= */

.mascot-slide2 {
--mascot-size: clamp(230px, 16.5vw, 315px);
--mascot-left: 50%;
--mascot-bottom: clamp(95px, calc(15vh - 10px), 165px);
--gif-width: 100%;
--gif-x: 5%;
--gif-y: -7%;
}

/* ================= Slide 3 ================= */

.mascot-slide3 {
--mascot-size: clamp(230px, 16.5vw, 315px);
--mascot-left: 50%;
--mascot-bottom: clamp(95px, calc(15vh - 10px), 165px);
--gif-width: 100%;
--gif-x: 0%;
--gif-y: -2%;
}

/* ================= Slide 4 - */

.mascot-slide4 {
--mascot-size: clamp(230px, 16.5vw, 315px);
--mascot-left: 50%;
--mascot-bottom: clamp(95px, calc(15vh - 10px), 165px);
--gif-width: 140%;
--gif-y: 0%;
--gif-x: -3%;
}

/* ================= Slide 5 ================= */

.mascot-slide5 {
--mascot-size: clamp(230px, 16.5vw, 315px);
--mascot-left: 50%;
--mascot-bottom: clamp(95px, calc(15vh - 10px), 165px);
--gif-width: 160%;
--gif-y: 1%;
--gif-x: 2%;
}

/* ================= Slide 6 ================= */

.mascot-slide6 {
--mascot-size: clamp(230px, 16.5vw, 315px);
--mascot-left: 50%;
--mascot-bottom: clamp(95px, calc(15vh - 10px), 165px);
--gif-width: 160%;
--gif-x: -35%;
--gif-y: 1%;
}

/* ================= Slide 7 ================= */

.mascot-slide7 {
--mascot-size: clamp(230px, 16.5vw, 315px);
--mascot-left: 50%;
--mascot-bottom: clamp(95px, calc(15vh - 10px), 165px);
--gif-width: 180%;
--gif-x: -22%;
--gif-y: -6%;
}

/* ================= Slide 8 ================= */

.mascot-slide8 {
--mascot-size: clamp(230px, 16.5vw, 315px);
--mascot-left: 50%;
--mascot-bottom: clamp(95px, calc(15vh - 10px), 165px);
--gif-width: 160%;
--gif-x: -28%;
--gif-y: -3%;
}

/* ================= Slide 9 ================= */

.mascot-slide9 {
--mascot-size: clamp(230px, 16.5vw, 315px);
--mascot-left: 50%;
--mascot-bottom: clamp(95px, calc(15vh - 10px), 165px);
--gif-width: 100%;
--gif-x: 6%;
--gif-y: -3%;
}

/* ================= Slide 10 ================= */

.mascot-slide10 {
--mascot-size: clamp(230px, 16.5vw, 315px);
--mascot-left: 50%;
--mascot-bottom: clamp(95px, calc(15vh - 10px), 165px);
--gif-width: 100%;
--gif-x: 0%;
--gif-y: -4%;
}

/* ================= RIGHT ================= */

.mascot-right {
position: relative;
display: flex;
align-items: center;
background: linear-gradient(
90deg,
#000000 0%,
#0f0f0f 25%,
#031927 50%,
#041f32 75%,
#02253d 100%
);
overflow: hidden;
}

.follow-btn {
position: fixed;
top: 40px;
right: clamp(24px, 4vw, 74px);
padding: 14px 28px;
border: 1px solid transparent;
border-radius: 50px;
text-decoration: none;
font-family: "Itim", cursive;
font-size: clamp(18px, 1.15vw, 22px);
line-height: 1;
letter-spacing: 0;
background:
linear-gradient(#02253d, #02253d) padding-box,
var(--brand-gradient-angle) border-box;
z-index: 1001;
}

.our-mascots-page a,
.our-mascots-page a:hover,
.our-mascots-page a:focus {
text-decoration: none;
}

.follow-btn span {
background: var(--brand-gradient-angle);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.follow-btn .emjis {
display: inline-block;
margin-left: 6px;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
sans-serif;
background: none;
-webkit-background-clip: initial;
background-clip: initial;
-webkit-text-fill-color: initial;
color: initial;
}

.follow-btn:hover {
border-color: transparent;
background:
var(--brand-gradient-angle) padding-box,
var(--brand-gradient-angle) border-box;
}

.follow-btn:hover span:not(.emjis) {
background: none;
-webkit-background-clip: initial;
background-clip: initial;
-webkit-text-fill-color: #000;
color: #000;
}

.follow-btn:hover .emjis {
background: none;
-webkit-text-fill-color: initial;
color: initial;
}

.mascot-content {
width: min(520px, 36vw);
margin-left: 150px;
position: relative;
z-index: 5;
}

.mascot-overline {
display: block;
font-family: var(--galano-regular);
font-weight: 400;
font-size: clamp(18px, 1.25vw, 24px);
line-height: 100%;
letter-spacing: clamp(1px, 0.1vw, 2px);
color: rgba(255, 255, 255, 0.5);
margin-bottom: clamp(16px, 1vw, 20px);
}

.mascot-subtitle {
font-family: "Itim", cursive;
font-weight: 400;
font-style: normal;
font-size: clamp(28px, 2.4vw, 38px);
line-height: 125%;
letter-spacing: clamp(0.5px, 0.08vw, 1px);
color: #fff;
}

.mascot-title {
font-family: var(--galano-bold); /* Galano Classic */
font-weight: 700;
font-size: clamp(44px, 3.23vw, 62px);
line-height: clamp(54px, 3.9vw, 75px);
letter-spacing: clamp(0.5px, 0.05vw, 1px);
background: var(--brand-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-top: 8px;
}

.title-line {
width: 102px;
height: 4px;
background: var(--brand-gradient-angle);
border-radius: 30px;
margin: 28px 0;
}

.mascot-description {
color: #ffffff;
font-family: var(--galano-regular);
font-size: 18px;
line-height: 1.8;
letter-spacing: 1px;
}

.slide-arrows {
position: absolute;
right: 20px;
bottom: 80px;
display: flex;
flex-direction: column;
gap: 0px;
}

.slide-arrows button {
width: 24px;
height: 40px;
padding: 0;
margin: 0;
background: none;
border: none;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}

.arrow-svg {
width: 24px;
height: 50px;
display: block;
}

.arrow-svg path {
fill: none;
stroke: #415a6b;
stroke-width: 2.8;
stroke-linecap: round;
stroke-linejoin: round;
transition: 0.25s;
}

.slide-arrows button:hover .arrow-svg path {
stroke: #2be3ff;
}

/* ================= NAV ================= */

.mascot-nav {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
width: clamp(64px, 3.8vw, 78px);
gap: clamp(18px, 1.5vw, 30px);
z-index: 100;
}

.nav-dot {
position: relative;
--nav-x: 0px;
--nav-y: 0px;
--nav-scale: 1;
width: clamp(46px, 3vw, 60px);
height: clamp(46px, 3vw, 60px);
border-radius: 50%;
border: 1px solid #fff;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition:
border-color 0.3s,
background 0.3s;
transform: translate(var(--nav-x), var(--nav-y)) scale(var(--nav-scale));
will-change: transform;
}

.nav-dot img {
width: 65%;
height: 65%;
object-fit: contain;
}

.nav-dot.active {
--nav-scale: 1.12;
z-index: 2;
border: 3px solid transparent;
border-radius: 50%;
background:
linear-gradient(#02253d, #02253d) padding-box,
var(--brand-gradient-angle) border-box;
}

/*==========================
FINAL SLIDE BUTTON
==========================*/

.final-btn {
--btn-height: 58px;
--btn-icon: 40px;
--btn-gap: 16px;
--btn-edge: 8px;
--btn-border: 2px;
margin-top: 15px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--btn-height);
width: fit-content;
padding: var(--btn-edge) var(--btn-gap) var(--btn-edge)
calc(var(--btn-edge) + var(--btn-icon) + var(--btn-gap));
overflow: hidden;
border-radius: 999px;
text-decoration: none;
cursor: pointer;
background: conic-gradient(
from var(--angle),
#02bcdd,
#06d1e5,
#64eda8,
#d0f88d,
#64eda8,
#06d1e5,
#02bcdd
);

animation: rotateBorder 2.5s linear infinite;
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
transition:
padding 0.4s ease,
box-shadow 0.35s ease;
}

@property --angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}

.final-btn::after {
content: "";
position: absolute;
inset: var(--btn-border);
border-radius: inherit;
background: #061622;
z-index: 0;
transition: 0.35s;
}

/*==========================
ICON
==========================*/

.final-btn-icon {
position: absolute;
left: calc(var(--btn-edge) + var(--btn-border));
top: 50%;
width: var(--btn-icon);
height: var(--btn-icon);
border-radius: 50%;
display: grid;
place-items: center;
transform: translateY(-50%);
background: linear-gradient(62deg, #02bcdd, #06d1e5, #64eda8, #d0f88d);
color: #02253d;
z-index: 2;
transition: 0.45s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.final-btn-icon i {
font-size: 22px;
}

/*==========================
TEXT
==========================*/

.final-btn-text {
position: relative;
z-index: 2;
white-space: nowrap;
font-family: "Uhudscript", "Itim", cursive;
font-size: 32px;
letter-spacing: 1px;
background: linear-gradient(90deg, #02bcdd, #06d1e5, #64eda8, #d0f88d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/*==========================
HOVER
==========================*/

.final-btn:hover {
padding: var(--btn-edge)
calc(var(--btn-edge) + var(--btn-icon) + var(--btn-gap)) var(--btn-edge)
var(--btn-gap);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
}

.final-btn:hover::after {
inset: 0;
background: linear-gradient(62deg, #02bcdd, #06d1e5, #64eda8, #d0f88d);
}

.final-btn:hover .final-btn-icon {
left: calc(100% - var(--btn-icon) - var(--btn-edge) - var(--btn-border));
background: #fff;
color: #02253d;
}

.final-btn:hover .final-btn-text {
background: none;
-webkit-text-fill-color: #02253d;
}
.mobile-nav {
display: none;
}

/*==========================
ANIMATION
==========================*/

@keyframes rotateBorder {
to {
--angle: 360deg;
}
}
/* added this because of logo position in header */
@media (min-width: 1025px) {
.site-header {
justify-content: flex-start;
}

.site-logo {
margin-right: auto;
margin-left: 8%;
}

.entry-overline .registered {
font-size: 0.32em;
}
}
/* ==========================
1024px Tablet and mobile layout changed here 
========================== */

@media (max-width: 1024px) and (orientation: portrait) {
.mascot-stage {
overflow: visible;
--stacked-slide-height: 100svh;
}

.mascot-slide {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100svh;
height: auto;
}
.mascot-nav {
flex-direction: row;
width: auto;
padding: 8px 0;
}

.mascot-left {
width: 100%;
height: 50vh;
flex: 0 0 50vh;
position: relative;
overflow: hidden;
}

/* Right section (Bottom) */
.mascot-right {
width: 100%;
height: 50vh;
flex: 0 0 50vh;
position: relative;
overflow: hidden;
background: linear-gradient(
180deg,
#000000 0%,
#0f0f0f 22%,
#031927 58%,
#02253d 100%
);
}

/* Center divider */
.mascot-slide::after {
display: block;
left: 0;
top: 50%;
width: 100%;
height: 2px;
transform: none;
}

/* Left image full */
.left-bg {
width: 100%;
height: 100%;
object-fit: fill;
}

/* Character */
.mascot-character {
left: var(--mascot-left, 50%);
bottom: var(--mascot-bottom, 20px);
width: var(--mascot-size, clamp(210px, 15vw, 279px));
transform: translateX(var(--mascot-translate-x, -50%));
}

/* Slider GIF controls: tablet/mobile portrait base */
.mascot-slide1 {
--mascot-size: clamp(180px, 25vw, 260px);
--mascot-left: 50%;
--mascot-bottom: 20px;
--gif-width: 100%;
--gif-x: 0%;
--gif-y: -8%;
}

.mascot-slide2 {
--mascot-size: clamp(180px, 25vw, 260px);
--mascot-left: 50%;
--mascot-bottom: 20px;
--gif-width: 100%;
--gif-x: 5%;
--gif-y: -7%;
}

.mascot-slide3 {
--mascot-size: clamp(180px, 25vw, 260px);
--mascot-left: 50%;
--mascot-bottom: 20px;
--gif-width: 100%;
--gif-x: 0%;
--gif-y: -2%;
}

.mascot-slide4 {
--mascot-size: clamp(180px, 25vw, 260px);
--mascot-left: 50%;
--mascot-bottom: 20px;
--gif-width: 140%;
--gif-x: -3%;
--gif-y: 0%;
}

.mascot-slide5 {
--mascot-size: clamp(180px, 25vw, 260px);
--mascot-left: 50%;
--mascot-bottom: 20px;
--gif-width: 160%;
--gif-x: 2%;
--gif-y: 1%;
}

.mascot-slide6 {
--mascot-size: clamp(180px, 25vw, 260px);
--mascot-left: 50%;
--mascot-bottom: 20px;
--gif-width: 160%;
--gif-x: -35%;
--gif-y: 1%;
}

.mascot-slide7 {
--mascot-size: clamp(180px, 25vw, 260px);
--mascot-left: 50%;
--mascot-bottom: 20px;
--gif-width: 180%;
--gif-x: -22%;
--gif-y: -6%;
}

.mascot-slide8 {
--mascot-size: clamp(180px, 25vw, 260px);
--mascot-left: 50%;
--mascot-bottom: 20px;
--gif-width: 160%;
--gif-x: -28%;
--gif-y: -3%;
}

.mascot-slide9 {
--mascot-size: clamp(180px, 25vw, 260px);
--mascot-left: 50%;
--mascot-bottom: 20px;
--gif-width: 100%;
--gif-x: 6%;
--gif-y: -3%;
}

.mascot-slide10 {
--mascot-size: clamp(180px, 25vw, 260px);
--mascot-left: 50%;
--mascot-bottom: 20px;
--gif-width: 100%;
--gif-x: 0%;
--gif-y: -4%;
}

/* Follow button */
.follow-btn {
top: 20px;
right: 24px;
}
.mascot-content {
width: min(88%, 700px);
margin: 0 auto;
}
}

/* ==========================
Tablets (768px - 1024px)
========================== */

@media (min-width: 767px) and (max-width: 1024px) and (orientation: portrait) {
.mascot-left {
position: relative;
display: flex;
justify-content: center;
align-items: flex-end;
overflow: hidden;
}

.mascot-character {
position: absolute;
left: var(--mascot-left, 49.5%);
bottom: var(--mascot-bottom, 14.8%);
transform: translateX(var(--mascot-translate-x, -50%));
/* Responsive sizing */
width: var(--mascot-size, 25%);
min-width: var(--mascot-min-size, 190px);
max-width: var(--mascot-max-size, 290px);
}

/* Slider GIF controls: tablet portrait */
.mascot-slide1 {
--mascot-size: 25%;
--mascot-left: 49.5%;
--mascot-bottom: 14.8%;
--gif-width: 100%;
--gif-x: 0%;
--gif-y: -8%;
}

.mascot-slide2 {
--mascot-size: 25%;
--mascot-left: 49.5%;
--mascot-bottom: 14.8%;
--gif-width: 100%;
--gif-x: 5%;
--gif-y: -7%;
}

.mascot-slide3 {
--mascot-size: 25%;
--mascot-left: 49.5%;
--mascot-bottom: 14.8%;
--gif-width: 100%;
--gif-x: 0%;
--gif-y: -2%;
}

.mascot-slide4 {
--mascot-size: 25%;
--mascot-left: 49.5%;
--mascot-bottom: 14.8%;
--gif-width: 140%;
--gif-x: -3%;
--gif-y: 0%;
}

.mascot-slide5 {
--mascot-size: 25%;
--mascot-left: 49.5%;
--mascot-bottom: 14.8%;
--gif-width: 160%;
--gif-x: 2%;
--gif-y: 1%;
}

.mascot-slide6 {
--mascot-size: 25%;
--mascot-left: 49.5%;
--mascot-bottom: 14.8%;
--gif-width: 160%;
--gif-x: -35%;
--gif-y: 1%;
}

.mascot-slide7 {
--mascot-size: 25%;
--mascot-left: 49.5%;
--mascot-bottom: 14.8%;
--gif-width: 180%;
--gif-x: -22%;
--gif-y: -6%;
}

.mascot-slide8 {
--mascot-size: 25%;
--mascot-left: 49.5%;
--mascot-bottom: 14.8%;
--gif-width: 160%;
--gif-x: -28%;
--gif-y: -3%;
}

.mascot-slide9 {
--mascot-size: 25%;
--mascot-left: 49.5%;
--mascot-bottom: 14.8%;
--gif-width: 100%;
--gif-x: 6%;
--gif-y: -3%;
}

.mascot-slide10 {
--mascot-size: 25%;
--mascot-left: 49.5%;
--mascot-bottom: 14.8%;
--gif-width: 100%;
--gif-x: 0%;
--gif-y: -4%;
}
.slide-arrows {
right: 3%;
bottom: 12%;
}
/* Right content */
.mascot-content {
width: min(88%, 700px);
margin: 0 auto 8% auto;
}
}

/* Tablets only (Landscape) */
@media only screen and (min-width: 768px) and (max-width: 1368px) and (orientation: landscape) {
.entry-bg {
top: 0;
object-position: center center;
}

.entry-doit {
display: block;
width: 30%;
min-width: 240px;
max-width: 340px;
left: 72%;
top: 48%;
z-index: 1;
}

.entry-doit-tablet {
display: none;
}

.entry-left {
padding: 0 0 0 8%;
}

.mascot-slide {
display: grid !important;
grid-template-columns: 50% 50%;
}

.mascot-left {
width: 100%;
height: 100%;
flex: none;
}

.mascot-right {
width: 100%;
height: 100%;
flex: none;
}
.mascot-content {
width: 80%;
margin-left: 80px;
}
.mascot-slide::after {
display: block;
}

.mascot-nav {
flex-direction: column;
}
.mascot-character {
left: var(--mascot-left, 50%);
bottom: var(--mascot-bottom, 16.8%);
width: var(--mascot-size, clamp(230px, 18vw, 320px));
transform: translateX(var(--mascot-translate-x, -50%));
}

/* Slider GIF controls: tablet landscape */
.mascot-slide1 {
--mascot-size: clamp(230px, 18vw, 320px);
--mascot-left: 50%;
--mascot-bottom: 16.8%;
--gif-width: 100%;
--gif-x: 0%;
--gif-y: -8%;
}

.mascot-slide2 {
--mascot-size: clamp(230px, 18vw, 320px);
--mascot-left: 50%;
--mascot-bottom: 16.8%;
--gif-width: 100%;
--gif-x: 5%;
--gif-y: -7%;
}

.mascot-slide3 {
--mascot-size: clamp(230px, 18vw, 320px);
--mascot-left: 50%;
--mascot-bottom: 16.8%;
--gif-width: 100%;
--gif-x: 0%;
--gif-y: -2%;
}

.mascot-slide4 {
--mascot-size: clamp(230px, 18vw, 320px);
--mascot-left: 50%;
--mascot-bottom: 16.8%;
--gif-width: 140%;
--gif-x: -3%;
--gif-y: 0%;
}

.mascot-slide5 {
--mascot-size: clamp(230px, 18vw, 320px);
--mascot-left: 50%;
--mascot-bottom: 16.8%;
--gif-width: 160%;
--gif-x: 2%;
--gif-y: 1%;
}

.mascot-slide6 {
--mascot-size: clamp(230px, 18vw, 320px);
--mascot-left: 50%;
--mascot-bottom: 16.8%;
--gif-width: 160%;
--gif-x: -35%;
--gif-y: 1%;
}

.mascot-slide7 {
--mascot-size: clamp(230px, 18vw, 320px);
--mascot-left: 50%;
--mascot-bottom: 16.8%;
--gif-width: 180%;
--gif-x: -22%;
--gif-y: -6%;
}

.mascot-slide8 {
--mascot-size: clamp(230px, 18vw, 320px);
--mascot-left: 50%;
--mascot-bottom: 16.8%;
--gif-width: 160%;
--gif-x: -28%;
--gif-y: -3%;
}

.mascot-slide9 {
--mascot-size: clamp(230px, 18vw, 320px);
--mascot-left: 50%;
--mascot-bottom: 16.8%;
--gif-width: 100%;
--gif-x: 6%;
--gif-y: -3%;
}

.mascot-slide10 {
--mascot-size: clamp(230px, 18vw, 320px);
--mascot-left: 50%;
--mascot-bottom: 16.8%;
--gif-width: 100%;
--gif-x: 0%;
--gif-y: -4%;
}
}

@media (width: 1024px) and (height: 768px) and (orientation: landscape) {
.mascot-left {
position: relative;
display: flex;
justify-content: center;
align-items: flex-end;
overflow: hidden;
}
.mascot-content {
width: 80%;
margin-left: 80px;
}
.slide-arrows {
right: 4%;
bottom: 14%;
}
.mascot-character {
width: var(--mascot-size, 180px);
bottom: var(--mascot-bottom, 16.2%);
}

/* Slider GIF controls: iPad Mini landscape 1024x768 */
.mascot-slide1 {
--mascot-size: 230px;
--mascot-left: 50%;
--mascot-bottom: 16.2%;
--gif-width: 100%;
--gif-x: 0%;
--gif-y: -8%;
}

.mascot-slide2 {
--mascot-size: 230px;
--mascot-left: 50%;
--mascot-bottom: 16.2%;
--gif-width: 100%;
--gif-x: 5%;
--gif-y: -7%;
}

.mascot-slide3 {
--mascot-size: 230px;
--mascot-left: 50%;
--mascot-bottom: 16.2%;
--gif-width: 100%;
--gif-x: 0%;
--gif-y: -2%;
}

.mascot-slide4 {
--mascot-size: 230px;
--mascot-left: 50%;
--mascot-bottom: 16.2%;
--gif-width: 140%;
--gif-x: -3%;
--gif-y: 0%;
}

.mascot-slide5 {
--mascot-size: 230px;
--mascot-left: 50%;
--mascot-bottom: 16.2%;
--gif-width: 160%;
--gif-x: 2%;
--gif-y: 1%;
}

.mascot-slide6 {
--mascot-size: 230px;
--mascot-left: 50%;
--mascot-bottom: 16.2%;
--gif-width: 160%;
--gif-x: -35%;
--gif-y: 1%;
}

.mascot-slide7 {
--mascot-size: 230px;
--mascot-left: 50%;
--mascot-bottom: 16.2%;
--gif-width: 180%;
--gif-x: -22%;
--gif-y: -6%;
}

.mascot-slide8 {
--mascot-size: 230px;
--mascot-left: 50%;
--mascot-bottom: 16.2%;
--gif-width: 160%;
--gif-x: -28%;
--gif-y: -3%;
}

.mascot-slide9 {
--mascot-size: 230px;
--mascot-left: 50%;
--mascot-bottom: 16.2%;
--gif-width: 100%;
--gif-x: 6%;
--gif-y: -3%;
}

.mascot-slide10 {
--mascot-size: 230px;
--mascot-left: 50%;
--mascot-bottom: 16.2%;
--gif-width: 100%;
--gif-x: 0%;
--gif-y: -4%;
}
}
/* ==========================
Mobile (<=767px)
========================== */
@media (max-width: 767px) {
.mascot-slide::after {
height: 1px;
}

/* ===== Robot ===== */

.mascot-character {
width: var(--mascot-size, clamp(135px, 38vw, 175px));
/* bottom: clamp(8px, 2.5vh, 18px); */
bottom: var(--mascot-bottom, 15%);
}

/* Slider GIF controls: mobile */
.mascot-slide1 {
--mascot-size: clamp(135px, 38vw, 175px);
--mascot-left: 50%;
--mascot-bottom: 15%;
--gif-width: 100%;
--gif-x: 0%;
--gif-y: -8%;
}

.mascot-slide2 {
--mascot-size: clamp(135px, 38vw, 175px);
--mascot-left: 50%;
--mascot-bottom: 15%;
--gif-width: 100%;
--gif-x: 5%;
--gif-y: -7%;
}

.mascot-slide3 {
--mascot-size: clamp(135px, 38vw, 175px);
--mascot-left: 50%;
--mascot-bottom: 15%;
--gif-width: 100%;
--gif-x: 0%;
--gif-y: -2%;
}

.mascot-slide4 {
--mascot-size: clamp(135px, 38vw, 175px);
--mascot-left: 50%;
--mascot-bottom: 15%;
--gif-width: 140%;
--gif-x: -3%;
--gif-y: 0%;
}

.mascot-slide5 {
--mascot-size: clamp(135px, 38vw, 175px);
--mascot-left: 50%;
--mascot-bottom: 15%;
--gif-width: 160%;
--gif-x: 2%;
--gif-y: 1%;
}

.mascot-slide6 {
--mascot-size: clamp(135px, 38vw, 175px);
--mascot-left: 50%;
--mascot-bottom: 15%;
--gif-width: 160%;
--gif-x: -35%;
--gif-y: 1%;
}

.mascot-slide7 {
--mascot-size: clamp(135px, 38vw, 175px);
--mascot-left: 50%;
--mascot-bottom: 15%;
--gif-width: 180%;
--gif-x: -22%;
--gif-y: -6%;
}

.mascot-slide8 {
--mascot-size: clamp(135px, 38vw, 175px);
--mascot-left: 50%;
--mascot-bottom: 15%;
--gif-width: 160%;
--gif-x: -28%;
--gif-y: -3%;
}

.mascot-slide9 {
--mascot-size: clamp(135px, 38vw, 175px);
--mascot-left: 50%;
--mascot-bottom: 15%;
--gif-width: 100%;
--gif-x: 6%;
--gif-y: -3%;
}

.mascot-slide10 {
--mascot-size: clamp(135px, 38vw, 175px);
--mascot-left: 50%;
--mascot-bottom: 15%;
--gif-width: 100%;
--gif-x: 0%;
--gif-y: -4%;
}

/* ===== Content ===== */

.mascot-content {
width: 88%;
margin: 0 auto;
}

.mascot-overline {
font-size: clamp(11px, 2.8vw, 13px);
margin-bottom: 6px;
}

.mascot-subtitle {
font-size: clamp(18px, 6vw, 28px);
line-height: 1.15;
}

.mascot-title {
font-size: clamp(24px, 8vw, 38px);
line-height: 1.15;
margin-top: 4px;
}

.title-line {
width: clamp(48px, 14vw, 70px);
height: 3px;
margin: 12px 0;
}

.mascot-description {
font-size: clamp(12px, 3.4vw, 15px);
line-height: 1.7;
}

/* ===== Follow Button ===== */

.follow-btn {
padding: 8px 16px;
right: 6%;
top: 10%;
}

.follow-btn span {
font-size: clamp(11px, 3vw, 14px);
}

/* ===== Nav ===== */

.nav-dot {
width: clamp(34px, 9vw, 42px);
height: clamp(34px, 9vw, 42px);
}

.slide-arrows {
position: absolute;
right: 3%;
bottom: 10%;
gap: 8px;
}
.slide-arrows button {
height: 15px;
}
}

/* only for asus zenbook fold because of multiple reasons  */
@media (orientation: portrait) and (min-width: 1060px) and (max-width: 1075px) and (pointer: coarse) and (hover: none) {
.mascot-stage {
overflow: hidden;
}

.mascot-slide {
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
}
.mascot-nav {
flex-direction: row;
width: auto;
}

.mascot-left {
width: 100%;
height: 50vh;
flex: 0 0 50vh;
position: relative;
overflow: hidden;
}

/* Right section (Bottom) */
.mascot-right {
width: 100%;
height: 50vh;
flex: 0 0 50vh;
position: relative;
overflow: hidden;
}

/* Center divider hide */
.mascot-slide::after {
display: none;
}

/* Left image full */
.left-bg {
width: 100%;
height: 100%;
object-fit: fill;
}

/* Character */
.mascot-character {
left: var(--mascot-left, 50%);
bottom: var(--mascot-bottom, 16%);
transform: translateX(var(--mascot-translate-x, -50%));
}

/* Follow button */
.follow-btn {
top: 20px;
right: 24px;
}
.mascot-content {
width: min(88%, 700px);
margin: 0 auto;
}
}
@media (orientation: landscape) and (min-width: 1500px) and (max-width: 1610px) and (pointer: coarse) and (hover: none) {
.mascot-character {
bottom: var(--mascot-bottom, 16.5%);
}
}

.mascot-stage {
position: fixed;
inset: 0;
overflow: hidden;
display: none;
}

.mascot-stage.show {
display: block;
}

.entry-screen.hide {
display: none;
}
/* =========================
ENTRY SCREEN
========================= */

.entry-screen {
position: fixed;
inset: 0;
background: #02253d;
overflow: hidden;
z-index: 999;
}

.entry-wrapper {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}

/* ---------------- LEFT ---------------- */

.entry-left {
width: 42%;
padding-left: clamp(70px, 8vw, 140px);
position: relative;
z-index: 5;
}

.entry-logo {
width: clamp(240px, 18vw, 360px);
margin-bottom: 40px;
}

/* ---------------- RIGHT ---------------- */

.entry-right {
position: relative;
width: 58%;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
}

.entry-doit {
position: absolute;

/* viewport nahi, parent ke hisaab se */
width: 30%;
max-width: 387px;
min-width: 280px;
height: auto;

left: 70%;
top: 50%;

transform: translate(-50%, -50%) rotate(-26.37deg);
transform-origin: center;

z-index: 1;
}

/* Torn paper */
/* CHANGE #2 (corrected): using left + an explicit width (instead of
   width:auto) so the browser scales the image reliably instead of just
   shoving it sideways and clipping it. Adjust the % values below if you
   want more/less padding on either side. */
.entry-bg {
position: absolute;
top: 0;
bottom: 0;
left: 0%;
width: 100%;
height: 100%;
object-fit: fill;
z-index: 2;
pointer-events: none;
}

/* Follow button */
.entry-right .follow-btn {
position: absolute;
z-index: 5;
}

/* =========================
ENTRY OVERLINE
========================= */

.entry-overline {
display: inline-block;
font-family: "Uhudscript", cursive;
background-image: var(--brand-gradient);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
display: inline-block;
font-weight: 400;
font-size: clamp(42px, 3.75vw, 72px); /* 72px @ 1920 */
line-height: 1;
letter-spacing: clamp(1px, 0.1vw, 2px);
white-space: nowrap;
}

.entry-overline span {
font-size: clamp(28px, 2.5vw, 48px);
line-height: 1;
vertical-align: middle;
}

/* =========================
SUBTITLE
========================= */
.entry-subtitle {
font-family: var(--galano-medium);
font-weight: 600;
font-size: clamp(28px, 2.188vw, 42px);
line-height: clamp(38px, 2.917vw, 56px);
letter-spacing: 0;
color: #fff;
max-width: clamp(380px, 29.9vw, 574px);
margin-top: clamp(8px, 0.625vw, 12px);
}

/* =========================
LINE
========================= */

.entry-left .title-line {
width: clamp(64px, 5vw, 96px);
height: clamp(3px, 0.2vw, 4px);
margin: clamp(18px, 1.4vw, 28px) 0;
border-radius: 999px;
background: var(--brand-gradient-angle);
}

/* =========================
READY
========================= */

.entry-ready {
display: block;
font-family: var(--galano-bold);
font-weight: 700;
font-size: clamp(18px, 1.25vw, 24px);
line-height: clamp(28px, 2.083vw, 40px);
letter-spacing: 0;
color: #ffffff;
margin: 3% 0 0.5% 0;
}
.entry-overline-emoji {
color: initial;
background: none;
-webkit-text-fill-color: initial;
-webkit-background-clip: initial;
flex-shrink: 0;
}
.registered {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.55em;
font-weight: 700;
vertical-align: super;
line-height: 0;
color: inherit;
}

.entry-overline .registered {
margin-left: 9px;
vertical-align: 1.28em;
}

.entry-ready .registered {
display: inline-block;
margin-left: 4px;
}

.mascot-overline .registered {
margin-left: 5px;
}

@media (max-width: 1024px) {
html,
body,
.our-mascots-page {
height: auto;
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
}

.mascot-header-follow {
display: none;
}

.registered {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
}

.mascot-stage {
position: relative;
inset: auto;
min-height: var(--stacked-slide-height, 100svh);
overflow: visible;
}

.mascot-slide {
min-height: var(--stacked-slide-height, 100svh);
height: auto;
}

.mascot-slide.active {
position: relative;
min-height: var(--stacked-slide-height, 100svh);
}

.entry-screen {
position: relative;
inset: auto;
height: auto;
min-height: 100svh;
overflow-y: auto;
z-index: 0;
background: radial-gradient(
116.23% 100% at 50.06% 0%,
#01243c 55.33%,
#00081c 80.08%
);
}

.entry-bg {
position: absolute;
top: calc(-1 * clamp(18px, 5vh, 55px));
left: 0;
width: 100%;
height: 100%;
transform: none;
object-fit: cover;
object-position: center top;
}

.entry-wrapper {
display: flex;
flex-direction: column-reverse;
width: 100%;
height: auto;
min-height: 100svh;
position: relative;
}

.entry-right {
width: 100%;
min-height: 50svh;
height: auto;
display: flex;
justify-content: center;
align-items: flex-start;
}

.entry-left {
width: 100%;
min-height: 50svh;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 8%;
}
}

@media (min-width: 767px) and (max-width: 1024px) and (orientation: portrait) {
.entry-screen {
position: relative;
inset: auto;
height: auto;
min-height: 100svh;
overflow-y: auto;
z-index: 0;
background: radial-gradient(
116.23% 100% at 50.06% 0%,
#01243c 55.33%,
#00081c 80.08%
);
}

.entry-bg {
position: absolute;
top: calc(-1 * clamp(110px, 13vh, 170px));
left: 0;
width: 100%;
height: 100%;
transform: none;
object-fit: cover;
object-position: center top;
}

.entry-wrapper {
display: flex;
flex-direction: column-reverse; /* Right upar, Left neeche */
width: 100%;
height: auto;
min-height: 100svh;
position: relative;
z-index: 2;
}

.entry-right {
width: 100%;
min-height: 50svh;
height: auto;
display: flex;
justify-content: center;
align-items: flex-start;
}

.entry-left {
width: 100%;
min-height: 50svh;
height: auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: clamp(340px, 44vh, 560px) 8% 180px;
}
}
.entry-doit-tablet {
display: none;
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
/* Original robot hide */
.entry-doit {
display: none;
}

/* New robot */
.entry-doit-tablet {
display: block;
position: absolute;
width: 45%;
left: 60%;
top: 36%;
transform: translate(-50%, -50%) rotate(-26.37deg);
z-index: 1;
}

.follow-btn {
z-index: 5;
}
.entry-right .follow-btn {
top: 120%;
}
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
html,
body,
.our-mascots-page {
height: auto;
overflow-x: hidden;
overflow-y: auto;
}

.entry-screen {
position: relative;
inset: auto;
min-height: 100svh;
overflow: visible;
z-index: 0;
background: #02253d;
}

.entry-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: none;
object-fit: fill;
object-position: right center;
}

.entry-wrapper {
flex-direction: row;
height: auto;
min-height: 100svh;
}

.entry-left {
width: 42%;
min-height: 100svh;
padding: 0 0 0 8%;
justify-content: center;
}

.entry-right {
width: 58%;
min-height: 100svh;
}

.entry-doit {
display: block;
width: 34%;
min-width: 240px;
max-width: 360px;
left: 72%;
top: 50%;
}

.entry-doit-tablet {
display: none;
}
}
@media (width: 768px) and (height: 1024px) {
.entry-left {
min-height: 64svh;
height: auto;
}
}
@media (max-width: 767px) {
.entry-left {
min-height: 70svh;
height: auto;
padding-top: 8vh;
}
.entry-doit {
width: 55%;
min-width: unset;
max-width: unset;

left: 62%;
top: 85%;

transform: translate(-50%, -50%) rotate(-26.37deg);
}
.entry-overline {
font-size: clamp(24px, 7vw, 34px);
white-space: normal;
}

.entry-subtitle {
font-size: clamp(16px, 5.5vw, 24px);
line-height: 1.3;
max-width: 100%;
}
.entry-right .follow-btn {
top: 100%;
}
}

.follow-popup {
position: fixed;
display: flex;
flex-direction: column;
gap: 14px;

opacity: 0;
pointer-events: none;

z-index: 99999;
}

.follow-popup.show {
opacity: 1;
pointer-events: auto;
}

/* Page-only follow popup alignment */
.follow-popup.mascot-follow-socials {
right: auto;
align-items: center;
}

.follow-popup a {
text-decoration: none;
opacity: 0;
transform: translateY(-20px) scale(0.6);
transition:
transform 0.35s ease,
opacity 0.35s ease;
}

.follow-popup.show a {
opacity: 1;
transform: translateY(0) scale(1);
}

/* Stagger */
.follow-popup.show a:nth-child(1) {
transition-delay: 0s;
}
.follow-popup.show a:nth-child(2) {
transition-delay: 0.08s;
}
.follow-popup.show a:nth-child(3) {
transition-delay: 0.16s;
}
.follow-popup.show a:nth-child(4) {
transition-delay: 0.24s;
}
.follow-popup.show a:nth-child(5) {
transition-delay: 0.32s;
}

.follow-popup {
visibility: hidden;
}

.follow-popup.show {
visibility: visible;
}
.follow-popup.mascot-follow-socials {
position: fixed;
right: auto;
display: flex;
flex-direction: column;
gap: 14px;
padding: 2px 0 2px 2px;
overflow: visible;
}

.follow-popup.mascot-follow-socials .mascot-follow-social-link {
display: flex;
width: 34px;
height: 33px;
align-items: center;
justify-content: center;
padding: 1px;
border: double 1px transparent;
border-radius: 50%;
background-image:
linear-gradient(#01243d, #01243d), linear-gradient(180deg, #000, #01758a);
background-origin: border-box;
background-clip: content-box, border-box;
color: #fff;
cursor: pointer;
font-size: 16px;
}

.follow-popup.mascot-follow-socials .mascot-follow-social-link:hover {
border: none;
background-image: var(--brand-gradient-angle);
}

.follow-popup.mascot-follow-socials .mascot-follow-social-link:hover i {
color: #02253d;
}

/* =========================
CHANGE #1: FOOTER WEIGHT FIX
Scoped to this page only so nothing else is affected. Reduces the
footer text back to a normal weight to match other pages.
========================= */
.our-mascots-page #footer-placeholder,
.our-mascots-page #footer-placeholder p,
.our-mascots-page #footer-placeholder a,
.our-mascots-page #footer-placeholder span,
.our-mascots-page #footer-placeholder div {
font-weight: 400;
}

/* =========================
CHANGE #4c: STOP HEADER LOGO "SHAKE"
Locks page scrolling on desktop/tablet (mobile already has its own
overflow rules further up and is untouched) so a scrollbar toggling
on/off during slide transitions can't nudge the fixed header/logo.
========================= */
@media (min-width: 1025px) {
html,
body {
overflow: hidden;
height: 100%;
}
}