/* Variant C — Cinematic Showcase. Dark, image-first, restrained UI, with a film-title sensibility. */
:root{--black:#080808;--near:#111;--white:#f4f0e7;--grey:#979797;--signal:#ff5a36}
body.variant-cinematic{background:var(--black);color:var(--white);font-family:Arial,Helvetica,sans-serif}.variant-cinematic .site-header{padding:18px 3vw;min-height:72px;background:linear-gradient(#080808e8,#08080899,transparent);border:0;box-shadow:none;backdrop-filter:none}.variant-cinematic .brand-logo{width:38px;height:38px;border-radius:50%;background:#fff;border:0}.variant-cinematic .brand-logo img{filter:grayscale(1) contrast(1.2)}.variant-cinematic .brand strong{font-size:13px;letter-spacing:.06em;text-transform:uppercase}.variant-cinematic .brand small{display:none}.variant-cinematic .site-header nav{gap:22px}.variant-cinematic .site-header nav a{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#cfcfcf;background:none;border:0;padding:0}.variant-cinematic .site-header nav a:hover{color:#fff}
.variant-cinematic main{max-width:none}.variant-cinematic .hero{min-height:100vh;padding:130px 5vw 7vw;display:flex;align-items:flex-end;position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.68) 42%,rgba(0,0,0,.2) 70%,rgba(0,0,0,.75) 100%),linear-gradient(0deg,#080808 0%,transparent 35%),url('assets/projects/FireVR__01.png') center 38%/cover no-repeat}.variant-cinematic .hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 25%,transparent 0 20%,rgba(0,0,0,.18) 65%,rgba(0,0,0,.62) 100%);pointer-events:none}.variant-cinematic .hero>div:first-child{position:relative;z-index:1;max-width:1050px}.variant-cinematic .eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--signal);font-weight:700;margin-bottom:20px}.variant-cinematic .hero h1{font-size:clamp(58px,9vw,145px);line-height:.82;letter-spacing:-.07em;font-weight:700;margin:0;max-width:9.5ch;text-shadow:0 2px 20px rgba(0,0,0,.25)}.variant-cinematic .hero h1 em{font-family:Georgia,serif;font-weight:400;color:var(--white)}.variant-cinematic .hero p:not(.eyebrow){max-width:650px;font-size:clamp(16px,1.45vw,22px);line-height:1.5;color:#d8d4ca;margin:34px 0 30px}.variant-cinematic .button,.variant-cinematic .secondary-button{border-radius:999px;background:var(--white);color:#0b0b0b;border:0;padding:13px 19px;font-size:11px;text-transform:uppercase;letter-spacing:.13em;box-shadow:none}.variant-cinematic .button:hover{background:var(--signal);color:#fff;transform:none}.variant-cinematic .hero-card{position:absolute;z-index:1;right:5vw;bottom:7vw;width:240px;padding:0 0 0 18px;border:0;border-left:1px solid rgba(255,255,255,.5);border-radius:0;background:none;box-shadow:none}.variant-cinematic .hero-card span{font-size:9px;letter-spacing:.2em;color:var(--signal)}.variant-cinematic .hero-card strong{font-size:18px;line-height:1.25;margin-top:8px}
.variant-cinematic .section{max-width:none;padding:9vw 5vw;border:0;background:#080808}.variant-cinematic .section:nth-of-type(2n){background:#0d0d0d}.variant-cinematic .section>h2,.variant-cinematic .section-heading h2{font-size:clamp(44px,6.5vw,100px);line-height:.9;letter-spacing:-.055em;margin:.08em 0 .6em;max-width:13ch}.variant-cinematic .muted{color:#999;max-width:780px;line-height:1.55}.variant-cinematic .card{background:none;border:0;border-radius:0;box-shadow:none}.variant-cinematic .profile-layout{grid-template-columns:1.55fr .55fr;gap:6vw}.variant-cinematic .profile-main{padding:0}.variant-cinematic .profile-intro{grid-template-columns:300px 1fr;gap:4vw}.variant-cinematic .profile-avatar{border-radius:2px;overflow:hidden;filter:grayscale(1);height:max-content}.variant-cinematic .profile-avatar img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}.variant-cinematic .profile-role{color:var(--signal);font-size:10px;letter-spacing:.16em;text-transform:uppercase}.variant-cinematic .profile-intro h3{font-size:clamp(44px,5vw,76px);letter-spacing:-.05em;margin:.15em 0 .6em}.variant-cinematic .profile-intro p{font-size:16px;color:#c4c4c4;line-height:1.72}.variant-cinematic .profile-tags{gap:8px;margin-top:30px}.variant-cinematic .profile-tags span{background:transparent;border:1px solid #444;color:#bbb;border-radius:999px;padding:7px 10px;font-size:10px;letter-spacing:.09em;text-transform:uppercase}.variant-cinematic .profile-side{border-top:1px solid #3a3a3a}.variant-cinematic .profile-fact{padding:18px 0;border-bottom:1px solid #2c2c2c}.variant-cinematic .profile-fact small{color:#777;text-transform:uppercase;letter-spacing:.12em}.variant-cinematic .profile-fact strong{color:#fff;font-size:18px}.variant-cinematic .profile-fact span{color:#8d8d8d}
.variant-cinematic .horizontal-scroll{gap:12px;scroll-snap-type:x mandatory;padding-bottom:8px}.variant-cinematic .project-card,.variant-cinematic .video-card,.variant-cinematic .model-card,.variant-cinematic .audio-card,.variant-cinematic .skill-card,.variant-cinematic .skill-card-v2{background:#111!important;border:0!important;border-radius:2px!important;box-shadow:none!important;overflow:hidden}.variant-cinematic .project-card{min-width:min(78vw,920px)!important;scroll-snap-align:start}.variant-cinematic .project-card img{aspect-ratio:16/8!important;object-fit:cover;filter:saturate(.82) contrast(1.06)}.variant-cinematic .project-card:hover img{filter:saturate(1) contrast(1.03)}.variant-cinematic .audio-card,.variant-cinematic .model-card{border-top:1px solid #292929!important}.variant-cinematic .skills-gallery-v2{gap:10px}.variant-cinematic .static-tool-card{border:0;border-radius:2px;background:#111;box-shadow:none;overflow:hidden}.variant-cinematic .lp-shell{border:1px solid #2a2a2a;border-radius:2px;background:#0e0e0e;box-shadow:none}.variant-cinematic input,.variant-cinematic select,.variant-cinematic textarea{background:#151515;color:#fff;border:1px solid #353535;border-radius:2px!important}.variant-cinematic .lp-tab{border-radius:999px!important}.variant-cinematic footer{background:#050505;border-top:1px solid #222;color:#888;padding:42px 5vw}.variant-cinematic footer button{color:#aaa}
@media(max-width:900px){.variant-cinematic .hero{min-height:92vh;padding-top:130px;background-position:60% center}.variant-cinematic .hero-card{display:none}.variant-cinematic .profile-layout,.variant-cinematic .profile-intro{grid-template-columns:1fr}.variant-cinematic .profile-avatar{max-width:330px}.variant-cinematic .site-header nav{display:none}}

/* Warm cinematic accent pass ------------------------------------------------
   Replaces the legacy green/lime UI accents inside imported content cards
   without touching the content/import logic. */
.variant-cinematic{
  --accent:#ff5a36;
  --accent2:#ff8a5b;
  --accent-2:#ff8a5b;
  --card-strong:#171310;
  --line:rgba(255,224,207,.14);
  --muted:#9f9993;
}
.variant-cinematic .project-card,
.variant-cinematic .video-card,
.variant-cinematic .model-card,
.variant-cinematic .audio-card,
.variant-cinematic .skill-card,
.variant-cinematic .skill-card-v2,
.variant-cinematic .skills-v2-card,
.variant-cinematic .skill-dropdown,
.variant-cinematic .compact-skill-card,
.variant-cinematic .static-tool-card{color:#eee9e2}
.variant-cinematic .skill-category,
.variant-cinematic .profile-role,
.variant-cinematic .profile-fact small,
.variant-cinematic .skills-v2-category,
.variant-cinematic .skills-v2-level span,
.variant-cinematic .skill-chevron,
.variant-cinematic .compact-skill-level span{color:var(--signal)!important}
.variant-cinematic .skill-meter span,
.variant-cinematic .audio-progress-fill,
.variant-cinematic .audio-wave i{background:linear-gradient(90deg,#ff5a36,#ff8a5b)!important}
.variant-cinematic .tool-experience-step.is-reached .tool-experience-dot,
.variant-cinematic .skills-v2-step.is-reached i{background:#ff5a36!important;border-color:#ff5a36!important;box-shadow:0 0 0 4px rgba(255,90,54,.09)!important}
.variant-cinematic .tool-experience-dot,
.variant-cinematic .skills-v2-step i{background:#171310!important}
.variant-cinematic .audio-play,
.variant-cinematic .model-toolbar button.active,
.variant-cinematic .lp-tab.active,
.variant-cinematic .side-switch button.active,
.variant-cinematic .youtube-consent-button{background:#ff5a36!important;color:#130b08!important}
.variant-cinematic .audio-play:hover{background:#ff8a5b!important}
.variant-cinematic .audio-loop:hover,
.variant-cinematic .audio-loop.active,
.variant-cinematic .audio-card.is-playing{border-color:rgba(255,90,54,.42)!important}
.variant-cinematic .audio-loop.active{background:#24130e!important;color:#ff7a55!important;box-shadow:0 0 0 1px rgba(255,90,54,.12) inset!important}
.variant-cinematic .model-gallery,
.variant-cinematic .audio-gallery{scrollbar-color:#9b4029 #111!important}
.variant-cinematic .model-gallery::-webkit-scrollbar-thumb,
.variant-cinematic .audio-gallery::-webkit-scrollbar-thumb{background:#9b4029!important}
.variant-cinematic .model-gallery::-webkit-scrollbar-thumb:hover,
.variant-cinematic .audio-gallery::-webkit-scrollbar-thumb:hover{background:#ff5a36!important}
.variant-cinematic code{color:#ff9a7d}
.variant-cinematic .model-canvas-wrap,
.variant-cinematic .plate-preview,
.variant-cinematic .static-tool-media,
.variant-cinematic .project-image-button,
.variant-cinematic .project-video{background:#0d0c0b!important}
.variant-cinematic .youtube-consent-placeholder{background:radial-gradient(circle at 50% 20%,rgba(255,90,54,.10),transparent 48%),#0d0b0a!important}
.variant-cinematic .youtube-consent-mark{border-color:rgba(255,90,54,.3)!important;background:rgba(255,90,54,.08)!important;color:#ff6b47!important}
.variant-cinematic .youtube-privacy-link:hover{color:#ff6b47!important}
.variant-cinematic .project-placeholder,
.variant-cinematic .audio-placeholder,
.variant-cinematic .model-placeholder{background:linear-gradient(135deg,#12100f,#18120f)!important;color:#9f9993!important;border-color:#2b2420!important}


/* Expandable profile introduction ----------------------------------------- */
.variant-cinematic .profile-copy[hidden]{display:none!important}
.variant-cinematic .profile-copy-enter{animation:profile-copy-in .28s ease both}
.variant-cinematic .profile-toggle{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
  padding:0 0 5px;
  border:0;
  border-bottom:1px solid rgba(255,90,54,.42);
  border-radius:0;
  background:transparent;
  color:var(--signal);
  font:700 10px/1.4 Arial,Helvetica,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease,gap .2s ease;
}
.variant-cinematic .profile-toggle::after{content:"↘";font-size:13px;line-height:1;font-weight:400}
.variant-cinematic .profile-copy-long .profile-toggle::after{content:"↖"}
.variant-cinematic .profile-toggle:hover,.variant-cinematic .profile-toggle:focus-visible{color:#ff8a5b;border-color:#ff8a5b;gap:14px}
.variant-cinematic .profile-toggle:focus-visible{outline:1px solid rgba(255,138,91,.55);outline-offset:5px}
@keyframes profile-copy-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.variant-cinematic .profile-copy-enter{animation:none}.variant-cinematic .profile-toggle{transition:none}}


/* Profile CV timeline ------------------------------------------------------- */
.variant-cinematic .profile-side.profile-timeline{
  position:relative;
  border-top:0;
  padding-left:28px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.variant-cinematic .profile-side.profile-timeline::before{
  content:"";
  position:absolute;
  left:5px;
  top:18px;
  bottom:18px;
  width:1px;
  background:linear-gradient(to bottom,var(--signal,#ff5a36),rgba(255,90,54,.16));
}
.variant-cinematic .profile-timeline .profile-fact{
  position:relative;
  padding:17px 18px 18px;
  border:1px solid rgba(255,255,255,.075);
  background:rgba(255,255,255,.025);
}
.variant-cinematic .profile-timeline .profile-fact::before{
  content:"";
  position:absolute;
  left:-28px;
  top:24px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#0a0a0a;
  border:2px solid var(--signal,#ff5a36);
  box-shadow:0 0 0 4px #080808;
}
.variant-cinematic .profile-timeline .profile-fact small{
  display:block;
  margin-bottom:7px;
  color:var(--signal,#ff5a36);
  font-size:10px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.variant-cinematic .profile-timeline .profile-fact strong{
  display:block;
  color:#fff;
  font-size:17px;
  line-height:1.25;
  letter-spacing:-.015em;
}
.variant-cinematic .profile-timeline .profile-fact span{
  display:block;
  margin-top:8px;
  color:#99938e;
  font-size:12px;
  line-height:1.55;
}
.variant-cinematic .profile-timeline .profile-fact-primary{
  margin:-5px -7px 2px -7px;
  padding:22px 24px 23px;
  background:linear-gradient(135deg,rgba(255,90,54,.105),rgba(255,255,255,.025) 62%);
  border-color:rgba(255,90,54,.25);
}
.variant-cinematic .profile-timeline .profile-fact-primary::before{
  left:-22px;
  top:29px;
  width:11px;
  height:11px;
  background:var(--signal,#ff5a36);
}
.variant-cinematic .profile-timeline .profile-fact-primary strong{
  font-size:20px;
}
.variant-cinematic .profile-timeline .profile-fact-primary span{
  color:#aaa39d;
}
@media(max-width:900px){
  .variant-cinematic .profile-side.profile-timeline{
    margin-top:34px;
    padding-left:26px;
  }
  .variant-cinematic .profile-timeline .profile-fact-primary{
    margin:0;
  }
  .variant-cinematic .profile-timeline .profile-fact-primary::before{
    left:-26px;
  }
}


/* Profile portrait hover ---------------------------------------------------- */
.variant-cinematic .profile-avatar{
  filter:grayscale(1);
  transition:filter .38s ease;
}
.variant-cinematic .profile-avatar:hover{
  filter:grayscale(0);
}
@media (prefers-reduced-motion: reduce){
  .variant-cinematic .profile-avatar{transition:none}
}