/* ==========================================================
   J. Rod | Voice Actor Portfolio
   style.css — Part 2A
========================================================== */

:root{

--bg:#090c16;
--bg2:#101528;
--card:rgba(22,27,48,.78);

--accent:#7c8cff;
--accent2:#9ea8ff;

--text:#f4f6ff;
--muted:#b6bcef;

--border:rgba(255,255,255,.08);

--shadow:0 20px 60px rgba(0,0,0,.35);

--radius:18px;

--transition:.35s cubic-bezier(.22,1,.36,1);

}

/* ========================================================== */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:"Inter",sans-serif;

background:
linear-gradient(
135deg,
#070b15,
#101528,
#151d39,
#070b15);

background-size:300% 300%;

animation:bgMove 20s ease infinite;

color:var(--text);

overflow-x:hidden;

}

/* ========================================================== */

@keyframes bgMove{

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

50%{background-position:100% 50%;}

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

}

/* ========================================================== */

main{

width:min(1200px,92%);
margin:auto;

}

/* ========================================================== */
/* Loader */
/* ========================================================== */

#loader{

position:fixed;
inset:0;

background:#090c16;

display:flex;
justify-content:center;
align-items:center;

z-index:99999;

transition:.8s;

}

.loader-content{

text-align:center;

}

.loader-content h1{

font-size:64px;

letter-spacing:-2px;

margin-bottom:10px;

}

.loader-content p{

color:var(--muted);

margin-bottom:30px;

}

.loader-line{

width:220px;
height:3px;

background:#1d2242;

overflow:hidden;

position:relative;

}

.loader-line::after{

content:"";

position:absolute;

left:-50%;

top:0;

width:50%;

height:100%;

background:var(--accent);

animation:loaderBar 1.5s infinite;

}

@keyframes loaderBar{

100%{

left:120%;

}

}

/* ========================================================== */
/* Progress Bar */
/* ========================================================== */

#progress-bar{

position:fixed;

top:0;
left:0;

height:4px;

width:0;

background:linear-gradient(
90deg,
#7c8cff,
#a8b4ff);

z-index:9999;

}

/* ========================================================== */
/* Back To Top */
/* ========================================================== */

#backToTop{

position:fixed;

right:30px;
bottom:30px;

width:52px;
height:52px;

border:none;

border-radius:50%;

background:var(--accent);

color:white;

font-size:20px;

cursor:pointer;

box-shadow:var(--shadow);

opacity:0;

pointer-events:none;

transition:var(--transition);

z-index:2000;

}

#backToTop.show{

opacity:1;

pointer-events:auto;

}

/* ========================================================== */
/* Navigation */
/* ========================================================== */

#navbar{

position:sticky;

top:20px;

width:min(1200px,92%);

margin:25px auto;

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 28px;

background:rgba(18,24,46,.70);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.08);

border-radius:20px;

z-index:5000;

transition:var(--transition);

}

.nav-logo{

font-size:26px;

font-weight:700;

letter-spacing:-1px;

}

#navbar ul{

display:flex;

gap:30px;

list-style:none;

}

#navbar a{

color:var(--muted);

text-decoration:none;

transition:var(--transition);

font-size:.95rem;

}

#navbar a:hover{

color:white;

}

/* ========================================================== */
/* Hero Video */
/* ========================================================== */

.hero-video{

margin-top:50px;

display:grid;

grid-template-columns:2fr 1fr;

gap:40px;

align-items:center;

}

.video-wrapper{

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

border:1px solid var(--border);

}

.video-wrapper video{

display:block;

width:100%;

transition:transform .6s ease;

}

.video-wrapper:hover video{

transform:scale(1.02);

}

.hero-video-text h1{

font-size:48px;

line-height:1.05;

margin:15px 0;

}

.eyebrow{

display:inline-block;

padding:8px 16px;

border-radius:999px;

background:rgba(124,140,255,.15);

color:#c8d0ff;

font-size:.8rem;

letter-spacing:.12em;

text-transform:uppercase;

}

/* ========================================================== */
/* Hero */
/* ========================================================== */

.hero{

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

align-items:center;

padding:80px 0;

}

.card{

background:var(--card);

backdrop-filter:blur(22px);

border:1px solid var(--border);

border-radius:22px;

padding:34px;

box-shadow:var(--shadow);

transition:var(--transition);

}

.card:hover{

transform:translateY(-8px);

border-color:rgba(124,140,255,.45);

}

.hero-left img{

width:100%;

border-radius:18px;

display:block;

}

.floating{

animation:float 6s ease-in-out infinite;

}

@keyframes float{

0%{transform:translateY(0);}

50%{transform:translateY(-10px);}

100%{transform:translateY(0);}

}

.hero-right h2{

font-size:52px;

line-height:1.08;

margin:18px 0;

}

.hero-right p{

font-size:1.08rem;

line-height:1.8;

color:var(--muted);

}

/* ========================================================== */
/* Tags */
/* ========================================================== */

.tags{

display:flex;

flex-wrap:wrap;

gap:10px;

margin:30px 0;

}

.tags span{

padding:10px 18px;

background:rgba(124,140,255,.12);

border-radius:999px;

font-size:.88rem;

}

/* ========================================================== */
/* Buttons */
/* ========================================================== */

.hero-buttons{

display:flex;

flex-wrap:wrap;

gap:16px;

margin-top:35px;

}

.btn{

position:relative;

overflow:hidden;

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 28px;

border-radius:14px;

text-decoration:none;

font-weight:600;

transition:var(--transition);

}

.primary{

background:var(--accent);

color:white;

}

.secondary{

background:transparent;

border:1px solid rgba(124,140,255,.35);

color:white;

}

.btn:hover{

transform:translateY(-3px);

}

.btn::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:100%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.25),
transparent);

transition:.7s;

}

.btn:hover::before{

left:120%;

}
/* ==========================================================
   style.css — Part 2B
   Sections: Demo, Stats, Credits, Recommendations,
   Rates, Studio, Contact
==========================================================*/

/* ==========================================================
   General Sections
==========================================================*/

.section{

padding:90px 0;

}

.section-heading{

max-width:760px;

margin:0 auto 60px;

text-align:center;

}

.section-heading h2{

font-size:48px;

margin:18px 0;

letter-spacing:-1px;

}

.section-heading p{

font-size:1.08rem;

line-height:1.8;

color:var(--muted);

}

/* ==========================================================
   Demo
==========================================================*/

.demo-card{

max-width:900px;

margin:auto;

text-align:center;

}

.demo-card audio{

width:100%;

margin-top:20px;

border-radius:12px;

animation:pulse 3s infinite;

}

@keyframes pulse{

0%{

box-shadow:0 0 0 rgba(124,140,255,.20);

}

50%{

box-shadow:0 0 30px rgba(124,140,255,.18);

}

100%{

box-shadow:0 0 0 rgba(124,140,255,.20);

}

}

/* ==========================================================
   Stats
==========================================================*/

.stats{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

margin-bottom:90px;

}

.stat-card{

padding:35px;

text-align:center;

border-radius:20px;

background:var(--card);

backdrop-filter:blur(20px);

border:1px solid var(--border);

transition:var(--transition);

}

.stat-card:hover{

transform:translateY(-6px);

}

.stat-card h3{

font-size:3rem;

color:var(--accent);

margin-bottom:10px;

}

.stat-card p{

color:var(--muted);

}

/* ==========================================================
   Credits
==========================================================*/

.credits-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:28px;

}

.credit-card{

background:var(--card);

border:1px solid var(--border);

border-radius:20px;

padding:28px;

transition:var(--transition);

backdrop-filter:blur(20px);

}

.credit-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}

.credit-card h3{

margin-bottom:8px;

font-size:1.35rem;

}

.credit-card p{

margin-bottom:10px;

color:white;

font-weight:600;

}

.credit-card span{

display:block;

color:var(--muted);

margin-bottom:22px;

}

.watch-btn{

display:inline-block;

padding:12px 18px;

background:rgba(124,140,255,.12);

border-radius:10px;

text-decoration:none;

font-weight:600;

color:white;

transition:var(--transition);

}

.watch-btn:hover{

background:var(--accent);

}

/* ==========================================================
   Recommendations
==========================================================*/

.recommendation-container{

overflow:hidden;

position:relative;

}

#rec-track{

display:flex;

transition:transform .8s cubic-bezier(.22,1,.36,1);

}

.recommendation-slide{

min-width:100%;

padding:20px;

text-align:center;

}

.stars{

font-size:1.5rem;

color:#FFD166;

margin-bottom:18px;

}

.recommendation-slide p{

font-size:1.15rem;

line-height:1.8;

max-width:700px;

margin:auto;

margin-bottom:25px;

color:var(--text);

font-style:italic;

}

.recommendation-slide h4{

font-size:1.1rem;

font-weight:700;

}

.carousel-controls{

display:flex;

justify-content:center;

gap:16px;

margin-top:30px;

}

.carousel-btn{

width:55px;

height:55px;

border-radius:50%;

border:none;

background:var(--accent);

color:white;

cursor:pointer;

font-size:1.3rem;

transition:var(--transition);

}

.carousel-btn:hover{

transform:scale(1.08);

}

.carousel-credit{

margin-top:30px;

text-align:center;

color:var(--muted);

font-size:.9rem;

}

.carousel-credit a{

color:var(--accent2);

text-decoration:none;

}

/* ==========================================================
   Rates
==========================================================*/

#ratesContent{

max-height:0;

overflow:hidden;

opacity:0;

transition:
max-height .65s ease,
opacity .45s ease;

margin-top:20px;

}

#ratesContent.open{

max-height:600px;

opacity:1;

}

.rates-list{

list-style:none;

margin:30px 0;

}

.rates-list li{

display:flex;

justify-content:space-between;

padding:18px 0;

border-bottom:1px solid rgba(255,255,255,.08);

font-size:1.08rem;

}

.rates-list strong{

color:var(--accent2);

}

/* ==========================================================
   Studio
==========================================================*/

.studio-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:28px;

}

.studio-grid img{

width:100%;

display:block;

border-radius:20px;

transition:.6s ease;

box-shadow:var(--shadow);

}

.studio-grid img:hover{

transform:scale(1.03);

}

/* ==========================================================
   Contact
==========================================================*/

.contact-card{

text-align:center;

padding:70px;

background:linear-gradient(
145deg,
rgba(124,140,255,.10),
rgba(255,255,255,.04));

border-radius:28px;

border:1px solid rgba(124,140,255,.18);

box-shadow:var(--shadow);

}

.contact-card h2{

font-size:3rem;

margin:20px 0;

}

.contact-card p{

font-size:1.1rem;

max-width:700px;

margin:0 auto 40px;

line-height:1.9;

color:var(--muted);

}

.contact-buttons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:18px;

}

/* ==========================================================
   Footer
==========================================================*/

footer{

padding:70px 20px;

text-align:center;

color:var(--muted);

font-size:.95rem;

}

footer p:first-child{

margin-bottom:8px;

font-weight:600;

color:white;

}
/* ==========================================================
   style.css — Part 2C
   Animations • Responsive • Utilities
==========================================================*/

/* ==========================================================
   Scroll Reveal Animations
==========================================================*/

.reveal{

opacity:0;

transform:translateY(60px);

transition:
opacity .9s ease,
transform .9s cubic-bezier(.22,1,.36,1);

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

/* ==========================================================
   Navigation Scroll Effect
==========================================================*/

#navbar.scrolled{

background:rgba(10,15,28,.94);

border-color:rgba(124,140,255,.18);

box-shadow:
0 15px 50px rgba(0,0,0,.35);

padding:14px 26px;

}

/* ==========================================================
   Hero Hover Effects
==========================================================*/

.hero-left img{

transition:
transform .7s ease,
filter .7s ease;

}

.hero-left:hover img{

transform:scale(1.025);

filter:brightness(1.05);

}

.video-wrapper{

transition:
transform .5s ease,
box-shadow .5s ease;

}

.video-wrapper:hover{

transform:translateY(-6px);

box-shadow:
0 35px 80px rgba(0,0,0,.45);

}

/* ==========================================================
   Credit Card Accent
==========================================================*/

.credit-card{

position:relative;

overflow:hidden;

}

.credit-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:4px;

height:100%;

background:linear-gradient(
180deg,
var(--accent),
transparent);

opacity:0;

transition:.4s;

}

.credit-card:hover::before{

opacity:1;

}

/* ==========================================================
   Recommendation Card
==========================================================*/

.recommendation-slide{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

min-height:260px;

}

/* ==========================================================
   Studio Images
==========================================================*/

.studio-grid img{

cursor:pointer;

}

.studio-grid img:hover{

filter:brightness(1.05);

}

/* ==========================================================
   Contact Glow
==========================================================*/

.contact-card{

position:relative;

overflow:hidden;

}

.contact-card::after{

content:"";

position:absolute;

width:350px;

height:350px;

border-radius:50%;

background:rgba(124,140,255,.12);

filter:blur(90px);

right:-120px;

top:-120px;

pointer-events:none;

}

/* ==========================================================
   Button Glow
==========================================================*/

.primary{

box-shadow:
0 10px 35px rgba(124,140,255,.25);

}

.primary:hover{

box-shadow:
0 15px 45px rgba(124,140,255,.45);

}

/* ==========================================================
   Audio Player
==========================================================*/

audio{

border-radius:14px;

background:#151a31;

}

/* ==========================================================
   Footer
==========================================================*/

footer{

border-top:1px solid rgba(255,255,255,.05);

margin-top:80px;

}

/* ==========================================================
   Utility Classes
==========================================================*/

.text-center{

text-align:center;

}

.mt-2{

margin-top:20px;

}

.mt-4{

margin-top:40px;

}

.mb-4{

margin-bottom:40px;

}

/* ==========================================================
   Responsive
==========================================================*/

@media(max-width:1100px){

.hero{

grid-template-columns:1fr;

}

.hero-video{

grid-template-columns:1fr;

}

.stats{

grid-template-columns:repeat(2,1fr);

}

#navbar{

flex-direction:column;

gap:20px;

}

#navbar ul{

flex-wrap:wrap;

justify-content:center;

}

}

@media(max-width:768px){

.section{

padding:70px 0;

}

.hero-right h2{

font-size:38px;

}

.section-heading h2{

font-size:36px;

}

.hero-video-text h1{

font-size:36px;

}

.stats{

grid-template-columns:1fr;

}

.studio-grid{

grid-template-columns:1fr;

}

.contact-card{

padding:40px 28px;

}

.contact-card h2{

font-size:2.2rem;

}

.hero-buttons{

justify-content:center;

}

.contact-buttons{

flex-direction:column;

}

.credit-card{

padding:24px;

}

#navbar{

position:relative;

top:0;

margin-top:0;

border-radius:0;

width:100%;

}

}

@media(max-width:500px){

.hero-right h2{

font-size:2rem;

}

.hero-video-text h1{

font-size:2rem;

}

.loader-content h1{

font-size:46px;

}

.loader-line{

width:170px;

}

}

/* ==========================================================
   Reduced Motion Accessibility
==========================================================*/

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

*,
*::before,
*::after{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}

/* ==========================================================
   Selection
==========================================================*/

::selection{

background:var(--accent);

color:white;

}

/* ==========================================================
   Scrollbar (Chromium)
==========================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#0c1020;

}

::-webkit-scrollbar-thumb{

background:#5868d8;

border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

background:#7c8cff;

}

/* ==========================================================
   END OF style.css
==========================================================*/