/*
Theme Name: Bima Rick Science Portfolio
Author: Bima Radiansyah Saputra
Description: Dark sci-fi educational portfolio theme with a comic multiverse aesthetic and bold red/white/black/blue UI.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: bima-rick-science
*/

:root{
 --bg:#07080a;--bg2:#0d1014;--panel:#12161b;--panel2:#171b21;
 --red:#941b24;--red2:#b92731;--blue:#173a54;--blue2:#245e82;
 --white:#ece9e1;--gray:#a9aaa7;--green:#657d59;--line:rgba(236,233,225,.14);
 --max:1180px;--shadow:0 18px 55px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;color:var(--white);background:
 radial-gradient(circle at 84% 12%,rgba(36,94,130,.18),transparent 30%),
 radial-gradient(circle at 10% 72%,rgba(148,27,36,.13),transparent 28%),
 var(--bg);
 font-family:Arial,Helvetica,sans-serif;line-height:1.65;
}
body:before{
 content:"";position:fixed;inset:0;pointer-events:none;z-index:1000;opacity:.12;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
 mix-blend-mode:screen;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.container{width:min(calc(100% - 38px),var(--max));margin:auto}

/* Header / menu */
.site-header{
 position:sticky;top:0;z-index:900;background:rgba(7,8,10,.91);
 backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.header-inner{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-size:1rem;font-weight:1000;letter-spacing:.13em;text-transform:uppercase}
.brand b{color:var(--red2)}
.main-nav ul{display:flex;list-style:none;margin:0;padding:0;gap:7px}
.main-nav a{
 display:block;padding:9px 13px;font-size:.73rem;font-weight:900;
 letter-spacing:.12em;text-transform:uppercase;transform:skew(-9deg);
 border:1px solid transparent;
}
.main-nav a:hover,.main-nav .current-menu-item a{background:var(--red);border-color:#d44a51;box-shadow:5px 5px 0 rgba(23,58,84,.8)}
.menu-toggle{display:none;background:transparent;color:var(--white);border:1px solid var(--line);padding:9px 12px}

/* Hero */
.hero{min-height:calc(100vh - 74px);display:grid;align-items:center;position:relative;overflow:hidden}
.hero:before{
 content:"";position:absolute;inset:0;z-index:-2;
 background:
  linear-gradient(120deg,rgba(148,27,36,.34),transparent 35%),
  linear-gradient(300deg,rgba(23,58,84,.28),transparent 46%);
}
.hero:after{
 content:"";position:absolute;left:-5%;right:-5%;bottom:9%;height:2px;
 background:linear-gradient(90deg,transparent,var(--red2),var(--white),var(--blue2),transparent);
 opacity:.35;transform:rotate(-3deg);
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;padding:70px 0}
.kicker{font-size:.72rem;letter-spacing:.24em;font-weight:1000;text-transform:uppercase;color:#bfc4c4;border-left:5px solid var(--red2);padding-left:13px}
.hero h1{
 font-size:clamp(3.6rem,9vw,8.5rem);line-height:.77;margin:20px 0;
 font-weight:1000;letter-spacing:-.07em;text-transform:uppercase;
 transform:skew(-7deg);text-shadow:8px 9px 0 rgba(148,27,36,.55);
}
.hero h1 .blue{color:#c8d4db;text-shadow:8px 8px 0 rgba(23,58,84,.9)}
.lead{font-size:1.08rem;color:#c0c0bb;max-width:670px}
.motto{
 margin-top:27px;padding:21px 24px;max-width:710px;
 background:linear-gradient(120deg,rgba(148,27,36,.82),rgba(55,13,17,.72));
 border-left:7px solid var(--white);box-shadow:9px 9px 0 rgba(23,58,84,.75),var(--shadow);
 font-size:1.15rem;font-weight:900;
}
.portal-stage{min-height:500px;display:grid;place-items:center;position:relative}
.portal{
 width:min(410px,80vw);aspect-ratio:1;border-radius:50%;
 position:relative;border:10px solid rgba(23,58,84,.9);
 box-shadow:0 0 0 3px rgba(236,233,225,.14),0 0 80px rgba(36,94,130,.2);
 background:
 radial-gradient(circle at 50% 50%,#091014 0 16%,transparent 17%),
 radial-gradient(circle at 50% 50%,transparent 0 35%,rgba(101,125,89,.3) 36% 39%,transparent 40%),
 conic-gradient(from 30deg,rgba(148,27,36,.75),rgba(23,58,84,.7),rgba(101,125,89,.35),rgba(148,27,36,.75));
 animation:spin 28s linear infinite;
}
.portal:before,.portal:after{
 content:"";position:absolute;border-radius:50%;inset:32px;border:2px dashed rgba(236,233,225,.35)
}
.portal:after{inset:76px;border:1px solid rgba(148,27,36,.6);transform:rotate(38deg) scaleX(1.5)}
.portal-core{
 position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
 width:92px;height:92px;border-radius:50%;
 background:radial-gradient(circle at 35% 30%,#e7e3d8,#657d59 15%,#245e82 42%,#080a0d 72%);
 box-shadow:0 0 35px rgba(101,125,89,.6);
}
.portal-label{
 position:absolute;right:3%;bottom:5%;padding:10px 14px;background:#0b0d10;
 border:1px solid var(--line);font-size:.68rem;font-weight:1000;letter-spacing:.16em;text-transform:uppercase
}
@keyframes spin{to{transform:rotate(360deg)}}

/* General */
.section{padding:100px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:35px}
.eyebrow{font-size:.7rem;font-weight:1000;letter-spacing:.22em;text-transform:uppercase;color:#b7bdc0}
h2{
 margin:6px 0 0;font-size:clamp(2.4rem,5vw,4.7rem);line-height:.88;
 text-transform:uppercase;letter-spacing:-.055em;transform:skew(-5deg)
}
h2 span{color:var(--red2)}
.section-intro{max-width:570px;color:var(--gray)}

/* Science */
.science{background:linear-gradient(180deg,transparent,rgba(23,58,84,.08),transparent)}
.science-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:15px}
.science-card{
 min-height:230px;padding:27px;background:linear-gradient(145deg,var(--panel2),#0d0f12);
 border:1px solid var(--line);box-shadow:var(--shadow);position:relative;overflow:hidden
}
.science-card.math{grid-row:span 2;min-height:475px;background:linear-gradient(145deg,#251216,#101216)}
.science-card.physics{background:linear-gradient(145deg,#111b23,#0c0e12)}
.science-card.chem{background:linear-gradient(145deg,#1b1914,#0d1012)}
.science-card.astro{grid-column:2/4;background:linear-gradient(145deg,#0e1721,#080b10)}
.science-card:after{
 content:"";position:absolute;width:150px;height:150px;right:-60px;top:-55px;border-radius:50%;
 border:30px solid rgba(36,94,130,.15)
}
.percent{font-size:.7rem;letter-spacing:.18em;font-weight:1000;color:#c5c5bf}
.science-card h3{font-size:1.9rem;text-transform:uppercase;margin:55px 0 5px;transform:skew(-5deg)}
.science-card p{color:var(--gray);margin:0;max-width:490px}
.formula{position:absolute;bottom:18px;right:20px;font-family:Georgia,serif;color:#c8d3d8;opacity:.58}

/* Portfolio */
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.work{
 min-height:305px;position:relative;overflow:hidden;border:1px solid var(--line);
 background:#0e1115;box-shadow:var(--shadow);display:flex;align-items:end
}
.work-thumb{position:absolute;inset:0;background:
 radial-gradient(circle at 70% 25%,rgba(36,94,130,.4),transparent 24%),
 linear-gradient(140deg,rgba(148,27,36,.72),transparent 55%),
 repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,transparent 2px 8px);
 background-size:cover;background-position:center
}
.work-content{position:relative;width:100%;padding:22px;min-height:145px;background:linear-gradient(0deg,rgba(4,5,7,.98),rgba(4,5,7,.02))}
.work h3{margin:0;text-transform:uppercase;font-size:1.3rem}
.work p{margin:5px 0 0;color:#a9aaa7}
.no-image{display:flex;align-items:center;justify-content:center;color:#777;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase}

/* Education */
.education{background:var(--panel);border-block:1px solid var(--line)}
.timeline{max-width:900px;margin:auto;position:relative}
.timeline:before{content:"";position:absolute;left:18px;top:0;bottom:0;width:2px;background:linear-gradient(var(--red2),var(--blue2))}
.timeline-item{position:relative;padding:0 0 38px 60px}
.dot{position:absolute;left:8px;top:5px;width:22px;height:22px;border:4px solid var(--bg);background:var(--red2);box-shadow:0 0 0 2px var(--white)}
.year{font-weight:1000;letter-spacing:.13em;color:#c7d4da}
.timeline h3{margin:6px 0 0;font-size:1.4rem;text-transform:uppercase}
.timeline p{margin:4px 0 0;color:var(--gray)}

/* Achievements */
.achievements{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.achievement{min-height:205px;padding:25px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
.achievement h3{margin:0 0 10px;text-transform:uppercase;font-size:1.3rem}
.achievement p{margin:0;color:var(--gray)}

/* Contact */
.contact{
 padding:100px 0 60px;
 background:linear-gradient(135deg,rgba(148,27,36,.83),rgba(25,8,11,.96) 43%,rgba(14,32,46,.97));
 border-top:1px solid rgba(255,255,255,.13)
}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px}
.contact h2{font-size:clamp(3rem,7vw,6rem);margin:0}
.contact h2 .blue{color:#c8d4db}
.contact-list{display:grid;gap:12px}
.contact-card{padding:17px 20px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.15);transition:.2s}
.contact-card:hover{transform:translateX(7px);background:rgba(0,0,0,.4)}
.contact-card small{display:block;color:#c2c5c3;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.contact-card strong{word-break:break-word}

.site-footer{background:#050608;border-top:1px solid var(--line);padding:24px 0;color:#8d8e8c;font-size:.8rem}
.footer-inner{display:flex;justify-content:space-between;gap:20px}

/* WordPress content */
.single-wrap{padding:90px 0}
.entry-title{font-size:clamp(2.5rem,6vw,5.2rem);line-height:.9;text-transform:uppercase}
.entry-content{color:#d3d1ca}
.entry-content a{text-decoration:underline}
.aligncenter{margin-inline:auto}

/* Responsive */
@media(max-width:900px){
 .hero-grid,.contact-grid{grid-template-columns:1fr}
 .portal-stage{min-height:350px;order:-1}
 .science-grid{grid-template-columns:1fr 1fr}
 .science-card.math{grid-row:auto;grid-column:1/-1;min-height:330px}
 .science-card.astro{grid-column:auto}
 .portfolio-grid{grid-template-columns:1fr 1fr}
 .achievements{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
 .container{width:min(calc(100% - 28px),var(--max))}
 .menu-toggle{display:block}
 .main-nav{display:none;position:absolute;left:12px;right:12px;top:69px;background:#0b0d10;border:1px solid var(--line);padding:10px}
 .main-nav.open{display:block}
 .main-nav ul{display:grid}
 .main-nav a{padding:13px}
 .hero-grid{padding:55px 0}
 .hero h1{font-size:18vw}
 .portal{width:270px}
 .science-grid,.portfolio-grid,.achievements{grid-template-columns:1fr}
 .science-card.math{grid-column:auto}
 .section{padding:75px 0}
 .section-head{display:block}
 .section-intro{margin-top:18px}
 .footer-inner{display:block}
}