/**

Torch Bearer Corner Animation

NYSC - 36th National Youth Sports Festival 2026

Floating overlay - does not affect existing page layout.
*/

:root {
--torch-size: 180px;
--torch-top: 16px;
--torch-right: 20px;
--torch-left: 20px;

/* Very high so the torch stays above sliders,
headers, modals, banners, etc. */
--torch-z-index: 2147483647;

--torch-glow-color: rgba(255, 120, 0, 0.45);
}

/* =========================================================
FLOATING CORNER WIDGET
========================================================= */

.torch-bearer-widget {
position: fixed !important;

top: var(--torch-top) !important;
left: var(--torch-left) !important;

width: var(--torch-size) !important;
max-width: var(--torch-size) !important;

margin: 0 !important;
padding: 0 !important;

display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;

z-index: var(--torch-z-index) !important;

/*

Important:

The torch is visually over the website,

but it will NOT block clicks on menus,

buttons, links, sliders, etc.
*/
pointer-events: none !important;

user-select: none !important;

visibility: visible !important;
opacity: 1 !important;

box-sizing: border-box !important;

transform: translateZ(0);

transition:
transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.3s ease;

/*

Create its own compositing layer.

This helps prevent other page elements from

interfering with the animation.
*/
isolation: isolate;
}

/* =========================================================
TOP RIGHT POSITIONING
========================================================= */

.torch-bearer-widget.torch-top-right {
left: auto !important;
right: var(--torch-right) !important;

top: var(--torch-top) !important;

transform-origin: top right !important;
}

/* =========================================================
TOP LEFT POSITIONING
========================================================= */

.torch-bearer-widget.torch-top-left {
right: auto !important;
left: var(--torch-left) !important;

top: var(--torch-top) !important;

transform-origin: top left !important;
}

/* =========================================================
OPTIONAL INLINE MODE
========================================================= */

.torch-bearer-widget.torch-inline {
position: relative !important;

top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;

width: var(--torch-size) !important;

display: inline-flex !important;
}

/* =========================================================
RUNNER GRAPHIC WRAPPER
========================================================= */

.torch-runner-wrapper {
position: relative !important;

width: 100% !important;

/*

Original runner image ratio:

366 / 420
*/
aspect-ratio: 366 / 420 !important;

margin: 0 !important;
padding: 0 !important;

overflow: visible !important;

cursor: default !important;

box-sizing: border-box !important;

filter:
drop-shadow(
0 4px 18px var(--torch-glow-color)
);

animation:
torch-runner-hover 3.2s ease-in-out infinite;

transition:
filter 0.3s ease,
transform 0.25s ease;

/*

Make sure the wrapper itself is above

the website's normal stacking layers.
*/
z-index: 1 !important;

pointer-events: none !important;
}

/* =========================================================
RUNNER IMAGE
========================================================= */

.torch-runner-img {
position: absolute !important;

top: 0 !important;
left: 0 !important;

width: 100% !important;
height: 100% !important;

max-width: none !important;
max-height: none !important;

display: block !important;

object-fit: contain !important;
object-position: center center !important;

visibility: visible !important;
opacity: 1 !important;

margin: 0 !important;
padding: 0 !important;

border: 0 !important;
outline: none !important;

z-index: 1 !important;

pointer-events: none !important;

box-sizing: border-box !important;

/*

Prevent browser image dragging.
*/
-webkit-user-drag: none !important;

/*

Improve rendering quality.
*/
image-rendering: auto !important;
}

/* =========================================================
CANVAS VERSION
========================================================= */

.torch-runner-canvas {
position: absolute !important;

top: 0 !important;
left: 0 !important;

width: 100% !important;
height: 100% !important;

display: block !important;

visibility: visible !important;
opacity: 1 !important;

margin: 0 !important;
padding: 0 !important;

z-index: 1 !important;

pointer-events: none !important;
}

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

The widget itself has pointer-events:none so normal
website controls remain clickable.
========================================================= */

.torch-bearer-widget:hover .torch-runner-wrapper {
transform:
scale(1.05)
translateY(-3px);

filter:
drop-shadow(
0 6px 24px rgba(255, 100, 0, 0.65)
)
drop-shadow(
0 0 10px rgba(255, 200, 50, 0.5)
);
}

/* =========================================================
OPTIONAL CSS SPRITE PLAYER
========================================================= */

.torch-sprite-player {
width: 100% !important;

aspect-ratio: 183 / 210;

background-image:
url('/views/index/torch_runner_spritesheet.webp');

background-size: 1500% 100%;
background-repeat: no-repeat;
background-position: 0% 0%;

animation:
torch-sprite-cycle 1.5s steps(14) infinite;

pointer-events: none;
}

@keyframes torch-sprite-cycle {

from {
background-position: 0% 0%;
}

to {
background-position: 100% 0%;
}

}

/* =========================================================
TRAILING SPARKS CANVAS
========================================================= */

.torch-sparks-canvas {
position: absolute !important;

top: -40px !important;
right: -50px !important;

width: calc(100% + 100px) !important;
height: calc(100% + 60px) !important;

max-width: none !important;
max-height: none !important;

display: block !important;

margin: 0 !important;
padding: 0 !important;

visibility: visible !important;
opacity: 1 !important;

pointer-events: none !important;

z-index: 2 !important;

box-sizing: border-box !important;
}

/* =========================================================
FESTIVAL BADGE
========================================================= */

.torch-runner-badge {
margin-top: -6px !important;

position: relative !important;

z-index: 3 !important;

background:
linear-gradient(
135deg,
rgba(20, 20, 32, 0.92),
rgba(45, 15, 25, 0.95)
) !important;

border:
1px solid rgba(255, 193, 7, 0.45) !important;

backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);

color: #ffde59 !important;

font-family:
'Outfit',
'Inter',
system-ui,
-apple-system,
sans-serif !important;

font-size: 11px !important;

font-weight: 700 !important;

letter-spacing: 0.5px !important;

text-transform: none !important;

padding: 6px 12px !important;

border-radius: 12px !important;

box-shadow:
0 4px 16px rgba(0, 0, 0, 0.45),
0 0 12px rgba(255, 140, 0, 0.25) !important;

display: flex !important;

align-items: center !important;
justify-content: center !important;

gap: 7px !important;

width: max-content !important;

max-width: 220px !important;

text-align: center !important;

line-height: 1.35 !important;

box-sizing: border-box !important;

visibility: visible !important;
opacity: 1 !important;

pointer-events: none !important;

transition:
background 0.25s ease,
border-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.25s ease;
}

/* =========================================================
BADGE DOT
========================================================= */

.torch-badge-dot {
flex: 0 0 auto !important;

width: 6px !important;
height: 6px !important;

min-width: 6px !important;
min-height: 6px !important;

background: #ff5500 !important;

border-radius: 50% !important;

box-shadow:
0 0 6px #ff7700 !important;

animation:
torch-dot-pulse 1.4s ease-in-out infinite alternate;

pointer-events: none !important;
}

/* =========================================================
RUNNER FLOATING ANIMATION
========================================================= */

@keyframes torch-runner-hover {

0%,
100% {
transform:
translateY(0px)
rotate(0deg);
}

50% {
transform:
translateY(-4px)
rotate(0.4deg);
}

}

/* =========================================================
BADGE DOT ANIMATION
========================================================= */

@keyframes torch-dot-pulse {

0% {
transform: scale(0.8);
opacity: 0.7;
background: #ff7700;

box-shadow:
  0 0 6px #ff7700;


}

100% {
transform: scale(1.3);
opacity: 1;
background: #ffdd00;

box-shadow:
  0 0 10px #ffdd00;


}

}

/* =========================================================
DESKTOP / LARGE SCREENS
========================================================= */

@media (min-width: 1200px) {

.torch-bearer-widget {
--torch-size: 190px;
}

}

/* =========================================================
TABLETS
========================================================= */

@media (max-width: 991px) {

:root {
--torch-size: 150px;
--torch-top: 12px;
--torch-left: 12px;
--torch-right: 12px;
}

.torch-runner-badge {
font-size: 10px !important;

padding:
  4px 8px !important;

max-width: 180px !important;


}

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 768px) {

:root {
--torch-size: 130px;
--torch-top: 10px;
--torch-left: 10px;
--torch-right: 10px;
}

.torch-runner-badge {
font-size: 9.5px !important;

padding:
  3px 7px !important;

max-width: 160px !important;

border-radius: 8px !important;

gap: 4px !important;


}

.torch-badge-dot {
width: 5px !important;
height: 5px !important;
min-width: 5px !important;
min-height: 5px !important;
}

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

:root {
--torch-size: 105px;
--torch-top: 8px;
--torch-left: 8px;
--torch-right: 8px;
}

.torch-runner-badge {
font-size: 8px !important;

padding:
  2px 5px !important;

max-width: 130px !important;

border-radius: 6px !important;

line-height: 1.2 !important;


}

}

/* =========================================================
VERY SMALL SCREENS
========================================================= */

@media (max-width: 360px) {

:root {
--torch-size: 90px;
--torch-top: 6px;
--torch-left: 6px;
--torch-right: 6px;
}

.torch-runner-badge {
font-size: 7px !important;

max-width: 110px !important;

padding:
  2px 4px !important;


}

}

/* =========================================================
ACCESSIBILITY / REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

.torch-runner-wrapper,
.torch-badge-dot,
.torch-sprite-player {
animation: none !important;
}

}

/* =========================================================
SAFETY OVERRIDES
========================================================= */

/*

Prevent common website styles from hiding the torch.
*/

.torch-bearer-widget,
.torch-bearer-widget *,
.torch-runner-wrapper,
.torch-runner-img,
.torch-sparks-canvas,
.torch-runner-badge {
visibility: visible !important;
}

/*

Keep the torch above common Bootstrap layers:

Bootstrap:

dropdown ~1000

sticky ~1020

fixed ~1030

modal backdrop ~1040

modal ~1050

popover ~1070

tooltip ~1080

Our widget uses 2147483647.
*/

.torch-bearer-widget {
z-index: 2147483647 !important;
}

/*

Most importantly, the overlay cannot interfere

with the existing website.
*/

.torch-bearer-widget,
.torch-bearer-widget *,
.torch-runner-wrapper,
.torch-runner-img,
.torch-sparks-canvas,
.torch-runner-badge {
pointer-events: none !important;
}