body {
    font-family: Arial, sans-serif;
    background-color: #000;
    color: #FFD700;
    padding: 20px;
    line-height: 1.6;
}

.wrapper {
    max-width: 900px;
    margin: auto;
}

h1, h2, h3 {
    text-align: center;
}

p, li, label, small {
    color: #ddd;
}

form {
    background: #111;
    padding: 25px;
    border-radius: 12px;
    margin-top: 30px;
}

input, select, button {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    border-radius: 6px;
    border: none;
    box-sizing: border-box;
}

input, select {
    background: #222;
    color: #FFD700;
}

button {
    background: #FFD700;
    color: #000;
    font-weight: bold;
    cursor: pointer;
}

button:hover {
    background: #e5c100;
}

hr {
    margin: 60px 0;
    border: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, #FFD700, #ffcc00, #FFD700, transparent);
}

.video-container {
    width: 100%;
    margin: 40px 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(255,215,0,0.35);
}

.video-container video {
    width: 100%;
    display: block;
}

.agreement {
    margin-top: 20px;
    background: #1a1a1a;
    padding: 15px;
    border-radius: 8px;
    font-size: 0.9rem;
}

.agreement input {
    width: auto;
    margin-right: 8px;
    accent-color: #FFD700;
}

.category-guide {
    background: #1a1a1a;
    border-left: 4px solid #FFD700;
    padding: 15px;
    border-radius: 8px;
    margin-top: 15px;
    color: #ddd;
}

footer {
    margin-top: 60px;
    text-align: center;
    font-size: 14px;
    color: #FFD700;
    padding: 25px 0;
    border-top: 1px solid rgba(255,215,0,0.3);
}

/* ===============================
LEVEL 6 CINEMATIC MODEL SEARCH
================================ */

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

body{

font-family:Arial, Helvetica, sans-serif;

background:#000;
color:#FFD700;

padding:20px;

line-height:1.7;

overflow-x:hidden;

/* animated galaxy */

background:
radial-gradient(circle at 20% 20%,rgba(255,215,0,0.06),transparent 40%),
radial-gradient(circle at 80% 60%,rgba(255,215,0,0.05),transparent 40%),
#000;

}

/* ===============================
STAR FIELD
================================ */

body::before{

content:"";

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background-image:
radial-gradient(2px 2px at 20px 30px #fff,transparent),
radial-gradient(2px 2px at 40px 70px #fff,transparent),
radial-gradient(1px 1px at 90px 40px #fff,transparent),
radial-gradient(1px 1px at 130px 80px #fff,transparent),
radial-gradient(2px 2px at 160px 120px #fff,transparent);

background-repeat:repeat;

background-size:200px 200px;

animation:starsMove 120s linear infinite;

opacity:.25;

z-index:-1;

}

@keyframes starsMove{
from{transform:translateY(0);}
to{transform:translateY(-2000px);}
}

/* ===============================
WRAPPER
================================ */

.wrapper{

max-width:950px;

margin:auto;

padding:30px;

background:rgba(0,0,0,0.55);

border-radius:18px;

border:1px solid rgba(255,215,0,0.35);

box-shadow:
0 0 35px rgba(255,215,0,0.25),
inset 0 0 40px rgba(255,255,255,0.05);

backdrop-filter:blur(8px);

}

/* ===============================
HEADINGS
================================ */

h1{

font-size:40px;

letter-spacing:2px;

margin-bottom:10px;

text-shadow:0 0 12px rgba(255,215,0,0.8);

}

h2{

margin-top:30px;

font-size:26px;

text-shadow:0 0 8px rgba(255,215,0,0.5);

}

h3{

margin-top:10px;

}

p, li, label, small{

color:#ddd;

}

/* ===============================
VIDEO
================================ */

.video-container{

margin:40px 0;

border-radius:18px;

overflow:hidden;

border:1px solid rgba(255,215,0,0.4);

box-shadow:
0 0 30px rgba(255,215,0,0.45);

}

.video-container video{

width:100%;
display:block;

}

/* ===============================
FORM
================================ */

form{

background:#111;

padding:28px;

border-radius:14px;

margin-top:35px;

border:1px solid rgba(255,215,0,0.3);

box-shadow:0 0 20px rgba(255,215,0,0.15);

}

/* ===============================
INPUTS
================================ */

input,select{

width:100%;

padding:13px;

margin-top:10px;

border-radius:8px;

border:1px solid #333;

background:#222;

color:#FFD700;

outline:none;

transition:.3s;

}

input:focus,select:focus{

border:1px solid #FFD700;

box-shadow:0 0 8px rgba(255,215,0,0.5);

}

/* ===============================
BUTTON
================================ */

button{

width:100%;

padding:14px;

margin-top:15px;

border-radius:10px;

border:none;

font-weight:bold;

cursor:pointer;

background:linear-gradient(90deg,#FFD700,#ffb300);

color:#000;

font-size:16px;

transition:.25s;

box-shadow:0 0 15px rgba(255,215,0,0.4);

}

button:hover{

transform:translateY(-2px);

box-shadow:0 0 25px rgba(255,215,0,0.7);

}

/* ===============================
HR GLOW
================================ */

hr{

margin:60px 0;

border:0;

height:2px;

background:linear-gradient(
to right,
transparent,
#FFD700,
#fff,
#FFD700,
transparent
);

}

/* ===============================
AGREEMENT
================================ */

.agreement{

margin-top:20px;

background:#1a1a1a;

padding:16px;

border-radius:10px;

border-left:4px solid #FFD700;

font-size:.9rem;

}

.agreement input{

width:auto;

margin-right:8px;

accent-color:#FFD700;

}

/* ===============================
CATEGORY GUIDE
================================ */

.category-guide{

background:#1a1a1a;

border-left:4px solid #FFD700;

padding:15px;

border-radius:10px;

margin-top:15px;

}

/* ===============================
FOOTER
================================ */

footer{

margin-top:70px;

text-align:center;

font-size:14px;

color:#FFD700;

padding:25px 0;

border-top:1px solid rgba(255,215,0,0.3);

}

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

@media(max-width:768px){

h1{
font-size:28px;
}

.wrapper{
padding:20px;
}

}

/* LEVEL 7 PARTICLES */

#particles{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;

z-index:-1;

}

.particle{

position:absolute;

width:3px;
height:3px;

background:#FFD700;

border-radius:50%;

opacity:.6;

animation:float linear infinite;

}

@keyframes float{

from{
transform:translateY(0);
opacity:.6;
}

to{
transform:translateY(-120vh);
opacity:0;
}

}

/* HERO */

.hero{
text-align:center;
margin-bottom:40px;
}

/* SCROLL REVEAL */

.fade-section{

opacity:0;

transform:translateY(40px);

transition:all 1s ease;

}

.fade-section.visible{

opacity:1;

transform:translateY(0);

}

/* SHIMMER BUTTON */

button{

background:linear-gradient(90deg,#FFD700,#ffb300);

position:relative;

overflow:hidden;

}

button::after{

content:"";

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.6),
transparent
);

transition:.8s;

}

button:hover::after{

left:100%;

}

/* LEVEL 7 PARTICLES */

#particles{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;

z-index:-1;

}

.particle{

position:absolute;

width:3px;
height:3px;

background:#FFD700;

border-radius:50%;

opacity:.6;

animation:float linear infinite;

}

@keyframes float{

from{
transform:translateY(0);
opacity:.6;
}

to{
transform:translateY(-120vh);
opacity:0;
}

}

/* HERO */

.hero{
text-align:center;
margin-bottom:40px;
}

/* SCROLL REVEAL */

.fade-section{

opacity:0;

transform:translateY(40px);

transition:all 1s ease;

}

.fade-section.visible{

opacity:1;

transform:translateY(0);

}

/* SHIMMER BUTTON */

button{

background:linear-gradient(90deg,#FFD700,#ffb300);

position:relative;

overflow:hidden;

}

button::after{

content:"";

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.6),
transparent
);

transition:.8s;

}

button:hover::after{

left:100%;

}

/* ===========================
LEVEL 8 GALAXY BACKGROUND
=========================== */

#galaxy {

position: fixed;

top:0;
left:0;

width:100%;
height:100%;

background:
radial-gradient(circle at 20% 20%, rgba(255,215,0,.06), transparent 40%),
radial-gradient(circle at 80% 60%, rgba(255,215,0,.04), transparent 40%),
radial-gradient(circle at 50% 80%, rgba(255,215,0,.03), transparent 40%),
#000;

z-index:-3;

animation:galaxyMove 120s linear infinite;

}

@keyframes galaxyMove {

0% { transform: translateY(0); }

100% { transform: translateY(-200px); }

}

/* ===========================
STARFIELD
=========================== */

#particles {

position: fixed;

width:100%;
height:100%;

top:0;
left:0;

pointer-events:none;

z-index:-2;

}

.particle {

position:absolute;

width:3px;
height:3px;

background:#FFD700;

border-radius:50%;

opacity:.7;

animation:particleFloat linear infinite;

}

@keyframes particleFloat {

0% {

transform: translateY(0);

opacity:.8;

}

100% {

transform: translateY(-120vh);

opacity:0;

}

}

/* ===========================
LIGHT BEAMS
=========================== */

#lightbeams {

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;

z-index:-1;

}

.beam {

position:absolute;

width:2px;

height:200vh;

background:linear-gradient(

to bottom,

transparent,

rgba(255,215,0,.5),

transparent

);

opacity:.15;

animation:beamMove linear infinite;

}

@keyframes beamMove {

0% {

transform: translateY(-200vh);

}

100% {

transform: translateY(200vh);

}

}

/* ===========================
HERO GLOW TITLE
=========================== */

h1 {

font-size:42px;

text-shadow:

0 0 10px #FFD700,

0 0 20px #FFD700,

0 0 40px rgba(255,215,0,.7);

animation:titleGlow 3s ease-in-out infinite alternate;

}

@keyframes titleGlow {

0% {

text-shadow:0 0 10px #FFD700;

}

100% {

text-shadow:

0 0 10px #FFD700,

0 0 20px #FFD700,

0 0 35px #FFD700;

}

}

/* ===========================
SCROLL REVEAL
=========================== */

.fade-section {

opacity:0;

transform:translateY(40px);

transition:all 1s ease;

}

.fade-section.visible {

opacity:1;

transform:translateY(0);

}

/* ===========================
SHIMMER BUTTON
=========================== */

button {

position:relative;

overflow:hidden;

background:linear-gradient(90deg,#FFD700,#ffb300);

}

button::after {

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:linear-gradient(

120deg,

transparent,

rgba(255,255,255,.7),

transparent

);

transition:.8s;

}

button:hover::after {

left:100%;

}

/* LOGO HERO */

.logo-container{
text-align:center;
margin-bottom:25px;
animation:logoFloat 6s ease-in-out infinite;
}

.main-logo{

width:160px;   /* reduced by 50% */

max-width:80%;

filter:
drop-shadow(0 0 6px rgba(255,215,0,.6))
drop-shadow(0 0 14px rgba(255,215,0,.5))
drop-shadow(0 0 20px rgba(128,0,255,.35));

animation:logoGlow 4s ease-in-out infinite alternate;

}

@keyframes logoGlow{

0%{

filter:
drop-shadow(0 0 6px rgba(255,215,0,.5))
drop-shadow(0 0 14px rgba(255,215,0,.4))
drop-shadow(0 0 18px rgba(128,0,255,.3));

}

100%{

filter:
drop-shadow(0 0 10px rgba(255,215,0,.7))
drop-shadow(0 0 22px rgba(255,215,0,.5))
drop-shadow(0 0 28px rgba(128,0,255,.4));

}

}

/* ==============================
PURPLE GOLD BACKLIGHT
============================== */

.wrapper{

position:relative;

}

.wrapper::before{

content:"";

position:absolute;

top:-100px;
left:50%;

transform:translateX(-50%);

width:600px;
height:300px;

background:radial-gradient(circle,
rgba(255,215,0,.35),
rgba(128,0,255,.25),
transparent);

filter:blur(90px);

z-index:-1;

}

/* ==============================
HEADINGS LUXURY STYLE
============================== */

h1{

font-size:44px;

background:linear-gradient(90deg,#FFD700,#fff,#FFD700);

-webkit-background-clip:text;
color:transparent;

text-shadow:

0 0 15px rgba(255,215,0,.8),
0 0 30px rgba(128,0,255,.5);

}

/* ==============================
BUTTON LUXURY ANIMATION
============================== */

button{

background:linear-gradient(90deg,#FFD700,#ffb300,#FFD700);

position:relative;

overflow:hidden;

box-shadow:

0 0 15px rgba(255,215,0,.6),
0 0 25px rgba(128,0,255,.4);

}

button::before{

content:"";

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:linear-gradient(

120deg,
transparent,
rgba(255,255,255,.7),
transparent

);

transition:.7s;

}

button:hover::before{

left:100%;

}

/* ==============================
INPUT GLOW
============================== */

input:focus,
select:focus{

border:1px solid gold;

box-shadow:

0 0 10px gold,
0 0 20px purple;

}

/* ==============================
VIDEO GOLD FRAME
============================== */

.video-container{

border:2px solid gold;

box-shadow:

0 0 25px gold,
0 0 45px purple;

}

/* ==============================
FOOTER
============================== */

footer{

background:linear-gradient(
90deg,
transparent,
rgba(255,215,0,.2),
transparent
);

}

.preview-image{

margin-top:15px;

width:220px;

border-radius:10px;

display:none;

border:2px solid gold;

box-shadow:0 0 12px rgba(255,215,0,.5);

}

<?php
$locations = [
"AGUSAN DEL NORTE","AKLAN","ALBAY","ANTIPOLO CITY","ANTIQUE","AURORA",
"BATAAN","BATANGAS – LIPA CITY","BATANGAS – STO. TOMAS","BATANGAS – TANAUAN",
"BATANGAS CITY","BATANGAS PROVINCE","BENGUET","BOHOL","BUKIDNON",
"BULACAN – BALIUAG","BULACAN – MALOLOS CITY","BULACAN – MARILAO",
"BULACAN – PLARIDEL","BULACAN – PROVINCE","CAGAYAN PROVINCE","CALOOCAN CITY",
"CAMARINES NORTE","CAMARINES SUR","CAPIZ","CAVITE – BACOOR","CAVITE – DASMARIÑAS",
"CAVITE – GENERAL TRIAS","CAVITE – IMUS","CAVITE – TRECE MARTIRES","CAVITE CITY",
"CAVITE PROVINCE","CEBU CITY","CEBU PROVINCE","COTABATO","DAVAO DE ORO",
"DAVAO DEL NORTE","DAVAO DEL SUR","DAVAO OCCIDENTAL","DAVAO ORIENTAL",
"GENERAL SANTOS CITY","GUIMARAS","ILOCOS NORTE","ILOCOS SUR","ILOILO CITY",
"ILOILO PROVINCE","ISABELA","LA UNION","LAGUNA – BIÑAN","LAGUNA – CABUYAO",
"LAGUNA – CALAMBA","LAGUNA – SAN PABLO","LAGUNA – SAN PEDRO","LAGUNA – STA. ROSA",
"LAGUNA PROVINCE","LANAO DEL NORTE","LAS PIÑAS CITY","LEYTE PROVINCE",
"MAGUINDANAO","MAKATI CITY","MALABON CITY","MANDALUYONG CITY","MANILA CITY",
"MARIKINA CITY","MARINDUQUE","MASBATE","MISAMIS OCCIDENTAL","MISAMIS ORIENTAL",
"MUNTINLUPA CITY","NAVOTAS CITY","NEGROS OCCIDENTAL","NEGROS ORIENTAL",
"NUEVA ECIJA","NUEVA VIZCAYA","OCCIDENTAL MINDORO","ORIENTAL MINDORO","ORMOC",
"PALAWAN","PAMPANGA","PANGASINAN","PARAÑAQUE CITY","PASAY CITY","PASIG CITY",
"QUEZON CITY","QUEZON PROVINCE","QUIRINO","RIZAL PROVINCE","ROMBLON",
"SORSOGON","SOUTH COTABATO","SOUTHERN LEYTE","SULTAN KUDARAT","SURIGAO DEL NORTE",
"SURIGAO DEL SUR","TACLOBAN","TAGUIG CITY","TARLAC","VALENZUELA CITY",
"ZAMBALES","ZAMBOANGA PENINSULA"
];
?>

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>JAMS Top Model Philippines | Season 5</title>

<link rel="stylesheet" href="assets/style.css">

</head>

<body>

<div id="galaxy"></div>
<div id="particles"></div>
<div id="lightbeams"></div>

<div class="wrapper">

<div class="logo-container">
<img src="image/logo.png" class="main-logo">
</div>

<div class="hero">

<h1>NATIONWIDE MODEL SEARCH</h1>

<h3>JAMS Top Model Philippines<br>Season 5</h3>

<p>
This project unites aspiring models from all corners of the Philippines,
celebrating Filipino diversity while discovering the next runway stars.
</p>

</div>

<section class="fade-section">

<div class="video-container">

<video id="campVideo" controls preload="auto" playsinline>

<source src="https://topmodel.jamsaptv.com/video/background2.mp4" type="video/mp4">

</video>

</div>

</section>

<hr>

<section class="fade-section">

<h2>MISSION & VISION</h2>

<h3>Mission</h3>

<p>
To celebrate the rich diversity of Filipino culture through modeling while empowering participants to grow as confident community ambassadors.
</p>

<h3>Vision</h3>

<p>
To discover and elevate new runway talents nationwide, shaping the future of Filipino modeling excellence.
</p>

</section>

<hr>

<section class="fade-section">

<h2>NO REGISTRATION FEE<br>JOIN FOR FREE</h2>

<div class="entry-counter">
⭐ <span id="entryCount">0</span> Models Already Submitted Nationwide
</div>

<form action="upload-handler.php" method="post" enctype="multipart/form-data">

<label>FULL NAME</label>
<input type="text" name="fullname" placeholder="Enter your complete name" required>

<label>AGE</label>
<input type="number" name="age" min="7" max="25" placeholder="Enter your age" required>

<div class="category-guide">

<strong>AGE CATEGORY GUIDE</strong>

<ul>
<li>Category 1: 7–12 years old</li>
<li>Category 2: 13–17 years old</li>
<li>Category 3: 18–25 years old</li>
</ul>

</div>

<label>LOCATION</label>

<select name="location" required>

<option value="">Select location</option>

<?php foreach ($locations as $location): ?>

<option value="<?= htmlspecialchars($location) ?>">
<?= htmlspecialchars($location) ?>
</option>

<?php endforeach; ?>

</select>

<label>CONTACT NUMBER</label>
<input type="text" name="contact_number" required>

<label>FACEBOOK NAME</label>
<input type="text" name="facebook_name" required>

<label>EMAIL</label>
<input type="email" name="email" required>

<label>BEST CLOSE-UP PHOTO</label>

<input type="file" name="photo" id="photoInput" accept=".jpg,.jpeg,.png" required>

<img id="photoPreview" class="preview-image">

<div class="agreement">

<label>

<input type="checkbox" name="agreement" required>

I confirm that the information provided is accurate and I authorize
JAMS Top Model Philippines and JAMSAP TV to use the submitted materials
for official program, promotional, and voting purposes.

</label>

</div>

<button type="submit">SUBMIT MY PHOTO</button>

<div class="upload-bar">
<div id="uploadProgress"></div>
</div>

<small>Maximum file size: 10MB</small>

</form>

</section>

<hr>

<section class="fade-section">

<h2>COMPETITION TIMELINE</h2>

<ul>
<li><strong>Online Submission</strong> – Submit photo via JAMSAP TV</li>
<li><strong>Local Gala Competitions</strong> – Runway showcase + judging</li>
<li><strong>Grand Finals</strong> – National level competition</li>
<li><strong>National Recognition</strong> – Awards & opportunities</li>
</ul>

</section>

</div>

<footer>
© 2026 JAMS Top Model Philippines – Season 5
</footer>

<script src="assets/finalboss.js"></script>

</body>
</html>