/* ═══════════════════════════════════════
styleProgram1-electrical.css
STORM COMMAND THEME — Unique Design
═══════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#0a1628;--surface:#111d33;--card:#162240;
--yellow:#fbbf24;--orange:#f97316;--sky:#38bdf8;--cyan:#22d3ee;
--text:#e2e8f0;--muted:#64748b;--border:rgba(56,189,248,0.12);
--font:'Space Grotesk','Inter',system-ui,sans-serif;
--mono:'JetBrains Mono','Consolas',monospace;
--ease:0.3s cubic-bezier(.4,0,.2,1);--r:16px;--rs:10px;
}
html{scroll-behavior:smooth}
body.p1{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.p1-wrap{max-width:1100px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.p1-glow{color:var(--yellow);text-shadow:0 0 20px rgba(251,191,36,0.25)}
.p1-eyebrow{font-family:var(--mono);font-size:.85rem;letter-spacing:3px;text-transform:uppercase;color:var(--sky);margin-bottom:8px;text-align:center;font-weight:700}
.p1-heading{font-size:clamp(2.2rem,5vw,3.2rem);font-weight:800;text-align:center;margin-bottom:12px;letter-spacing:-.5px}
.p1-subtext{text-align:center;color:var(--muted);font-size:1rem;margin-bottom:48px;font-weight:500}
/* ── BOOT ── */
.p1-boot{position:absolute;top:0;left:0;width:100%;height:100vh;z-index:999999;background:#060d1a;display:flex;align-items:center;justify-content:center;transition:opacity .6s, background .1s}
.p1-boot-inner{display:flex;gap:60px;align-items:center;padding:40px;transition:opacity .1s}
.p1-boot-electro{position:relative;width:160px;height:160px;display:flex;align-items:center;justify-content:center}
.p1-electro-ring{position:absolute;border-radius:50%;border:2px solid transparent;border-top-color:var(--sky);border-bottom-color:var(--yellow);opacity:0.8}
.p1-electro-ring-1{inset:10%;animation:p1-spin 2s linear infinite}
.p1-electro-ring-2{inset:25%;animation:p1-spin-rev 3s linear infinite;border-top-color:var(--yellow);border-bottom-color:var(--cyan)}
.p1-electro-ring-3{inset:40%;animation:p1-spin 1.5s linear infinite;border-top-color:var(--cyan);border-bottom-color:transparent;border-right-color:var(--yellow)}
@keyframes p1-spin{to{transform:rotate(360deg)}}
@keyframes p1-spin-rev{to{transform:rotate(-360deg)}}
.p1-electro-bolt-icon{width:48px;height:48px;color:var(--yellow);animation:p1-bolt-flicker 1.5s infinite;filter:drop-shadow(0 0 15px var(--yellow))}
@keyframes p1-bolt-flicker{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.95)}70%,75%{opacity:.2}80%{opacity:1;transform:scale(1.1)}}
.p1-boot-text{max-width:400px}
.p1-boot-line{font-family:var(--mono);font-size:.75rem;color:var(--sky);line-height:2;opacity:0;transition:opacity .3s}
.p1-boot-ok{color:var(--cyan);text-shadow:0 0 10px rgba(34,211,238,.4)}.p1-boot-warn{color:var(--orange);text-shadow:0 0 10px rgba(249,115,22,.4)}
.p1-boot-final{color:var(--yellow);font-weight:700;text-shadow:0 0 15px rgba(251,191,36,.5)}
.p1-boot-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .15s}
.p1-boot-flash.p1-wipe-go{animation:p1-flash-bang 1s ease-out forwards}
@keyframes p1-flash-bang{0%{opacity:0}5%{opacity:1;background:#fff}100%{opacity:0;background:rgba(251,191,36,0)}}
/* ── RAIN ── */
.p1-rain-overlay{position:absolute;inset:0;width:100%;height:100vh;z-index:50;pointer-events:none;opacity:0;transition:opacity .5s;overflow:hidden}
.rain-on .p1-rain-overlay{opacity:1}
.p1-drop{position:absolute;top:-20px;width:1px;height:18px;background:linear-gradient(180deg,transparent,rgba(56,189,248,.35));animation:p1-fall linear infinite}
@keyframes p1-fall{to{transform:translateY(110vh)}}
/* ── NAV TOGGLES (Moved to global nav) ── */
/* ── TOGGLE CLUSTER ── */
.p1-toggle-cluster{background:rgba(255,255,255,0.06);border-radius:20px;padding:2px;display:flex;gap:2px;transition:background var(--ease)}
.p1-pill-toggle{padding:6px;border:none;background:transparent;color:var(--muted);cursor:pointer;border-radius:18px;transition:all var(--ease)}
.p1-pill-toggle:hover{color:var(--text)}
.p1-pill-active{background:var(--sky);color:#0a1628!important}
/* Toggle Cluster Scrolled / Light Mode adaptations */
#mainNav.scrolled .p1-toggle-cluster { background: rgba(15, 23, 42, 0.08); }
#mainNav.scrolled .p1-pill-toggle { color: #64748b; }
#mainNav.scrolled .p1-pill-toggle:hover { color: #0f172a; }
#mainNav.scrolled .p1-pill-active { background: var(--sky); color: #fff !important; }
/* ── DOMINANT MODE DOCK (JS-positioned to follow viewport) ── */
.p1-dock {
position: absolute;
z-index: 99999;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(56, 189, 248, 0.35);
border-radius: 50px;
box-shadow: 0 8px 40px rgba(56, 189, 248, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.p1-dock:hover {
box-shadow: 0 12px 60px rgba(56, 189, 248, 0.35);
border-color: rgba(56, 189, 248, 0.6);
}
/* Divider between toggles and mode buttons */
.p1-dock-divider {
width: 1px;
height: 24px;
background: rgba(56, 189, 248, 0.3);
margin: 0 4px;
flex-shrink: 0;
}
/* Toggle cluster inside dock */
.p1-dock-toggles {
display: flex;
gap: 2px;
align-items: center;
}
.p1-dock-toggles .p1-pill-toggle {
padding: 8px;
border: none;
background: transparent;
color: rgba(148, 163, 184, 0.7);
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--ease);
}
.p1-dock-toggles .p1-pill-toggle:hover {
color: #e2e8f0;
background: rgba(56, 189, 248, 0.1);
}
.p1-dock-toggles .p1-pill-active {
background: rgba(56, 189, 248, 0.2) !important;
color: var(--sky) !important;
}
/* Mode buttons */
.p1-dock-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 22px;
border: none;
border-radius: 40px;
background: transparent;
color: var(--muted);
font: 700 0.8rem var(--mono);
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all var(--ease);
}
.p1-dock-btn svg {
width: 16px;
height: 16px;
}
.p1-dock-btn:hover {
color: var(--text);
background: rgba(56, 189, 248, 0.1);
}
.p1-dock-active {
background: var(--sky) !important;
color: #0a1628 !important;
box-shadow: 0 4px 16px rgba(56, 189, 248, 0.4);
}
/* ── HERO ── */
.p1-hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:100px 24px 60px;overflow:hidden}
.p1-hero::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 180px; background: linear-gradient(to bottom, transparent 0%, var(--bg) 100%); pointer-events: none; z-index: 10; }
.p1-hero-atmos{position:absolute;inset:0;overflow:hidden}
.p1-atmos-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.15}
.p1-orb-1{width:500px;height:500px;background:var(--sky);top:-100px;left:-100px}
.p1-orb-2{width:400px;height:400px;background:var(--yellow);bottom:-100px;right:-50px;opacity:.08}
.p1-orb-3{width:300px;height:300px;background:var(--cyan);top:40%;left:60%;opacity:.06}
.p1-hero-wrap{position:relative;z-index:1;max-width:1100px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.p1-hero-left{display:flex;flex-direction:column;gap:16px}
.p1-hero-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.85rem;color:var(--sky);letter-spacing:1px;font-weight:600}
.p1-tag-dot{width:6px;height:6px;border-radius:50%;background:var(--sky);animation:p1-dot-blink 2s infinite}
.p1-tag-sep{opacity:.3}
.p1-hero-h1{position:relative;font-size:clamp(2.8rem,6vw,4.8rem);font-weight:800;line-height:1.05;letter-spacing:-1.5px}
/* Massive Electric Strike Background */
.p1-mega-strike {
position: absolute;
top: -30%;
left: -20%;
width: 140%;
height: 160%;
z-index: -2;
pointer-events: none;
opacity: 0; /* Hidden or very subtle in perfect mode */
}
.p1-strike-path {
stroke-dasharray: 1200;
stroke-dashoffset: 1200;
}
@keyframes p1-strike-anim {
0% { stroke-dashoffset: 1200; opacity: 0; }
5% { opacity: 1; }
15% { stroke-dashoffset: 0; opacity: 1; }
20% { opacity: 0; }
25% { opacity: 1; }
30%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
/* Decorative Lightning Bolts around Title */
.p1-electric-bolt {
position: absolute;
width: 32px;
height: 32px;
color: var(--yellow);
opacity: 1;
pointer-events: none;
z-index: -1;
animation: p1-flash-spark 4s infinite;
}
.p1-bolt-top { top: -20px; left: -30px; transform: rotate(-20deg); }
.p1-bolt-bottom { bottom: -10px; right: 20%; transform: rotate(15deg); }
/* Scattered Lightning Elements */
.p1-scatter-bolt {
position: absolute;
width: 28px;
height: 28px;
color: var(--yellow);
opacity: 0.8;
pointer-events: none;
z-index: 0;
animation: p1-flash-spark 4s infinite alternate, p1-float-spark 5s infinite ease-in-out;
filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.4));
}
.p1-sb-1 { top: -10%; left: 45%; width: 40px; height: 40px; transform: rotate(15deg); animation-delay: 0s, 0s; }
.p1-sb-2 { top: -5%; right: 10%; width: 32px; height: 32px; transform: rotate(-25deg); animation-delay: 1s, 0.5s; color: var(--sky); filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.4)); }
.p1-sb-3 { bottom: 5%; left: 15%; width: 36px; height: 36px; transform: rotate(45deg); animation-delay: 2s, 1s; }
.p1-sb-4 { bottom: -5%; left: 45%; width: 24px; height: 24px; transform: rotate(-10deg); animation-delay: 0.5s, 1.5s; color: var(--sky); filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.4)); }
.p1-sb-5 { bottom: 0%; right: 30%; width: 30px; height: 30px; transform: rotate(10deg); animation-delay: 1.5s, 0.2s; }
.p1-sb-6 { bottom: 10%; right: 5%; width: 45px; height: 45px; transform: rotate(-15deg); animation-delay: 3s, 0.8s; color: var(--yellow); }
.p1-h1-line{display:block}
.p1-h1-accent{color:var(--yellow)}
.p1-hero-typed{font-size:1rem;color:var(--muted);min-height:1.4em;font-weight:500}
.p1-typed-caret{color:var(--yellow);animation:p1-blink 1s step-end infinite}
@keyframes p1-blink{50%{opacity:0}}
.p1-hero-pills{display:flex;gap:8px;flex-wrap:wrap}
.p1-pill{padding:6px 16px;border-radius:20px;background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.15);font-size:.85rem;color:var(--text);font-weight:500}
.p1-pill strong{color:var(--yellow);margin-right:4px}
.p1-hero-btns{display:flex;gap:12px}
.p1-btn-solid{display:inline-flex;align-items:center;padding:14px 32px;background:var(--yellow);color:#0a1628;font-weight:800;font-size:.95rem;border-radius:28px;text-decoration:none;transition:all var(--ease)}
.p1-btn-solid:hover{background:#fcd34d;transform:translateY(-2px);box-shadow:0 6px 24px rgba(251,191,36,.3)}
.p1-btn-ghost{display:inline-flex;align-items:center;padding:14px 32px;background:transparent;color:var(--sky);border:1px solid var(--sky);font-weight:700;font-size:.95rem;border-radius:28px;text-decoration:none;transition:all var(--ease)}
.p1-btn-ghost:hover{background:rgba(56,189,248,.08);transform:translateY(-2px)}
.p1-btn-big{padding:16px 36px;font-size:.95rem}
.p1-hero-right{display:flex;justify-content:center;align-items:center}
.p1-storm-vis{position:relative;width:100%;max-width:400px}
/* Mega Electro Rings */
.p1-mega-ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
pointer-events: none;
z-index: 0;
opacity: 0.3;
}
.p1-mega-ring-1 { width: 110%; aspect-ratio: 1; border: 2px dashed rgba(56, 189, 248, 0.4); animation: p1-ring-spin 10s infinite linear; }
.p1-mega-ring-2 { width: 130%; aspect-ratio: 1; border: 4px dotted rgba(251, 191, 36, 0.4); animation: p1-ring-spin-rev 15s infinite linear; }
@keyframes p1-ring-spin {
0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.05); }
100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}
@keyframes p1-ring-spin-rev {
0% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
50% { transform: translate(-50%, -50%) rotate(180deg) scale(0.95); }
100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
}
/* Floating Electric Sparks */
.p1-electro-spark {
position: absolute;
width: 6px;
height: 6px;
background: var(--yellow);
border-radius: 50%;
box-shadow: 0 0 10px var(--yellow), 0 0 20px rgba(56, 189, 248, 0.5);
opacity: 0.6;
pointer-events: none;
z-index: 3;
animation: p1-float-spark 3s infinite ease-in-out;
}
.p1-espark-1 { top: 10%; left: -5%; }
.p1-espark-2 { top: -5%; right: 20%; width: 4px; height: 4px; }
.p1-espark-3 { bottom: 15%; right: -10%; width: 8px; height: 8px; }
@keyframes p1-flash-spark {
0%, 100% { opacity: 0; transform: scale(0.5); }
5%, 15% { opacity: 1; transform: scale(1.2); }
10% { opacity: 0.2; transform: scale(0.8); }
}
@keyframes p1-float-spark {
0%, 100% { transform: translateY(0) translateX(0); }
50% { transform: translateY(-15px) translateX(10px); }
}
.p1-cloud-svg{width:100%;height:auto;position:relative;z-index:1}
.p1-hero-img-wrapper{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;border-radius:var(--r);z-index:2}
.p1-hero-img{width:100%;height:100%;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,0.1);box-shadow:0 16px 40px rgba(0,0,0,0.4), 0 0 20px rgba(56,189,248,0.1);transition:transform var(--ease)}
.p1-hero-img:hover{transform:scale(1.02) translateY(-4px)}
.p1-hero-img-sunny { display: none; }
.p1-hero-img-night { display: block; }
body.sunny .p1-hero-img-sunny { display: block; }
body.sunny .p1-hero-img-night { display: none; }
.p1-hero-scroll{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.6rem;color:var(--muted);letter-spacing:2px;font-family:var(--mono);z-index:20}
.p1-scroll-bar{width:1px;height:36px;background:linear-gradient(180deg,transparent,var(--sky));animation:p1-pulse 2s infinite}
@keyframes p1-pulse{0%,100%{opacity:.3}50%{opacity:1}}
/* ── OVERVIEW ── */
.p1-overview{padding:80px 0;background:var(--surface)}
/* Advanced Grid Layout */
.p1-station-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
margin-bottom: 40px;
}
.p1-station-card {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
background: rgba(15, 23, 42, 0.4);
backdrop-filter: blur(10px);
border: 1px solid var(--border);
border-radius: 12px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
/* Cyberpunk scanning line effect on hover */
.p1-station-card::before {
content: "";
position: absolute;
top: 0; left: -100%;
width: 50%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.2), transparent);
transform: skewX(-20deg);
transition: left 0.6s ease;
}
.p1-station-card:hover::before {
left: 150%;
}
.p1-station-card:hover {
border-color: var(--sky);
transform: translateY(-5px) scale(1.02);
box-shadow: 0 10px 30px rgba(56, 189, 248, 0.15), inset 0 0 15px rgba(56, 189, 248, 0.05);
}
.p1-station-icon{width:40px;height:40px;color:var(--sky);flex-shrink:0;transition:transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
.p1-station-icon svg{width:100%;height:100%;filter:drop-shadow(0 0 5px rgba(56,189,248,0.3));}
.p1-station-card:hover .p1-station-icon { transform: scale(1.15) rotate(5deg); }
.p1-station-data{display:flex;flex-direction:column;gap:2px;}
.p1-station-val{font-size:1.25rem;font-weight:800;color:var(--text);letter-spacing:0.5px;}
.p1-station-label{font-size:0.85rem;color:#94a3b8;text-transform:uppercase;letter-spacing:1px;font-weight:700;}
/* Badge Customizations */
.p1-badge-card .p1-station-icon { color: var(--yellow); }
.p1-badge-card .p1-station-icon svg { filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.4)); }
/* Decorated Sci-Fi Box */
.p1-cyber-box {
position: relative;
padding: 30px 40px;
background: rgba(10, 15, 30, 0.5);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 4px;
box-shadow: inset 0 0 40px rgba(0,0,0,0.5);
}
.p1-cyber-corner {
position: absolute;
width: 15px; height: 15px;
border: 2px solid var(--sky);
opacity: 0.5;
transition: all 0.3s ease;
}
.p1-cyber-box:hover .p1-cyber-corner {
opacity: 1;
width: 25px; height: 25px;
box-shadow: 0 0 10px rgba(56,189,248,0.5);
}
.p1-cyber-corner.p1-tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.p1-cyber-corner.p1-tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.p1-cyber-corner.p1-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.p1-cyber-corner.p1-br { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.p1-cyber-line {
position: absolute;
background: var(--sky);
opacity: 0.3;
}
.p1-cyber-line.p1-top-line { top: -1px; left: 50%; transform: translateX(-50%); width: 40px; height: 2px; }
.p1-cyber-line.p1-bottom-line { bottom: -1px; left: 50%; transform: translateX(-50%); width: 40px; height: 2px; }
.p1-cyber-box p {
position: relative;
z-index: 1;
font-size: 1.15rem;
line-height: 1.9;
color: #f8fafc;
font-weight: 400;
text-align: center;
max-width: 800px;
margin: 0 auto;
}
/* ── BENEFITS ── */
.p1-benefits{padding:80px 0;background:var(--bg)}
.p1-bf-lightning-canvas {
display: none;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
overflow: visible;
}
body.perfect-mode .p1-bf-lightning-canvas,
body.hurricane-mode .p1-bf-lightning-canvas { display: block; }
/* ── Benefits Atmospheric BG (Perfect & Relaxed Modes) ── */
.p1-bf-atmos {
display: none;
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
body.perfect-mode .p1-bf-atmos,
body.relaxed-mode .p1-bf-atmos,
body.hurricane-mode .p1-bf-atmos { display: block; }
/* Hide soft clouds in Hurricane Mode to let storm background take over */
body.hurricane-mode .p1-bf-cloud { display: none; }
/* GPU-Friendly Overrides for Relaxed Mode Atmos */
body.relaxed-mode .p1-bf-sparkle,
body.relaxed-mode .p1-bf-shooting,
body.relaxed-mode .p1-bf-aurora { display: none; }
body.relaxed-mode .p1-bf-cloud { opacity: 0.35; animation-duration: calc(var(--bf-drift) * 1.5); }
body.relaxed-mode .p1-bf-hint { display: none !important; }
/* Relaxed Mascots (Calmer, no heavy SVGs) */
body.relaxed-mode .p1-bf-mascot { animation-name: p1-bf-float !important; animation-duration: 8s !important; cursor: default; }
body.relaxed-mode .p1-bf-sun-rays { animation-play-state: paused; }
body.relaxed-mode .p1-bf-planet-aura,
body.relaxed-mode .p1-planet-crackle,
body.relaxed-mode .p1-planet-spark { display: none; }
body.relaxed-mode .p1-bf-planet [filter] { filter: none !important; }
/* Force Relaxed Faces */
body.relaxed-mode .p1-sun-face,
body.relaxed-mode .p1-planet-face { display: none !important; }
body.relaxed-mode .p1-sun-face-relax,
body.relaxed-mode .p1-planet-face-relax { display: block !important; }
@keyframes p1-bf-float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(2deg); }
}
/* -- Cloud Shapes -- */
.p1-bf-cloud {
position: absolute;
border-radius: 50px;
opacity: 0.65;
animation: p1-bf-cloud-drift var(--bf-drift) linear infinite;
}
.p1-bf-cloud::before, .p1-bf-cloud::after {
content: '';
position: absolute;
border-radius: 50%;
background: inherit;
}
.p1-bf-cloud::before {
width: 60%;
height: 130%;
top: -50%;
left: 15%;
}
.p1-bf-cloud::after {
width: 45%;
height: 110%;
top: -30%;
right: 15%;
}
/* Cloud instances */
.p1-bf-cloud-1 { width: 130px; height: 40px; top: 10%; --bf-drift: 50s; animation-delay: -5s; }
.p1-bf-cloud-2 { width: 95px; height: 32px; top: 48%; --bf-drift: 38s; animation-delay: -18s; }
.p1-bf-cloud-3 { width: 75px; height: 26px; top: 76%; --bf-drift: 30s; animation-delay: -10s; }
@keyframes p1-bf-cloud-drift {
from { left: -220px; }
to { left: calc(100% + 220px); }
}
/* Cloud colors per mode */
body.sunny.perfect-mode .p1-bf-atmos { --bf-cloud-color: rgba(255, 255, 255, 0.75); }
body:not(.sunny).perfect-mode .p1-bf-atmos { --bf-cloud-color: rgba(40, 70, 160, 0.55); }
.p1-bf-cloud { background: var(--bf-cloud-color, rgba(255,255,255,0.5)); }
body:not(.sunny).perfect-mode .p1-bf-cloud { box-shadow: 0 0 25px rgba(56, 189, 248, 0.15), 0 0 8px rgba(96, 165, 250, 0.1); }
/* Night perfect: make eyebrow text readable */
body:not(.sunny).perfect-mode .p1-eyebrow {
color: #93c5fd;
font-size: 0.8rem;
letter-spacing: 4px;
text-shadow: 0 0 12px rgba(147, 197, 253, 0.5), 0 0 4px rgba(56, 189, 248, 0.3);
}
/* Sunny perfect: make eyebrow text readable on light bg */
body.sunny.perfect-mode .p1-eyebrow {
color: #b45309;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 4px;
text-shadow: 0 1px 3px rgba(180, 83, 9, 0.3);
}
/* -- Interaction Hints (perfect mode only) -- */
.p1-bf-hint { display: none; }
body.perfect-mode .p1-bf-hint { display: flex; }
.p1-bf-hint {
position: absolute;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 1.5px;
text-transform: uppercase;
pointer-events: none;
z-index: 3;
animation: p1-bf-hint-pulse 3s infinite ease-in-out;
}
@keyframes p1-bf-hint-pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 0.85; }
}
body.sunny.perfect-mode .p1-bf-hint {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 2px;
}
.p1-bf-hint-icon { font-size: 0.85rem; }
/* Bottom-center click hint */
.p1-bf-hint-click {
bottom: 14px;
left: 50%;
transform: translateX(-50%);
}
body.sunny.perfect-mode .p1-bf-hint-click {
color: #92400e;
text-shadow: 0 1px 4px rgba(146, 64, 14, 0.25), 0 0 10px rgba(251, 191, 36, 0.2);
}
body:not(.sunny).perfect-mode .p1-bf-hint-click {
color: rgba(147, 197, 253, 0.7);
text-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}
/* Mascot click-me hint (below mascot) */
.p1-bf-hint-mascot {
top: 120px;
right: 45px;
}
body:not(.sunny).perfect-mode .p1-bf-hint-mascot {
top: 200px;
right: 55px;
}
body.sunny.perfect-mode .p1-bf-hint-mascot {
color: #92400e;
text-shadow: 0 1px 4px rgba(146, 64, 14, 0.25), 0 0 8px rgba(251, 191, 36, 0.2);
}
body:not(.sunny).perfect-mode .p1-bf-hint-mascot {
color: rgba(96, 165, 250, 0.7);
text-shadow: 0 0 6px rgba(56, 189, 248, 0.3);
}
/* -- Mascot Common -- */
.p1-bf-mascot {
position: absolute;
top: 5px;
right: 30px;
width: 110px;
height: 110px;
opacity: 0.7;
cursor: pointer;
pointer-events: auto;
transition: opacity 0.3s ease, filter 0.3s ease;
}
.p1-bf-planet {
width: 220px;
height: 220px;
top: -25px;
right: 10px;
opacity: 0.9;
}
.p1-bf-mascot:hover {
opacity: 1;
filter: brightness(1.15) drop-shadow(0 0 8px rgba(251, 191, 36, 0.3));
}
/* Mascot visibility */
.p1-bf-sun { display: none; }
.p1-bf-planet { display: none; }
body.sunny.perfect-mode .p1-bf-sun,
body.sunny.relaxed-mode .p1-bf-sun,
body.sunny.hurricane-mode .p1-bf-sun { display: block; }
body:not(.sunny).perfect-mode .p1-bf-planet,
body:not(.sunny).relaxed-mode .p1-bf-planet,
body:not(.sunny).hurricane-mode .p1-bf-planet { display: block; }
body:not(.sunny).perfect-mode .p1-bf-mascot:hover,
body:not(.sunny).relaxed-mode .p1-bf-mascot:hover {
filter: brightness(1.15) drop-shadow(0 0 10px rgba(56, 189, 248, 0.4));
}
/* Hurricane Mascot Overrides */
@keyframes p1-hurricane-mascot-hover {
0% { transform: scale(var(--mascot-scale, 1.4)) translateY(0) rotate(0deg); }
33% { transform: scale(var(--mascot-scale, 1.4)) translateY(-4px) rotate(2deg); }
66% { transform: scale(var(--mascot-scale, 1.4)) translateY(4px) rotate(-1deg); }
100% { transform: scale(var(--mascot-scale, 1.4)) translateY(0) rotate(0deg); }
}
body.hurricane-mode .p1-bf-mascot {
--mascot-scale: 1.4;
animation: p1-hurricane-mascot-hover 1.2s ease-in-out infinite !important;
transform: scale(var(--mascot-scale));
transform-origin: center right;
z-index: 10;
}
body.sunny.hurricane-mode .p1-bf-sun {
--mascot-scale: 2.2; /* Make sun significantly bigger */
}
body.sunny.hurricane-mode .p1-bf-mascot:hover {
filter: brightness(1.3) drop-shadow(0 0 20px rgba(251, 191, 36, 0.8));
}
body:not(.sunny).hurricane-mode .p1-bf-mascot:hover {
filter: brightness(1.3) drop-shadow(0 0 20px rgba(56, 189, 248, 0.8));
}
/* Force Hurricane Faces */
body.hurricane-mode .p1-sun-face:not([class*="hurricane"]),
body.hurricane-mode .p1-planet-face:not([class*="hurricane"]) { display: none !important; }
/* Default Worry Faces in Hurricane */
body.hurricane-mode .p1-sun-face-hurricane-worry,
body.hurricane-mode .p1-planet-face-hurricane-worry { display: block !important; }
/* Hide Confident Faces by Default */
body.hurricane-mode .p1-sun-face-hurricane,
body.hurricane-mode .p1-planet-face-hurricane { display: none !important; }
/* Show Confident Faces when toggled */
body.hurricane-mode .p1-bf-sun.show-confident .p1-sun-face-hurricane-worry,
body.hurricane-mode .p1-bf-planet.show-confident .p1-planet-face-hurricane-worry { display: none !important; }
body.hurricane-mode .p1-bf-sun.show-confident .p1-sun-face-hurricane,
body.hurricane-mode .p1-bf-planet.show-confident .p1-planet-face-hurricane { display: block !important; }
/* Mascot Click Shine Effect */
.p1-mascot-shine {
animation: p1-mascot-shine-anim 0.5s ease-out;
}
@keyframes p1-mascot-shine-anim {
0% { filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0)); }
50% { filter: brightness(1.8) drop-shadow(0 0 30px rgba(255,255,255,1)); transform: scale(1.5) rotate(5deg); }
100% { filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0)); }
}
/* -- Sun: Rotating Rays -- */
.p1-bf-sun-rays {
transform-origin: 100px 100px;
animation: p1-sun-rays-spin 25s linear infinite;
opacity: 0.55;
}
@keyframes p1-sun-rays-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* -- Wave Arm Animation (shared) -- */
.p1-bf-wave-arm {
transform-origin: 138px 118px;
animation: p1-bf-wave 1.2s infinite ease-in-out;
}
@keyframes p1-bf-wave {
0%, 100% { transform: rotate(-8deg); }
50% { transform: rotate(28deg); }
}
/* -- Planet: Pulsing Aura -- */
.p1-bf-planet-aura {
animation: p1-planet-pulse 3s infinite alternate ease-in-out;
}
.p1-bf-aura-2 {
animation: p1-planet-pulse 3s infinite alternate-reverse ease-in-out;
}
@keyframes p1-planet-pulse {
from { opacity: 0.3; stroke-width: 1.5; }
to { opacity: 0.8; stroke-width: 3; }
}
/* Third aura ring */
.p1-bf-aura-3 {
animation: p1-planet-pulse 4s infinite alternate-reverse ease-in-out;
}
/* Surface crackling arcs — flicker animation */
.p1-planet-crackle {
animation: p1-crackle-flicker 0.8s infinite steps(2);
}
@keyframes p1-crackle-flicker {
0%, 100% { opacity: 0.6; }
25% { opacity: 0.1; }
50% { opacity: 0.8; }
75% { opacity: 0.2; }
}
/* Orbiting spark around planet */
.p1-planet-spark {
animation: p1-spark-orbit 4s linear infinite;
transform-origin: 100px 100px;
}
@keyframes p1-spark-orbit {
from { transform: rotate(0deg) translateX(0); }
to { transform: rotate(360deg) translateX(0); }
}
/* Planet shock reaction (added via JS on click) */
.p1-bf-planet.p1-planet-shocked {
animation: p1-planet-shock 0.4s ease-out;
}
@keyframes p1-planet-shock {
0% { transform: scale(1); filter: brightness(1); }
20% { transform: scale(1.25); filter: brightness(1.8) drop-shadow(0 0 20px rgba(56, 189, 248, 0.8)); }
40% { transform: scale(0.95); filter: brightness(1.3); }
60% { transform: scale(1.1); filter: brightness(1.5) drop-shadow(0 0 12px rgba(56, 189, 248, 0.5)); }
100% { transform: scale(1); filter: brightness(1); }
}
/* -- Stars (Night Perfect Only) -- */
.p1-bf-star, .p1-bf-moon { display: none; }
body:not(.sunny).perfect-mode .p1-bf-star,
body:not(.sunny).perfect-mode .p1-bf-moon { display: block; }
.p1-bf-star {
position: absolute;
border-radius: 50%;
background: #cbd5e1;
animation: p1-bf-twinkle var(--tw-dur, 3s) infinite alternate ease-in-out;
}
@keyframes p1-bf-twinkle {
from { opacity: 0.2; transform: scale(0.8); }
to { opacity: 0.9; transform: scale(1.2); }
}
.p1-bf-star-1 { width: 4px; height: 4px; top: 8%; left: 12%; --tw-dur: 2.5s; animation-delay: 0s; }
.p1-bf-star-2 { width: 3px; height: 3px; top: 22%; left: 65%; --tw-dur: 3.5s; animation-delay: 0.8s; }
.p1-bf-star-3 { width: 5px; height: 5px; top: 55%; left: 8%; --tw-dur: 2s; animation-delay: 1.5s; }
.p1-bf-star-4 { width: 3px; height: 3px; top: 70%; left: 50%; --tw-dur: 4s; animation-delay: 0.3s; }
.p1-bf-star-5 { width: 4px; height: 4px; top: 85%; left: 25%; --tw-dur: 3s; animation-delay: 2s; }
.p1-bf-star-6 { width: 3px; height: 3px; top: 15%; left: 40%; --tw-dur: 2.8s; animation-delay: 1s; }
.p1-bf-star-7 { width: 5px; height: 5px; top: 35%; left: 85%; --tw-dur: 3.2s; animation-delay: 0.5s; }
.p1-bf-star-8 { width: 4px; height: 4px; top: 60%; left: 30%; --tw-dur: 2.2s; animation-delay: 1.8s; }
.p1-bf-star-9 { width: 3px; height: 3px; top: 90%; left: 70%; --tw-dur: 3.8s; animation-delay: 0.2s; }
/* -- Crescent Moon (Night Perfect Only) -- */
.p1-bf-moon {
position: absolute;
top: 12px;
left: 35px;
width: 32px;
height: 32px;
border-radius: 50%;
background: #e2e8f0;
box-shadow: -8px 0 0 0 var(--bg), 0 0 20px rgba(226, 232, 240, 0.3);
opacity: 0.7;
}
/* -- Extra Clouds (4 & 5) -- */
.p1-bf-cloud-4 { width: 160px; height: 48px; top: 30%; --bf-drift: 55s; animation-delay: -25s; }
.p1-bf-cloud-5 { width: 100px; height: 34px; top: 65%; --bf-drift: 42s; animation-delay: -35s; }
/* -- Floating Sparkle Particles -- */
.p1-bf-sparkle {
position: absolute;
border-radius: 50%;
animation: p1-bf-sparkle-float var(--sp-dur, 6s) infinite ease-in-out alternate;
}
body.sunny.perfect-mode .p1-bf-sparkle {
background: radial-gradient(circle, rgba(251, 191, 36, 0.8), rgba(251, 191, 36, 0) 70%);
}
body:not(.sunny).perfect-mode .p1-bf-sparkle {
background: radial-gradient(circle, rgba(56, 189, 248, 0.8), rgba(56, 189, 248, 0) 70%);
}
@keyframes p1-bf-sparkle-float {
0% { transform: translateY(0) scale(1); opacity: 0.3; }
50% { opacity: 0.9; }
100% { transform: translateY(-30px) scale(1.4); opacity: 0.2; }
}
.p1-bf-sp-1 { width: 6px; height: 6px; top: 20%; left: 5%; --sp-dur: 5s; animation-delay: 0s; }
.p1-bf-sp-2 { width: 4px; height: 4px; top: 40%; left: 15%; --sp-dur: 7s; animation-delay: 1.2s; }
.p1-bf-sp-3 { width: 8px; height: 8px; top: 70%; left: 3%; --sp-dur: 4.5s; animation-delay: 0.5s; }
.p1-bf-sp-4 { width: 5px; height: 5px; top: 85%; left: 90%; --sp-dur: 6.5s; animation-delay: 2s; }
.p1-bf-sp-5 { width: 7px; height: 7px; top: 15%; left: 80%; --sp-dur: 5.5s; animation-delay: 3s; }
.p1-bf-sp-6 { width: 4px; height: 4px; top: 55%; left: 92%; --sp-dur: 4s; animation-delay: 0.8s; }
.p1-bf-sp-7 { width: 6px; height: 6px; top: 30%; left: 45%; --sp-dur: 8s; animation-delay: 1.5s; }
.p1-bf-sp-8 { width: 5px; height: 5px; top: 75%; left: 60%; --sp-dur: 6s; animation-delay: 2.5s; }
/* -- Floating Energy Orbs -- */
.p1-bf-orb {
position: absolute;
border-radius: 50%;
filter: blur(8px);
animation: p1-bf-orb-drift var(--orb-dur, 12s) infinite ease-in-out alternate;
}
body.sunny.perfect-mode .p1-bf-orb,
body.sunny.relaxed-mode .p1-bf-orb {
background: radial-gradient(circle, rgba(251, 191, 36, 0.25), transparent 70%);
}
body:not(.sunny).perfect-mode .p1-bf-orb,
body:not(.sunny).relaxed-mode .p1-bf-orb {
background: radial-gradient(circle, rgba(56, 189, 248, 0.2), transparent 70%);
}
@keyframes p1-bf-orb-drift {
0% { transform: translate(0, 0) scale(1); opacity: 0.4; }
33% { transform: translate(30px, -20px) scale(1.1); opacity: 0.7; }
66% { transform: translate(-20px, 15px) scale(0.9); opacity: 0.5; }
100% { transform: translate(10px, -30px) scale(1.15); opacity: 0.6; }
}
.p1-bf-orb-1 { width: 80px; height: 80px; top: 5%; left: 2%; --orb-dur: 14s; animation-delay: 0s; }
.p1-bf-orb-2 { width: 60px; height: 60px; top: 60%; right: 5%; --orb-dur: 11s; animation-delay: 3s; }
.p1-bf-orb-3 { width: 50px; height: 50px; top: 40%; left: 50%; --orb-dur: 16s; animation-delay: 5s; }
/* -- Birds (Sunny Mode) -- */
.p1-bf-bird { display: none; }
body.sunny.perfect-mode .p1-bf-bird,
body.sunny.relaxed-mode .p1-bf-bird { display: block; }
.p1-bf-bird {
position: absolute;
font-size: 16px;
opacity: 0.5;
animation: p1-bf-bird-fly var(--bird-dur, 20s) linear infinite;
}
@keyframes p1-bf-bird-fly {
0% { left: -40px; transform: translateY(0) scaleX(1); }
25% { transform: translateY(-15px) scaleX(1); }
50% { transform: translateY(8px) scaleX(1); }
75% { transform: translateY(-10px) scaleX(1); }
100% { left: calc(100% + 40px); transform: translateY(0) scaleX(1); }
}
.p1-bf-bird-1 { top: 18%; --bird-dur: 22s; animation-delay: -3s; font-size: 14px; }
.p1-bf-bird-2 { top: 42%; --bird-dur: 28s; animation-delay: -12s; font-size: 12px; opacity: 0.35; }
.p1-bf-bird-3 { top: 68%; --bird-dur: 18s; animation-delay: -7s; font-size: 16px; }
/* -- Shooting Stars (Night Perfect Only) -- */
.p1-bf-shooting { display: none; }
body:not(.sunny).perfect-mode .p1-bf-shooting { display: block; }
.p1-bf-shooting {
position: absolute;
width: 2px;
height: 2px;
background: #e2e8f0;
border-radius: 50%;
animation: p1-bf-shoot var(--shoot-dur, 4s) linear infinite;
opacity: 0;
}
.p1-bf-shooting::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(226, 232, 240, 0.8));
transform: rotate(-45deg);
transform-origin: right center;
}
@keyframes p1-bf-shoot {
0% { left: -10%; top: 10%; opacity: 0; transform: translate(0, 0); }
5% { opacity: 1; }
30% { opacity: 1; }
35% { left: 110%; top: 60%; opacity: 0; transform: translate(0, 0); }
100% { left: 110%; top: 60%; opacity: 0; }
}
.p1-bf-shoot-1 { --shoot-dur: 6s; animation-delay: 0s; }
.p1-bf-shoot-2 { --shoot-dur: 9s; animation-delay: 3s; }
.p1-bf-shoot-3 { --shoot-dur: 7s; animation-delay: 6s; }
/* -- Aurora Wave (Night Perfect Only) -- */
.p1-bf-aurora { display: none; }
body:not(.sunny).perfect-mode .p1-bf-aurora { display: block; }
.p1-bf-aurora {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 120px;
background: linear-gradient(
180deg,
transparent 0%,
rgba(56, 189, 248, 0.03) 30%,
rgba(59, 130, 246, 0.06) 60%,
rgba(139, 92, 246, 0.04) 80%,
transparent 100%
);
animation: p1-bf-aurora-shift 8s infinite alternate ease-in-out;
filter: blur(20px);
}
@keyframes p1-bf-aurora-shift {
0% { transform: translateX(-5%) scaleY(1); opacity: 0.5; }
50% { transform: translateX(5%) scaleY(1.3); opacity: 0.8; }
100% { transform: translateX(-3%) scaleY(0.9); opacity: 0.4; }
}
/* -- Mouse Tracker Glow (JS-generated) -- */
.p1-bf-mouse-glow {
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
pointer-events: none;
filter: blur(40px);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 0;
}
body.sunny.perfect-mode .p1-bf-mouse-glow {
background: radial-gradient(circle, rgba(251, 191, 36, 0.15), transparent 70%);
}
body:not(.sunny).perfect-mode .p1-bf-mouse-glow {
background: radial-gradient(circle, rgba(56, 189, 248, 0.15), transparent 70%);
}
.p1-benefits-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:900px;margin:0 auto}
.p1-bf-col{display:flex;flex-direction:column;gap:16px}
.p1-bf-label{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:700;color:var(--text);margin-bottom:8px;letter-spacing:0.02em}
.p1-bf-label svg{color:var(--sky);width:20px;height:20px}
.p1-bf-bubble{padding:24px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);display:flex;flex-direction:column;gap:8px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);position:relative;overflow:hidden}
.p1-bf-bubble::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg, var(--sky), var(--yellow));opacity:0;transition:opacity 0.3s ease}
.p1-bf-bubble:hover{border-color:var(--yellow);transform:translateY(-5px);box-shadow:0 10px 30px rgba(251,191,36,.1)}
.p1-bf-bubble:hover::before{opacity:1}
.p1-bf-ico{width:34px;height:34px;color:var(--sky);margin-bottom:6px;transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease, filter 0.3s ease}
.p1-bf-bubble:hover .p1-bf-ico{transform:scale(1.15) rotate(5deg);color:var(--orange);filter:drop-shadow(0 0 8px rgba(249, 115, 22, 0.5))}
.p1-bf-bubble strong{font-size:1.25rem;color:var(--yellow);letter-spacing:0.01em}
.p1-bf-bubble span{font-size:.9rem;color:var(--text);opacity:0.75}
.p1-bf-req .p1-bf-label svg{color:var(--orange)}
.p1-req-list{display:flex;flex-direction:column;gap:6px}
.p1-req-row{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;background:var(--card);border:1px solid var(--border);border-radius:var(--rs);font-size:.95rem;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);position:relative;overflow:hidden}
.p1-req-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange);transform:scaleY(0);transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);transform-origin:center}
.p1-req-row:hover{border-color:var(--sky);transform:translateX(4px);box-shadow:0 4px 15px rgba(0,0,0,0.05);background:linear-gradient(90deg, rgba(56, 189, 248, 0.05) 0%, transparent 100%)}
.p1-req-row:hover::before{transform:scaleY(1)}
.p1-req-key{color:var(--text);font-family:var(--mono);font-size:1rem;font-weight:600}
.p1-req-val{font-weight:800;color:var(--orange);font-size:1.05rem}
/* ── RELAX MODE ANIMATION (Skills, Timeline, Modules) ── */
.p1-relax-bg {
display: none;
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
body.relaxed-mode .p1-relax-bg { display: block; }
.p1-relax-dot {
position: absolute;
border-radius: 50%;
opacity: 0.35;
will-change: transform;
}
body.sunny .p1-relax-dot { background: var(--orange); }
body:not(.sunny) .p1-relax-dot { background: var(--sky); }
.p1-relax-orb {
position: absolute;
border-radius: 50%;
opacity: 0.12;
will-change: transform, opacity;
}
body.sunny .p1-relax-orb { background: radial-gradient(circle, var(--yellow), transparent 70%); }
body:not(.sunny) .p1-relax-orb { background: radial-gradient(circle, var(--cyan), transparent 70%); }
/* Hardcoded elements for Skills & Timeline sections */
.prd-1 { width: 12px; height: 12px; left: 10%; top: 20%; animation: p1-relax-float 12s ease-in-out infinite; }
.prd-2 { width: 18px; height: 18px; left: 80%; top: 15%; animation: p1-relax-float 16s ease-in-out -4s infinite; }
.prd-3 { width: 9px; height: 9px; left: 25%; top: 75%; animation: p1-relax-float 14s ease-in-out -2s infinite; }
.prd-4 { width: 15px; height: 15px; left: 70%; top: 80%; animation: p1-relax-float 18s ease-in-out -8s infinite; }
.prd-5 { width: 22px; height: 22px; left: 50%; top: 40%; animation: p1-relax-float 20s ease-in-out -10s infinite; }
.prd-6 { width: 14px; height: 14px; left: 90%; top: 60%; animation: p1-relax-float 15s ease-in-out -6s infinite; }
.pro-1 { width: 250px; height: 250px; left: 5%; top: 10%; animation: p1-relax-pulse 18s ease-in-out infinite; }
.pro-2 { width: 300px; height: 300px; left: 75%; top: 60%; animation: p1-relax-pulse 22s ease-in-out -5s infinite; }
.prd-7 { width: 16px; height: 16px; left: 15%; top: 30%; animation: p1-relax-float 14s ease-in-out -3s infinite; }
.prd-8 { width: 10px; height: 10px; left: 85%; top: 25%; animation: p1-relax-float 17s ease-in-out -7s infinite; }
.prd-9 { width: 20px; height: 20px; left: 35%; top: 65%; animation: p1-relax-float 19s ease-in-out -1s infinite; }
.prd-10{ width: 13px; height: 13px; left: 65%; top: 50%; animation: p1-relax-float 13s ease-in-out -9s infinite; }
.pro-3 { width: 200px; height: 200px; left: 85%; top: 15%; animation: p1-relax-pulse 20s ease-in-out -2s infinite; }
.pro-4 { width: 280px; height: 280px; left: 10%; top: 70%; animation: p1-relax-pulse 24s ease-in-out -10s infinite; }
@keyframes p1-relax-float {
0%, 100% { transform: translate(0, 0); }
33% { transform: translate(20px, -30px); }
66% { transform: translate(-15px, 20px); }
}
@keyframes p1-relax-pulse {
0%, 100% { transform: scale(1); opacity: 0.12; }
50% { transform: scale(1.1); opacity: 0.2; }
}
/* ── MODULES ── */
.p1-modules{padding:80px 0;background:var(--surface);position:relative;overflow:hidden;}
.p1-steps{display:grid;grid-template-columns:repeat(2, 1fr);gap:24px;max-width:1100px;margin:0 auto}
@media (max-width: 900px) {
.p1-steps{grid-template-columns: 1fr;}
}
.p1-step{display:flex;gap:35px;padding:32px 40px;background:var(--surface);border:1px solid var(--border);border-radius:24px;position:relative;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.04);opacity:0;transform:translateY(30px);transition:all .6s cubic-bezier(0.1,0.8,0.2,1)}
.p1-step.p1-step-in{opacity:1;transform:translateY(0)}
.p1-step.p1-step-in:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,0.12);border-color:var(--sky)}
.p1-step::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at top right, rgba(56,189,248,0.1), transparent 70%);opacity:0;transition:opacity .5s ease;pointer-events:none}
.p1-step:hover::before{opacity:1}
.p1-step-num{font-family:var(--mono);font-size:3.5rem;font-weight:800;line-height:1;min-width:90px;background:linear-gradient(135deg,var(--yellow),var(--sky));-webkit-background-clip:text;-webkit-text-fill-color:transparent;opacity:0.95;display:flex;align-items:center;justify-content:center;border-right:2px dashed var(--border);padding-right:35px;position:relative}
.p1-step-num::after{content:'';position:absolute;right:-7px;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--sky)}
.p1-step-info{flex:1;display:flex;flex-direction:column;justify-content:center}
.p1-step-info h3{font-size:1.5rem;font-weight:800;margin-bottom:10px;color:var(--text);letter-spacing:-0.5px}
.p1-step-info span{display:inline-flex;align-items:center;font-family:var(--mono);font-size:0.95rem;font-weight:800;letter-spacing:1.5px;color:var(--sky);background:rgba(56,189,248,0.1);border:1px solid rgba(56,189,248,0.25);padding:6px 14px;border-radius:30px;text-transform:uppercase;margin-bottom:12px;align-self:flex-start}
.p1-step-info p{font-size:1.15rem;color:var(--text);margin-top:0;line-height:1.6;font-weight:600;opacity:0.9}
/* ── TIMELINE ── */
.p1-timeline{padding:80px 0;background:var(--surface);position:relative;overflow:hidden}
.p1-ht-track{display:flex;gap:0;position:relative;max-width:900px;margin:0 auto;padding-top:40px}
.p1-ht-line{position:absolute;top:51px;left:5%;right:5%;height:4px;background:repeating-linear-gradient(90deg,var(--sky) 0,var(--sky) 15px,transparent 15px,transparent 30px);opacity:.4;}
.p1-ht-pulse{width:16px;height:16px;border-radius:50%;background:transparent;border:3px solid transparent;border-top-color:var(--yellow);border-right-color:var(--sky);position:absolute;top:-6px;left:0;box-shadow:0 0 15px var(--sky);animation:p1-ht-move 6s linear infinite, p1-tornado-spin 0.4s linear infinite;filter:drop-shadow(0 0 8px var(--cyan));}
@keyframes p1-ht-move{0%{left:0}100%{left:100%}}
.p1-ht-node{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:0 8px;opacity:0;transform:translateY(12px);transition:all .5s ease}
.p1-ht-node.p1-ht-in{opacity:1;transform:translateY(0)}
.p1-ht-dot{width:18px;height:18px;border-radius:50%;background:var(--card);border:4px solid var(--sky);position:relative;z-index:2;box-shadow:inset 0 0 0 2px var(--bg), 0 0 10px rgba(56,189,248,0.5);}
.p1-ht-dot-final{border-color:var(--yellow);background:var(--card);box-shadow:inset 0 0 0 2px var(--bg), 0 0 15px rgba(251,191,36,0.8);}
.p1-ht-mo{font-family:var(--mono);font-size:.75rem;color:var(--sky);letter-spacing:1px;font-weight:700}
.p1-ht-node h3{font-size:1.05rem;font-weight:800}
.p1-ht-node p{font-size:.85rem;color:var(--text);line-height:1.5;font-weight:500}
/* ══════════════════════════════════════════════════════════════
PERFECT SUNNY MODE: RADIANT RAYS & VOLTAN PARTICLES
══════════════════════════════════════════════════════════════ */
/* Radiant Sun Rays (Sunny Perfect Mode only) */
.p1-sunny-rays {
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
transform: translate(-50%, -50%);
background: repeating-conic-gradient(from 0deg, rgba(251,191,36,0.05) 0deg 10deg, transparent 10deg 20deg);
animation: p1-ray-spin 60s linear infinite;
pointer-events: none;
z-index: 0;
}
body.perfect-mode .p1-sunny-rays { display: block; }
body:not(.sunny).perfect-mode .p1-sunny-rays { display: none; }
@keyframes p1-ray-spin {
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
/* ══════════════════════════════════════════════════════════════
PHYSICS TELEMETRY HUD (Perfect Mode)
══════════════════════════════════════════════════════════════ */
.p1-physics-canvas {
display: none;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 5;
pointer-events: none; /* Let clicks pass through except on nodes */
}
body.perfect-mode .p1-physics-canvas {
display: block;
}
.p1-telemetry-node {
position: absolute;
width: 140px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(251, 191, 36, 0.4);
border-radius: 12px;
padding: 12px;
box-shadow: 0 8px 32px rgba(251, 191, 36, 0.15), inset 0 0 10px rgba(251, 191, 36, 0.1);
cursor: grab;
pointer-events: auto;
touch-action: none; /* Prevent scrolling when dragging on mobile */
user-select: none;
will-change: transform, left, top;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
}
.p1-telemetry-node:active {
cursor: grabbing;
border-color: rgba(251, 191, 36, 0.8);
box-shadow: 0 12px 40px rgba(251, 191, 36, 0.3), inset 0 0 15px rgba(251, 191, 36, 0.2);
transform: scale(1.05);
}
.p1-hud-header {
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 1px;
color: var(--orange);
text-transform: uppercase;
margin-bottom: 4px;
opacity: 0.8;
}
.p1-hud-val {
font-family: var(--mono);
font-size: 1.2rem;
font-weight: 800;
color: var(--yellow);
text-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}
.p1-hud-unit {
font-size: 0.7rem;
margin-left: 4px;
opacity: 0.7;
}
/* Night Mode Overrides for HUD */
body:not(.sunny).perfect-mode .p1-telemetry-node {
border-color: rgba(56,189,248,0.4);
box-shadow: 0 8px 32px rgba(56,189,248,0.15), inset 0 0 10px rgba(56,189,248,0.1);
}
body:not(.sunny).perfect-mode .p1-telemetry-node:active {
border-color: rgba(56,189,248,0.8);
box-shadow: 0 12px 40px rgba(56,189,248,0.3), inset 0 0 15px rgba(56,189,248,0.2);
}
body:not(.sunny).perfect-mode .p1-hud-header {
color: #0891b2;
}
body:not(.sunny).perfect-mode .p1-hud-val {
color: #38bdf8;
text-shadow: 0 0 8px rgba(56,189,248,0.4);
}
/* ══════════════════════════════════════════════════════════════
HURRICANE MODE: VOLTMETER & LIVE WIRES
══════════════════════════════════════════════════════════════ */
.p1-hurricane-bg {
display: none;
position: absolute;
inset: 0;
overflow: hidden;
z-index: 1; /* Below the main content, but above base BG */
}
body.hurricane-mode .p1-hurricane-bg {
display: block;
}
/* Background Atmosphere */
body.sunny.hurricane-mode .p1-hurricane-bg {
background: radial-gradient(circle at center, rgba(234, 88, 12, 0.15), transparent 70%);
animation: p1-solar-flare 4s ease-in-out infinite alternate;
}
body:not(.sunny).hurricane-mode .p1-hurricane-bg {
background: radial-gradient(circle at center, rgba(14, 165, 233, 0.1), transparent 70%);
animation: p1-storm-lightning 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes p1-solar-flare {
0% { opacity: 0.6; filter: brightness(1) saturate(1.2); }
100% { opacity: 1; filter: brightness(1.3) saturate(1.8); }
}
@keyframes p1-storm-lightning {
0%, 90%, 92%, 94%, 96%, 100% { background-color: transparent; }
91% { background-color: rgba(56, 189, 248, 0.15); }
93% { background-color: rgba(56, 189, 248, 0.25); }
95% { background-color: rgba(56, 189, 248, 0.1); }
}
/* Live Wire Network */
.p1-live-wires {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.p1-wire-visual {
fill: none;
stroke: rgba(255, 255, 255, 0.05);
stroke-width: 2;
transition: stroke 0.2s, stroke-width 0.2s;
/* Pulsing effect, controlled via JS adding a class */
}
.p1-wire-visual.active {
stroke: var(--yellow);
stroke-width: 4;
filter: drop-shadow(0 0 8px var(--yellow));
stroke-dasharray: 20 40;
animation: p1-wire-flow 0.5s linear infinite;
}
body:not(.sunny).hurricane-mode .p1-wire-visual.active {
stroke: var(--cyan);
filter: drop-shadow(0 0 8px var(--cyan));
}
@keyframes p1-wire-flow {
to { stroke-dashoffset: -60; }
}
.p1-wire-hitbox {
fill: none;
stroke: transparent;
stroke-width: 40; /* Very thick for easy hovering */
pointer-events: auto; /* Catch mouse events */
cursor: crosshair;
}
/* Cursor Sparks */
.p1-wire-spark {
position: absolute;
width: 4px;
height: 4px;
background: white;
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
animation: p1-spark-die 0.6s cubic-bezier(0, 0.9, 0.3, 1) forwards;
}
@keyframes p1-spark-die {
0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
100% { transform: translate(-50%, 30px) scale(0); opacity: 0; }
}
/* Voltmeter UI */
.p1-voltmeter-ui {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 1rem;
border-radius: 8px;
backdrop-filter: blur(4px);
pointer-events: none;
}
.p1-vm-left { top: 10%; left: 5%; }
.p1-vm-right { bottom: 10%; right: 5%; }
.p1-analog-meter {
position: relative;
width: 100px;
height: 50px;
margin-bottom: 8px;
}
.p1-am-bg {
width: 100%;
height: 100%;
}
.p1-meter-needle {
position: absolute;
bottom: 5px;
left: 50%;
width: 2px;
height: 40px;
background: white;
transform-origin: bottom center;
transform: translateX(-50%) rotate(-45deg);
transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 0 4px white;
}
.p1-meter-pivot {
position: absolute;
bottom: 1px;
left: 50%;
width: 10px;
height: 10px;
background: var(--yellow);
border-radius: 50%;
transform: translateX(-50%);
}
body:not(.sunny).hurricane-mode .p1-meter-pivot {
background: var(--cyan);
}
.p1-digital-readout {
font-family: var(--mono);
font-size: 1.5rem;
font-weight: 700;
color: var(--yellow);
text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
transition: color 0.1s;
}
body:not(.sunny).hurricane-mode .p1-digital-readout {
color: var(--cyan);
text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}
.p1-dr-unit {
font-size: 0.8rem;
opacity: 0.8;
margin-left: 2px;
}
.p1-vm-label {
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--muted);
margin-top: 4px;
}
/* ══════════════════════════════════════════════════════════════
PERFECT MODE: SKILLS BG (Voltage Grid) & TIMELINE BG (Storm)
══════════════════════════════════════════════════════════════ */
/* --- Timeline Section: Storm Background --- */
.p1-timeline-bg {
display: none;
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
body.perfect-mode .p1-timeline-bg { display: block; }
/* --- Timeline Section: Hurricane Background --- */
.p1-timeline-hurricane-bg {
display: none;
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
body.hurricane-mode .p1-timeline-hurricane-bg { display: block; }
/* Hurricane Storm Clouds */
.p1-timeline-hurricane-bg .p1-sbg-cloud {
position: absolute;
background: var(--surface);
border-radius: 50%;
filter: blur(40px) brightness(0.3);
opacity: 0.8;
animation: p1-hurricane-cloud 6s linear infinite;
}
.p1-hc-1 { width: 500px; height: 300px; top: -10%; left: -20%; animation-delay: 0s; animation-duration: 4s !important; }
.p1-hc-2 { width: 600px; height: 400px; bottom: -20%; right: -10%; animation-delay: -2s; filter: blur(50px) brightness(0.2) !important; }
.p1-hc-3 { width: 400px; height: 200px; top: 40%; left: 30%; animation-delay: -1s; animation-duration: 3.5s !important; opacity: 0.5; }
.p1-hc-4 { width: 700px; height: 350px; top: 10%; right: -20%; animation-delay: -3s; animation-duration: 5s !important; }
@keyframes p1-hurricane-cloud {
0% { transform: translateX(120vw); }
100% { transform: translateX(-120vw); }
}
/* Hurricane Wire Pathway */
.p1-hurricane-wire-path {
position: absolute;
top: 40%;
left: -10%;
width: 120%;
height: 200px;
transform: translateY(-50%);
pointer-events: none;
}
.p1-hwp-core {
fill: none;
stroke: var(--sky);
stroke-width: 2;
stroke-dasharray: 4 8;
opacity: 0.6;
}
.p1-hwp-glow {
fill: none;
stroke: var(--yellow);
stroke-width: 6;
filter: drop-shadow(0 0 12px var(--orange));
opacity: 0.8;
stroke-dasharray: 200 400; /* Total 600 */
animation: p1-hwp-glow-flow 1.5s linear infinite;
}
.p1-hwp-arc {
fill: none;
stroke: #fff;
stroke-width: 1.5;
filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 15px var(--sky));
stroke-dasharray: 50 800; /* Total 850 */
animation: p1-hwp-arc-flow 0.8s linear infinite reverse, p1-hwp-flicker 0.2s infinite;
}
@keyframes p1-hwp-glow-flow {
to { stroke-dashoffset: -600; }
}
@keyframes p1-hwp-arc-flow {
to { stroke-dashoffset: -850; }
}
@keyframes p1-hwp-flicker {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* Hurricane Gusts */
.p1-timeline-hurricane-bg .p1-sbg-gust {
position: absolute;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: p1-hurricane-cloud 1s linear infinite;
}
.p1-hg-1 { top: 30%; width: 300px; animation-duration: 0.8s !important; }
.p1-hg-2 { top: 70%; width: 450px; animation-duration: 1.2s !important; animation-delay: 0.4s; }
/* Hurricane Flying Debris */
.p1-timeline-hurricane-bg .p1-storm-debris {
position: absolute;
background: var(--yellow);
width: 4px;
height: 2px;
border-radius: 2px;
opacity: 0.7;
filter: drop-shadow(0 0 4px var(--orange));
animation: p1-debris-fly 2s linear infinite;
}
.p1-sd-1 { top: 15%; animation-duration: 1.1s; animation-delay: 0.1s; transform: rotate(10deg); }
.p1-sd-2 { top: 45%; animation-duration: 0.9s; animation-delay: 0.5s; transform: rotate(-5deg); width: 8px; }
.p1-sd-3 { top: 60%; animation-duration: 1.3s; animation-delay: 0.2s; transform: rotate(15deg); }
.p1-sd-4 { top: 80%; animation-duration: 0.7s; animation-delay: 0.8s; transform: rotate(-10deg); width: 6px; }
.p1-sd-5 { top: 25%; animation-duration: 1.5s; animation-delay: 0.4s; transform: rotate(5deg); }
@keyframes p1-debris-fly {
0% { left: 110vw; transform: translateX(0) rotate(0deg); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { left: -10vw; transform: translateX(-100vw) rotate(360deg); opacity: 0; }
}
/* ══════════════════════════════════════════════════════════════
WEATHER RADAR UI (Perfect Mode Timeline)
══════════════════════════════════════════════════════════════ */
.p1-weather-radar-ui {
display: none;
position: absolute;
inset: 0;
overflow: visible;
z-index: 10;
pointer-events: none;
}
body.perfect-mode .p1-weather-radar-ui {
display: block;
}
/* Radar Sweep */
.p1-radar-sweep {
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: conic-gradient(from 0deg, transparent 70%, rgba(251, 191, 36, 0.1) 95%, rgba(251, 191, 36, 0.4) 100%);
animation: p1-radar-spin 8s linear infinite;
pointer-events: none;
opacity: 0.5;
}
body:not(.sunny).perfect-mode .p1-radar-sweep {
background: conic-gradient(from 0deg, transparent 70%, rgba(56, 189, 248, 0.1) 95%, rgba(56, 189, 248, 0.4) 100%);
}
@keyframes p1-radar-spin {
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Isobars */
.p1-isobars {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0.3;
}
.p1-isobar-line {
fill: none;
stroke: var(--yellow);
stroke-width: 2;
stroke-dasharray: 10 15;
transition: transform 0.1s ease-out; /* For JS distortion */
animation: p1-isobar-pulse 4s ease-in-out infinite alternate;
}
body:not(.sunny).perfect-mode .p1-isobar-line {
stroke: var(--cyan);
}
@keyframes p1-isobar-pulse {
0% { stroke-opacity: 0.4; stroke-width: 1; }
100% { stroke-opacity: 0.8; stroke-width: 3; }
}
/* Weather Nodes inherit from .p1-telemetry-node but with some tweaks */
.p1-weather-node {
z-index: 20;
}
.p1-weather-node .p1-hud-val {
font-size: 1.5rem;
}
/* Storm clouds */
.p1-sbg-cloud {
position: absolute;
border-radius: 100px;
pointer-events: none;
opacity: 0;
animation: p1-sbg-cloud-drift linear infinite;
}
.p1-sc-1 {
width: 300px; height: 80px; top: 5%;
background: radial-gradient(ellipse, rgba(100,116,139,0.15), transparent 70%);
filter: blur(15px);
animation-duration: 25s;
}
.p1-sc-2 {
width: 400px; height: 100px; top: 15%;
background: radial-gradient(ellipse, rgba(71,85,105,0.12), transparent 70%);
filter: blur(20px);
animation-duration: 30s;
animation-delay: -10s;
}
.p1-sc-3 {
width: 250px; height: 60px; top: 25%;
background: radial-gradient(ellipse, rgba(100,116,139,0.1), transparent 70%);
filter: blur(12px);
animation-duration: 20s;
animation-delay: -15s;
}
@keyframes p1-sbg-cloud-drift {
0% { left: 110%; opacity: 0; }
5% { opacity: 0.8; }
90% { opacity: 0.6; }
100% { left: -40%; opacity: 0; }
}
/* Rain streaks */
.p1-sbg-rain {
position: absolute;
width: 1px;
background: linear-gradient(to bottom, transparent, var(--sky), transparent);
opacity: 0;
animation: p1-sbg-rain-fall linear infinite;
}
.p1-sr-1 { left: 8%; height: 40px; animation-duration: 1.5s; animation-delay: 0s; }
.p1-sr-2 { left: 18%; height: 50px; animation-duration: 1.8s; animation-delay: -0.3s; }
.p1-sr-3 { left: 32%; height: 35px; animation-duration: 1.4s; animation-delay: -0.7s; }
.p1-sr-4 { left: 45%; height: 45px; animation-duration: 1.6s; animation-delay: -1s; }
.p1-sr-5 { left: 58%; height: 30px; animation-duration: 1.3s; animation-delay: -0.5s; }
.p1-sr-6 { left: 72%; height: 55px; animation-duration: 2s; animation-delay: -1.2s; }
.p1-sr-7 { left: 85%; height: 40px; animation-duration: 1.7s; animation-delay: -0.8s; }
.p1-sr-8 { left: 92%; height: 35px; animation-duration: 1.5s; animation-delay: -0.2s; }
@keyframes p1-sbg-rain-fall {
0% { top: -10%; opacity: 0; }
10% { opacity: 0.3; }
80% { opacity: 0.2; }
100% { top: 110%; opacity: 0; }
}
/* Wind gusts */
.p1-sbg-gust {
position: absolute;
height: 1px;
background: linear-gradient(90deg, transparent, var(--sky), transparent);
opacity: 0;
animation: p1-sbg-gust-blow linear infinite;
}
.p1-sg-1 { top: 30%; width: 200px; animation-duration: 3s; }
.p1-sg-2 { top: 55%; width: 150px; animation-duration: 4s; animation-delay: -1.5s; }
.p1-sg-3 { top: 75%; width: 180px; animation-duration: 3.5s; animation-delay: -2.5s; }
@keyframes p1-sbg-gust-blow {
0% { left: -20%; opacity: 0; }
20% { opacity: 0.25; }
80% { opacity: 0.15; }
100% { left: 110%; opacity: 0; }
}
/* Lightning flash overlay */
.p1-sbg-flash {
position: absolute;
inset: 0;
background: white;
pointer-events: none;
opacity: 0;
animation: p1-sbg-lightning-flash 12s ease-out infinite;
}
@keyframes p1-sbg-lightning-flash {
0%, 100% { opacity: 0; }
45% { opacity: 0; }
45.5% { opacity: 0.04; }
46% { opacity: 0; }
46.3% { opacity: 0.06; }
47% { opacity: 0; }
}
/* Night Perfect: recolor storm bg */
body:not(.sunny).perfect-mode .p1-sbg-cloud {
background: radial-gradient(ellipse, rgba(14,165,233,0.08), transparent 70%);
}
body:not(.sunny).perfect-mode .p1-sbg-rain {
background: linear-gradient(to bottom, transparent, #38bdf8, transparent);
}
body:not(.sunny).perfect-mode .p1-sbg-gust {
background: linear-gradient(90deg, transparent, #06b6d4, transparent);
}
body:not(.sunny).perfect-mode .p1-sbg-flash {
background: rgba(56,189,248,0.15);
}
/* Sunny Perfect: warm storm tones */
body.sunny.perfect-mode .p1-sbg-rain {
background: linear-gradient(to bottom, transparent, rgba(37,99,235,0.3), transparent);
}
body.sunny.perfect-mode .p1-sbg-gust {
background: linear-gradient(90deg, transparent, rgba(37,99,235,0.2), transparent);
}
/* ══════════════════════════════════════════════════════════════
PERFECT MODE: SKILLS (Voltage) & TIMELINE (Storm Path) Decorations
══════════════════════════════════════════════════════════════ */
/* --- Voltage Decoration (Skills Section) --- */
/* --- Storm Path Decoration (Timeline Section) --- */
.p1-storm-deco {
display: none;
position: relative;
max-width: 900px;
margin: 0 auto 10px;
height: 60px;
}
body.perfect-mode .p1-storm-deco,
body.hurricane-mode .p1-storm-deco {
display: block;
}
.p1-storm-trail {
position: absolute;
width: 100%;
height: 60px;
color: var(--sky);
opacity: 0.35;
}
.p1-st-path {
stroke-dasharray: 12 8;
animation: p1-storm-dash 4s linear infinite;
}
@keyframes p1-storm-dash {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -40; }
}
.p1-st-glow {
animation: p1-storm-glow 3s ease-in-out infinite alternate;
}
@keyframes p1-storm-glow {
0% { opacity: 0.1; }
100% { opacity: 0.35; }
}
/* Wind Direction Markers */
.p1-wind-marker {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 1.2rem;
color: var(--sky);
opacity: 0;
pointer-events: none;
animation: p1-wind-blow 3s linear infinite;
}
.p1-wm-1 { left: 5%; animation-delay: 0s; }
.p1-wm-2 { left: 40%; animation-delay: -1s; }
.p1-wm-3 { left: 75%; animation-delay: -2s; }
@keyframes p1-wind-blow {
0% { opacity: 0; transform: translateY(-50%) translateX(-20px); }
20% { opacity: 0.6; }
80% { opacity: 0.4; }
100% { opacity: 0; transform: translateY(-50%) translateX(80px); }
}
/* Mini Storm Icons */
.p1-storm-icon {
position: absolute;
font-size: 1.4rem;
opacity: 0;
pointer-events: none;
animation: p1-storm-icon-float 5s ease-in-out infinite;
}
.p1-si-1 { top: 0; left: 15%; animation-delay: 0s; }
.p1-si-2 { top: 10px; left: 55%; animation-delay: -1.5s; }
.p1-si-3 { top: -5px; left: 85%; animation-delay: -3s; }
@keyframes p1-storm-icon-float {
0%, 100% { opacity: 0; transform: translateY(0) scale(0.8); }
30% { opacity: 0.7; transform: translateY(-10px) scale(1.1); }
70% { opacity: 0.5; transform: translateY(-5px) scale(1); }
}
/* Night Perfect Mode: Storm path cyan tint */
body:not(.sunny).perfect-mode .p1-storm-trail { color: #38bdf8; }
body:not(.sunny).perfect-mode .p1-wind-marker { color: #06b6d4; }
/* --- Timeline Node Hover (Perfect Mode): Storm Strike Effect --- */
body.perfect-mode .p1-ht-node,
body.hurricane-mode .p1-ht-node {
cursor: pointer;
}
body.perfect-mode .p1-ht-node:hover .p1-ht-dot,
body.hurricane-mode .p1-ht-node:hover .p1-ht-dot {
transform: scale(1.4);
box-shadow: inset 0 0 0 2px var(--bg), 0 0 25px var(--sky), 0 0 50px rgba(56,189,248,0.3);
transition: all 0.3s ease;
}
body.perfect-mode .p1-ht-node:hover h3,
body.hurricane-mode .p1-ht-node:hover h3 {
color: var(--sky);
text-shadow: 0 0 10px rgba(56,189,248,0.3);
transition: all 0.3s ease;
}
body.perfect-mode .p1-ht-final:hover .p1-ht-dot-final,
body.hurricane-mode .p1-ht-final:hover .p1-ht-dot-final {
box-shadow: inset 0 0 0 2px var(--bg), 0 0 25px var(--yellow), 0 0 50px rgba(251,191,36,0.4);
}
/* Storm strike flash on timeline node click */
.p1-ht-strike {
position: absolute;
width: 4px;
height: 60px;
top: -60px;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
z-index: 10;
opacity: 0;
}
.p1-ht-strike.p1-strike-active {
animation: p1-ht-strike-anim 0.6s ease-out forwards;
}
@keyframes p1-ht-strike-anim {
0% { opacity: 1; height: 0; top: -10px; box-shadow: 0 0 15px var(--sky), 0 0 30px var(--sky); background: var(--sky); }
30% { height: 80px; top: -80px; opacity: 1; }
60% { opacity: 0.6; box-shadow: 0 0 40px var(--sky), 0 0 80px var(--yellow); }
100% { opacity: 0; height: 100px; top: -100px; }
}
/* ── CAREER ── */
.p1-career{padding:80px 0;background:var(--bg);position:relative;overflow:hidden}
/* ── Career Atmosphere (Perfect Mode BG Animation) ── */
.p1-career-atmos {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.8s ease;
}
body.perfect-mode .p1-career-atmos { opacity: 1; }
.p1-career .p1-wrap { position: relative; z-index: 2; }
/* ═══ NIGHT PERFECT: Dark Storm Sky ═══ */
/* Night sky gradient base */
body:not(.sunny).perfect-mode .p1-career {
background: linear-gradient(180deg,
#050a18 0%,
#0a1628 20%,
#0f1d3a 50%,
#142448 80%,
#0a1628 100%
);
}
/* Storm clouds — dark, slow-drifting */
.p1-ca-cloud {
position: absolute;
border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(30, 41, 82, 0.7), rgba(15, 23, 42, 0.3) 60%, transparent 80%);
filter: blur(30px);
opacity: 0;
animation: p1-ca-cloud-drift 30s linear infinite;
}
body:not(.sunny).perfect-mode .p1-ca-cloud { opacity: 1; }
body.sunny.perfect-mode .p1-ca-cloud { display: none; }
.p1-ca-cloud-1 { width: 500px; height: 200px; top: 5%; left: -10%; animation-duration: 35s; animation-delay: 0s; }
.p1-ca-cloud-2 { width: 600px; height: 250px; top: 20%; left: -20%; animation-duration: 45s; animation-delay: -12s; opacity: 0.8; }
.p1-ca-cloud-3 { width: 450px; height: 180px; top: 55%; left: -15%; animation-duration: 40s; animation-delay: -8s; }
@keyframes p1-ca-cloud-drift {
0% { transform: translateX(-10%); }
100% { transform: translateX(120vw); }
}
/* Mist / fog layers — subtle depth */
.p1-ca-mist {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
background: linear-gradient(90deg, transparent 0%, rgba(14, 165, 233, 0.04) 30%, rgba(56, 189, 248, 0.06) 50%, rgba(14, 165, 233, 0.04) 70%, transparent 100%);
animation: p1-ca-mist-shift 20s ease-in-out infinite alternate;
}
body:not(.sunny).perfect-mode .p1-ca-mist { opacity: 1; }
body.sunny.perfect-mode .p1-ca-mist { display: none; }
.p1-ca-mist-1 { animation-duration: 18s; }
.p1-ca-mist-2 { animation-duration: 25s; animation-delay: -10s; transform: scaleX(-1); }
@keyframes p1-ca-mist-shift {
0% { transform: translateX(-5%) scaleY(1); opacity: 0.3; }
50% { opacity: 0.6; }
100% { transform: translateX(5%) scaleY(1.1); opacity: 0.3; }
}
/* Lightning bolts — atmospheric branching */
.p1-ca-bolt {
position: absolute;
height: 70%;
width: 80px;
color: rgba(147, 197, 253, 0.9);
filter: drop-shadow(0 0 8px rgba(147, 197, 253, 0.8)) drop-shadow(0 0 25px rgba(56, 189, 248, 0.5));
opacity: 0;
z-index: 1;
}
body:not(.sunny).perfect-mode .p1-ca-bolt { animation: p1-ca-bolt-strike 8s infinite; }
body.sunny.perfect-mode .p1-ca-bolt { display: none; }
.p1-ca-bolt-1 { left: 15%; top: 0; animation-delay: 0s !important; }
.p1-ca-bolt-2 { left: 65%; top: 5%; animation-delay: 3s !important; }
.p1-ca-bolt-3 { left: 85%; top: 2%; animation-delay: 5.5s !important; }
@keyframes p1-ca-bolt-strike {
0%, 100% { opacity: 0; }
/* First flash */
20% { opacity: 0; }
20.5% { opacity: 0.9; }
21% { opacity: 0.2; }
21.5% { opacity: 1; }
22.5% { opacity: 0.6; }
24% { opacity: 0; }
/* Subtle afterglow */
24.5% { opacity: 0.15; }
26% { opacity: 0; }
}
/* Flash overlay — subtle sheet lightning */
.p1-ca-flash {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 30%, rgba(147, 197, 253, 0.15), transparent 70%);
opacity: 0;
z-index: 1;
}
body:not(.sunny).perfect-mode .p1-ca-flash { animation: p1-ca-flash-pulse 8s infinite; }
body.sunny.perfect-mode .p1-ca-flash { display: none; }
@keyframes p1-ca-flash-pulse {
0%, 100% { opacity: 0; }
20.5% { opacity: 0.6; }
21% { opacity: 0.1; }
21.5% { opacity: 0.8; }
23% { opacity: 0; }
}
/* ═══ SUNNY PERFECT: Fluffy Cloud Sky ═══ */
body.sunny.perfect-mode .p1-career {
background: linear-gradient(180deg,
#87CEEB 0%,
#B0E0FF 25%,
#DBEAFE 50%,
#FEF3C7 80%,
#FDE68A 100%
);
}
/* Fluffy cloud elements */
.p1-ca-sunny-cloud {
position: absolute;
border-radius: 50%;
background: radial-gradient(ellipse at 40% 50%, rgba(255,255,255,0.95), rgba(255,255,255,0.6) 50%, transparent 75%);
filter: blur(8px);
opacity: 0;
animation: p1-ca-sunny-drift 40s linear infinite;
}
body.sunny.perfect-mode .p1-ca-sunny-cloud { opacity: 1; }
body:not(.sunny).perfect-mode .p1-ca-sunny-cloud { display: none; }
.p1-ca-sc-1 {
width: 350px; height: 140px; top: 8%;
animation-duration: 50s; animation-delay: 0s;
filter: blur(6px);
}
.p1-ca-sc-2 {
width: 500px; height: 200px; top: 22%;
animation-duration: 60s; animation-delay: -15s;
filter: blur(10px);
opacity: 0.8;
}
.p1-ca-sc-3 {
width: 280px; height: 120px; top: 50%;
animation-duration: 45s; animation-delay: -25s;
filter: blur(5px);
}
.p1-ca-sc-4 {
width: 420px; height: 170px; top: 70%;
animation-duration: 55s; animation-delay: -35s;
filter: blur(12px);
opacity: 0.6;
}
@keyframes p1-ca-sunny-drift {
0% { transform: translateX(-30%) scale(1); }
50% { transform: translateX(50vw) scale(1.08); }
100% { transform: translateX(120vw) scale(1); }
}
/* Sunny sun glow */
.p1-ca-sun-glow {
position: absolute;
top: -20%;
right: 10%;
width: 350px;
height: 350px;
border-radius: 50%;
background: radial-gradient(circle, rgba(251, 191, 36, 0.3) 0%, rgba(251, 146, 60, 0.15) 40%, transparent 70%);
filter: blur(40px);
opacity: 0;
animation: p1-ca-sun-pulse 6s ease-in-out infinite alternate;
}
body.sunny.perfect-mode .p1-ca-sun-glow { opacity: 1; }
body:not(.sunny).perfect-mode .p1-ca-sun-glow { display: none; }
@keyframes p1-ca-sun-pulse {
0% { transform: scale(1); filter: blur(40px); }
100% { transform: scale(1.15); filter: blur(50px); }
}
/* Night text adjustments for career section */
body:not(.sunny).perfect-mode .p1-career .p1-eyebrow { color: var(--sky); text-shadow: 0 0 15px rgba(56, 189, 248, 0.4); }
body:not(.sunny).perfect-mode .p1-career .p1-heading { color: #e2e8f0; }
/* Sunny text adjustments for career section */
body.sunny.perfect-mode .p1-career .p1-eyebrow { color: #92400e; }
body.sunny.perfect-mode .p1-career .p1-heading { color: #1e293b; }
body.sunny.perfect-mode .p1-career .p1-glow { color: #d97706; text-shadow: 0 0 15px rgba(217, 119, 6, 0.3); }
/* ═══ Night Decorative Elements ═══ */
/* Twinkling stars */
.p1-ca-star {
position: absolute;
width: 2px;
height: 2px;
background: white;
border-radius: 50%;
opacity: 0;
animation: p1-ca-twinkle 4s ease-in-out infinite alternate;
}
body:not(.sunny).perfect-mode .p1-ca-star { opacity: 1; }
body.sunny .p1-ca-star { display: none; }
.p1-cas-1 { top: 5%; left: 12%; animation-delay: 0s; }
.p1-cas-2 { top: 12%; left: 35%; animation-delay: 0.7s; width: 3px; height: 3px; }
.p1-cas-3 { top: 3%; left: 55%; animation-delay: 1.4s; }
.p1-cas-4 { top: 18%; left: 78%; animation-delay: 0.3s; width: 2.5px; height: 2.5px; }
.p1-cas-5 { top: 8%; left: 90%; animation-delay: 2.1s; }
.p1-cas-6 { top: 22%; left: 5%; animation-delay: 1.8s; width: 3px; height: 3px; }
.p1-cas-7 { top: 15%; left: 48%; animation-delay: 0.5s; }
.p1-cas-8 { top: 6%; left: 68%; animation-delay: 1.1s; width: 2.5px; height: 2.5px; }
@keyframes p1-ca-twinkle {
0% { opacity: 0.15; transform: scale(0.7); box-shadow: 0 0 3px rgba(255,255,255,0.3); }
50% { opacity: 0.9; transform: scale(1.3); box-shadow: 0 0 10px rgba(147, 197, 253, 0.8), 0 0 20px rgba(56, 189, 248, 0.4); }
100% { opacity: 0.2; transform: scale(0.8); box-shadow: 0 0 3px rgba(255,255,255,0.3); }
}
/* Floating electrical embers */
.p1-ca-ember {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--sky);
opacity: 0;
filter: blur(0.5px);
box-shadow: 0 0 6px var(--sky), 0 0 12px rgba(56, 189, 248, 0.3);
animation: p1-ca-ember-float 12s ease-in-out infinite;
}
body:not(.sunny).perfect-mode .p1-ca-ember { opacity: 1; }
body.sunny .p1-ca-ember { display: none; }
.p1-cae-1 { bottom: 15%; left: 8%; animation-delay: 0s; animation-duration: 10s; }
.p1-cae-2 { bottom: 25%; left: 25%; animation-delay: -3s; animation-duration: 14s; width: 4px; height: 4px; }
.p1-cae-3 { bottom: 10%; left: 45%; animation-delay: -6s; animation-duration: 11s; }
.p1-cae-4 { bottom: 30%; left: 65%; animation-delay: -2s; animation-duration: 13s; width: 2px; height: 2px; }
.p1-cae-5 { bottom: 20%; left: 80%; animation-delay: -8s; animation-duration: 15s; }
.p1-cae-6 { bottom: 35%; left: 50%; animation-delay: -5s; animation-duration: 12s; width: 3.5px; height: 3.5px; }
@keyframes p1-ca-ember-float {
0% { transform: translateY(0) translateX(0); opacity: 0; }
10% { opacity: 0.7; }
30% { transform: translateY(-60px) translateX(15px); opacity: 0.9; }
50% { transform: translateY(-120px) translateX(-10px); opacity: 0.6; }
70% { transform: translateY(-180px) translateX(20px); opacity: 0.8; }
90% { opacity: 0.3; }
100% { transform: translateY(-250px) translateX(5px); opacity: 0; }
}
/* Plasma orbs — soft, glowing, breathing */
.p1-ca-plasma {
position: absolute;
border-radius: 50%;
opacity: 0;
filter: blur(25px);
animation: p1-ca-plasma-breathe 8s ease-in-out infinite alternate;
}
body:not(.sunny).perfect-mode .p1-ca-plasma { opacity: 1; }
body.sunny .p1-ca-plasma { display: none; }
.p1-cap-1 {
width: 180px; height: 180px;
top: 10%; left: 5%;
background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 70%);
animation-delay: 0s; animation-duration: 10s;
}
.p1-cap-2 {
width: 220px; height: 220px;
top: 50%; right: 5%;
background: radial-gradient(circle, rgba(147, 197, 253, 0.12) 0%, transparent 70%);
animation-delay: -3s; animation-duration: 12s;
}
.p1-cap-3 {
width: 140px; height: 140px;
bottom: 15%; left: 40%;
background: radial-gradient(circle, rgba(251, 191, 36, 0.08) 0%, transparent 70%);
animation-delay: -6s; animation-duration: 9s;
}
@keyframes p1-ca-plasma-breathe {
0% { transform: scale(0.8); opacity: 0.3; }
50% { transform: scale(1.2); opacity: 0.7; }
100% { transform: scale(0.9); opacity: 0.4; }
}
/* Electrical grid overlay */
.p1-ca-grid {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 0;
}
body:not(.sunny).perfect-mode .p1-ca-grid { opacity: 1; }
body.sunny .p1-ca-grid { display: none; }
.p1-ca-grid line {
stroke: rgba(56, 189, 248, 0.04);
stroke-width: 1;
stroke-dasharray: 8 16;
animation: p1-ca-grid-pulse 6s ease-in-out infinite alternate;
}
.p1-ca-grid line:nth-child(2) { animation-delay: -1s; }
.p1-ca-grid line:nth-child(3) { animation-delay: -2s; }
.p1-ca-grid line:nth-child(4) { animation-delay: -0.5s; stroke-dasharray: 12 20; }
.p1-ca-grid line:nth-child(5) { animation-delay: -1.5s; stroke-dasharray: 12 20; }
.p1-ca-grid line:nth-child(6) { animation-delay: -2.5s; stroke-dasharray: 12 20; }
@keyframes p1-ca-grid-pulse {
0% { stroke-opacity: 0.3; }
50% { stroke-opacity: 0.8; }
100% { stroke-opacity: 0.3; }
}
/* Horizon glow — warm bottom edge */
.p1-ca-horizon {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30%;
background: linear-gradient(to top, rgba(30, 58, 138, 0.2) 0%, rgba(14, 165, 233, 0.05) 40%, transparent 100%);
opacity: 0;
animation: p1-ca-horizon-pulse 10s ease-in-out infinite alternate;
}
body:not(.sunny).perfect-mode .p1-ca-horizon { opacity: 1; }
body.sunny .p1-ca-horizon { display: none; }
@keyframes p1-ca-horizon-pulse {
0% { opacity: 0.4; }
100% { opacity: 0.8; }
}
/* ═══ RELAXED MODE: Career BG (GPU-Friendly) ═══ */
.p1-career-relax-atmos {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.8s ease;
}
body.relaxed-mode .p1-career-relax-atmos { opacity: 1; }
body.perfect-mode .p1-career-relax-atmos,
body.hurricane-mode .p1-career-relax-atmos { opacity: 0; display: none; }
/* Floating dots — BIG, visible ascending particles */
.p1-cr-dot {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
opacity: 0;
will-change: transform, opacity;
animation: p1-cr-dot-float 15s ease-in-out infinite;
}
/* Night dot — bright cyan */
body:not(.sunny).relaxed-mode .p1-cr-dot {
background: rgba(56, 189, 248, 0.9);
box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}
/* Sunny dot — bright amber */
body.sunny.relaxed-mode .p1-cr-dot {
background: rgba(251, 146, 60, 0.85);
box-shadow: 0 0 8px rgba(251, 146, 60, 0.5);
}
.p1-crd-1 { left: 8%; bottom: 10%; animation-delay: 0s; animation-duration: 12s; }
.p1-crd-2 { left: 20%; bottom: 15%; animation-delay: -2s; animation-duration: 16s; width: 8px; height: 8px; }
.p1-crd-3 { left: 35%; bottom: 5%; animation-delay: -5s; animation-duration: 14s; width: 12px; height: 12px; }
.p1-crd-4 { left: 50%; bottom: 20%; animation-delay: -8s; animation-duration: 18s; width: 7px; height: 7px; }
.p1-crd-5 { left: 65%; bottom: 8%; animation-delay: -3s; animation-duration: 13s; }
.p1-crd-6 { left: 78%; bottom: 12%; animation-delay: -10s; animation-duration: 17s; width: 9px; height: 9px; }
.p1-crd-7 { left: 90%; bottom: 18%; animation-delay: -6s; animation-duration: 15s; width: 12px; height: 12px; }
.p1-crd-8 { left: 45%; bottom: 25%; animation-delay: -12s; animation-duration: 20s; width: 6px; height: 6px; }
@keyframes p1-cr-dot-float {
0% { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
8% { opacity: 0.9; }
25% { transform: translateY(-80px) translateX(25px) scale(1.2); opacity: 1; }
50% { transform: translateY(-170px) translateX(-20px) scale(0.9); opacity: 0.7; }
75% { transform: translateY(-260px) translateX(30px) scale(1.3); opacity: 0.9; }
92% { opacity: 0.3; }
100% { transform: translateY(-350px) translateX(10px) scale(0.7); opacity: 0; }
}
/* Expanding rings — THICK, visible pulse */
.p1-cr-ring {
position: absolute;
border-radius: 50%;
opacity: 0;
will-change: transform, opacity;
animation: p1-cr-ring-expand 7s ease-out infinite;
}
body:not(.sunny).relaxed-mode .p1-cr-ring {
border: 2.5px solid rgba(56, 189, 248, 0.5);
}
body.sunny.relaxed-mode .p1-cr-ring {
border: 2.5px solid rgba(234, 88, 12, 0.4);
}
.p1-crr-1 { top: 25%; left: 12%; width: 50px; height: 50px; animation-delay: 0s; }
.p1-crr-2 { top: 45%; right: 15%; width: 40px; height: 40px; animation-delay: -2.5s; animation-duration: 9s; }
.p1-crr-3 { bottom: 20%; left: 50%; width: 45px; height: 45px; animation-delay: -5s; animation-duration: 8s; }
@keyframes p1-cr-ring-expand {
0% { transform: scale(0.3); opacity: 0; }
10% { opacity: 0.8; }
40% { transform: scale(2.5); opacity: 0.5; }
70% { transform: scale(4); opacity: 0.25; }
100% { transform: scale(6); opacity: 0; }
}
/* Drift orbs — LARGE, clearly visible, slow floating */
.p1-cr-orb {
position: absolute;
border-radius: 50%;
opacity: 0;
will-change: transform, opacity;
animation: p1-cr-orb-drift 18s ease-in-out infinite alternate;
}
body:not(.sunny).relaxed-mode .p1-cr-orb { opacity: 1; }
body.sunny.relaxed-mode .p1-cr-orb { opacity: 1; }
.p1-cro-1 {
width: 350px; height: 350px;
top: 0%; left: 5%;
background: radial-gradient(circle, rgba(56, 189, 248, 0.18) 0%, rgba(56, 189, 248, 0.06) 40%, transparent 70%);
animation-duration: 20s;
}
body.sunny.relaxed-mode .p1-cro-1 {
background: radial-gradient(circle, rgba(251, 191, 36, 0.2) 0%, rgba(251, 146, 60, 0.08) 40%, transparent 70%);
}
.p1-cro-2 {
width: 400px; height: 400px;
bottom: 5%; right: 3%;
background: radial-gradient(circle, rgba(147, 197, 253, 0.15) 0%, rgba(56, 189, 248, 0.05) 40%, transparent 70%);
animation-delay: -7s;
animation-duration: 22s;
}
body.sunny.relaxed-mode .p1-cro-2 {
background: radial-gradient(circle, rgba(234, 88, 12, 0.18) 0%, rgba(251, 146, 60, 0.06) 40%, transparent 70%);
}
@keyframes p1-cr-orb-drift {
0% { transform: translate(0, 0) scale(0.85); opacity: 0.5; }
33% { transform: translate(40px, -30px) scale(1.15); opacity: 0.8; }
66% { transform: translate(-30px, 25px) scale(1); opacity: 0.6; }
100% { transform: translate(20px, -15px) scale(1.1); opacity: 0.75; }
}
/* Gradient wave — TALL, visible color wash sliding across bottom */
.p1-cr-wave {
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 40%;
opacity: 0;
will-change: transform;
animation: p1-cr-wave-slide 20s linear infinite;
mask-image: linear-gradient(to bottom, transparent 0%, black 30%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%);
}
body:not(.sunny).relaxed-mode .p1-cr-wave {
opacity: 1;
background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.1), rgba(147, 197, 253, 0.15), rgba(56, 189, 248, 0.1), transparent, rgba(56, 189, 248, 0.1), rgba(147, 197, 253, 0.15), rgba(56, 189, 248, 0.1), transparent);
}
body.sunny.relaxed-mode .p1-cr-wave {
opacity: 1;
background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.12), rgba(251, 146, 60, 0.18), rgba(251, 191, 36, 0.12), transparent, rgba(251, 191, 36, 0.12), rgba(251, 146, 60, 0.18), rgba(251, 191, 36, 0.12), transparent);
}
@keyframes p1-cr-wave-slide {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ═══════════════════════════════════════════════════════════════ */
/* ═══ HURRICANE MODE: Career BG — FULL STORM ═══ */
/* ═══════════════════════════════════════════════════════════════ */
.p1-career-hurricane-atmos {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.6s ease;
overflow: hidden;
}
body.hurricane-mode .p1-career-hurricane-atmos { opacity: 1; }
body.relaxed-mode .p1-career-hurricane-atmos,
body.perfect-mode .p1-career-hurricane-atmos { opacity: 0; display: none; }
/* Section shake */
body.hurricane-mode #p1Career {
animation: p1-ch-shake 0.3s linear infinite;
}
@keyframes p1-ch-shake {
0%, 100% { transform: translate(0, 0); }
25% { transform: translate(-1px, 1px); }
50% { transform: translate(1px, -1px); }
75% { transform: translate(-1px, -1px); }
}
/* ─── NIGHT HURRICANE: Violent Electrical Storm ─── */
body:not(.sunny).hurricane-mode .p1-career {
background: linear-gradient(180deg,
#020408 0%,
#0a0f1e 15%,
#0d1530 35%,
#111b3a 55%,
#0f1832 75%,
#080e20 100%
);
}
/* SUNNY HURRICANE: Blazing Firestorm */
body.sunny.hurricane-mode .p1-career {
background: linear-gradient(180deg,
#1a0a00 0%,
#2d1200 15%,
#451a00 35%,
#5c2400 55%,
#3d1800 75%,
#1a0800 100%
);
}
/* ─── FAST STORM CLOUDS ─── */
.p1-ch-cloud {
position: absolute;
border-radius: 40%;
opacity: 0;
animation: p1-ch-cloud-race 3s linear infinite;
}
body.hurricane-mode .p1-ch-cloud { opacity: 1; }
/* Night clouds — dark blue-grey */
body:not(.sunny).hurricane-mode .p1-ch-cloud {
background: radial-gradient(ellipse at center, rgba(20, 30, 60, 0.9), rgba(10, 15, 35, 0.5) 50%, transparent 80%);
filter: blur(15px);
}
/* Sunny clouds — dark smoky orange-red */
body.sunny.hurricane-mode .p1-ch-cloud {
background: radial-gradient(ellipse at center, rgba(120, 40, 0, 0.85), rgba(80, 25, 0, 0.5) 50%, transparent 80%);
filter: blur(15px);
}
.p1-chc-1 { width: 600px; height: 180px; top: 2%; animation-duration: 2.8s; animation-delay: 0s; }
.p1-chc-2 { width: 750px; height: 220px; top: 25%; animation-duration: 3.5s; animation-delay: -1.2s; }
.p1-chc-3 { width: 550px; height: 160px; top: 55%; animation-duration: 2.2s; animation-delay: -0.6s; }
@keyframes p1-ch-cloud-race {
0% { transform: translateX(-60%); }
100% { transform: translateX(110vw); }
}
/* ─── ELEMENTAL MASCOTS ─── */
.p1-mascot-wrapper {
position: absolute;
top: 30%;
left: 20%;
width: 80px;
height: 80px;
z-index: 10;
pointer-events: none;
opacity: 0;
transition: opacity 0.5s;
animation: p1-mascot-dash 12s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
body.hurricane-mode .p1-mascot-wrapper {
opacity: 1;
}
.p1-mascot-volta, .p1-mascot-helios {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s;
animation: p1-mascot-hover 1.5s ease-in-out infinite alternate;
}
body:not(.sunny).hurricane-mode .p1-mascot-volta {
opacity: 1;
color: #38bdf8;
filter: drop-shadow(0 0 15px #38bdf8) drop-shadow(0 0 30px #38bdf8);
}
body.sunny.hurricane-mode .p1-mascot-helios {
opacity: 1;
color: #f59e0b;
filter: drop-shadow(0 0 15px #f59e0b) drop-shadow(0 0 30px #f59e0b);
}
@keyframes p1-mascot-hover {
0% { transform: translateY(-15px) rotate(15deg); }
100% { transform: translateY(15px) rotate(25deg); }
}
@keyframes p1-mascot-dash {
0% { left: 10%; top: 30%; }
20% { left: 40%; top: 50%; transform: scaleX(1) skewX(-20deg); }
25% { left: 40%; top: 50%; transform: scaleX(-1) skewX(20deg); }
50% { left: 80%; top: 20%; transform: scaleX(-1) skewX(20deg); }
55% { left: 80%; top: 20%; transform: scaleX(1) skewX(-20deg); }
80% { left: 30%; top: 10%; }
100% { left: 10%; top: 30%; }
}
/* ─── WIND STREAK OVERLAY ─── */
.p1-ch-wind {
position: absolute;
inset: 0;
opacity: 0;
animation: p1-ch-wind-pulse 1.5s ease-in-out infinite alternate;
}
body.hurricane-mode .p1-ch-wind { opacity: 1; }
/* Night wind — cold blue streaks */
body:not(.sunny).hurricane-mode .p1-ch-wind {
background: repeating-linear-gradient(
-25deg,
transparent,
transparent 8px,
rgba(56, 189, 248, 0.04) 8px,
rgba(56, 189, 248, 0.04) 9px
);
}
/* Sunny wind — hot orange streaks */
body.sunny.hurricane-mode .p1-ch-wind {
background: repeating-linear-gradient(
-25deg,
transparent,
transparent 8px,
rgba(251, 146, 60, 0.06) 8px,
rgba(251, 146, 60, 0.06) 9px
);
}
@keyframes p1-ch-wind-pulse {
0% { opacity: 0.5; transform: translateX(-2px); }
100% { opacity: 1; transform: translateX(2px); }
}
/* ─── RAPID-FIRE LIGHTNING BOLTS ─── */
.p1-ch-bolt {
position: absolute;
height: 100%;
width: 100px;
opacity: 0;
z-index: 2;
}
/* Night bolts — electric blue-white */
body:not(.sunny).hurricane-mode .p1-ch-bolt {
color: rgba(200, 220, 255, 1);
filter: drop-shadow(0 0 8px rgba(147, 197, 253, 0.9)) drop-shadow(0 0 25px rgba(56, 189, 248, 0.7));
animation: p1-ch-bolt-rapid 2.5s infinite;
}
/* Sunny bolts — blazing amber-white */
body.sunny.hurricane-mode .p1-ch-bolt {
color: rgba(255, 230, 180, 1);
filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.9)) drop-shadow(0 0 25px rgba(234, 88, 12, 0.7));
animation: p1-ch-bolt-rapid 2.5s infinite;
}
.p1-chb-1 { left: 10%; animation-delay: 0s !important; }
.p1-chb-2 { left: 55%; animation-delay: 0.8s !important; }
.p1-chb-3 { left: 82%; animation-delay: 1.6s !important; }
@keyframes p1-ch-bolt-rapid {
0%, 100% { opacity: 0; }
/* Strike 1 */
8% { opacity: 0; }
9% { opacity: 1; }
10% { opacity: 0.2; }
11% { opacity: 1; }
13% { opacity: 0; }
/* Strike 2 */
35% { opacity: 0; }
36% { opacity: 0.8; }
37% { opacity: 0.1; }
38% { opacity: 0.9; }
40% { opacity: 0; }
/* Strike 3 */
65% { opacity: 0; }
66% { opacity: 1; }
67% { opacity: 0.15; }
68% { opacity: 0.7; }
70% { opacity: 0; }
}
/* ─── FLASH OVERLAY ─── */
.p1-ch-flash {
position: absolute;
inset: 0;
opacity: 0;
z-index: 1;
}
/* Night flash — cold white-blue */
body:not(.sunny).hurricane-mode .p1-ch-flash {
background: radial-gradient(ellipse at 50% 20%, rgba(200, 220, 255, 0.25), transparent 70%);
animation: p1-ch-flash-strobe 2.5s infinite;
}
/* Sunny flash — hot amber-white */
body.sunny.hurricane-mode .p1-ch-flash {
background: radial-gradient(ellipse at 50% 20%, rgba(255, 200, 100, 0.3), transparent 70%);
animation: p1-ch-flash-strobe 2.5s infinite;
}
@keyframes p1-ch-flash-strobe {
0%, 100% { opacity: 0; }
9% { opacity: 0.8; }
10% { opacity: 0.1; }
11% { opacity: 1; }
14% { opacity: 0; }
36% { opacity: 0.6; }
37% { opacity: 0.1; }
38% { opacity: 0.7; }
41% { opacity: 0; }
66% { opacity: 0.9; }
67% { opacity: 0.1; }
68% { opacity: 0.6; }
71% { opacity: 0; }
}
/* ─── FLYING DEBRIS / EMBERS ─── */
.p1-ch-debris {
position: absolute;
border-radius: 50%;
opacity: 0;
animation: p1-ch-debris-fly 1.5s linear infinite;
}
body.hurricane-mode .p1-ch-debris { opacity: 1; }
/* Night debris — cyan sparks */
body:not(.sunny).hurricane-mode .p1-ch-debris {
background: rgba(56, 189, 248, 0.9);
box-shadow: 0 0 6px rgba(56, 189, 248, 0.7), 0 0 12px rgba(147, 197, 253, 0.4);
}
/* Sunny debris — fire embers */
body.sunny.hurricane-mode .p1-ch-debris {
background: rgba(251, 146, 60, 0.95);
box-shadow: 0 0 6px rgba(234, 88, 12, 0.7), 0 0 12px rgba(251, 191, 36, 0.4);
}
.p1-chd-1 { width: 4px; height: 4px; top: 15%; left: -5%; animation-duration: 1.2s; animation-delay: 0s; }
.p1-chd-2 { width: 6px; height: 6px; top: 30%; left: -8%; animation-duration: 1.6s; animation-delay: -0.3s; }
.p1-chd-3 { width: 3px; height: 3px; top: 45%; left: -3%; animation-duration: 1.0s; animation-delay: -0.7s; }
.p1-chd-4 { width: 5px; height: 5px; top: 60%; left: -6%; animation-duration: 1.4s; animation-delay: -0.2s; }
.p1-chd-5 { width: 3px; height: 3px; top: 75%; left: -4%; animation-duration: 1.1s; animation-delay: -0.5s; }
.p1-chd-6 { width: 7px; height: 7px; top: 25%; left: -10%; animation-duration: 1.8s; animation-delay: -0.9s; }
.p1-chd-7 { width: 4px; height: 4px; top: 50%; left: -5%; animation-duration: 1.3s; animation-delay: -1.1s; }
@keyframes p1-ch-debris-fly {
0% { transform: translateX(0) translateY(0) rotate(0deg); opacity: 0; }
10% { opacity: 1; }
50% { opacity: 0.8; }
90% { opacity: 0.5; }
100% { transform: translateX(115vw) translateY(-30px) rotate(720deg); opacity: 0; }
}
/* Foreground Parallax Debris (Massive, blurry, extreme speed) */
.p1-chd-fg {
z-index: 10;
filter: blur(8px);
animation: p1-ch-debris-fly-fg 0.7s linear infinite;
}
.p1-chd-f1 { width: 30px; height: 30px; top: 20%; left: -10%; animation-delay: 0s; }
.p1-chd-f2 { width: 45px; height: 45px; top: 60%; left: -15%; animation-delay: -0.3s; }
.p1-chd-f3 { width: 25px; height: 25px; top: 80%; left: -12%; animation-delay: -0.5s; }
@keyframes p1-ch-debris-fly-fg {
0% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); opacity: 0; }
10% { opacity: 0.9; }
90% { opacity: 0.9; }
100% { transform: translateX(120vw) translateY(50px) rotate(1080deg) scale(1.5); opacity: 0; }
}
/* ─── HURRICANE TEXT ADJUSTMENTS ─── */
body:not(.sunny).hurricane-mode .p1-career .p1-eyebrow {
color: var(--sky);
text-shadow: 0 0 20px rgba(56, 189, 248, 0.6);
}
body:not(.sunny).hurricane-mode .p1-career .p1-heading { color: #e2e8f0; }
body.sunny.hurricane-mode .p1-career .p1-eyebrow {
color: #fbbf24;
text-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
}
body.sunny.hurricane-mode .p1-career .p1-heading { color: #fef3c7; }
body.sunny.hurricane-mode .p1-career .p1-glow {
color: #f59e0b;
text-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
}
/* ─── UI GLITCH EFFECTS (Tied to Lightning) ─── */
body:not(.sunny).hurricane-mode .p1-branch-leaf {
animation: p1-ui-glitch-night 2.5s infinite;
}
body:not(.sunny).hurricane-mode .p1-branch-leaf:hover {
animation: none !important;
}
body.sunny.hurricane-mode .p1-branch-leaf {
animation: p1-ui-glitch-sunny 2.5s infinite;
}
body.sunny.hurricane-mode .p1-branch-leaf:hover {
animation: none !important;
}
body:not(.sunny).hurricane-mode .p1-cta-h2 {
animation: p1-ui-glitch-text-night 2.5s infinite;
}
body.sunny.hurricane-mode .p1-cta-h2 {
animation: p1-ui-glitch-text-sunny 2.5s infinite;
}
@keyframes p1-ui-glitch-night {
0%, 7%, 14%, 34%, 41%, 64%, 71%, 100% { border-color: rgba(56, 189, 248, 0.3); transform: translate(0,0); }
9% { border-color: #fff; box-shadow: 0 0 15px rgba(255,255,255,0.8), inset 0 0 10px rgba(56,189,248,0.5); transform: translateX(-1px); }
11% { border-color: #38bdf8; box-shadow: 0 0 30px rgba(56,189,248,1); transform: translateX(1px); }
36% { border-color: #fff; transform: translateY(1px); }
38% { border-color: #38bdf8; box-shadow: 0 0 20px rgba(56,189,248,0.8); transform: translateY(-1px); }
66% { border-color: #fff; box-shadow: 0 0 25px rgba(255,255,255,0.9), inset 0 0 15px rgba(56,189,248,0.6); transform: translateX(2px); }
68% { border-color: #38bdf8; transform: translateX(-2px); }
}
@keyframes p1-ui-glitch-sunny {
0%, 7%, 14%, 34%, 41%, 64%, 71%, 100% { border-color: rgba(251, 191, 36, 0.3); transform: translate(0,0); }
9% { border-color: #fff; box-shadow: 0 0 15px rgba(255,255,255,0.8), inset 0 0 10px rgba(251,191,36,0.5); transform: translateX(-1px); }
11% { border-color: #f59e0b; box-shadow: 0 0 30px rgba(245,158,11,1); transform: translateX(1px); }
36% { border-color: #fff; transform: translateY(1px); }
38% { border-color: #f59e0b; box-shadow: 0 0 20px rgba(245,158,11,0.8); transform: translateY(-1px); }
66% { border-color: #fff; box-shadow: 0 0 25px rgba(255,255,255,0.9), inset 0 0 15px rgba(251,191,36,0.6); transform: translateX(2px); }
68% { border-color: #f59e0b; transform: translateX(-2px); }
}
@keyframes p1-ui-glitch-text-night {
0%, 7%, 14%, 34%, 41%, 64%, 71%, 100% { text-shadow: none; transform: translate(0,0); }
9% { text-shadow: -2px 0 #38bdf8, 2px 0 #fff; transform: translateX(-2px); }
11% { text-shadow: 2px 0 #38bdf8, -2px 0 #fff; transform: translateX(2px); }
36% { text-shadow: 0 -2px #38bdf8, 0 2px #fff; transform: translateY(2px); }
66% { text-shadow: -3px 0 #38bdf8, 3px 0 #fff; transform: translateX(-3px); }
}
@keyframes p1-ui-glitch-text-sunny {
0%, 7%, 14%, 34%, 41%, 64%, 71%, 100% { text-shadow: none; transform: translate(0,0); }
9% { text-shadow: -2px 0 #f59e0b, 2px 0 #fff; transform: translateX(-2px); }
11% { text-shadow: 2px 0 #f59e0b, -2px 0 #fff; transform: translateX(2px); }
36% { text-shadow: 0 -2px #f59e0b, 0 2px #fff; transform: translateY(2px); }
66% { text-shadow: -3px 0 #f59e0b, 3px 0 #fff; transform: translateX(-3px); }
}
/* ─── HURRICANE CARD & TEXT OVERRIDES ─── */
body.sunny.hurricane-mode .p1-career .p1-eyebrow { color: #92400e; }
body.sunny.hurricane-mode .p1-career .p1-heading { color: #1e293b; }
body.sunny.hurricane-mode .p1-career .p1-glow { color: #d97706; text-shadow: 0 0 15px rgba(217, 119, 6, 0.3); }
/* Title accents */
body.sunny.hurricane-mode .p1-arm-left .p1-arm-title { color: #fbbf24; }
body.sunny.hurricane-mode .p1-arm-left .p1-arm-title::after {
background: linear-gradient(90deg, #fbbf24, transparent);
}
body.sunny.hurricane-mode .p1-arm-right .p1-arm-title { color: #f59e0b; }
body.sunny.hurricane-mode .p1-arm-right .p1-arm-title::after {
background: linear-gradient(90deg, transparent, #f59e0b);
}
/* Gallery image borders */
body.sunny.hurricane-mode .p1-cg-item {
border-color: rgba(251, 191, 36, 0.2);
}
body.sunny.hurricane-mode .p1-cg-main {
box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(251, 191, 36, 0.3);
}
body.sunny.hurricane-mode .p1-cg-overlay {
background: linear-gradient(to top, rgba(40, 15, 0, 0.9) 0%, transparent 60%);
}
/* ─── SEAMLESS TORNADO BLEED ─── */
body.hurricane-mode .p1-career,
body.hurricane-mode .p1-career-hurricane-atmos {
overflow: visible !important; /* Allow the tornado to bleed down into CTA */
z-index: 2; /* Forces the tornado overlay to paint on top of the CTA section */
}
/* Ensure background colors match so the sections feel unified in Hurricane Mode */
body:not(.sunny).hurricane-mode .p1-career,
body:not(.sunny).hurricane-mode .p1-cta {
background: #0a1628 !important;
}
body.sunny.hurricane-mode .p1-career,
body.sunny.hurricane-mode .p1-cta {
background: #f8fafc !important;
}
body.hurricane-mode .p1-cta {
border-top: none !important;
box-shadow: none !important;
padding-top: 60px !important;
}
/* ─── CTA & FOOTER HURRICANE ATMOS ─── */
.p1-cta-hurricane-atmos,
.p1-footer-hurricane-atmos {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.6s ease;
overflow: hidden;
}
body.hurricane-mode .p1-cta-hurricane-atmos,
body.hurricane-mode .p1-footer-hurricane-atmos {
opacity: 1;
}
.p1-tornado-bleed {
position: absolute;
bottom: -350px; /* Bleeds deep into the CTA section */
left: 50%;
transform: translateX(-50%);
width: 100vw;
height: 600px;
z-index: 15; /* Sits over the CTA background */
pointer-events: none;
opacity: 0;
transition: opacity 1s;
}
body.hurricane-mode .p1-tornado-bleed {
opacity: 1;
}
.p1-tornado-funnel {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 800px;
height: 600px;
background: conic-gradient(from 0deg at 50% 50%, transparent 0%, rgba(56, 189, 248, 0.2) 20%, transparent 40%, rgba(56, 189, 248, 0.15) 60%, transparent 80%);
border-radius: 50%;
filter: blur(25px);
animation: p1-tornado-spin 2.5s linear infinite;
mask-image: radial-gradient(ellipse at 50% 50%, black 10%, transparent 60%);
-webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 10%, transparent 60%);
}
body.sunny.hurricane-mode .p1-tornado-funnel {
background: conic-gradient(from 0deg at 50% 50%, transparent 0%, rgba(251, 146, 60, 0.2) 20%, transparent 40%, rgba(251, 146, 60, 0.15) 60%, transparent 80%);
}
.p1-tornado-dust {
position: absolute;
bottom: 100px;
width: 600px;
height: 150px;
background: rgba(56, 189, 248, 0.15);
border-radius: 50%;
filter: blur(40px);
animation: p1-tornado-swirl 3s ease-in-out infinite alternate;
}
body.sunny.hurricane-mode .p1-tornado-dust {
background: rgba(251, 146, 60, 0.15);
}
.t-dust1 { left: 10%; animation-delay: 0s; }
.t-dust2 { right: 10%; animation-delay: -1.5s; animation-direction: alternate-reverse; }
@keyframes p1-tornado-spin {
100% { transform: translateX(-50%) rotate(360deg) scaleY(0.5); }
0% { transform: translateX(-50%) rotate(0deg) scaleY(0.5); }
}
@keyframes p1-tornado-swirl {
0% { transform: translateX(-40px) scale(0.8); }
100% { transform: translateX(40px) scale(1.3); }
}
/* ═══ SUNNY HURRICANE: Firestorm Interaction Effects ═══ */
/* Click-summoned fire lightning bolt */
.p1-ch-click-bolt-fire {
position: absolute;
width: 120px;
z-index: 6;
pointer-events: none;
filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.9)) drop-shadow(0 0 25px rgba(234, 88, 12, 0.7));
animation: p1-ch-fire-bolt-flash 0.6s ease-out forwards;
}
@keyframes p1-ch-fire-bolt-flash {
0% { opacity: 1; filter: drop-shadow(0 0 12px rgba(255, 240, 200, 1)) drop-shadow(0 0 35px rgba(245, 158, 11, 0.9)); }
12% { opacity: 0.2; }
20% { opacity: 1; filter: drop-shadow(0 0 18px rgba(255, 240, 200, 1)) drop-shadow(0 0 45px rgba(234, 88, 12, 1)); }
45% { opacity: 0.5; }
100% { opacity: 0; filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.2)); }
}
/* Fire shockwave ring expanding from click */
.p1-ch-fire-ring {
position: absolute;
width: 0;
height: 0;
border-radius: 50%;
border: 3px solid rgba(251, 191, 36, 0.8);
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 5;
box-shadow: 0 0 15px rgba(245, 158, 11, 0.4), inset 0 0 10px rgba(234, 88, 12, 0.3);
animation: p1-ch-fire-ring-expand 0.9s ease-out forwards;
}
@keyframes p1-ch-fire-ring-expand {
0% { width: 0; height: 0; opacity: 1; border-width: 3px; }
30% { width: 150px; height: 150px; opacity: 0.8; border-width: 2.5px; }
60% { width: 300px; height: 300px; opacity: 0.4; border-width: 1.5px; }
100% { width: 500px; height: 500px; opacity: 0; border-width: 0.5px; }
}
/* Click-burst directional fire embers */
.p1-ch-fire-ember {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 240, 200, 1), rgba(251, 146, 60, 0.9));
box-shadow: 0 0 8px rgba(251, 191, 36, 0.8), 0 0 16px rgba(234, 88, 12, 0.4);
pointer-events: none;
z-index: 5;
animation: p1-ch-ember-burst 0.7s ease-out forwards;
}
@keyframes p1-ch-ember-burst {
0% { transform: translate(0, 0) scale(1); opacity: 1; }
50% { opacity: 0.8; }
100% { transform: translate(var(--ex, 80px), var(--ey, -60px)) scale(0.2); opacity: 0; }
}
/* Cursor fire trail particles */
.p1-ch-trail-ember {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, rgba(251, 191, 36, 0.9), rgba(234, 88, 12, 0.6));
box-shadow: 0 0 6px rgba(251, 146, 60, 0.7);
pointer-events: none;
z-index: 3;
animation: p1-ch-trail-fade 0.6s ease-out forwards;
}
@keyframes p1-ch-trail-fade {
0% { transform: scale(1) translateY(0); opacity: 0.9; }
50% { transform: scale(0.6) translateY(-15px); opacity: 0.5; }
100% { transform: scale(0.1) translateY(-35px); opacity: 0; }
}
/* Swirling vortex ring at cursor */
.p1-ch-vortex {
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid rgba(251, 191, 36, 0.4);
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 3;
animation: p1-ch-vortex-spin 1.2s ease-out forwards;
}
@keyframes p1-ch-vortex-spin {
0% { transform: translate(-50%, -50%) scale(0.5) rotate(0deg); opacity: 0.8; border-color: rgba(251, 191, 36, 0.6); }
50% { transform: translate(-50%, -50%) scale(2) rotate(180deg); opacity: 0.4; border-color: rgba(234, 88, 12, 0.4); }
100% { transform: translate(-50%, -50%) scale(3.5) rotate(360deg); opacity: 0; border-color: rgba(234, 88, 12, 0.1); }
}
/* Firestorm interaction toggle button */
.p1-firestorm-toggle {
display: none;
position: relative;
z-index: 10;
margin: 12px auto 0;
padding: 6px 16px;
border: 1.5px solid rgba(234, 88, 12, 0.4);
border-radius: 20px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(254, 240, 138, 0.6));
color: #ea580c;
font-family: 'Orbitron', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
align-items: center;
gap: 6px;
box-shadow: 0 4px 15px rgba(234, 88, 12, 0.15), inset 0 0 10px rgba(255, 255, 255, 0.5);
}
body.hurricane-mode .p1-firestorm-toggle {
display: inline-flex;
}
.p1-firestorm-toggle:hover {
background: linear-gradient(135deg, #ffffff, rgba(254, 240, 138, 0.8));
box-shadow: 0 6px 20px rgba(234, 88, 12, 0.25), inset 0 0 15px rgba(255, 255, 255, 0.8);
border-color: #ea580c;
transform: translateY(-1px);
}
.p1-firestorm-toggle svg {
filter: drop-shadow(0 0 4px rgba(234, 88, 12, 0.4));
transition: filter 0.3s ease;
}
.p1-firestorm-toggle.p1-ft-off {
border-color: rgba(234, 88, 12, 0.2);
color: rgba(234, 88, 12, 0.5);
background: rgba(255, 255, 255, 0.5);
box-shadow: none;
}
.p1-firestorm-toggle.p1-ft-off svg {
filter: none !important;
opacity: 0.4;
}
/* Night hurricane toggle overrides */
body:not(.sunny).hurricane-mode .p1-firestorm-toggle {
border-color: rgba(56, 189, 248, 0.4);
background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(14, 165, 233, 0.2));
color: #38bdf8;
box-shadow: 0 4px 15px rgba(56, 189, 248, 0.15), inset 0 0 10px rgba(56, 189, 248, 0.05);
}
body:not(.sunny).hurricane-mode .p1-firestorm-toggle:hover {
background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(14, 165, 233, 0.3));
box-shadow: 0 6px 20px rgba(56, 189, 248, 0.3), inset 0 0 15px rgba(56, 189, 248, 0.1);
border-color: #38bdf8;
}
body:not(.sunny).hurricane-mode .p1-firestorm-toggle svg {
filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.6));
}
body:not(.sunny).hurricane-mode .p1-firestorm-toggle.p1-ft-off {
border-color: rgba(56, 189, 248, 0.2);
color: rgba(56, 189, 248, 0.4);
background: rgba(15, 23, 42, 0.4);
}
/* Sunny hurricane cursor override */
body.sunny.hurricane-mode .p1-career { cursor: crosshair; }
body.sunny.hurricane-mode .p1-career.p1-fx-off { cursor: default; }
/* Night hurricane cursor */
body:not(.sunny).hurricane-mode .p1-career { cursor: crosshair; }
/* ═══ NIGHT HURRICANE: Wrath Interaction Effects ═══ */
/* Wrath lightning bolt — thick, aggressive blue-white */
.p1-ch-click-bolt-wrath {
position: absolute;
width: 140px;
z-index: 6;
pointer-events: none;
filter: drop-shadow(0 0 10px rgba(147, 197, 253, 0.9)) drop-shadow(0 0 30px rgba(56, 189, 248, 0.7));
animation: p1-ch-wrath-flash 0.75s ease-out forwards;
}
@keyframes p1-ch-wrath-flash {
0% { opacity: 1; filter: drop-shadow(0 0 15px rgba(220, 235, 255, 1)) drop-shadow(0 0 40px rgba(56, 189, 248, 0.9)); }
8% { opacity: 0.15; }
12% { opacity: 1; filter: drop-shadow(0 0 20px rgba(220, 235, 255, 1)) drop-shadow(0 0 50px rgba(56, 189, 248, 1)); }
20% { opacity: 0.3; }
25% { opacity: 0.9; }
40% { opacity: 0.5; }
55% { opacity: 0.2; }
60% { opacity: 0.7; }
100% { opacity: 0; }
}
/* Electric shockwave ring — cold blue */
.p1-ch-electric-ring {
position: absolute;
width: 0;
height: 0;
border-radius: 50%;
border: 3px solid rgba(56, 189, 248, 0.8);
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 5;
box-shadow: 0 0 15px rgba(147, 197, 253, 0.5), inset 0 0 10px rgba(56, 189, 248, 0.3);
animation: p1-ch-electric-ring-expand 1s ease-out forwards;
}
@keyframes p1-ch-electric-ring-expand {
0% { width: 0; height: 0; opacity: 1; border-width: 3px; }
25% { width: 160px; height: 160px; opacity: 0.85; border-width: 2.5px; }
55% { width: 350px; height: 350px; opacity: 0.35; border-width: 1.5px; }
100% { width: 550px; height: 550px; opacity: 0; border-width: 0.5px; }
}
/* Ice wire arcs — cold blue crackling */
.p1-ch-ice-wire {
z-index: 5;
pointer-events: none;
filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.7)) drop-shadow(0 0 15px rgba(147, 197, 253, 0.4));
animation: p1-ch-ice-crackle 0.7s ease-out forwards;
}
@keyframes p1-ch-ice-crackle {
0% { opacity: 0.9; filter: drop-shadow(0 0 8px rgba(200, 230, 255, 1)) drop-shadow(0 0 20px rgba(56, 189, 248, 0.8)); }
8% { opacity: 0.2; }
14% { opacity: 1; }
25% { opacity: 0.15; }
30% { opacity: 0.85; filter: drop-shadow(0 0 12px rgba(200, 230, 255, 1)) drop-shadow(0 0 28px rgba(56, 189, 248, 0.9)); }
50% { opacity: 0.3; }
60% { opacity: 0.6; }
100% { opacity: 0; }
}
/* Wrath spark burst — blue directional sparks */
.p1-ch-wrath-spark {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, rgba(220, 235, 255, 1), rgba(56, 189, 248, 0.9));
box-shadow: 0 0 6px rgba(147, 197, 253, 0.8), 0 0 14px rgba(56, 189, 248, 0.4);
pointer-events: none;
z-index: 5;
animation: p1-ch-wrath-spark-fly 0.65s ease-out forwards;
}
@keyframes p1-ch-wrath-spark-fly {
0% { transform: translate(0, 0) scale(1); opacity: 1; }
40% { opacity: 0.9; }
100% { transform: translate(var(--sx, 80px), var(--sy, -60px)) scale(0.15); opacity: 0; }
}
/* Crackling wire arc SVG overlay */
.p1-ch-wire-arc {
position: absolute;
z-index: 5;
pointer-events: none;
filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.7)) drop-shadow(0 0 12px rgba(234, 88, 12, 0.4));
animation: p1-ch-wire-crackle 0.8s ease-out forwards;
}
@keyframes p1-ch-wire-crackle {
0% { opacity: 0.9; filter: drop-shadow(0 0 6px rgba(255, 240, 200, 1)) drop-shadow(0 0 18px rgba(251, 191, 36, 0.8)); }
10% { opacity: 0.3; }
15% { opacity: 1; }
25% { opacity: 0.2; }
30% { opacity: 0.9; filter: drop-shadow(0 0 10px rgba(255, 240, 200, 1)) drop-shadow(0 0 25px rgba(234, 88, 12, 0.9)); }
45% { opacity: 0.4; }
50% { opacity: 0.8; }
65% { opacity: 0.15; }
70% { opacity: 0.6; }
100% { opacity: 0; filter: drop-shadow(0 0 2px rgba(251, 191, 36, 0.1)); }
}
/* Click-to-puff cloud burst effect */
.p1-ca-puff {
position: absolute;
width: 0;
height: 0;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 40%, transparent 70%);
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 3;
animation: p1-ca-puff-burst 1.8s ease-out forwards;
}
@keyframes p1-ca-puff-burst {
0% { width: 0; height: 0; opacity: 1; filter: blur(2px); }
30% { width: 200px; height: 180px; opacity: 0.8; filter: blur(8px); }
60% { width: 350px; height: 300px; opacity: 0.4; filter: blur(20px); }
100% { width: 500px; height: 420px; opacity: 0; filter: blur(40px); }
}
/* Sunny cloud cursor interaction styles */
body.sunny.perfect-mode .p1-ca-sunny-cloud {
cursor: pointer;
will-change: transform, filter;
}
/* Night click-to-summon lightning bolt */
.p1-ca-click-bolt {
position: absolute;
width: 120px;
z-index: 5;
pointer-events: none;
filter: drop-shadow(0 0 6px rgba(147, 197, 253, 0.9)) drop-shadow(0 0 20px rgba(56, 189, 248, 0.6));
animation: p1-ca-click-bolt-flash 0.7s ease-out forwards;
}
@keyframes p1-ca-click-bolt-flash {
0% { opacity: 1; filter: drop-shadow(0 0 10px rgba(200, 220, 255, 1)) drop-shadow(0 0 30px rgba(56, 189, 248, 0.8)); }
15% { opacity: 0.3; }
25% { opacity: 1; filter: drop-shadow(0 0 15px rgba(200, 220, 255, 1)) drop-shadow(0 0 40px rgba(56, 189, 248, 1)); }
50% { opacity: 0.6; }
100% { opacity: 0; filter: drop-shadow(0 0 2px rgba(147, 197, 253, 0.2)); }
}
/* Thunder impact glow at click point */
.p1-ca-thunder-impact {
position: absolute;
width: 0;
height: 0;
border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 4;
background: radial-gradient(circle, rgba(200, 220, 255, 0.8) 0%, rgba(56, 189, 248, 0.4) 30%, transparent 70%);
animation: p1-ca-impact-expand 1s ease-out forwards;
}
@keyframes p1-ca-impact-expand {
0% { width: 0; height: 0; opacity: 1; }
20% { width: 120px; height: 120px; opacity: 0.9; }
50% { width: 250px; height: 250px; opacity: 0.4; }
100% { width: 400px; height: 400px; opacity: 0; }
}
/* Cursor trail arc sparks */
.p1-ca-arc-spark {
position: absolute;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(147, 197, 253, 0.9), rgba(56, 189, 248, 0.6), transparent);
border-radius: 1px;
pointer-events: none;
z-index: 3;
animation: p1-ca-spark-fade 0.5s ease-out forwards;
}
@keyframes p1-ca-spark-fade {
0% { opacity: 1; transform: rotate(var(--r, 0deg)) scaleX(1); }
100% { opacity: 0; transform: rotate(var(--r, 0deg)) scaleX(0.3); }
}
/* Night cloud electrification styles */
body:not(.sunny).perfect-mode .p1-ca-cloud {
will-change: filter, box-shadow;
}
.p1-branch-tree{max-width:900px;margin:0 auto;position:relative}
.p1-branch-root{text-align:center;margin-bottom:20px;position:relative;z-index:2}
.p1-branch-badge{
display:inline-block;
padding:16px 42px;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 58, 138, 0.6));
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border:2px solid var(--yellow);
border-radius:30px;
font-weight:800;
font-size:1.15rem;
color:var(--yellow);
box-shadow: 0 8px 32px rgba(251,191,36,0.15), inset 0 0 20px rgba(251,191,36,0.05);
transition: all var(--ease);
}
.p1-branch-badge:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 12px 40px rgba(251,191,36,0.4), inset 0 0 30px rgba(251,191,36,0.15);
}
.p1-flowchart-lightning-svg {
display: block;
width: 100%;
height: 60px;
margin: -10px auto 20px;
position: relative;
z-index: 1;
overflow: visible;
}
.p1-lightning-path {
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
}
.p1-path-left {
stroke: rgba(56, 189, 248, 0.25);
}
.p1-path-right {
stroke: rgba(249, 115, 22, 0.25);
}
.p1-lightning-charge {
stroke-width: 3px;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 50 350;
filter: drop-shadow(0 0 8px var(--glow-color, var(--yellow)));
}
.p1-flowchart-lightning-svg path:nth-of-type(3) {
stroke: var(--sky);
--glow-color: var(--sky);
animation: p1-lightning-charge-flow-svg 2.5s infinite linear;
}
.p1-flowchart-lightning-svg path:nth-of-type(4) {
stroke: var(--orange);
--glow-color: var(--orange);
animation: p1-lightning-charge-flow-svg 2.5s infinite linear;
}
body.perfect-mode .p1-flowchart-lightning-svg path:nth-of-type(3),
body.perfect-mode .p1-flowchart-lightning-svg path:nth-of-type(4) {
animation-duration: 1.2s;
}
@keyframes p1-lightning-charge-flow-svg {
0% {
stroke-dashoffset: 400;
}
100% {
stroke-dashoffset: 0;
}
}
.p1-branch-arms{display:grid;grid-template-columns:1fr 1fr;gap:60px;position:relative;z-index:2}
.p1-arm-title{
font-size:1.1rem;
font-weight:800;
margin-bottom:36px;
color:var(--sky);
font-family:var(--mono);
letter-spacing:1px;
text-transform:uppercase;
display: flex;
align-items: center;
gap: 12px;
}
.p1-arm-title::after {
content: '';
flex-grow: 1;
height: 2px;
background: linear-gradient(90deg, var(--sky), transparent);
opacity: 0.3;
}
.p1-arm-right .p1-arm-title{color:var(--orange)}
.p1-arm-right .p1-arm-title::after {
background: linear-gradient(90deg, transparent, var(--orange));
order: -1;
}
.p1-branch-leaf{
display:flex;
align-items:center;
gap:16px;
padding:18px 24px;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.7), rgba(14, 165, 233, 0.08));
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border:1px solid rgba(56,189,248,0.25);
border-radius:16px;
margin-bottom:48px;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition:all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
cursor: default;
width: 100% !important;
box-sizing: border-box;
position: relative;
}
.p1-branch-leaf:last-child {
margin-bottom: 0;
}
.p1-branch-leaf::before {
content: "";
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--bg);
border: 2px solid var(--sky);
z-index: 10;
box-shadow: 0 0 6px rgba(56,189,248,0.4);
transition: all 0.3s ease;
}
.p1-arm-right .p1-branch-leaf {
border:1px solid rgba(249,115,22,0.25);
background: linear-gradient(135deg, rgba(15, 23, 42, 0.7), rgba(249, 115, 22, 0.06));
}
.p1-arm-right .p1-branch-leaf::before {
border-color: var(--orange);
box-shadow: 0 0 6px rgba(249,115,22,0.4);
}
.p1-arm-left .p1-branch-leaf:hover {
border-color:var(--sky);
background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(56, 189, 248, 0.15));
transform:translateX(6px) translateY(-2px);
box-shadow: 0 12px 30px rgba(56,189,248,0.25), inset 0 0 15px rgba(56,189,248,0.05);
}
.p1-arm-left .p1-branch-leaf:hover::before {
background: var(--sky);
box-shadow: 0 0 12px var(--sky);
transform: translateX(-50%) scale(1.2);
}
.p1-arm-right .p1-branch-leaf:hover{
border-color:var(--orange);
background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(249, 115, 22, 0.15));
transform:translateX(-6px) translateY(-2px);
box-shadow: 0 12px 30px rgba(249,115,22,0.25), inset 0 0 15px rgba(249,115,22,0.05);
}
.p1-arm-right .p1-branch-leaf:hover::before {
background: var(--orange);
box-shadow: 0 0 12px var(--orange);
transform: translateX(-50%) scale(1.2);
}
.p1-leaf-wire {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -48px;
width: 20px;
height: 48px;
pointer-events: none;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
z-index: 1;
transition: all 0.3s ease;
}
.p1-arm-left .p1-leaf-wire {
background-image: url("data:image/svg+xml;utf8,");
}
.p1-arm-right .p1-leaf-wire {
background-image: url("data:image/svg+xml;utf8,");
}
.p1-arm-left .p1-branch-leaf:hover .p1-leaf-wire {
background-image: url("data:image/svg+xml;utf8,");
filter: drop-shadow(0 0 6px var(--sky));
}
.p1-arm-right .p1-branch-leaf:hover .p1-leaf-wire {
background-image: url("data:image/svg+xml;utf8,");
filter: drop-shadow(0 0 6px var(--orange));
}
.p1-leaf-wire::before {
content: "";
position: absolute;
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
offset-path: path("M10 0 L6 16 H14 L7 32 H13 L10 48");
animation: p1-wire-charge-flow 2s infinite linear;
z-index: 5;
}
.p1-arm-left .p1-leaf-wire::before {
box-shadow: 0 0 6px #fff, 0 0 12px var(--sky);
}
.p1-arm-right .p1-leaf-wire::before {
box-shadow: 0 0 6px #fff, 0 0 12px var(--orange);
}
body.perfect-mode .p1-leaf-wire::before {
animation-duration: 1s;
}
body.relaxed-mode .p1-leaf-wire::before {
display: none !important;
animation: none !important;
}
body.relaxed-mode .p1-flowchart-lightning-svg .p1-lightning-charge {
display: none !important;
animation: none !important;
}
@keyframes p1-wire-charge-flow {
0% {
offset-distance: 0%;
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
offset-distance: 100%;
opacity: 0;
}
}
.p1-branch-leaf svg{
flex-shrink:0;
color:var(--sky);
width: 24px;
height: 24px;
filter: drop-shadow(0 0 8px rgba(56,189,248,0.4));
transition: transform var(--ease);
position: relative;
z-index: 2;
}
.p1-arm-right .p1-branch-leaf svg{
color:var(--orange);
filter: drop-shadow(0 0 8px rgba(249,115,22,0.4));
}
.p1-branch-leaf:hover svg {
transform: scale(1.15) rotate(5deg);
}
.p1-branch-leaf strong{display:block;font-size:1.05rem;font-weight:800;margin-bottom:2px;letter-spacing:0.2px;position:relative;z-index:2}
.p1-branch-leaf span{display:block;font-size:.9rem;color:var(--muted);font-weight:600;position:relative;z-index:2}
/* Career Image Gallery */
.p1-career-gallery {
display: grid;
grid-template-columns: 1fr 1.5fr 1fr;
gap: 20px;
margin-top: 120px;
align-items: center;
}
.p1-cg-item {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
aspect-ratio: 4/3;
border: 1px solid rgba(255,255,255,0.05);
}
.p1-cg-main {
aspect-ratio: 16/10;
transform: scale(1.05);
z-index: 2;
box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 0 0 1px rgba(56,189,248,0.3);
}
.p1-cg-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.p1-cg-item:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.p1-cg-main:hover {
transform: translateY(-8px) scale(1.08);
}
.p1-cg-item:hover img {
transform: scale(1.05);
}
.p1-cg-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, transparent 60%);
display: flex;
align-items: flex-end;
padding: 24px;
opacity: 0;
transition: opacity 0.4s ease;
}
.p1-cg-item:hover .p1-cg-overlay {
opacity: 1;
}
.p1-cg-overlay span {
color: #fff;
font-weight: 800;
font-size: 1.1rem;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
transform: translateY(10px);
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.p1-cg-item:hover .p1-cg-overlay span {
transform: translateY(0);
}
/* ── CTA ── */
.p1-cta{position:relative;padding:100px 0;background:var(--surface);overflow:hidden;text-align:center}
.p1-cta-glow{position:absolute;top:50%;left:50%;width:500px;height:500px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(251,191,36,.08),transparent 70%);filter:blur(60px);pointer-events:none}
/* Relaxed Mode CTA Animation */
.p1-cta-relax-bg {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.8s ease;
overflow: hidden;
}
body.relaxed-mode .p1-cta-relax-bg { opacity: 1; }
.p1-cta-blob {
position: absolute;
background: var(--sky);
opacity: 0.1;
animation: p1-cta-blob-morph 15s infinite linear;
transform-origin: center;
}
.p1-cta-blob.b1 {
width: 600px;
height: 600px;
top: -200px;
left: -200px;
background: var(--yellow);
opacity: 0.15;
animation-duration: 20s;
}
.p1-cta-blob.b2 {
width: 800px;
height: 800px;
bottom: -400px;
right: -200px;
background: var(--sky);
animation-duration: 25s;
animation-direction: reverse;
}
.p1-cta-blob.b3 {
width: 400px;
height: 400px;
top: 40%;
left: 60%;
background: var(--cyan);
opacity: 0.12;
animation-duration: 18s;
animation-delay: -5s;
}
@keyframes p1-cta-blob-morph {
0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: rotate(0deg) scale(1); }
33% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; transform: rotate(120deg) scale(1.1); }
66% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; transform: rotate(240deg) scale(0.9); }
100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: rotate(360deg) scale(1); }
}
.p1-cta-atmos { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity 0.8s ease; }
body.perfect-mode .p1-cta-atmos { opacity:1; }
.p1-cta-orb { position:absolute; border-radius:50%; filter:blur(60px); opacity:0.15; animation:p1-cta-float 15s infinite ease-in-out alternate; }
.p1-cta-orb.o1 { width:350px; height:350px; top:-100px; left:-10%; background:var(--sky); animation-duration:20s; }
.p1-cta-orb.o2 { width:450px; height:450px; bottom:-150px; right:-10%; background:var(--yellow); animation-duration:25s; animation-delay:-5s; opacity:0.12; }
.p1-cta-orb.o3 { width:250px; height:250px; top:40%; left:60%; background:var(--cyan); animation-duration:18s; animation-delay:-10s; }
@keyframes p1-cta-float {
0% { transform:translate(0, 0) scale(1); }
50% { transform:translate(80px, 40px) scale(1.15); }
100% { transform:translate(-60px, 80px) scale(0.9); }
}
/* CTA Weather Animation Layers */
.p1-cta-weather { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.8s ease; }
body.sunny .p1-cta-sunny-weather { opacity: 1; }
body:not(.sunny) .p1-cta-night-weather { opacity: 1; }
/* Sunny Weather - Intense Sunbeams & Flare */
.p1-cta-sunflare {
position: absolute;
top: -200px;
left: 50%;
transform: translateX(-50%);
width: 800px;
height: 400px;
background: radial-gradient(ellipse, rgba(251, 191, 36, 0.8), rgba(245, 158, 11, 0.3) 40%, transparent 70%);
filter: blur(50px);
animation: p1-cta-flare-pulse 4s infinite alternate ease-in-out;
}
@keyframes p1-cta-flare-pulse {
0% { opacity: 0.6; transform: translateX(-50%) scale(1); }
100% { opacity: 1; transform: translateX(-50%) scale(1.2); }
}
.p1-cta-sunbeam {
position: absolute;
top: -20%;
height: 180%;
background: linear-gradient(180deg, rgba(254, 240, 138, 0.6), rgba(251, 146, 60, 0.1), transparent);
filter: blur(40px);
transform-origin: top center;
}
.p1-cta-sunbeam.s1 { left: 0%; width: 300px; animation: p1-cta-beam-s1 12s infinite ease-in-out alternate; }
.p1-cta-sunbeam.s2 { left: 25%; width: 400px; animation: p1-cta-beam-s2 15s infinite ease-in-out alternate -3s; }
.p1-cta-sunbeam.s3 { left: 50%; width: 500px; animation: p1-cta-beam-s3 18s infinite ease-in-out alternate -7s; }
.p1-cta-sunbeam.s4 { left: 75%; width: 350px; animation: p1-cta-beam-s2 14s infinite ease-in-out alternate -2s; }
.p1-cta-sunbeam.s5 { left: 100%; width: 250px; animation: p1-cta-beam-s1 16s infinite ease-in-out alternate -9s; }
@keyframes p1-cta-beam-s1 { 0% { transform: rotate(-20deg); opacity: 0.3; } 100% { transform: rotate(-10deg); opacity: 0.8; } }
@keyframes p1-cta-beam-s2 { 0% { transform: rotate(0deg); opacity: 0.4; } 100% { transform: rotate(10deg); opacity: 0.9; } }
@keyframes p1-cta-beam-s3 { 0% { transform: rotate(15deg); opacity: 0.2; } 100% { transform: rotate(25deg); opacity: 0.7; } }
/* Glowing Dust Motes */
.p1-cta-dust {
position: absolute;
width: 15px;
height: 15px;
background: rgba(254, 240, 138, 0.8);
border-radius: 50%;
box-shadow: 0 0 20px 5px rgba(251, 191, 36, 0.6);
filter: blur(2px);
animation: p1-cta-dust-float 8s infinite alternate ease-in-out;
}
.p1-cta-dust.d1 { top: 20%; left: 15%; animation-duration: 7s; }
.p1-cta-dust.d2 { top: 60%; left: 30%; animation-duration: 9s; animation-delay: -2s; width: 25px; height: 25px; }
.p1-cta-dust.d3 { top: 30%; left: 70%; animation-duration: 11s; animation-delay: -5s; width: 10px; height: 10px; }
.p1-cta-dust.d4 { top: 75%; left: 80%; animation-duration: 8s; animation-delay: -3s; }
.p1-cta-dust.d5 { top: 40%; left: 50%; animation-duration: 10s; animation-delay: -7s; width: 30px; height: 30px; }
.p1-cta-dust.d6 { top: 80%; left: 10%; animation-duration: 12s; animation-delay: -1s; }
@keyframes p1-cta-dust-float {
0% { transform: translate(0, 0) scale(0.8); opacity: 0.3; }
50% { transform: translate(30px, -40px) scale(1.2); opacity: 0.8; }
100% { transform: translate(-20px, -80px) scale(0.9); opacity: 0.1; }
}
/* Night Weather - Nebula & Stars */
.p1-cta-nebula {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 20% 80%, rgba(56, 189, 248, 0.25), transparent 60%),
radial-gradient(ellipse at 80% 20%, rgba(139, 92, 246, 0.25), transparent 60%);
filter: blur(60px);
animation: p1-cta-nebula-pulse 8s infinite alternate ease-in-out;
}
@keyframes p1-cta-nebula-pulse {
0% { opacity: 0.6; transform: scale(1); }
100% { opacity: 1; transform: scale(1.1); }
}
.p1-cta-star {
position: absolute;
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.5), 0 0 15px 4px rgba(56, 189, 248, 0.4);
animation: p1-cta-twinkle 3s infinite alternate ease-in-out;
}
@keyframes p1-cta-twinkle {
0% { opacity: 0.3; transform: scale(0.6); }
100% { opacity: 0.9; transform: scale(1.2); box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.7), 0 0 20px 6px rgba(56, 189, 248, 0.5); }
}
/* Shooting Stars */
.p1-cta-shooting-star {
position: absolute;
width: 150px;
height: 2px;
background: linear-gradient(90deg, rgba(255,255,255,1), transparent);
border-radius: 50%;
box-shadow: 0 0 10px rgba(255,255,255,0.8), 0 0 20px rgba(56,189,248,0.6);
transform: rotate(-45deg);
opacity: 0;
animation: p1-cta-shoot 10s infinite linear;
}
@keyframes p1-cta-shoot {
0% { transform: rotate(-45deg) translateX(0); opacity: 0; }
5% { opacity: 1; }
10% { transform: rotate(-45deg) translateX(-800px); opacity: 0; }
100% { transform: rotate(-45deg) translateX(-800px); opacity: 0; }
}
/* CTA Mascots */
.p1-cta-mascot {
position: absolute;
top: -65px;
left: -80px;
pointer-events: none;
opacity: 0;
transition: opacity 0.5s ease;
animation: p1-mascot-float 3s infinite alternate ease-in-out;
z-index: 10;
}
@keyframes p1-mascot-float {
0% { transform: translateY(0) rotate(-5deg); }
100% { transform: translateY(-12px) rotate(5deg); }
}
body.sunny.perfect-mode .p1-mascot-sunny { opacity: 1; }
body:not(.sunny).perfect-mode .p1-mascot-night { opacity: 1; }
.p1-cta-inner{position:relative;z-index:1}
.p1-cta-h2{font-size:clamp(1.6rem,4vw,2.6rem);font-weight:800;margin-bottom:32px;line-height:1.3}
.p1-cta-btns{margin-bottom:40px}
.p1-cta-contacts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
.p1-wa{display:flex;align-items:center;gap:10px;padding:10px 20px;background:var(--card);border:1px solid var(--border);border-radius:var(--rs);text-decoration:none;color:var(--text);transition:all var(--ease);position:relative}
.p1-wa:hover{border-color:#22c55e;transform:translateY(-2px);box-shadow:0 4px 12px rgba(34,197,94,.15)}
.p1-wa.p1-wa-priority { border: 1.5px solid var(--sky); transform: scale(1.05); }
.p1-wa.p1-wa-priority:hover { transform: scale(1.05) translateY(-2px); border-color: var(--sky); box-shadow: 0 4px 15px rgba(37, 99, 235, 0.2); }
.p1-wa .p1-wa-badge { position: absolute; top: -8px; right: -8px; background: var(--sky); color: #fff; font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 700; padding: 2px 6px; border-radius: 8px; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.p1-wa strong{display:block;font-size:1rem;font-weight:700}
.p1-wa span{font-size:.85rem;color:var(--muted);font-family:var(--mono)}
.p1-cta-meta{display:flex;gap:24px;justify-content:center;font-size:.75rem;color:var(--muted);flex-wrap:wrap}
.p1-cta-meta span{display:flex;align-items:center;gap:6px}
/* ── FOOTER ── */
.p1-footer{position:relative;padding:48px 0 0;background:var(--bg);border-top:1px solid var(--border)}
.p1-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px}
.p1-footer-brand{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.p1-footer-brand img{width:90px;height:90px;transition:all var(--ease)}
body:not(.sunny) .p1-footer-brand img { filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(255,255,255,0.8)); }
body.sunny .p1-footer-brand img { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15)); }
.p1-footer-col p{font-size:.8rem;color:var(--muted);line-height:1.6;margin-bottom:12px}
.p1-footer-col h4{font-size:.7rem;font-family:var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--sky);margin-bottom:12px}
.p1-footer-col a{display:block;font-size:.8rem;color:var(--muted);text-decoration:none;margin-bottom:6px;transition:color var(--ease)}
.p1-footer-col a:hover{color:var(--text)}
.p1-footer-social{display:flex;gap:10px}
.p1-footer-social img{width:22px;height:22px;opacity:.5;transition:opacity var(--ease)}
.p1-footer-social a:hover img{opacity:1}
.p1-footer-bar{padding:16px 24px;text-align:center;border-top:1px solid var(--border);font-size:.7rem;color:var(--muted)}
/* Sunny Mode Footer Overrides */
body.sunny .p1-footer-brand strong { color: #1e293b; }
body.sunny .p1-footer-col h4 { color: #ea580c; }
body.sunny .p1-footer-col a { color: #475569; }
body.sunny .p1-footer-col a:hover { color: #ea580c; }
body.sunny .p1-footer-col p { color: #475569; }
body.sunny .p1-footer-bar { color: #475569; }
/* ── SUNNY MODE ── */
.sunny{--bg:#f8fafc;--surface:#fff;--card:#f1f5f9;--text:#0f172a;--muted:#475569;--border:rgba(59,130,246,.15);--yellow:#d97706;--sky:#2563eb;--orange:#ea580c;--cyan:#0891b2;--cloud-color-start:rgba(254, 240, 138, 0.9);--cloud-color-end:rgba(251, 146, 60, 0.1)}
.sunny .p1-nav{background:rgba(255,255,255,.9)}
.sunny .p1-dock{background:rgba(255,255,255,.92);border-color:rgba(37,99,235,.25);box-shadow:0 8px 40px rgba(37,99,235,.12)}
.sunny .p1-dock-divider{background:rgba(37,99,235,.2)}
.sunny .p1-dock-btn{color:#475569}
.sunny .p1-dock-btn:hover{color:#0f172a;background:rgba(37,99,235,.08)}
.sunny .p1-dock-active{background:#2563eb!important;color:#fff!important;box-shadow:0 4px 16px rgba(37,99,235,.3)}
.sunny .p1-dock-toggles .p1-pill-toggle{color:#64748b}
.sunny .p1-dock-toggles .p1-pill-toggle:hover{color:#0f172a;background:rgba(37,99,235,.08)}
.sunny .p1-dock-toggles .p1-pill-active{background:rgba(37,99,235,.15)!important;color:#2563eb!important}
.sunny .p1-boot{background:#f8fafc}
.sunny .p1-boot-line{color:#2563eb}.sunny .p1-boot-final{color:#d97706}
.sunny .p1-atmos-orb{opacity:.08}
.sunny .p1-drop{background:linear-gradient(180deg,transparent,rgba(37,99,235,.25))}
/* Sunny Mode styling for Overview elements (glass light theme) */
body.sunny .p1-station-card { background: rgba(255, 255, 255, 0.75); border-color: rgba(37, 99, 235, 0.15); box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
body.sunny .p1-station-card:hover { background: rgba(255, 255, 255, 0.95); box-shadow: 0 10px 30px rgba(37, 99, 235, 0.1); border-color: var(--sky); }
body.sunny .p1-station-card::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent); }
body.sunny .p1-badge-card .p1-station-icon { color: var(--yellow); }
body.sunny .p1-badge-card .p1-station-icon svg { filter: drop-shadow(0 0 8px rgba(217, 119, 6, 0.3)); }
body.sunny .p1-station-val { color: #0f172a; font-weight: 800; }
body.sunny .p1-station-label { color: #475569; font-weight: 800; }
/* Sunny Mode styling for Career Branches (Sunset gradient) */
body.sunny .p1-branch-badge {
background: linear-gradient(135deg, rgba(254, 240, 138, 0.7), rgba(251, 146, 60, 0.5));
border-color: var(--orange);
color: #ea580c;
box-shadow: 0 8px 32px rgba(234, 88, 12, 0.15), inset 0 0 20px rgba(254, 240, 138, 0.6);
}
body.sunny .p1-branch-badge:hover {
box-shadow: 0 12px 40px rgba(234, 88, 12, 0.3), inset 0 0 30px rgba(254, 240, 138, 0.9);
}
body.sunny .p1-branch-leaf {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(224, 242, 254, 0.5));
border-color: rgba(56, 189, 248, 0.4);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
body.sunny .p1-arm-right .p1-branch-leaf {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 237, 213, 0.5));
border-color: rgba(249, 115, 22, 0.4);
}
body.sunny .p1-branch-leaf::before {
background: #fff;
border-color: #0284c7;
}
body.sunny .p1-arm-right .p1-branch-leaf::before {
border-color: #ea580c;
}
body.sunny .p1-branch-leaf:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(186, 230, 253, 0.8));
border-color: #0284c7;
box-shadow: 0 8px 30px rgba(14, 165, 233, 0.2);
}
body.sunny .p1-arm-right .p1-branch-leaf:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(254, 215, 170, 0.8));
border-color: #ea580c;
box-shadow: 0 8px 30px rgba(234, 88, 12, 0.2);
}
body.sunny .p1-branch-leaf:hover::before {
background: #0284c7;
}
body.sunny .p1-arm-right .p1-branch-leaf:hover::before {
background: #ea580c;
}
body.sunny .p1-arm-left .p1-leaf-wire {
background-image: url("data:image/svg+xml;utf8,");
}
body.sunny .p1-arm-right .p1-leaf-wire {
background-image: url("data:image/svg+xml;utf8,");
}
body.sunny .p1-branch-leaf:hover .p1-leaf-wire {
filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.4));
}
body.sunny .p1-arm-right .p1-branch-leaf:hover .p1-leaf-wire {
filter: drop-shadow(0 0 4px rgba(234, 88, 12, 0.4));
}
body.sunny .p1-path-left {
stroke: rgba(14, 165, 233, 0.4);
}
body.sunny .p1-path-right {
stroke: rgba(234, 88, 12, 0.4);
}
body.sunny .p1-cyber-box { background: rgba(255, 255, 255, 0.6); border-color: rgba(37, 99, 235, 0.15); box-shadow: 0 10px 30px rgba(0,0,0,0.02); }
/* Perfect mode glowing for new elements */
.perfect-mode .p1-cyber-box {
border-color: rgba(56, 189, 248, 0.3);
box-shadow: inset 0 0 60px rgba(56, 189, 248, 0.08), 0 0 20px rgba(56, 189, 248, 0.1);
animation: p1-perfect-box-pulse 4s infinite alternate ease-in-out;
}
.perfect-mode .p1-cyber-corner {
border-color: var(--sky);
box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}
.perfect-mode .p1-cyber-box:hover .p1-cyber-corner {
box-shadow: 0 0 25px rgba(56, 189, 248, 0.8), inset 0 0 10px rgba(56, 189, 248, 0.5);
transform: scale(1.1);
}
.perfect-mode .p1-cyber-line {
box-shadow: 0 0 8px var(--sky);
}
.perfect-mode .p1-station-card {
box-shadow: inset 0 0 15px rgba(56, 189, 248, 0.05);
}
.perfect-mode .p1-station-card:hover {
box-shadow: 0 10px 40px rgba(56, 189, 248, 0.25), inset 0 0 25px rgba(56, 189, 248, 0.1);
}
.perfect-mode .p1-badge-card .p1-station-icon svg circle[stroke-dasharray] {
animation: p1-spin-slow 8s linear infinite;
transform-origin: center;
}
.perfect-mode .p1-badge-card .p1-station-icon svg path[stroke-dasharray] {
animation: p1-spin-slow-reverse 10s linear infinite;
transform-origin: center;
}
@keyframes p1-perfect-box-pulse {
0% { box-shadow: inset 0 0 40px rgba(56, 189, 248, 0.05), 0 0 10px rgba(56, 189, 248, 0.05); border-color: rgba(56, 189, 248, 0.2); }
100% { box-shadow: inset 0 0 80px rgba(56, 189, 248, 0.12), 0 0 30px rgba(56, 189, 248, 0.15); border-color: rgba(56, 189, 248, 0.5); }
}
@keyframes p1-spin-slow { 100% { transform: rotate(360deg); } }
@keyframes p1-spin-slow-reverse { 100% { transform: rotate(-360deg); } }
body.sunny .p1-cyber-box p { color: #0f172a; font-weight: 600; text-shadow: none; }
body.sunny .p1-cyber-line { background: rgba(37, 99, 235, 0.4); opacity: 1; }
body.sunny .p1-cyber-corner { border-color: rgba(37, 99, 235, 0.5); opacity: 0.8; }
body.sunny .p1-cyber-box:hover .p1-cyber-corner { border-color: var(--sky); box-shadow: 0 0 10px rgba(37, 99, 235, 0.3); }
/* Enforce Warm Aura in Sunny Mode */
body.sunny .p1-hero-img {
box-shadow: 0 16px 40px rgba(0,0,0,0.2), 0 0 50px rgba(251, 191, 36, 0.4);
}
body.sunny .p1-mega-ring-1 {
border-color: rgba(251, 191, 36, 0.5);
}
body.sunny .p1-mega-ring-2 {
border-color: rgba(249, 115, 22, 0.5);
}
body.sunny .p1-cloud-svg ellipse {
fill: rgba(253, 224, 71, 0.4) !important;
filter: blur(25px);
}
/* ── PERFORMANCE MODES ── */
/* Relaxed Mode: Dimmed, slow, soft */
.relaxed-mode .p1-atmos-orb { opacity: 0.05; filter: blur(100px); }
.relaxed-mode .p1-cloud-svg { opacity: 0.15; }
.relaxed-mode .p1-hero-img { filter: saturate(0.6) brightness(0.8); box-shadow: none; border-color: rgba(255,255,255,0.02); }
.relaxed-mode .p1-station-card, .relaxed-mode .p1-bf-bubble { border-color: transparent; background: rgba(22, 34, 64, 0.4); box-shadow: none; }
.relaxed-mode .p1-station-card:hover, .relaxed-mode .p1-bf-bubble:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.05); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.relaxed-mode .p1-bf-bubble::before { background: linear-gradient(90deg, rgba(56,189,248,0.3), rgba(251,191,36,0.3)); }
.relaxed-mode .p1-req-row { border-color: transparent; background: rgba(22, 34, 64, 0.4); }
.relaxed-mode .p1-req-row:hover { transform: translateX(2px); border-color: rgba(255,255,255,0.05); box-shadow: 0 2px 8px rgba(0,0,0,0.15); background: rgba(22, 34, 64, 0.55); }
.relaxed-mode .p1-req-row::before { background: rgba(255,255,255,0.15); }
.relaxed-mode .p1-glow { text-shadow: none; }
.relaxed-mode .p1-btn-solid { box-shadow: none; background: rgba(251, 191, 36, 0.8); }
.relaxed-mode .p1-btn-solid:hover { background: rgba(251, 191, 36, 0.9); transform: translateY(-1px); box-shadow: none; }
/* Sunny Relaxed Mode UI Overrides (Warm, light frosted glass) */
body.sunny.relaxed-mode .p1-station-card,
body.sunny.relaxed-mode .p1-bf-bubble {
background: rgba(255, 255, 255, 0.6);
border-color: rgba(251, 191, 36, 0.15);
}
body.sunny.relaxed-mode .p1-station-card:hover,
body.sunny.relaxed-mode .p1-bf-bubble:hover {
border-color: rgba(251, 191, 36, 0.3);
box-shadow: 0 4px 15px rgba(251, 191, 36, 0.1);
background: rgba(255, 255, 255, 0.8);
}
body.sunny.relaxed-mode .p1-req-row {
background: rgba(255, 255, 255, 0.5);
border-color: rgba(251, 191, 36, 0.1);
}
body.sunny.relaxed-mode .p1-req-row:hover {
background: rgba(255, 255, 255, 0.75);
border-color: rgba(251, 191, 36, 0.25);
box-shadow: 0 2px 8px rgba(251, 191, 36, 0.08);
}
body.sunny.relaxed-mode .p1-req-row::before {
background: rgba(251, 191, 36, 0.3);
}
/* Perfect Mode: Balanced, elegant, glowing accents (Default) */
.perfect-mode .p1-hero-h1 { text-shadow: 0 0 25px rgba(56, 189, 248, 0.2); }
.perfect-mode .p1-btn-solid { box-shadow: 0 0 20px rgba(251, 191, 36, 0.2); }
.perfect-mode .p1-station-card:hover { box-shadow: 0 0 30px rgba(56, 189, 248, 0.15); border-color: rgba(56, 189, 248, 0.6); }
/* Perfect Mode — Benefits smoother boxes + lightning shimmer */
@keyframes p1-elec-shimmer {
0%, 100% { box-shadow: 0 2px 12px rgba(56, 189, 248, 0.04); border-color: var(--border); }
15% { box-shadow: 0 0 18px rgba(56, 189, 248, 0.12), 0 0 4px rgba(251, 191, 36, 0.08); border-color: rgba(56, 189, 248, 0.35); }
17% { box-shadow: 0 2px 12px rgba(56, 189, 248, 0.04); border-color: var(--border); }
60% { box-shadow: 0 2px 12px rgba(56, 189, 248, 0.04); border-color: var(--border); }
62% { box-shadow: 0 0 22px rgba(251, 191, 36, 0.15), 0 0 6px rgba(56, 189, 248, 0.1); border-color: rgba(251, 191, 36, 0.3); }
65% { box-shadow: 0 2px 12px rgba(56, 189, 248, 0.04); border-color: var(--border); }
}
@keyframes p1-elec-shimmer-row {
0%, 100% { box-shadow: 0 1px 6px rgba(0,0,0,0.03); border-color: var(--border); }
20% { box-shadow: 0 0 12px rgba(56, 189, 248, 0.1); border-color: rgba(56, 189, 248, 0.25); }
23% { box-shadow: 0 1px 6px rgba(0,0,0,0.03); border-color: var(--border); }
70% { box-shadow: 0 1px 6px rgba(0,0,0,0.03); border-color: var(--border); }
72% { box-shadow: 0 0 14px rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.2); }
75% { box-shadow: 0 1px 6px rgba(0,0,0,0.03); border-color: var(--border); }
}
.perfect-mode .p1-bf-bubble {
border-radius: 16px;
box-shadow: 0 2px 12px rgba(56, 189, 248, 0.04);
animation: p1-elec-shimmer 6s infinite ease-in-out;
}
.perfect-mode .p1-bf-bubble:nth-child(2) { animation-delay: 2s; }
.perfect-mode .p1-bf-bubble:nth-child(3) { animation-delay: 4s; }
.perfect-mode .p1-bf-bubble:hover {
box-shadow: 0 0 30px rgba(251, 191, 36, 0.15);
border-color: rgba(251, 191, 36, 0.6);
animation: none;
}
.perfect-mode .p1-bf-bubble::before { background: linear-gradient(90deg, var(--sky), var(--yellow), var(--sky)); }
.perfect-mode .p1-req-row {
border-radius: 12px;
animation: p1-elec-shimmer-row 8s infinite ease-in-out;
}
.perfect-mode .p1-req-row:nth-child(1) { animation-delay: 0s; }
.perfect-mode .p1-req-row:nth-child(2) { animation-delay: 1.5s; }
.perfect-mode .p1-req-row:nth-child(3) { animation-delay: 3s; }
.perfect-mode .p1-req-row:nth-child(4) { animation-delay: 4.5s; }
.perfect-mode .p1-req-row:nth-child(5) { animation-delay: 6s; }
.perfect-mode .p1-req-row:hover {
border-color: rgba(56, 189, 248, 0.4);
box-shadow: 0 0 20px rgba(56, 189, 248, 0.08);
background: linear-gradient(90deg, rgba(56, 189, 248, 0.06) 0%, transparent 100%);
animation: none;
}
.perfect-mode .p1-req-row::before { background: linear-gradient(to bottom, var(--sky), var(--yellow)); }
.perfect-mode .p1-hero-img:hover { box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(56, 189, 248, 0.2); }
.perfect-mode .p1-station-icon { filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.4)); }
/* Hurricane Mode: Aggressive, fast, high-contrast, intense glows */
@keyframes p1-shake {
0% { transform: translate(0.5px, 0.5px) rotate(0deg); }
10% { transform: translate(-0.5px, -1px) rotate(-0.5deg); }
20% { transform: translate(-1.5px, 0px) rotate(0.5deg); }
30% { transform: translate(1.5px, 1px) rotate(0deg); }
40% { transform: translate(0.5px, -0.5px) rotate(0.5deg); }
50% { transform: translate(-0.5px, 1px) rotate(-0.5deg); }
60% { transform: translate(-1.5px, 0.5px) rotate(0deg); }
70% { transform: translate(1.5px, 0.5px) rotate(-0.5deg); }
80% { transform: translate(-0.5px, -0.5px) rotate(0.5deg); }
90% { transform: translate(0.5px, 1px) rotate(0deg); }
100% { transform: translate(0.5px, -1px) rotate(-0.5deg); }
}
/* Removed red blinking orbs and image borders per user request */
/* .hurricane-mode .p1-atmos-orb { opacity: 0.5; filter: blur(40px); animation: p1-pulse 0.4s infinite alternate; background: var(--orange); } */
.hurricane-mode .p1-hero-h1 { text-shadow: 0 0 40px rgba(251, 191, 36, 0.8), 0 0 15px rgba(251, 191, 36, 0.5); color: #fff; }
.hurricane-mode .p1-h1-accent { color: var(--yellow); text-shadow: 0 0 25px var(--yellow); }
.hurricane-mode .p1-cloud-svg { opacity: 1; filter: drop-shadow(0 0 25px rgba(251, 191, 36, 0.9)); animation: p1-shake 0.3s infinite; color: var(--yellow); }
.hurricane-mode .p1-btn-solid { background: var(--yellow); box-shadow: 0 0 40px rgba(251, 191, 36, 0.7); color: #0f172a; font-weight: 600; text-shadow: none; }
.hurricane-mode .p1-btn-solid:hover { background: #fde047; box-shadow: 0 0 50px rgba(251, 191, 36, 0.9); transform: translateY(-3px) scale(1.05); }
.hurricane-mode .p1-btn-ghost { border-color: var(--yellow); color: var(--yellow); box-shadow: 0 0 20px rgba(251, 191, 36, 0.2) inset; background: rgba(15, 23, 42, 0.5); }
.hurricane-mode .p1-btn-ghost:hover { background: rgba(251, 191, 36, 0.15); box-shadow: 0 0 30px rgba(251, 191, 36, 0.4) inset, 0 0 20px rgba(251, 191, 36, 0.4); }
.hurricane-mode .p1-station-card { border-color: rgba(251, 191, 36, 0.4); box-shadow: 0 0 15px rgba(251, 191, 36, 0.1); }
.hurricane-mode .p1-station-card:hover { border-color: var(--yellow); box-shadow: 0 0 40px rgba(251, 191, 36, 0.4); transform: translateY(-6px) scale(1.03); }
.hurricane-mode .p1-bf-bubble { border-color: rgba(251, 191, 36, 0.4); box-shadow: 0 0 15px rgba(251, 191, 36, 0.1); }
.hurricane-mode .p1-bf-bubble:hover { border-color: var(--yellow); box-shadow: 0 0 40px rgba(251, 191, 36, 0.4); transform: translateY(-6px) scale(1.03); }
.hurricane-mode .p1-bf-bubble::before { background: linear-gradient(90deg, var(--yellow), var(--orange), var(--yellow)); height: 4px; }
/* Removed p1-hero-img pulse to stop the picture from blinking red */
/* .hurricane-mode .p1-hero-img { border-color: var(--orange); box-shadow: 0 0 50px rgba(249, 115, 22, 0.5); animation: p1-pulse 1.5s infinite; } */
.hurricane-mode .p1-station-icon { color: var(--yellow); filter: drop-shadow(0 0 8px var(--yellow)); }
.hurricane-mode .p1-bf-ico { color: var(--yellow); filter: drop-shadow(0 0 8px var(--yellow)); }
.hurricane-mode .p1-req-row { border-color: rgba(251, 191, 36, 0.3); box-shadow: 0 0 10px rgba(251, 191, 36, 0.05); }
.hurricane-mode .p1-req-row:hover { border-color: var(--yellow); transform: translateX(6px); box-shadow: 0 0 25px rgba(251, 191, 36, 0.2); background: linear-gradient(90deg, rgba(251, 191, 36, 0.1) 0%, transparent 100%); }
.hurricane-mode .p1-req-row::before { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); width: 4px; }
.hurricane-mode .p1-req-val { text-shadow: 0 0 8px rgba(249, 115, 22, 0.4); }
.hurricane-mode .p1-ht-pulse { background: var(--yellow); box-shadow: 0 0 20px var(--yellow); animation-duration: 1.5s; }
.hurricane-mode .p1-ht-line { background: linear-gradient(90deg, transparent, var(--yellow), transparent); opacity: 0.6; }
.hurricane-mode .p1-eyebrow { color: var(--yellow); text-shadow: 0 0 10px rgba(251, 191, 36, 0.5); }
.hurricane-mode .p1-tag-dot { background: var(--yellow); box-shadow: 0 0 10px var(--yellow); animation-duration: 0.5s; }
/* Hurricane text legibility fixes */
.hurricane-mode .p1-hero-typed,
.hurricane-mode .p1-tag-sep {
color: #f1f5f9; /* Bright white text against dark clouds */
text-shadow: 0 2px 5px rgba(0,0,0,0.8); /* Shadow to ensure it pops out */
}
.hurricane-mode .p1-pill {
color: #f1f5f9;
background: rgba(15, 23, 42, 0.7); /* Dark pill background */
border-color: rgba(251, 191, 36, 0.4); /* Yellow border */
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
.hurricane-mode .p1-pill strong {
color: var(--yellow);
}
/* --- Night Hurricane UI Furious Effects --- */
@keyframes p1-furious-shake {
0% { transform: translate(0, 0); }
20% { transform: translate(-0.5px, 0.25px); }
40% { transform: translate(0.5px, -0.25px); }
60% { transform: translate(-0.25px, 0.5px); }
80% { transform: translate(0.25px, -0.5px); }
100% { transform: translate(0, 0); }
}
@keyframes p1-lightning-flash-bg {
0%, 95%, 98%, 100% { background: rgba(15, 23, 42, 0.8); }
96% { background: rgba(56, 189, 248, 0.3); }
97% { background: rgba(15, 23, 42, 0.8); }
99% { background: rgba(255, 255, 255, 0.2); }
}
@keyframes p1-wind-overlay {
0% { background-position: 0 0; }
100% { background-position: -60px 60px; }
}
body:not(.sunny).hurricane-mode .p1-station-card,
body:not(.sunny).hurricane-mode .p1-bf-bubble,
body:not(.sunny).hurricane-mode .p1-req-row {
animation: p1-furious-shake 0.5s infinite, p1-lightning-flash-bg 4s infinite;
border-color: rgba(56, 189, 248, 0.5);
position: relative;
overflow: hidden;
}
body:not(.sunny).hurricane-mode .p1-station-card::after,
body:not(.sunny).hurricane-mode .p1-req-row::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(45deg, transparent, transparent 15px, rgba(255, 255, 255, 0.015) 15px, rgba(255, 255, 255, 0.015) 30px);
animation: p1-wind-overlay 0.3s linear infinite;
pointer-events: none;
border-radius: inherit;
z-index: 1;
}
body:not(.sunny).hurricane-mode .p1-station-card:hover,
body:not(.sunny).hurricane-mode .p1-bf-bubble:hover,
body:not(.sunny).hurricane-mode .p1-req-row:hover {
animation: p1-lightning-flash-bg 4s infinite; /* Stop shaking on hover */
border-color: #38bdf8;
box-shadow: 0 0 30px rgba(56, 189, 248, 0.5), inset 0 0 20px rgba(56, 189, 248, 0.2);
transform: translateY(-4px) scale(1.02);
}
body:not(.sunny).hurricane-mode .p1-station-card > *,
body:not(.sunny).hurricane-mode .p1-req-row > * {
z-index: 2;
position: relative;
}
body:not(.sunny).hurricane-mode .p1-req-val,
body:not(.sunny).hurricane-mode .p1-bf-ico,
body:not(.sunny).hurricane-mode .p1-station-icon {
color: #bae6fd;
filter: drop-shadow(0 0 8px #38bdf8);
}
/* Special Overrides for Sunny + Perfect + Non-Rain */
body.sunny.perfect-mode:not(.rain-on) .p1-mega-strike {
opacity: 0.8;
animation: p1-strike-anim 4s infinite linear;
color: var(--yellow);
filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.6));
}
body.sunny.perfect-mode:not(.rain-on) .p1-scatter-bolt {
opacity: 1;
animation-duration: 2s, 3s;
filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.8));
}
body.sunny.perfect-mode:not(.rain-on) .p1-electric-bolt {
opacity: 1;
animation-duration: 2s;
filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.8));
}
body.sunny.perfect-mode:not(.rain-on) .p1-mega-ring {
opacity: 0.6;
border-width: 4px;
}
body.sunny.perfect-mode:not(.rain-on) .p1-electro-spark {
opacity: 1;
box-shadow: 0 0 15px var(--yellow), 0 0 30px var(--orange);
animation-duration: 1.5s;
}
/* Fluent Animations for Sunny Perfect Mode */
@keyframes p1-fluent-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes p1-fluent-glow {
0%, 100% { filter: drop-shadow(0 15px 30px rgba(251, 191, 36, 0.1)); }
50% { filter: drop-shadow(0 25px 45px rgba(251, 191, 36, 0.4)); }
}
@keyframes p1-fluent-strike {
0%, 100% { opacity: 0; stroke-dashoffset: 300; }
10% { opacity: 1; stroke-dashoffset: 0; }
15% { opacity: 0; }
20% { opacity: 1; }
30% { opacity: 0; stroke-dashoffset: 0; }
}
/* Sunny Thunder Cloud Enhancements */
body.sunny.perfect-mode:not(.rain-on) .p1-cloud-svg {
opacity: 1;
animation: p1-fluent-float 5s infinite ease-in-out, p1-fluent-glow 4s infinite ease-in-out;
}
body.sunny.perfect-mode:not(.rain-on) .p1-cloud-svg ellipse {
fill: #ffffff;
opacity: 0.9 !important;
}
body.sunny.perfect-mode:not(.rain-on) .p1-cloud-svg .p1-bolt-path {
opacity: 1 !important;
stroke: var(--yellow) !important;
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: p1-fluent-strike 4s infinite cubic-bezier(0.25, 0.1, 0.25, 1);
filter: drop-shadow(0 0 15px rgba(251, 191, 36, 1));
}
body.sunny.perfect-mode:not(.rain-on) .p1-scatter-bolt {
opacity: 1;
animation: p1-flash-spark 3s infinite alternate cubic-bezier(0.4, 0, 0.2, 1), p1-fluent-float 6s infinite ease-in-out;
filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.8));
}
/* ══════════════════════════════════════════════════════════════════
SUNNY PERFECT MODE — HUGE LIGHTNING BACKGROUND SYSTEM
6 Decorative Layers · 10+ Keyframe Animations · Mode-Scoped
══════════════════════════════════════════════════════════════════ */
/* ── Base: Hidden by default ── */
.p1-sunny-lightning-layer {
display: none;
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
/* ── Activation: All Modes ── */
body .p1-sunny-lightning-layer {
display: block;
}
/* ─────────────────────────────────────────────────
LAYER 1: Giant Lightning Arcs
───────────────────────────────────────────────── */
.p1-giant-arc {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
}
.p1-garc-path {
fill: none;
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
}
/* Arc 1: Top horizontal — gold, fast */
.p1-garc-1 {
opacity: 1;
animation: p1-arc-lifecycle 6s 0s infinite ease-in-out;
}
.p1-garc-1 .p1-garc-path {
animation: p1-arc-draw 6s 0s infinite ease-in-out;
}
/* Arc 2: Bottom horizontal — blue-to-gold, medium */
.p1-garc-2 {
opacity: 1;
animation: p1-arc-lifecycle 8s 2s infinite ease-in-out;
}
.p1-garc-2 .p1-garc-path {
animation: p1-arc-draw 8s 2s infinite ease-in-out;
filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.5));
}
/* Arc 3: Vertical center — gold fade, slow */
.p1-garc-3 {
opacity: 1;
animation: p1-arc-lifecycle 10s 4s infinite ease-in-out;
}
.p1-garc-3 .p1-garc-path {
animation: p1-arc-draw 10s 4s infinite ease-in-out;
filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.4));
}
@keyframes p1-arc-draw {
0% { stroke-dashoffset: 3000; }
20% { stroke-dashoffset: 0; }
25% { stroke-dashoffset: 0; }
30% { stroke-dashoffset: -3000; }
100% { stroke-dashoffset: -3000; }
}
@keyframes p1-arc-lifecycle {
0% { opacity: 0; }
5% { opacity: 0.15; }
20% { opacity: 0.2; }
25% { opacity: 0.1; }
28% { opacity: 0.15; }
32% { opacity: 0; }
100% { opacity: 0; }
}
/* ─────────────────────────────────────────────────
LAYER 2: Thundercloud Cluster
───────────────────────────────────────────────── */
.p1-sunny-clouds {
position: absolute;
top: -5%;
left: 0;
width: 100%;
height: 50%;
pointer-events: none;
filter: blur(40px);
animation: p1-cloud-breathe 8s infinite ease-in-out;
}
.p1-scloud {
animation: p1-cloud-drift 25s infinite ease-in-out;
}
.p1-scloud-1 { animation-delay: 0s; animation-duration: 30s; }
.p1-scloud-2 { animation-delay: -5s; animation-duration: 25s; }
.p1-scloud-3 { animation-delay: -10s; animation-duration: 35s; }
.p1-scloud-4 { animation-delay: -15s; animation-duration: 28s; }
.p1-scloud-5 { animation-delay: -8s; animation-duration: 32s; }
@keyframes p1-cloud-drift {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(30px); }
50% { transform: translateX(-20px); }
75% { transform: translateX(15px); }
}
@keyframes p1-cloud-breathe {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.03); }
}
/* ─────────────────────────────────────────────────
LAYER 3: Electric Field Lines
───────────────────────────────────────────────── */
.p1-field-line {
position: absolute;
height: 1px;
pointer-events: none;
background: linear-gradient(90deg,
transparent 0%,
rgba(251, 191, 36, 0.3) 15%,
rgba(251, 191, 36, 0.6) 50%,
rgba(251, 191, 36, 0.3) 85%,
transparent 100%
);
background-size: 200% 100%;
animation: p1-field-pulse 3s infinite linear;
opacity: 0.4;
}
/* Horizontal lines at various heights */
.p1-fl-1 { top: 15%; left: 0; width: 60%; animation-delay: 0s; animation-duration: 4s; }
.p1-fl-2 { top: 30%; right: 0; width: 55%; animation-delay: -1s; animation-duration: 3.5s; opacity: 0.3; }
.p1-fl-3 { top: 50%; left: 10%; width: 45%; animation-delay: -2s; animation-duration: 5s; }
.p1-fl-4 { top: 65%; right: 5%; width: 50%; animation-delay: -0.5s; animation-duration: 4.5s; opacity: 0.25; }
.p1-fl-5 { top: 80%; left: 5%; width: 40%; animation-delay: -3s; animation-duration: 3s; }
/* Diagonal lines */
.p1-fl-6 { top: 20%; left: 20%; width: 35%; transform: rotate(25deg); animation-delay: -1.5s; animation-duration: 5.5s; opacity: 0.2; }
.p1-fl-7 { top: 55%; right: 15%; width: 30%; transform: rotate(-15deg); animation-delay: -2.5s; animation-duration: 4s; opacity: 0.3; }
.p1-fl-8 { top: 40%; left: 40%; width: 25%; transform: rotate(40deg); animation-delay: -0.8s; animation-duration: 6s; opacity: 0.15; }
@keyframes p1-field-pulse {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ─────────────────────────────────────────────────
LAYER 4: Plasma Orbs
───────────────────────────────────────────────── */
.p1-plasma-orb {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(60px);
opacity: 0;
animation: p1-plasma-glow 6s infinite ease-in-out, p1-plasma-wander 20s infinite ease-in-out;
}
.p1-porb-1 {
width: 250px; height: 250px;
top: 5%; left: 10%;
background: radial-gradient(circle, rgba(251, 191, 36, 0.35), rgba(251, 191, 36, 0) 70%);
animation-delay: 0s, 0s;
}
.p1-porb-2 {
width: 300px; height: 300px;
top: 40%; right: 5%;
background: radial-gradient(circle, rgba(56, 189, 248, 0.25), rgba(56, 189, 248, 0) 70%);
animation-delay: -2s, -5s;
}
.p1-porb-3 {
width: 200px; height: 200px;
bottom: 10%; left: 30%;
background: radial-gradient(circle, rgba(249, 115, 22, 0.3), rgba(249, 115, 22, 0) 70%);
animation-delay: -4s, -10s;
}
.p1-porb-4 {
width: 180px; height: 180px;
top: 20%; right: 30%;
background: radial-gradient(circle, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0) 70%);
animation-delay: -1s, -15s;
}
@keyframes p1-plasma-glow {
0%, 100% { opacity: 0; transform: scale(0.8); }
20% { opacity: 0.6; transform: scale(1); }
50% { opacity: 1; transform: scale(1.15); }
80% { opacity: 0.5; transform: scale(0.95); }
}
@keyframes p1-plasma-wander {
0% { transform: translate(0, 0); }
20% { transform: translate(40px, -30px); }
40% { transform: translate(-20px, 50px); }
60% { transform: translate(60px, 20px); }
80% { transform: translate(-30px, -40px); }
100% { transform: translate(0, 0); }
}
/* ─────────────────────────────────────────────────
LAYER 5: Sheet Lightning Flash
───────────────────────────────────────────────── */
.p1-sheet-flash {
position: absolute;
inset: 0;
background: white;
pointer-events: none;
opacity: 0;
z-index: 1;
animation: p1-sheet-lightning 10s infinite ease-out;
}
@keyframes p1-sheet-lightning {
0%, 100% { opacity: 0; }
42% { opacity: 0; }
42.5% { opacity: 0.08; }
43% { opacity: 0; }
43.5% { opacity: 0.12; }
44% { opacity: 0.03; }
44.5% { opacity: 0.15; }
45% { opacity: 0; }
/* Second flash cluster */
78% { opacity: 0; }
78.3% { opacity: 0.06; }
78.6% { opacity: 0; }
79% { opacity: 0.1; }
79.5% { opacity: 0; }
}
/* ─────────────────────────────────────────────────
LAYER 6: Voltage Arc Connectors
───────────────────────────────────────────────── */
.p1-voltage-arcs {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.p1-varc-path {
fill: none;
stroke-dasharray: 2400;
stroke-dashoffset: 2400;
filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.3));
animation: p1-voltage-draw 12s infinite ease-in-out, p1-voltage-shimmer 4s infinite ease-in-out;
}
.p1-varc-1 {
animation-delay: 0s, 0s;
}
.p1-varc-2 {
animation-delay: -6s, -2s;
}
@keyframes p1-voltage-draw {
0% { stroke-dashoffset: 2400; opacity: 0; }
5% { opacity: 0.5; }
30% { stroke-dashoffset: 0; opacity: 0.6; }
35% { opacity: 0.3; }
38% { opacity: 0.5; }
50% { stroke-dashoffset: -2400; opacity: 0; }
100% { stroke-dashoffset: -2400; opacity: 0; }
}
@keyframes p1-voltage-shimmer {
0%, 100% { filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.2)); }
50% { filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.5)); }
}
/* ─────────────────────────────────────────────────
LAYER 7: Blue Sky Atmospheric Wash
───────────────────────────────────────────────── */
.p1-sky-wash {
position: absolute;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(ellipse 120% 80% at 50% 20%, rgba(191, 219, 254, 0.4) 0%, rgba(147, 197, 253, 0.2) 30%, rgba(219, 234, 254, 0.1) 60%, transparent 100%);
animation: p1-sky-pulse 12s infinite ease-in-out;
}
@keyframes p1-sky-pulse {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
/* ─────────────────────────────────────────────────
LAYER 7b: Golden Sunset Glow
Warm orange/yellow covering entire hero background
───────────────────────────────────────────────── */
/* Full-section golden wash — covers entire hero background */
.p1-sunset-glow {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse 80% 70% at 75% 15%, rgba(251, 191, 36, 0.7) 0%, rgba(249, 115, 22, 0.5) 30%, transparent 70%),
radial-gradient(ellipse 90% 60% at 20% 80%, rgba(249, 115, 22, 0.4) 0%, rgba(251, 146, 60, 0.3) 40%, transparent 70%),
radial-gradient(ellipse 120% 100% at 50% 50%, rgba(253, 224, 71, 0.5) 0%, rgba(251, 191, 36, 0.3) 40%, transparent 80%);
animation: p1-sunset-breathe 8s infinite ease-in-out;
}
/* Bright sun core — top right, intense white-gold */
.p1-sunset-core {
position: absolute;
top: -10%;
right: 2%;
width: 300px;
height: 300px;
border-radius: 50%;
pointer-events: none;
z-index: 2;
background: radial-gradient(circle,
rgba(255, 255, 255, 0.9) 0%,
rgba(254, 243, 199, 0.95) 10%,
rgba(253, 224, 71, 0.9) 20%,
rgba(251, 191, 36, 0.8) 35%,
rgba(249, 115, 22, 0.7) 50%,
rgba(234, 88, 12, 0.5) 65%,
rgba(249, 115, 22, 0.3) 80%,
transparent 100%
);
filter: blur(2px);
animation: p1-sunset-breathe 6s -2s infinite ease-in-out;
box-shadow:
0 0 50px rgba(253, 224, 71, 0.95),
0 0 100px rgba(251, 191, 36, 0.85),
0 0 150px rgba(249, 115, 22, 0.7),
0 0 250px rgba(251, 146, 60, 0.5),
0 0 400px rgba(251, 191, 36, 0.4),
0 0 550px rgba(253, 224, 71, 0.2);
}
/* Sun rays — warm orange/yellow beams radiating outward */
.p1-sun-rays {
position: absolute;
top: -30%;
right: -15%;
width: 800px;
height: 800px;
border-radius: 50%;
pointer-events: none;
z-index: 1;
background: conic-gradient(
from 0deg,
transparent 0deg, rgba(253, 224, 71, 0.4) 6deg, transparent 12deg,
transparent 22deg, rgba(251, 191, 36, 0.35) 28deg, transparent 34deg,
transparent 48deg, rgba(249, 115, 22, 0.3) 54deg, transparent 60deg,
transparent 72deg, rgba(253, 224, 71, 0.45) 78deg, transparent 84deg,
transparent 96deg, rgba(251, 146, 60, 0.3) 102deg, transparent 108deg,
transparent 120deg, rgba(251, 191, 36, 0.4) 126deg, transparent 132deg,
transparent 145deg, rgba(249, 115, 22, 0.35) 151deg, transparent 157deg,
transparent 170deg, rgba(253, 224, 71, 0.45) 176deg, transparent 182deg,
transparent 195deg, rgba(251, 191, 36, 0.35) 201deg, transparent 207deg,
transparent 220deg, rgba(251, 146, 60, 0.3) 226deg, transparent 232deg,
transparent 248deg, rgba(253, 224, 71, 0.4) 254deg, transparent 260deg,
transparent 275deg, rgba(249, 115, 22, 0.35) 281deg, transparent 287deg,
transparent 300deg, rgba(251, 191, 36, 0.45) 306deg, transparent 312deg,
transparent 325deg, rgba(253, 224, 71, 0.3) 331deg, transparent 337deg,
transparent 350deg, rgba(251, 146, 60, 0.25) 356deg, transparent 360deg
);
filter: blur(3px);
animation: p1-sun-rays-spin 50s infinite linear, p1-sunset-breathe 10s infinite ease-in-out;
}
@keyframes p1-sunset-breathe {
0%, 100% { opacity: 0.9; transform: scale(1); }
50% { opacity: 1; transform: scale(1.08); }
}
@keyframes p1-sun-rays-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ─────────────────────────────────────────────────
LAYER 8: Volumetric Cloud Bank
───────────────────────────────────────────────── */
.p1-storm-cloudbank {
position: absolute;
top: -10%;
left: -5%;
width: 110%;
height: 55%;
pointer-events: none;
z-index: 1;
filter: blur(25px);
animation: p1-cloudbank-swell 10s infinite ease-in-out;
}
.p1-cb {
animation: p1-cloud-drift 25s infinite ease-in-out;
}
.p1-cb-b1 { animation-delay: 0s; animation-duration: 28s; }
.p1-cb-b2 { animation-delay: -3s; animation-duration: 32s; }
.p1-cb-b3 { animation-delay: -7s; animation-duration: 26s; }
.p1-cb-m1 { animation-delay: -2s; animation-duration: 30s; }
.p1-cb-m2 { animation-delay: -5s; animation-duration: 34s; }
.p1-cb-m3 { animation-delay: -8s; animation-duration: 27s; }
.p1-cb-m4 { animation-delay: -11s; animation-duration: 31s; }
.p1-cb-f1 { animation-delay: -1s; animation-duration: 36s; }
.p1-cb-f2 { animation-delay: -4s; animation-duration: 29s; }
.p1-cb-f3 { animation-delay: -9s; animation-duration: 33s; }
.p1-cb-g1 { animation-delay: -6s; animation-duration: 28s; }
.p1-cb-g2 { animation-delay: -12s; animation-duration: 35s; }
@keyframes p1-cloudbank-swell {
0%, 100% { transform: scale(1) translateY(0); opacity: 1; }
30% { transform: scale(1.02) translateY(-3px); opacity: 0.95; }
60% { transform: scale(0.98) translateY(2px); opacity: 1; }
}
/* ─────────────────────────────────────────────────
LAYER 9: Cloud Shadow / Depth
───────────────────────────────────────────────── */
.p1-cloud-shadows {
position: absolute;
top: -5%;
left: -5%;
width: 110%;
height: 55%;
pointer-events: none;
z-index: 0;
filter: blur(35px);
opacity: 0.6;
animation: p1-cloudbank-swell 12s -3s infinite ease-in-out;
}
.p1-cshadow {
animation: p1-cloud-drift 30s infinite ease-in-out;
}
/* ─────────────────────────────────────────────────
LAYER 10: Mega Forked Lightning Bolts
───────────────────────────────────────────────── */
.p1-mega-bolt {
position: absolute;
pointer-events: none;
z-index: 3;
opacity: 0;
}
.p1-mbolt-path {
fill: none;
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
filter: drop-shadow(0 0 15px rgba(255, 255, 255, 1)) drop-shadow(0 0 35px rgba(147, 197, 253, 0.9)) drop-shadow(0 0 60px rgba(96, 165, 250, 0.7)) drop-shadow(0 0 100px rgba(59, 130, 246, 0.4));
}
/* Bolt 1: Right side, main strike */
.p1-mbolt-1 {
top: 0; right: 15%;
width: 120px; height: 100%;
animation: p1-mega-bolt-strike 6s 0s infinite ease-out;
}
.p1-mbolt-1 .p1-mbolt-path {
animation: p1-mbolt-draw 6s 0s infinite ease-out;
}
/* Bolt 2: Center-left, secondary strike */
.p1-mbolt-2 {
top: 0; left: 25%;
width: 90px; height: 85%;
animation: p1-mega-bolt-strike 7s 2s infinite ease-out;
}
.p1-mbolt-2 .p1-mbolt-path {
animation: p1-mbolt-draw 7s 2s infinite ease-out;
}
/* Bolt 3: Right-center, massive strike */
.p1-mbolt-3 {
top: 0; right: 35%;
width: 140px; height: 100%;
animation: p1-mega-bolt-strike 8s 4s infinite ease-out;
}
.p1-mbolt-3 .p1-mbolt-path {
animation: p1-mbolt-draw 8s 4s infinite ease-out;
filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1)) drop-shadow(0 0 45px rgba(147, 197, 253, 1)) drop-shadow(0 0 80px rgba(96, 165, 250, 0.8)) drop-shadow(0 0 120px rgba(37, 99, 235, 0.5));
}
/* Bolt 4: Far left */
.p1-mbolt-4 {
top: 0; left: 8%;
width: 80px; height: 90%;
animation: p1-mega-bolt-strike 9s 1s infinite ease-out;
}
.p1-mbolt-4 .p1-mbolt-path {
animation: p1-mbolt-draw 9s 1s infinite ease-out;
}
/* Bolt 5: Center */
.p1-mbolt-5 {
top: 0; left: 48%;
width: 100px; height: 95%;
animation: p1-mega-bolt-strike 7s 3.5s infinite ease-out;
}
.p1-mbolt-5 .p1-mbolt-path {
animation: p1-mbolt-draw 7s 3.5s infinite ease-out;
}
/* Bolt 6: Far right */
.p1-mbolt-6 {
top: 0; right: 5%;
width: 70px; height: 80%;
animation: p1-mega-bolt-strike 10s 5s infinite ease-out;
}
.p1-mbolt-6 .p1-mbolt-path {
animation: p1-mbolt-draw 10s 5s infinite ease-out;
}
/* Bolt 7: Left-center, biggest */
.p1-mbolt-7 {
top: 0; left: 38%;
width: 130px; height: 100%;
animation: p1-mega-bolt-strike 6s 1.5s infinite ease-out;
}
.p1-mbolt-7 .p1-mbolt-path {
animation: p1-mbolt-draw 6s 1.5s infinite ease-out;
filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1)) drop-shadow(0 0 45px rgba(147, 197, 253, 1)) drop-shadow(0 0 80px rgba(96, 165, 250, 0.8));
}
@keyframes p1-mbolt-draw {
0% { stroke-dashoffset: 2000; }
10% { stroke-dashoffset: 0; }
14% { stroke-dashoffset: 0; }
18% { stroke-dashoffset: -2000; }
100% { stroke-dashoffset: -2000; }
}
@keyframes p1-mega-bolt-strike {
0% { opacity: 0; }
4% { opacity: 0; }
5% { opacity: 0.5; }
9% { opacity: 0.45; }
10% { opacity: 0.1; }
11% { opacity: 0.55; }
12% { opacity: 0.15; }
14% { opacity: 0.4; }
18% { opacity: 0; }
100% { opacity: 0; }
}
/* ─────────────────────────────────────────────────
LAYER 11: Lightning Branch Forks
───────────────────────────────────────────────── */
.p1-bolt-branch {
position: absolute;
pointer-events: none;
z-index: 2;
opacity: 0;
}
.p1-bbranch-path {
fill: none;
stroke-dasharray: 800;
stroke-dashoffset: 800;
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 25px rgba(147, 197, 253, 0.5));
}
/* Branch positions — relative to parent bolts */
.p1-bbranch-1 { top: 20%; right: 10%; width: 80px; height: 200px; animation: p1-bolt-branch-flash 8s 0.5s infinite ease-out; }
.p1-bbranch-1 .p1-bbranch-path { animation: p1-bbranch-draw 8s 0.5s infinite ease-out; }
.p1-bbranch-2 { top: 35%; right: 20%; width: 70px; height: 180px; animation: p1-bolt-branch-flash 8s 0.8s infinite ease-out; }
.p1-bbranch-2 .p1-bbranch-path { animation: p1-bbranch-draw 8s 0.8s infinite ease-out; }
.p1-bbranch-3 { top: 15%; left: 22%; width: 60px; height: 140px; animation: p1-bolt-branch-flash 10s 3.5s infinite ease-out; }
.p1-bbranch-3 .p1-bbranch-path { animation: p1-bbranch-draw 10s 3.5s infinite ease-out; }
.p1-bbranch-4 { top: 30%; left: 28%; width: 60px; height: 140px; animation: p1-bolt-branch-flash 10s 3.8s infinite ease-out; }
.p1-bbranch-4 .p1-bbranch-path { animation: p1-bbranch-draw 10s 3.8s infinite ease-out; }
.p1-bbranch-5 { top: 25%; right: 32%; width: 50px; height: 120px; animation: p1-bolt-branch-flash 12s 6.5s infinite ease-out; }
.p1-bbranch-5 .p1-bbranch-path { animation: p1-bbranch-draw 12s 6.5s infinite ease-out; }
.p1-bbranch-6 { top: 40%; right: 38%; width: 50px; height: 120px; animation: p1-bolt-branch-flash 12s 6.8s infinite ease-out; }
.p1-bbranch-6 .p1-bbranch-path { animation: p1-bbranch-draw 12s 6.8s infinite ease-out; }
@keyframes p1-bbranch-draw {
0% { stroke-dashoffset: 800; }
6% { stroke-dashoffset: 0; }
10% { stroke-dashoffset: 0; }
14% { stroke-dashoffset: -800; }
100% { stroke-dashoffset: -800; }
}
@keyframes p1-bolt-branch-flash {
0% { opacity: 0; }
4% { opacity: 0; }
5% { opacity: 0.8; }
8% { opacity: 0.6; }
9% { opacity: 0.2; }
10% { opacity: 0.7; }
14% { opacity: 0; }
100% { opacity: 0; }
}
/* ─────────────────────────────────────────────────
LAYER 12: Impact Glow Hotspots
───────────────────────────────────────────────── */
.p1-impact-glow {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 2;
opacity: 0;
}
.p1-iglow-1 {
width: 350px; height: 350px;
bottom: 0; right: 10%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(147, 197, 253, 0.3) 30%, rgba(59, 130, 246, 0.1) 60%, transparent 100%);
animation: p1-impact-pulse 8s 0.6s infinite ease-out;
}
.p1-iglow-2 {
width: 280px; height: 280px;
bottom: 5%; left: 20%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(191, 219, 254, 0.25) 35%, rgba(96, 165, 250, 0.08) 65%, transparent 100%);
animation: p1-impact-pulse 10s 3.6s infinite ease-out;
}
.p1-iglow-3 {
width: 400px; height: 400px;
bottom: 0; right: 30%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, rgba(219, 234, 254, 0.35) 25%, rgba(59, 130, 246, 0.12) 55%, transparent 100%);
animation: p1-impact-pulse 12s 6.6s infinite ease-out;
}
@keyframes p1-impact-pulse {
0% { opacity: 0; transform: scale(0.3); }
5% { opacity: 0; transform: scale(0.3); }
6% { opacity: 0.8; transform: scale(0.6); }
10% { opacity: 1; transform: scale(1); }
12% { opacity: 0.4; transform: scale(1.1); }
14% { opacity: 0.7; transform: scale(1.05); }
18% { opacity: 0; transform: scale(1.2); }
100% { opacity: 0; transform: scale(0.3); }
}
/* ─────────────────────────────────────────────────
LAYER 13: Electric Corona Halos
───────────────────────────────────────────────── */
.p1-corona-halo {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 1;
border: 2px dashed rgba(255, 255, 255, 0.3);
opacity: 0;
}
.p1-chalo-1 {
width: 120px; height: 120px;
top: 8%; right: 18%;
animation: p1-corona-spin 8s 0s infinite linear, p1-corona-glow 8s 0.2s infinite ease-out;
}
.p1-chalo-2 {
width: 100px; height: 100px;
top: 5%; left: 27%;
border-style: dotted;
border-color: rgba(191, 219, 254, 0.4);
animation: p1-corona-spin 10s 3s infinite linear, p1-corona-glow 10s 3.2s infinite ease-out;
}
.p1-chalo-3 {
width: 150px; height: 150px;
top: 6%; right: 38%;
border-width: 3px;
border-color: rgba(219, 234, 254, 0.35);
animation: p1-corona-spin 12s 6s infinite linear, p1-corona-glow 12s 6.2s infinite ease-out;
}
@keyframes p1-corona-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes p1-corona-glow {
0% { opacity: 0; }
3% { opacity: 0; }
5% { opacity: 0.6; }
10% { opacity: 0.8; }
15% { opacity: 0; }
100% { opacity: 0; }
}
/* ─────────────────────────────────────────────────
RELAXED MODE OVERRIDES & GPU OPTIMIZATIONS
More cloudy, less obvious sun, highly optimized
───────────────────────────────────────────────── */
/* 1. Simplify and dim the sunset (slower animations) */
body.sunny.relaxed-mode .p1-sunset-glow {
animation: p1-sunset-breathe-relaxed 15s infinite ease-in-out;
}
body.sunny.relaxed-mode .p1-sunset-core {
animation: p1-sunset-breathe-relaxed 15s -2s infinite ease-in-out;
box-shadow: 0 0 50px rgba(251, 191, 36, 0.2);
filter: blur(8px);
}
body.sunny.relaxed-mode .p1-sun-rays {
animation: p1-sun-rays-spin 120s infinite linear, p1-sunset-breathe-relaxed 15s infinite ease-in-out;
}
@keyframes p1-sunset-breathe-relaxed {
0%, 100% { opacity: 0.1; transform: scale(1); }
50% { opacity: 0.18; transform: scale(1.01); }
}
/* ===== SUNNY RELAX MODE — LIGHTWEIGHT ATMOSPHERE ===== */
.p1-relax-bg-fx {
display: none;
position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden;
}
body.relaxed-mode .p1-relax-bg-fx {
display: block;
}
/* Night Mode Overrides for Clouds */
body:not(.sunny).relaxed-mode .p1-relax-cloud path:first-child {
fill: rgba(255, 255, 255, 0.08); /* Faint white clouds for night */
}
body:not(.sunny).relaxed-mode .p1-relax-cloud path:last-child {
fill: rgba(255, 255, 255, 0.04);
}
/* Hide sun motes at night */
body:not(.sunny).relaxed-mode .p1-relax-mote {
display: none;
}
/* Night Stars */
.p1-relax-star {
display: none;
position: absolute;
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 80%);
border-radius: 50%;
animation: p1-relax-pulse 4s infinite alternate ease-in-out;
}
body:not(.sunny).relaxed-mode .p1-relax-star {
display: block;
}
.p1-rs-1 { width: 6px; height: 6px; top: 15%; left: 20%; animation-duration: 3s; }
.p1-rs-2 { width: 4px; height: 4px; top: 35%; left: 50%; animation-duration: 5s; animation-delay: 1s; }
.p1-rs-3 { width: 8px; height: 8px; top: 10%; left: 80%; animation-duration: 4s; animation-delay: 2s; }
.p1-rs-4 { width: 5px; height: 5px; top: 25%; left: 10%; animation-duration: 6s; animation-delay: 0.5s; }
.p1-rs-5 { width: 7px; height: 7px; top: 40%; left: 85%; animation-duration: 3.5s; animation-delay: 1.5s; }
.p1-rs-6 { width: 5px; height: 5px; top: 5%; left: 45%; animation-duration: 4.5s; animation-delay: 2.5s; }
/* ===== SUNNY HURRICANE MODE - OVERVIEW TORNADO & STORM ===== */
.p1-hurricane-bg-fx {
display: none;
position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden;
}
body.hurricane-mode .p1-hurricane-bg-fx {
display: block;
}
.p1-h-prompt {
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
font-family: var(--mono);
font-size: 0.8rem;
color: var(--yellow);
letter-spacing: 3px;
text-transform: uppercase;
animation: p1-h-prompt-pulse 2s infinite alternate ease-in-out;
pointer-events: none;
z-index: 10;
text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
opacity: 0.8;
}
@keyframes p1-h-prompt-pulse {
from { opacity: 0.4; transform: translateX(-50%) scale(0.98); }
to { opacity: 1; transform: translateX(-50%) scale(1.02); }
}
body.hurricane-mode .p1-overview .p1-heading,
body.hurricane-mode .p1-overview .p1-subtext {
color: #ffffff;
text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
.p1-tornado {
position: absolute;
bottom: 0; left: 60%;
width: 150px; height: 100%;
transform-origin: top center;
margin-left: var(--mouse-tx, 0px);
transition: margin-left 0.1s ease-out;
animation: p1-tornado-sway 6s infinite ease-in-out alternate, p1-tornado-move 30s infinite linear;
filter: drop-shadow(0 0 20px rgba(0,0,0,0.5));
}
.p1-t-cone {
animation: p1-tornado-pulse 0.5s infinite alternate linear;
}
.p1-t-swirl {
animation: p1-tornado-spin 1s infinite linear;
}
.p1-ts-1 { animation-duration: 0.8s; }
.p1-ts-2 { animation-duration: 1.2s; animation-direction: reverse; }
.p1-ts-3 { animation-duration: 1s; }
@keyframes p1-tornado-sway {
0% { transform: skewX(-5deg); }
100% { transform: skewX(5deg); }
}
@keyframes p1-tornado-move {
0% { left: 110%; }
100% { left: -20%; }
}
@keyframes p1-tornado-pulse {
0% { opacity: 0.8; }
100% { opacity: 1; }
}
@keyframes p1-tornado-spin {
0% { transform: translateY(0); }
100% { transform: translateY(-50px); opacity: 0; }
}
.p1-h-flash-1, .p1-h-flash-2 {
position: absolute; inset: 0; background: white; opacity: 0;
}
.p1-h-flash-1 { animation: p1-sheet-lightning 4s infinite ease-out; }
.p1-h-flash-2 { animation: p1-sheet-lightning 7s infinite ease-out; animation-delay: 2s; }
.p1-h-storm-clouds {
position: absolute;
top: 0; left: 0; right: 0; height: 400px;
background: linear-gradient(to bottom, rgba(30, 41, 59, 0.9) 0%, rgba(30, 41, 59, 0) 100%);
}
body:not(.sunny).hurricane-mode .p1-h-storm-clouds {
background: linear-gradient(to bottom, rgba(15, 23, 42, 0.95) 0%, rgba(30, 58, 138, 0.6) 40%, rgba(30, 58, 138, 0) 100%);
}
.p1-h-bolt {
position: absolute;
top: 0;
height: 100%;
filter: drop-shadow(0 0 10px rgba(253, 224, 71, 0.8));
opacity: 0;
}
.p1-hb-1 { left: 10%; width: 50px; animation: p1-strike 5s infinite ease-out; }
.p1-hb-2 { left: 80%; width: 60px; animation: p1-strike 8s infinite ease-out; animation-delay: 3s; }
.p1-hb-3 { left: 45%; width: 100px; animation: p1-strike 6s infinite ease-out; animation-delay: 1.5s; filter: drop-shadow(0 0 20px rgba(251, 191, 36, 1)); }
@keyframes p1-strike {
0%, 95% { opacity: 0; }
96% { opacity: 1; }
97% { opacity: 0; }
98% { opacity: 1; }
100% { opacity: 0; }
}
/* Gentle slow-moving wispy clouds */
.p1-relax-cloud {
position: absolute;
left: -30%; /* Start further outside */
animation: p1-relax-cloud-drift linear infinite;
}
.p1-rc-1 { width: 500px; top: 10%; animation-duration: 60s; opacity: 1; }
.p1-rc-2 { width: 400px; top: 30%; animation-duration: 80s; animation-delay: -20s; opacity: 1;}
.p1-rc-3 { width: 600px; top: 5%; animation-duration: 100s; animation-delay: -50s; opacity: 1;}
@keyframes p1-relax-cloud-drift {
0% { transform: translateX(0); }
100% { transform: translateX(150vw); }
}
/* Floating sun dust / motes */
.p1-relax-mote {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, rgba(245,158,11,0.9) 0%, rgba(245,158,11,0) 70%);
animation: p1-relax-drift linear infinite, p1-relax-pulse ease-in-out infinite alternate;
}
.p1-rm-1 { width: 45px; height: 45px; left: 10%; bottom: -10%; animation-duration: 20s, 6s; }
.p1-rm-2 { width: 25px; height: 25px; left: 30%; bottom: -10%; animation-duration: 30s, 8s; animation-delay: 5s; }
.p1-rm-3 { width: 60px; height: 60px; left: 60%; bottom: -10%; animation-duration: 18s, 5s; animation-delay: 12s; }
.p1-rm-4 { width: 35px; height: 35px; left: 80%; bottom: -10%; animation-duration: 35s, 7s; animation-delay: 2s; }
.p1-rm-5 { width: 20px; height: 20px; left: 45%; bottom: -10%; animation-duration: 25s, 9s; animation-delay: 15s; }
@keyframes p1-relax-drift {
0% { transform: translateY(0) translateX(0); }
50% { transform: translateY(-50vh) translateX(40px); }
100% { transform: translateY(-120vh) translateX(-30px); }
}
@keyframes p1-relax-pulse {
0% { opacity: 0; }
50% { opacity: 0.85; }
100% { opacity: 0; }
}
/* 2. Remove cloud exposure and shadows for max GPU performance */
body.relaxed-mode .p1-storm-cloudbank,
body.relaxed-mode .p1-cloud-shadows {
display: none !important; /* Removes massive SVG blur elements */
}
/* 3. GPU Optimizations: Disable heavy lightning elements */
body.relaxed-mode .p1-giant-arc,
body.relaxed-mode .p1-plasma-orb,
body.relaxed-mode .p1-mega-bolt, /* Disables all zigzag lightning bolts */
body.relaxed-mode .p1-bolt-branch,
body.relaxed-mode .p1-impact-glow,
body.relaxed-mode .p1-corona-halo,
body.relaxed-mode .p1-voltage-arcs, /* Disables the long traversing lines */
body.relaxed-mode .p1-electric-field, /* Disables background faint lines */
body.relaxed-mode .p1-sheet-flash, /* Disables background flashes */
body.relaxed-mode .p1-electro-spark, /* Disables the lightning sparks near the picture */
body.relaxed-mode .p1-scatter-bolt, /* Disables floating lightning symbols around the hero */
body.relaxed-mode .p1-electric-bolt { /* Disables lightning symbols next to the main title */
display: none !important; /* Huge performance win, leaves a clean sky */
}
/* ─────────────────────────────────────────────────
HURRICANE MODE OVERRIDES
Darker storm, intense lightning
───────────────────────────────────────────────── */
body.hurricane-mode .p1-sky-wash {
background: radial-gradient(ellipse 120% 80% at 50% 20%, rgba(15, 23, 42, 0.9) 0%, rgba(30, 58, 138, 0.75) 50%, transparent 100%);
opacity: 1; /* Darken the sky completely for an approaching storm */
}
body.hurricane-mode .p1-sunset-glow,
body.hurricane-mode .p1-sunset-core,
body.hurricane-mode .p1-sun-rays {
opacity: 0.05 !important; /* Dim the sun entirely because of heavy storm clouds */
}
/* Night + Hurricane: completely remove the sun — no residual glow */
body.hurricane-mode:not(.sunny) .p1-sunset-glow,
body.hurricane-mode:not(.sunny) .p1-sunset-core,
body.hurricane-mode:not(.sunny) .p1-sun-rays {
display: none !important;
}
/* Night + Hurricane: remove decorative electro rings */
body.hurricane-mode:not(.sunny) .p1-mega-ring,
body.hurricane-mode:not(.sunny) .p1-corona-halo {
display: none !important;
}
body.hurricane-mode .p1-storm-cloudbank {
filter: brightness(0.65) blur(10px); /* Lighter grey, ominous storm clouds (not pitch black) */
animation: p1-hurricane-wind 12s ease-in-out infinite alternate; /* Smooth, continuous wind blowing clouds */
opacity: 0.95;
}
@keyframes p1-hurricane-wind {
0% { transform: translateX(-3%); }
100% { transform: translateX(3%); }
}
body.hurricane-mode .p1-cloud-shadows {
filter: brightness(0.5); /* Darken shadows */
animation: none; /* Removed scale animation to stop zoom in/zoom out effect */
}
body.hurricane-mode .p1-mega-bolt .p1-mbolt-path {
animation-duration: 1.5s; /* Lightning strikes much faster */
stroke-width: 12px; /* Thicker thunder */
filter: drop-shadow(0 0 30px rgba(56, 189, 248, 1)) drop-shadow(0 0 15px white); /* Intense glow */
}
body.hurricane-mode .p1-giant-arc .p1-garc-path {
stroke-width: 10px; /* Thicker background arcs */
filter: drop-shadow(0 0 30px rgba(251, 191, 36, 1)) drop-shadow(0 0 15px white); /* Intense glow */
}
body.hurricane-mode .p1-sheet-flash {
animation: p1-sheet-lightning 5s infinite ease-out; /* Natural sheet lightning */
background: white;
opacity: 0.3; /* Very subtle and less obvious overall flash */
}
/* Fast-moving wind streaks for Hurricane Mode */
body.hurricane-mode .p1-sunny-lightning-layer::after {
content: "";
position: absolute;
inset: -50%;
pointer-events: none;
z-index: 8;
background: repeating-linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.02) 50px, transparent 150px);
animation: p1-wind-streaks 1.5s linear infinite;
opacity: 0.8;
will-change: transform;
}
/* Night Hurricane: lighter wind streaks for GPU performance */
body.hurricane-mode:not(.sunny) .p1-sunny-lightning-layer::after {
inset: -10%;
opacity: 0.4;
animation: p1-wind-streaks-light 2.5s linear infinite;
}
@keyframes p1-wind-streaks {
from { transform: translate3d(0,0,0) skewX(-45deg); }
to { transform: translate3d(-200px,0,0) skewX(-45deg); }
}
@keyframes p1-wind-streaks-light {
from { transform: translate3d(0,0,0) skewX(-35deg); }
to { transform: translate3d(-150px,0,0) skewX(-35deg); }
}
/* ─────────────────────────────────────────────────
NIGHT PERFECT MODE OVERRIDES
Moon, stars, and glowing storm
───────────────────────────────────────────────── */
body:not(.sunny) .p1-sunset-glow,
body:not(.sunny) .p1-sunset-core,
body:not(.sunny) .p1-sun-rays {
opacity: 0 !important;
visibility: hidden;
transform: translateY(150px) scale(0.9);
}
.p1-night-layer {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateY(150px) scale(0.9);
transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.5s step-end, transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
body:not(.sunny) .p1-night-layer {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s step-start, transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Global Transitions for Smooth Day/Night Toggle */
.p1-sunset-glow, .p1-sunset-core, .p1-sun-rays {
transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), transform 1.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.5s step-end;
}
body.sunny .p1-sunset-glow, body.sunny .p1-sunset-core, body.sunny .p1-sun-rays {
transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), transform 1.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s step-start;
}
.p1-sky-wash, .p1-storm-cloudbank, .p1-cloud-shadows, .p1-cloud-svg ellipse {
transition: filter 1.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), background 1.5s cubic-bezier(0.4, 0, 0.2, 1), fill 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.p1-mega-bolt .p1-mbolt-path, .p1-giant-arc .p1-garc-path {
transition: filter 1.5s cubic-bezier(0.4, 0, 0.2, 1), stroke-width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Time Warp Overlay (triggered by JS) */
.p1-theme-transition-overlay {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 99998;
background: #0a1628;
opacity: 0;
transition: opacity 0.8s ease-in-out;
}
body.p1-theme-transitioning .p1-theme-transition-overlay {
opacity: 1;
transition: opacity 0.6s ease-in;
}
/* When switching TO sunny, flash white instead of dark */
body.sunny.p1-theme-transitioning .p1-theme-transition-overlay {
background: #f8fafc;
}
/* Smooth CSS transitions on all theme-affected properties */
body.p1-theme-transitioning,
body.p1-theme-transitioning .p1-hero,
body.p1-theme-transitioning .p1-overview,
body.p1-theme-transitioning .p1-benefits,
body.p1-theme-transitioning .p1-modules,
body.p1-theme-transitioning .p1-timeline,
body.p1-theme-transitioning .p1-career,
body.p1-theme-transitioning .p1-cta,
body.p1-theme-transitioning .p1-footer {
transition: background 1.2s ease, color 1.2s ease, border-color 1.2s ease !important;
}
/* ══════════════════════════════════════════════════
MODE SWITCH TRANSITION SYSTEM
Cinematic per-element animations when switching
between Relaxed / Perfect / Hurricane
══════════════════════════════════════════════════ */
/* Overlay backdrop */
.p1-mode-transition-overlay {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 99997;
background: #060d1a;
opacity: 0;
transition: opacity 0.8s ease-in-out;
}
body.p1-mode-transitioning .p1-mode-transition-overlay {
opacity: 1;
transition: opacity 0.5s ease-in;
}
/* ── PHASE 1: Fade OUT everything ── */
body.p1-mode-fade-out .p1-hero-wrap,
body.p1-mode-fade-out .p1-overview,
body.p1-mode-fade-out .p1-benefits,
body.p1-mode-fade-out .p1-modules,
body.p1-mode-fade-out .p1-timeline,
body.p1-mode-fade-out .p1-career,
body.p1-mode-fade-out .p1-cta {
opacity: 0 !important;
transform: scale(0.9) translateY(40px) !important;
filter: blur(8px) !important;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body.p1-mode-fade-out .p1-hero-atmos {
opacity: 0 !important;
filter: blur(15px) !important;
transition: all 0.5s ease-in !important;
}
body.p1-mode-fade-out .p1-dock {
opacity: 0 !important;
transform: translateY(20px) scale(0.9) !important;
transition: all 0.4s ease-in !important;
}
/* ── PHASE 2: Fade IN everything after swap ── */
body.p1-mode-fade-in .p1-hero-wrap { animation: p1-mode-reveal-hero 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important; }
body.p1-mode-fade-in .p1-hero-atmos { animation: p1-mode-reveal-atmos 1s ease-out forwards !important; }
body.p1-mode-fade-in .p1-overview { animation: p1-mode-reveal-section 0.7s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both !important; }
body.p1-mode-fade-in .p1-benefits { animation: p1-mode-reveal-section 0.7s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both !important; }
body.p1-mode-fade-in .p1-modules { animation: p1-mode-reveal-section 0.7s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both !important; }
body.p1-mode-fade-in .p1-timeline { animation: p1-mode-reveal-section 0.7s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both !important; }
body.p1-mode-fade-in .p1-career { animation: p1-mode-reveal-section 0.7s 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both !important; }
body.p1-mode-fade-in .p1-cta { animation: p1-mode-reveal-section 0.7s 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both !important; }
body.p1-mode-fade-in .p1-dock { animation: p1-mode-reveal-dock 0.6s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both !important; }
@keyframes p1-mode-reveal-hero {
0% { opacity: 0; transform: scale(0.9) translateY(40px); filter: blur(8px); }
100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes p1-mode-reveal-atmos {
0% { opacity: 0; filter: blur(15px); }
100% { opacity: 1; filter: blur(0); }
}
@keyframes p1-mode-reveal-section {
0% { opacity: 0; transform: translateY(40px) scale(0.95); filter: blur(5px); }
100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes p1-mode-reveal-dock {
0% { opacity: 0; transform: translateY(30px) scale(0.9); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* ── Smooth property blending during transitioning ── */
body.p1-mode-transitioning .p1-hero-h1,
body.p1-mode-transitioning .p1-h1-accent,
body.p1-mode-transitioning .p1-hero-typed,
body.p1-mode-transitioning .p1-eyebrow,
body.p1-mode-transitioning .p1-glow,
body.p1-mode-transitioning .p1-heading {
transition: color 0.8s ease, text-shadow 0.8s ease !important;
}
body.p1-mode-transitioning .p1-station-card,
body.p1-mode-transitioning .p1-bf-bubble,
body.p1-mode-transitioning .p1-branch-leaf,
body.p1-mode-transitioning .p1-req-row,
body.p1-mode-transitioning .p1-about-prose {
transition: border-color 0.8s ease, box-shadow 0.8s ease, background 0.8s ease, transform 0.5s ease !important;
}
body.p1-mode-transitioning .p1-btn-solid,
body.p1-mode-transitioning .p1-btn-ghost {
transition: background 0.6s ease, box-shadow 0.6s ease, color 0.6s ease, border-color 0.6s ease !important;
}
body.p1-mode-transitioning .p1-station-icon,
body.p1-mode-transitioning .p1-bf-ico {
transition: color 0.6s ease, filter 0.6s ease !important;
}
body.p1-mode-transitioning .p1-hero-img {
transition: filter 0.8s ease, box-shadow 0.8s ease, border-color 0.8s ease !important;
}
body.p1-mode-transitioning .p1-cloud-svg {
transition: opacity 0.8s ease, filter 0.8s ease !important;
}
body.p1-mode-transitioning .p1-atmos-orb {
transition: opacity 0.8s ease, filter 0.8s ease !important;
}
body.p1-mode-transitioning .p1-pill {
transition: background 0.6s ease, border-color 0.6s ease, color 0.6s ease, box-shadow 0.6s ease !important;
}
body.p1-mode-transitioning .p1-ht-line {
transition: background 0.6s ease, opacity 0.6s ease !important;
}
body.p1-mode-transitioning .p1-ht-pulse {
transition: background 0.6s ease, box-shadow 0.6s ease !important;
}
body.p1-mode-transitioning .p1-tag-dot {
transition: background 0.6s ease, box-shadow 0.6s ease !important;
}
body.p1-mode-transitioning .p1-mega-ring {
transition: opacity 0.8s ease, border-color 0.8s ease !important;
}
body.p1-mode-transitioning .p1-electro-spark {
transition: opacity 0.6s ease, box-shadow 0.6s ease !important;
}
body.p1-mode-transitioning .p1-scatter-bolt {
transition: opacity 0.6s ease, filter 0.6s ease !important;
}
body.p1-mode-transitioning .p1-electric-bolt {
transition: opacity 0.6s ease, filter 0.6s ease !important;
}
body.p1-mode-transitioning .p1-sheet-flash {
transition: opacity 0.8s ease !important;
}
body.p1-mode-transitioning .p1-dock {
transition: box-shadow 0.6s ease, border-color 0.6s ease !important;
}
/* Section backgrounds */
body.p1-mode-transitioning .p1-overview,
body.p1-mode-transitioning .p1-benefits,
body.p1-mode-transitioning .p1-modules,
body.p1-mode-transitioning .p1-timeline,
body.p1-mode-transitioning .p1-career,
body.p1-mode-transitioning .p1-cta,
body.p1-mode-transitioning .p1-footer {
transition: background 0.8s ease, border-color 0.8s ease !important;
}
.p1-moon-svg {
position: absolute;
top: 5%;
right: 5%;
width: 250px;
height: 250px;
color: #e2e8f0;
filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 60px rgba(147, 197, 253, 0.5));
animation: p1-moon-glow 4s infinite alternate ease-in-out;
}
@keyframes p1-moon-glow {
0% { filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 50px rgba(147, 197, 253, 0.4)); transform: scale(1); }
100% { filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 70px rgba(147, 197, 253, 0.6)); transform: scale(1.02); }
}
.p1-star {
position: absolute;
width: 2px;
height: 2px;
background: white;
border-radius: 50%;
box-shadow: 0 0 5px white;
animation: p1-twinkle 3s infinite alternate;
}
.p1-star-1 { top: 15%; left: 20%; animation-delay: 0s; }
.p1-star-2 { top: 25%; left: 40%; animation-delay: 0.5s; width: 3px; height: 3px; }
.p1-star-3 { top: 10%; left: 60%; animation-delay: 1.2s; }
.p1-star-4 { top: 35%; left: 80%; animation-delay: 0.8s; }
.p1-star-5 { top: 5%; left: 85%; animation-delay: 1.5s; width: 3px; height: 3px; }
.p1-star-6 { top: 40%; left: 10%; animation-delay: 2.1s; }
.p1-star-7 { top: 18%; left: 50%; animation-delay: 0.3s; }
.p1-star-8 { top: 28%; left: 70%; animation-delay: 1.7s; width: 2.5px; height: 2.5px; }
.p1-star-9 { top: 8%; left: 35%; animation-delay: 0.9s; }
.p1-star-10 { top: 45%; left: 25%; animation-delay: 1.1s; }
@keyframes p1-twinkle {
0% { opacity: 0.2; transform: scale(0.8); }
100% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 10px white, 0 0 20px rgba(147, 197, 253, 0.8); }
}
/* Night Storm Enhancements (more glowing) */
body:not(.sunny).perfect-mode .p1-giant-arc,
body:not(.sunny).perfect-mode .p1-bolt-branch,
body:not(.sunny).perfect-mode .p1-voltage-arcs,
body:not(.sunny).perfect-mode .p1-plasma-orb,
body:not(.sunny).perfect-mode .p1-impact-glow,
body:not(.sunny).perfect-mode .p1-corona-halo {
display: none !important;
}
body:not(.sunny).perfect-mode .p1-mega-bolt .p1-mbolt-path {
filter: drop-shadow(0 0 35px rgba(56, 189, 248, 1)) drop-shadow(0 0 20px white);
stroke-width: 10px; /* Thicker for glowing storm */
}
body:not(.sunny).perfect-mode .p1-giant-arc .p1-garc-path {
filter: drop-shadow(0 0 35px rgba(251, 191, 36, 1)) drop-shadow(0 0 20px white);
stroke-width: 8px;
}
body:not(.sunny) .p1-sunny-clouds ellipse {
fill: #1e293b; /* Darker clouds at night */
opacity: 0.9 !important;
}
/* specific night hurricane clouds: more moving and more appear */
body:not(.sunny).hurricane-mode .p1-sunny-clouds ellipse {
fill: #0f172a;
opacity: 0.85 !important;
animation: p1-fast-cloud-drift 4s infinite ease-in-out alternate !important;
}
@keyframes p1-fast-cloud-drift {
0% { transform: translateX(-40px) translateY(-5px); }
100% { transform: translateX(40px) translateY(5px); }
}
/* moon shaking in night hurricane */
body:not(.sunny).hurricane-mode .p1-moon-svg {
animation: p1-moon-shake 0.4s infinite ease-in-out alternate;
}
@keyframes p1-moon-shake {
0% { transform: translate(-3px, -2px) scale(1); filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.8)); }
33% { transform: translate(3px, 1px) scale(1.02); filter: drop-shadow(0 0 60px rgba(255, 255, 255, 0.9)); }
66% { transform: translate(-2px, 3px) scale(0.98); filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.7)); }
100% { transform: translate(2px, -1px) scale(1.01); filter: drop-shadow(0 0 50px rgba(255, 255, 255, 0.8)); }
}
body:not(.sunny) .p1-storm-cloudbank {
filter: brightness(0.2) blur(15px); /* Very dark storm clouds */
}
body:not(.sunny) .p1-cloud-shadows {
filter: brightness(0.1);
}
body:not(.sunny) .p1-sky-wash {
background: radial-gradient(ellipse 120% 80% at 50% 20%, rgba(15, 23, 42, 0.9) 0%, rgba(30, 58, 138, 0.6) 50%, transparent 100%);
opacity: 1; /* Darken the sky */
}
/* ─────────────────────────────────────────────────
RAIN OVERLAY & ANIMATIONS
───────────────────────────────────────────────── */
.p1-rain-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
pointer-events: none;
z-index: 50;
overflow: hidden;
opacity: 0;
transition: opacity 0.5s ease;
}
body.rain-on .p1-rain-overlay {
opacity: 1;
}
.p1-drop {
position: absolute;
top: -50px;
width: 2px;
height: 60px;
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.5));
animation: p1-rain-fall linear infinite;
}
@keyframes p1-rain-fall {
0% { transform: rotate(15deg) translateY(-50px); }
100% { transform: rotate(15deg) translateY(120vh); }
}
/* Hurricane Wind-Blown Rain */
body.hurricane-mode .p1-drop {
animation-name: p1-rain-fall-hurricane;
}
@keyframes p1-rain-fall-hurricane {
0% { transform: rotate(-40deg) translateY(-100px); }
100% { transform: rotate(-40deg) translateY(150vh); }
}
/* Sunny Hurricane — visible rain against the light sky */
body.sunny.hurricane-mode .p1-drop {
width: 2px;
height: 35px;
background: linear-gradient(180deg, transparent 0%, rgba(30, 64, 175, 0.35) 50%, rgba(37, 99, 235, 0.55) 100%);
}
/* Rain Speed Toggle Logic */
.p1-rain-speed-btn {
display: none !important;
}
body.rain-on .p1-rain-speed-btn {
display: flex !important;
}
@media(max-width:992px){
.p1-hero-wrap{grid-template-columns:1fr}
.p1-hero-right{display:none}
.p1-branch-arms{grid-template-columns:1fr;gap:40px}
.p1-arm-left{margin-bottom:20px}
.p1-footer-grid{grid-template-columns:1fr 1fr}
/* Flowchart Mobile Adaptations */
.p1-flowchart-lightning-svg {
display: none !important;
}
.p1-branch-root {
margin-bottom: 40px;
}
.p1-branch-root::after {
content: "";
display: block;
margin: 20px auto 0;
width: 20px;
height: 40px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
filter: drop-shadow(0 0 6px var(--yellow));
}
body.sunny .p1-branch-root::after {
background-image: url("data:image/svg+xml;utf8,");
filter: drop-shadow(0 0 4px rgba(234, 88, 12, 0.4));
}
.p1-arm-left::after {
content: "";
display: block;
margin: 30px auto 0;
width: 20px;
height: 48px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
filter: drop-shadow(0 0 6px var(--sky));
}
body.sunny .p1-arm-left::after {
background-image: url("data:image/svg+xml;utf8,");
filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.4));
}
.p1-branch-leaf {
margin-bottom: 40px;
}
.p1-branch-leaf:last-child {
margin-bottom: 0;
}
.p1-leaf-wire {
bottom: -40px;
height: 40px;
}
.p1-arm-left .p1-leaf-wire {
background-image: url("data:image/svg+xml;utf8,");
}
.p1-arm-right .p1-leaf-wire {
background-image: url("data:image/svg+xml;utf8,");
}
body.sunny .p1-arm-left .p1-leaf-wire {
background-image: url("data:image/svg+xml;utf8,");
}
body.sunny .p1-arm-right .p1-leaf-wire {
background-image: url("data:image/svg+xml;utf8,");
}
.p1-arm-left .p1-branch-leaf:hover .p1-leaf-wire {
background-image: url("data:image/svg+xml;utf8,");
}
.p1-arm-right .p1-branch-leaf:hover .p1-leaf-wire {
background-image: url("data:image/svg+xml;utf8,");
}
body.sunny .p1-arm-left .p1-branch-leaf:hover .p1-leaf-wire {
background-image: url("data:image/svg+xml;utf8,");
}
body.sunny .p1-arm-right .p1-branch-leaf:hover .p1-leaf-wire {
background-image: url("data:image/svg+xml;utf8,");
}
.p1-leaf-wire::before {
offset-path: path("M10 0 L6 13 H14 L7 26 H13 L10 40");
}
/* Sunny lightning BG responsive */
.p1-plasma-orb { width: 150px !important; height: 150px !important; filter: blur(40px); }
.p1-fl-6, .p1-fl-7, .p1-fl-8 { display: none; }
.p1-garc-3 { display: none; }
.p1-mbolt-3 { display: none; }
.p1-mbolt-5, .p1-mbolt-6, .p1-mbolt-7 { display: none; }
.p1-bbranch-5, .p1-bbranch-6 { display: none; }
.p1-iglow-3 { display: none; }
.p1-chalo-3 { display: none; }
.p1-storm-cloudbank { filter: blur(30px); height: 45%; }
}
@media(max-width:768px){
.p1-burger{display:flex}
.p1-nav-center{display:none;position:absolute;top:56px;left:0;right:0;background:var(--card);flex-direction:column;padding:16px;border-bottom:1px solid var(--border)}
.p1-nav-center.p1-menu-open{display:flex}
.p1-hero{padding:90px 16px 40px}
.p1-hero-pills{flex-direction:column}
.p1-hero-btns{flex-direction:column}
.p1-station-row{flex-direction:column;align-items:stretch}
.p1-benefits-split{grid-template-columns:1fr}
.p1-ht-track{flex-direction:column;gap:16px;padding-top:0}
.p1-ht-line{display:none}
.p1-ht-node{flex-direction:row;text-align:left;gap:12px}
.p1-footer-grid{grid-template-columns:1fr}
.p1-dock{bottom:16px;padding:4px 6px;gap:3px}
.p1-dock-btn{padding:7px 12px;font-size:0.7rem;gap:4px;letter-spacing:0.5px}
.p1-dock-btn svg{width:14px;height:14px}
.p1-dock-divider{height:18px;margin:0 2px}
.p1-dock-toggles .p1-pill-toggle{padding:6px}
.p1-cta-contacts{flex-direction:column;align-items:center}
.p1-boot-inner{flex-direction:column;gap:24px}
.p1-boot-radar{width:100px;height:100px}
}
/* ====== SUNNY PERFECT MODE OVERVIEW BG FX ====== */
.p1-overview { position: relative; overflow: hidden; }
.p1-overview-bg-fx {
display: none;
position: absolute; inset: 0;
pointer-events: none; z-index: 1;
}
body.perfect-mode .p1-overview-bg-fx {
display: block;
}
body:not(.sunny).perfect-mode .p1-bird {
display: none !important;
}
.p1-bg-lightning {
position: absolute;
top: -15%; left: 15%;
width: 250px; height: 400px;
filter: drop-shadow(0 0 15px rgba(14, 165, 233, 1)) drop-shadow(0 0 30px rgba(56, 189, 248, 0.8));
opacity: 1;
}
.p1-bg-lightning path {
stroke: #bae6fd;
stroke-width: 3px;
stroke-dasharray: 1200;
stroke-dashoffset: 1200;
animation: p1-arc-flash 4s infinite cubic-bezier(0.2, 0, 0, 1);
}
.p1-bg-lightning.p1-strike-2 {
left: 65%; top: -5%;
transform: scaleX(-1);
filter: drop-shadow(0 0 15px rgba(2, 132, 199, 1)) drop-shadow(0 0 30px rgba(14, 165, 233, 0.8));
}
.p1-bg-lightning.p1-strike-2 path {
stroke: #ffffff;
stroke-width: 4px;
animation-delay: 1.5s;
animation-duration: 5s;
}
.p1-bg-lightning.p1-strike-3 {
left: 40%; top: -10%;
width: 180px; height: 350px;
filter: drop-shadow(0 0 15px rgba(14, 165, 233, 1)) drop-shadow(0 0 30px rgba(56, 189, 248, 0.8));
}
.p1-bg-lightning.p1-strike-3 path {
stroke: #7dd3fc;
stroke-width: 3.5px;
animation-delay: 2.5s;
animation-duration: 3.5s;
}
.p1-bg-lightning.p1-strike-4 {
left: 80%; top: 10%;
width: 150px; height: 300px;
transform: scaleY(-1);
filter: drop-shadow(0 0 15px rgba(2, 132, 199, 1)) drop-shadow(0 0 30px rgba(14, 165, 233, 0.8));
}
.p1-bg-lightning.p1-strike-4 path {
stroke: #e0f2fe;
stroke-width: 3px;
animation-delay: 0.5s;
animation-duration: 4.5s;
}
.p1-bird {
position: absolute;
color: #0f172a; /* much darker, solid silhouette */
width: 60px; height: 60px;
transform-origin: center;
opacity: 0; /* Let keyframes control opacity for smooth fade-in */
margin-left: var(--repel-x, 0px);
margin-top: var(--repel-y, 0px);
transition: margin 0.4s cubic-bezier(0.2, 0, 0.2, 1);
}
.p1-bird-1 { animation: p1-bird-fly-1 18s infinite linear, p1-bird-flap 0.4s infinite alternate ease-in-out; }
.p1-bird-2 { width: 50px; height: 50px; animation: p1-bird-fly-2 22s infinite linear 2s, p1-bird-flap 0.35s infinite alternate ease-in-out; }
.p1-bird-3 { width: 75px; height: 75px; animation: p1-bird-fly-3 20s infinite linear 5s, p1-bird-flap 0.5s infinite alternate ease-in-out; }
.p1-bird-4 { width: 55px; height: 55px; animation: p1-bird-fly-4 25s infinite linear 8s, p1-bird-flap 0.45s infinite alternate ease-in-out; }
@keyframes p1-arc-flash {
0%, 75% { stroke-dashoffset: 1200; opacity: 0; }
85% { stroke-dashoffset: 0; opacity: 1; filter: brightness(1.5); }
95% { stroke-dashoffset: -1200; opacity: 0; }
100% { stroke-dashoffset: -1200; opacity: 0; }
}
.p1-owl-wing-l {
transform-origin: 25% 35%;
animation: p1-owl-flap-l 0.5s infinite alternate ease-in-out;
}
.p1-owl-wing-r {
transform-origin: 75% 35%;
animation: p1-owl-flap-r 0.5s infinite alternate ease-in-out;
}
@keyframes p1-owl-flap-l {
0% { transform: rotate(0deg); }
100% { transform: rotate(-35deg); }
}
@keyframes p1-owl-flap-r {
0% { transform: rotate(0deg); }
100% { transform: rotate(35deg); }
}
@keyframes p1-bird-flap {
0% { transform: scaleY(1); }
100% { transform: scaleY(0.3); }
}
@keyframes p1-bird-fly-1 {
0% { left: -25vw; top: 80%; opacity: 0; }
10% { opacity: 0.85; }
30% { top: 30%; }
50% { top: 15%; left: 45vw; }
60% { top: 40%; }
90% { opacity: 0.85; }
100% { left: 125vw; top: 10%; opacity: 0; }
}
@keyframes p1-bird-fly-2 {
0% { left: -25vw; top: 10%; opacity: 0; }
10% { opacity: 0.85; }
40% { top: 50%; }
65% { top: 25%; left: 60vw; }
80% { top: 60%; }
90% { opacity: 0.85; }
100% { left: 125vw; top: 80%; opacity: 0; }
}
@keyframes p1-bird-fly-3 {
0% { right: -25vw; top: 60%; opacity: 0; }
10% { opacity: 0.85; }
35% { top: 20%; }
60% { top: 40%; right: 50vw; }
75% { top: 10%; }
90% { opacity: 0.85; }
100% { right: 125vw; top: 30%; opacity: 0; }
}
@keyframes p1-bird-fly-4 {
0% { left: -25vw; top: 40%; opacity: 0; }
10% { opacity: 0.85; }
40% { top: 15%; }
70% { top: 75%; left: 70vw; }
85% { top: 50%; }
90% { opacity: 0.85; }
100% { left: 125vw; top: 60%; opacity: 0; }
}
/* ====== OWL ANIMATION (NIGHT MODE ONLY) ====== */
.p1-owl {
display: none;
position: absolute;
width: 120px; height: 140px; /* Big cute owls */
transform-origin: center;
opacity: 0;
margin-left: var(--repel-x, 0px);
margin-top: var(--repel-y, 0px);
transition: margin 0.5s ease-out;
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
body:not(.sunny).perfect-mode .p1-owl {
display: block;
}
.p1-owl-1 { animation: p1-owl-fly-1 35s infinite linear, p1-owl-wobble 4s infinite alternate ease-in-out; }
.p1-owl-2 { width: 90px; height: 105px; animation: p1-owl-fly-2 42s infinite linear 5s, p1-owl-wobble 3.5s infinite alternate ease-in-out; }
.p1-owl-3 { width: 150px; height: 175px; animation: p1-owl-fly-3 30s infinite linear 15s, p1-owl-wobble 5s infinite alternate ease-in-out; }
.p1-owl-4 { width: 110px; height: 130px; animation: p1-owl-fly-4 38s infinite linear 22s, p1-owl-wobble 4.5s infinite alternate ease-in-out; }
@keyframes p1-owl-wobble {
0% { transform: rotate(-8deg) translateY(-10px); }
100% { transform: rotate(8deg) translateY(10px); }
}
@keyframes p1-owl-fly-1 {
0% { right: -25vw; top: 15%; opacity: 0; }
10% { opacity: 0.9; }
35% { top: 35%; }
60% { top: 25%; right: 50vw; }
85% { top: 40%; }
90% { opacity: 0.9; }
100% { right: 125vw; top: 10%; opacity: 0; }
}
@keyframes p1-owl-fly-2 {
0% { left: -25vw; top: 70%; opacity: 0; }
10% { opacity: 0.85; }
45% { top: 40%; }
70% { top: 60%; left: 60vw; }
85% { top: 45%; }
90% { opacity: 0.85; }
100% { left: 125vw; top: 30%; opacity: 0; }
}
@keyframes p1-owl-fly-3 {
0% { right: -30vw; top: 50%; opacity: 0; }
10% { opacity: 0.95; }
40% { top: 70%; }
75% { top: 40%; right: 75vw; }
90% { opacity: 0.95; }
100% { right: 125vw; top: 60%; opacity: 0; }
}
@keyframes p1-owl-fly-4 {
0% { left: -25vw; top: 10%; opacity: 0; }
10% { opacity: 0.8; }
35% { top: 30%; }
65% { top: 15%; left: 55vw; }
80% { top: 35%; }
90% { opacity: 0.8; }
100% { left: 125vw; top: 20%; opacity: 0; }
}
/* ====== INTERACTIVE THUNDER NODES ====== */
.p1-interactive-node {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 120px; height: 120px;
cursor: crosshair;
z-index: 5;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
}
body.perfect-mode .p1-interactive-node {
display: flex;
}
.p1-node-left { left: 5%; }
.p1-node-right { right: 5%; }
.p1-node-core {
width: 12px; height: 12px;
border-radius: 50%;
background: var(--sky);
box-shadow: 0 0 15px var(--sky);
transition: all 0.3s ease;
position: relative;
z-index: 2;
}
.p1-node-ring {
position: absolute;
width: 30px; height: 30px;
border-radius: 50%;
border: 1px dashed var(--sky);
animation: p1-spin-slow 6s linear infinite;
transition: all 0.3s ease;
}
.p1-node-lightning {
position: absolute;
top: 60px;
width: 100px; height: 200px;
color: #fff;
filter: drop-shadow(0 0 15px var(--sky)) drop-shadow(0 0 30px var(--sky));
opacity: 0;
transform-origin: top center;
transform: scaleY(0);
transition: opacity 0.1s ease, transform 0.1s ease;
pointer-events: none;
}
.p1-node-left .p1-node-lightning {
left: 10px;
transform: scaleY(0) rotate(15deg);
}
.p1-node-right .p1-node-lightning {
right: 10px;
transform: scaleY(0) rotate(-15deg);
}
/* Interactive Hover States */
.p1-interactive-node:hover .p1-node-core {
background: #fff;
box-shadow: 0 0 30px #fff, 0 0 60px var(--sky);
transform: scale(2);
}
.p1-interactive-node:hover .p1-node-ring {
width: 60px; height: 60px;
border: 2px solid #fff;
box-shadow: 0 0 20px var(--sky);
animation: p1-spin-slow 0.2s linear infinite; /* Spin insanely fast! */
}
.p1-node-left:hover .p1-node-lightning { opacity: 1; animation: p1-node-strike-left 0.1s infinite alternate; }
.p1-node-right:hover .p1-node-lightning { opacity: 1; animation: p1-node-strike-right 0.1s infinite alternate; }
@keyframes p1-node-strike-left {
0% { transform: scaleY(0.9) scaleX(0.9) rotate(13deg); opacity: 0.8; }
100% { transform: scaleY(1.3) scaleX(1.1) rotate(17deg); opacity: 1; filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 50px var(--sky)); }
}
@keyframes p1-node-strike-right {
0% { transform: scaleY(0.9) scaleX(0.9) rotate(-13deg); opacity: 0.8; }
100% { transform: scaleY(1.3) scaleX(1.1) rotate(-17deg); opacity: 1; filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 50px var(--sky)); }
}
/* --- Hurricane Mascot Click Particles --- */
.p1-hurricane-petal {
position: absolute;
width: 12px;
height: 6px;
background: var(--yellow);
border-radius: 50%;
box-shadow: 0 0 10px var(--yellow), 0 0 20px var(--orange);
opacity: 1;
pointer-events: none;
z-index: 100;
/* They shoot right-to-left extremely fast */
animation: p1-hurricane-blow-left linear forwards;
}
.p1-hurricane-spark {
position: absolute;
width: 25px;
height: 2px;
background: #fff;
box-shadow: 0 0 10px #38bdf8, 0 0 20px #bae6fd;
opacity: 1;
pointer-events: none;
z-index: 100;
/* They shoot right-to-left extremely fast, slightly angled */
animation: p1-hurricane-zap-left linear forwards;
}
@keyframes p1-hurricane-blow-left {
0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
100% { transform: translate(calc(-100vw - 200px), var(--y-drift)) rotate(-720deg) scale(0.2); opacity: 0; }
}
@keyframes p1-hurricane-zap-left {
0% { transform: translate(0, 0) rotate(var(--zap-angle)) scale(1); opacity: 1; }
50% { opacity: 1; height: 4px; box-shadow: 0 0 20px #fff, 0 0 40px #38bdf8; }
100% { transform: translate(calc(-100vw - 300px), var(--y-drift)) rotate(var(--zap-angle)) scale(0); opacity: 0; }
}
/* --- Hurricane Sunny Storm Clouds --- */
.p1-hurricane-storm-cloud {
position: absolute;
background: rgba(71, 85, 105, 0.6); /* Slate grey storm cloud */
border-radius: 100px;
filter: blur(20px);
pointer-events: none;
z-index: 1;
animation: p1-hurricane-cloud-drift linear forwards;
}
.p1-hurricane-cloud-burst {
position: absolute;
/* Grey storm burst with a slight electric white center */
background: radial-gradient(circle, rgba(226, 232, 240, 0.9) 0%, rgba(100, 116, 139, 0.7) 40%, transparent 80%);
border-radius: 50%;
pointer-events: none;
z-index: 2;
animation: p1-hurricane-burst-anim 0.8s ease-out forwards; /* Added duration! */
}
@keyframes p1-hurricane-cloud-drift {
0% { transform: translateX(0) scale(1); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateX(calc(-100vw - 600px)) scale(1.5); opacity: 0; }
}
@keyframes p1-hurricane-burst-anim {
0% { transform: translate(-50%, -50%) scale(0.1); opacity: 1; filter: brightness(2); }
40% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; filter: brightness(1); }
100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}
/* --- Night Perfect Mode: Modules Section Storm Cloud Drift --- */
@keyframes p1-mod-cloud-drift {
0% { transform: translateX(0) scale(1); opacity: 0; }
8% { opacity: 0.7; }
85% { opacity: 0.5; }
100% { transform: translateX(calc(-100vw - 600px)) scale(1.3); opacity: 0; }
}
/* --- Relaxed Mode: Gentle floating particles (GPU-friendly) --- */
@keyframes p1-relax-float {
0%, 100% { transform: translateY(0) translateX(0); opacity: 0.2; }
25% { transform: translateY(-50px) translateX(25px); opacity: 0.4; }
50% { transform: translateY(-20px) translateX(-20px); opacity: 0.3; }
75% { transform: translateY(-60px) translateX(10px); opacity: 0.35; }
}
@keyframes p1-relax-pulse {
0%, 100% { transform: scale(1); opacity: 0.08; }
50% { transform: scale(1.4); opacity: 0.18; }
}
@keyframes p1-relax-line-drift {
0% { transform: translateX(0); opacity: 0; }
10% { opacity: 0.3; }
90% { opacity: 0.3; }
100% { transform: translateX(calc(100vw + 400px)); opacity: 0; }
}
/* Hurricane Sunny Wire Spark Blow Effect */
.hurricane-wire-blow {
animation: p1-hurricane-wire-blow 1.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards !important;
}
@keyframes p1-hurricane-wire-blow {
0% { transform: translate(0, 0) scale(1); opacity: 0.9; filter: blur(0px); }
100% { transform: translate(350px, 80px) scale(0.3); opacity: 0; filter: blur(10px); }
}
/* Wire End Styles Toggle */
.p1-hurricane-wire-end { display: none; }
body.hurricane-mode.sunny .p1-hurricane-wire-end { display: inline; }
body.hurricane-mode.sunny .p1-perfect-wire-end { display: none; }
/* Interactive Wire Coils Toggle */
.p1-hurricane-wire-coil { display: none; }
body.hurricane-mode .p1-hurricane-wire-coil { display: inline; }
/* ═══════════════════════ ULTRA MODE OVERRIDE ═══════════════════════ */
.p1-ultra-wrap {
display: none;
justify-content: center;
margin: 10px 0 30px;
position: relative;
z-index: 50;
}
body.hurricane-mode .p1-ultra-wrap {
display: flex;
}
.p1-btn-ultra {
background: linear-gradient(45deg, #0369a1, #0284c7);
color: #fff;
border: 2px solid #38bdf8;
padding: 12px 24px;
font-family: 'JetBrains Mono', monospace;
font-weight: 800;
font-size: 1.2rem;
letter-spacing: 1px;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 0 15px rgba(2, 132, 199, 0.6), inset 0 0 10px rgba(255,255,255,0.3);
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
user-select: none;
-webkit-user-select: none;
outline: none;
}
.p1-btn-ultra:hover {
background: linear-gradient(45deg, #0284c7, #0ea5e9);
box-shadow: 0 0 25px rgba(14, 165, 233, 0.9), inset 0 0 10px rgba(255,255,255,0.5);
transform: scale(1.05);
}
.p1-btn-ultra:active, body.ultra-mode .p1-btn-ultra {
transform: scale(0.95);
background: #ffffff;
color: #0369a1;
box-shadow: 0 0 40px #ffffff, 0 0 80px rgba(14, 165, 233, 1);
border-color: #ffffff;
}
/* --- ULTRA MODE EFFECTS (Active on hold) --- */
body.ultra-mode {
overflow-x: hidden;
}
/* Animate the sections instead of the body to prevent breaking position:fixed bounds */
body.ultra-mode section {
animation: p1-ultra-earthquake 0.1s infinite !important;
transform-origin: center;
}
@keyframes p1-earthquake {
0% { transform: translate(0, 0) rotate(0deg); }
10% { transform: translate(-5px, -5px) rotate(-1deg); }
20% { transform: translate(5px, 5px) rotate(1deg); }
30% { transform: translate(-5px, 5px) rotate(0deg); }
40% { transform: translate(5px, -5px) rotate(1deg); }
50% { transform: translate(-3px, -3px) rotate(-1deg); }
60% { transform: translate(3px, 3px) rotate(0deg); }
70% { transform: translate(-3px, 3px) rotate(-1deg); }
80% { transform: translate(3px, -3px) rotate(1deg); }
90% { transform: translate(0, 0) rotate(0deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}
.p1-earthquake-shake {
animation: p1-earthquake 0.6s ease-in-out !important;
}
@keyframes p1-ultra-earthquake {
0% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(4px, -4px) rotate(0.3deg); }
50% { transform: translate(-4px, 4px) rotate(-0.3deg); }
75% { transform: translate(-4px, -4px) rotate(0.3deg); }
100% { transform: translate(4px, 4px) rotate(-0.3deg); }
}
/* Extreme Blue/Cyan Overlay Flash */
body.ultra-mode::after {
content: '';
position: fixed;
inset: 0;
background: radial-gradient(circle, transparent 10%, rgba(2, 132, 199, 0.6) 80%);
pointer-events: none;
z-index: 9998;
animation: p1-ultra-flash 0.15s infinite alternate;
mix-blend-mode: multiply;
}
@keyframes p1-ultra-flash {
0% { opacity: 0.4; background: rgba(3, 105, 161, 0.4); }
100% { opacity: 1; background: rgba(14, 165, 233, 0.8); }
}
/* Massively speed up specific storm elements safely (avoiding white flashes from merging into solid white) */
body.ultra-mode .p1-rain-overlay > * {
animation-duration: 0.1s !important;
}
body.ultra-mode .p1-hurricane-bg-fx > svg,
body.ultra-mode .p1-storm-cloudbank > *,
body.ultra-mode .p1-cloud-shadows > * {
animation-duration: 0.5s !important;
}
body.ultra-mode .p1-h-flash-1,
body.ultra-mode .p1-h-flash-2 {
display: none !important; /* hide the giant white sheet flashes so it doesn't blind the screen */
}
/* Crank up the wire coils and lightning brightness (Blue theme) */
body.ultra-mode .p1-hurricane-wire-coil path,
body.ultra-mode .p1-hurricane-wire-end path {
filter: drop-shadow(0 0 15px #ffffff) drop-shadow(0 0 30px #06b6d4) !important;
stroke-width: 6px !important;
stroke: #ffffff !important;
}
/* Hidden Ultra Tornados of Doom */
.p1-ultra-tornado {
position: absolute;
bottom: 0;
transform-origin: bottom center;
opacity: 0;
pointer-events: none;
filter: blur(8px);
transition: opacity 0.5s ease-out, filter 0.5s ease-out;
display: none;
}
body.hurricane-mode .p1-ultra-tornado {
display: block;
}
body.ultra-mode .p1-ultra-tornado {
opacity: 0.8;
filter: blur(2px);
animation-duration: 0.8s, 0.4s !important; /* speed up sway and move */
}
.p1-ut-1 {
left: -5%;
width: 450px;
height: 900px;
animation: p1-tornado-sway 4s infinite ease-in-out alternate, p1-tornado-move 40s infinite linear;
}
.p1-ut-2 {
right: 5%;
width: 350px;
height: 700px;
animation: p1-tornado-sway 5s infinite ease-in-out alternate-reverse, p1-tornado-move 35s infinite linear reverse;
}
.p1-ut-3 {
left: 45%;
width: 500px;
height: 800px;
animation: p1-tornado-sway 3.5s infinite ease-in-out alternate, p1-tornado-move 45s infinite linear;
}
body.ultra-mode .p1-ultra-tornado .p1-t-swirl {
animation: p1-tornado-spin 0.2s infinite linear;
}
body.ultra-mode .p1-garc-path,
body.ultra-mode .p1-mbolt-path {
stroke: #ffffff !important;
filter: drop-shadow(0 0 20px #ffffff) drop-shadow(0 0 40px #38bdf8);
}
/* ═══ RELAXED MODE: Unify Career + CTA as One Section ═══ */
/* 1. Force identical solid backgrounds to eliminate the hard seam */
body:not(.sunny).relaxed-mode .p1-career,
body:not(.sunny).relaxed-mode .p1-cta {
background: #0a1628 !important;
}
body.sunny.relaxed-mode .p1-career,
body.sunny.relaxed-mode .p1-cta {
background: #f8fafc !important;
}
/* 2. Adjust padding and remove borders so they physically touch seamlessly */
body.relaxed-mode .p1-career {
padding-bottom: 20px !important;
}
body.relaxed-mode .p1-cta {
padding-top: 60px !important;
border-top: none !important;
box-shadow: none !important;
}
/* 3. Hide conflicting static glows that create visual boundaries */
body.relaxed-mode .p1-cta-glow,
body.hurricane-mode .p1-cta-glow {
display: none !important;
}
/* 4. Synchronize CTA animation colors with Career atmosphere colors */
/* Night Mode: Match Cyan/Blue theme */
body:not(.sunny).relaxed-mode .p1-cta-blob.b1 { background: rgba(56, 189, 248, 0.4) !important; }
body:not(.sunny).relaxed-mode .p1-cta-blob.b2 { background: rgba(147, 197, 253, 0.3) !important; }
body:not(.sunny).relaxed-mode .p1-cta-blob.b3 { background: rgba(56, 189, 248, 0.2) !important; }
/* Sunny Mode: Match Amber/Orange theme */
body.sunny.relaxed-mode .p1-cta-blob.b1 { background: rgba(251, 146, 60, 0.4) !important; }
body.sunny.relaxed-mode .p1-cta-blob.b2 { background: rgba(245, 158, 11, 0.3) !important; }
body.sunny.relaxed-mode .p1-cta-blob.b3 { background: rgba(234, 88, 12, 0.2) !important; }
@media(max-width:480px){
.p1-hero-h1{font-size:2rem}
.p1-heading{font-size:1.5rem}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* ── STORM WARNING MODAL ── */
.p1-storm-warning-overlay {
position: absolute;
left: 0;
width: 100%;
height: 100vh;
z-index: 9999999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(6, 13, 26, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.p1-storm-warning-overlay.active {
opacity: 1;
pointer-events: auto;
}
.p1-storm-warning-dialog {
position: relative;
background: rgba(17, 29, 51, 0.95);
border: 2px solid var(--orange);
border-radius: 12px;
width: 92%;
max-width: 500px;
box-shadow: 0 0 50px rgba(249, 115, 22, 0.4), inset 0 0 20px rgba(249, 115, 22, 0.1);
text-align: center;
transform: scale(0.9);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
font-family: var(--font);
overflow: hidden;
animation: p1-warning-flash-border 2s infinite alternate ease-in-out;
}
.p1-storm-warning-overlay.active .p1-storm-warning-dialog {
transform: scale(1);
}
@keyframes p1-warning-flash-border {
0% {
border-color: var(--orange);
box-shadow: 0 0 35px rgba(249, 115, 22, 0.35), inset 0 0 20px rgba(249, 115, 22, 0.1);
}
100% {
border-color: #ef4444;
box-shadow: 0 0 50px rgba(239, 68, 68, 0.6), inset 0 0 25px rgba(239, 68, 68, 0.2);
}
}
.p1-warning-strip {
height: 6px;
background: repeating-linear-gradient(
-45deg,
var(--yellow),
var(--yellow) 12px,
#060d1a 12px,
#060d1a 24px
);
width: 100%;
}
.p1-warning-content {
padding: 30px;
}
.p1-storm-warning-header {
font-family: var(--mono);
font-size: 0.8rem;
letter-spacing: 3px;
color: var(--orange);
text-transform: uppercase;
margin-bottom: 15px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
text-shadow: 0 0 10px rgba(249, 115, 22, 0.4);
}
.p1-siren-container {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.p1-siren-svg {
width: 72px;
height: 72px;
}
.p1-siren-light {
fill: rgba(251, 191, 36, 0.45);
transform-origin: 32px 38px;
animation: p1-siren-rotate 1.8s linear infinite;
}
@keyframes p1-siren-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.p1-siren-glow {
fill: rgba(239, 68, 68, 0.3);
stroke: #ef4444;
stroke-width: 2;
animation: p1-siren-pulse 0.6s infinite alternate ease-in-out;
}
@keyframes p1-siren-pulse {
0% { fill: rgba(239, 68, 68, 0.15); filter: drop-shadow(0 0 2px #ef4444); }
100% { fill: rgba(239, 68, 68, 0.55); filter: drop-shadow(0 0 15px #ef4444); }
}
.p1-storm-title-my {
font-size: 1.4rem;
font-weight: 800;
color: var(--text);
margin-bottom: 4px;
line-height: 1.3;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.p1-storm-title-en {
font-size: 1.05rem;
font-weight: 600;
color: var(--sky);
margin-bottom: 18px;
font-style: italic;
letter-spacing: 0.5px;
}
.p1-storm-desc {
font-size: 0.85rem;
color: #94a3b8;
line-height: 1.6;
margin-bottom: 25px;
}
.p1-storm-desc-my {
margin-bottom: 10px;
}
.p1-storm-desc-en {
opacity: 0.85;
font-style: italic;
}
.p1-countdown-container {
margin-bottom: 28px;
background: rgba(10, 22, 40, 0.5);
padding: 12px;
border-radius: 8px;
border: 1px solid rgba(56, 189, 248, 0.1);
}
.p1-countdown-text {
font-family: var(--mono);
font-size: 0.85rem;
color: var(--yellow);
margin-bottom: 8px;
font-weight: 700;
letter-spacing: 1px;
}
.p1-progress-track {
height: 8px;
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
overflow: hidden;
position: relative;
}
.p1-progress-bar {
height: 100%;
width: 100%;
background: linear-gradient(90deg, var(--orange), var(--yellow));
box-shadow: 0 0 12px var(--orange);
transform-origin: left;
transform: scaleX(1);
}
.p1-storm-actions {
display: flex;
justify-content: center;
gap: 15px;
}
.p1-storm-btn {
flex: 1;
padding: 12px 24px;
border-radius: 30px;
font-family: var(--font);
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
transition: all 0.25s ease;
letter-spacing: 0.5px;
}
.p1-storm-btn-trigger {
background: var(--yellow);
border: 1px solid var(--yellow);
color: #0a1628;
box-shadow: 0 4px 14px rgba(251, 191, 36, 0.3);
}
.p1-storm-btn-trigger:hover {
background: #fcd34d;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(251, 191, 36, 0.45);
}
.p1-storm-btn-abort {
background: transparent;
border: 1px solid rgba(239, 68, 68, 0.5);
color: #ef4444;
}
.p1-storm-btn-abort:hover {
background: rgba(239, 68, 68, 0.1);
border-color: #ef4444;
color: #f87171;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}