/* Rion Creates — Portfolio Stylesheet */
:root{
    --surface:#0e141a;
    --surface-low:#161c23;
    --surface-lowest:#090f15;
    --surface-card:#1a2027;
    --surface-card-high:#252b31;
    --on-surface:#dde3ec;
    --on-surface-variant:#a7aeb8;
    --outline:#8f9095;
    --outline-variant:#2c3138;
    --accent:#ff5a3c;
    --accent-dim:#b33d26;
    --accent-ink:#2a0b04;
    --primary:#c3c6cf;

    --font-display:'Big Shoulders Display', sans-serif;
    --font-body:'IBM Plex Sans', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;

    --section-gap: clamp(64px, 10vw, 128px);
    --container-max: 1280px;
  }

  *{ box-sizing:border-box; }

  html{ scroll-behavior:smooth; }

  body{
    background:var(--surface);
    color:var(--on-surface);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  ::selection{ background:var(--accent); color:var(--accent-ink); }

  a{ color:inherit; text-decoration:none; }

  .container-max{
    max-width:var(--container-max);
    margin-inline:auto;
    padding-inline:1rem;
  }
  @media (min-width:768px){
    .container-max{ padding-inline:1.5rem; }
  }

  section{ padding-block:var(--section-gap); }

  h1,h2,h3,.font-display{ font-family:var(--font-display); letter-spacing:0.01em; text-transform:uppercase; }
  .font-mono{ font-family:var(--font-mono); }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:.75rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
  }

  .section-heading{
    font-size:clamp(2rem, 1.6rem + 2vw, 3.25rem);
    font-weight:800;
    display:flex;
    align-items:center;
    gap:1rem;
    margin-bottom:2.5rem;
  }
  .section-heading .idx{
    color:var(--accent);
    font-family:var(--font-mono);
    font-size:1rem;
    font-weight:400;
  }

  .text-muted-custom{ color:var(--on-surface-variant); }

  /* Buttons */
  .btn-ghost{
    font-family:var(--font-mono);
    font-size:.85rem;
    border:1px solid var(--on-surface);
    color:var(--on-surface);
    background:transparent;
    padding:.75rem 1.5rem;
    border-radius:0;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    transition:all .25s ease;
  }
  .btn-ghost:hover{
    background:var(--on-surface);
    color:var(--surface);
  }
  .btn-text{
    font-family:var(--font-mono);
    font-size:.85rem;
    color:var(--on-surface-variant);
    border-bottom:1px solid transparent;
    padding-bottom:2px;
    transition:all .2s ease;
  }
  .btn-text:hover{
    color:var(--accent);
    border-color:var(--accent);
  }

  /* Navbar */
  .navbar-custom{
    position:fixed;
    inset:0 0 auto 0;
    z-index:1000;
    background:rgba(14,20,26,.85);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--outline-variant);
  }
  .navbar-custom .brand{
    width: 150px;
    height: auto;
    font-family:var(--font-display);
    font-weight:700;
    font-size:1.25rem;
    color:var(--on-surface);
    display:flex;
    align-items:center;
    gap:.5rem;
  }
  .navbar-custom .brand img{
    width: 150px;
    height: auto;
  }
  .navbar-custom .brand .dot{ color:var(--accent); }
  .nav-link-custom{
    font-family:var(--font-mono);
    font-size:.85rem;
    color:var(--on-surface-variant);
    padding:.5rem 0;
    transition:color .2s ease;
  }
  .nav-link-custom:hover, .nav-link-custom.active{
    color:var(--accent);
  }
  .navbar-toggler-custom{
    border:1px solid var(--outline-variant);
    background:transparent;
    padding:.4rem .6rem;
    color:var(--on-surface);
    line-height:1;
  }

  /* Hero */
  .hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    padding-top:6rem;
    position:relative;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at 70% 30%, rgba(255,90,60,.12), transparent 60%);
    pointer-events:none;
  }
  .hero-title{
    font-size:clamp(3rem, 2rem + 6vw, 5.5rem);
    font-weight:800;
    line-height:.98;
    margin-bottom:1.25rem;
  }
  .hero-title .dot{ color:var(--accent); }
  .hero-sub{
    font-size:clamp(1.1rem, 1rem + .6vw, 1.5rem);
    color:var(--on-surface-variant);
    font-weight:500;
    max-width:32rem;
    margin-bottom:2rem;
  }
  .hero-frame{
    position:relative;
  }
  .hero-frame::before{
    content:"";
    position:absolute;
    inset:0;
    border:1px solid var(--outline-variant);
    transform:translate(14px,14px);
    transition:transform .3s ease;
    z-index:0;
  }
  .hero-frame:hover::before{ transform:translate(8px,8px); }
  .hero-frame img{
    position:relative;
    z-index:1;
    width:100%;
    height:auto;
    display:block;
    border:1px solid var(--outline-variant);
    filter:grayscale(1);
    transition:filter .5s ease;
  }
  .hero-frame:hover img{ filter:grayscale(0); }

  /* About */
  .about-section{ background:var(--surface-low); border-top:1px solid var(--outline-variant); }
  .about-img-wrap{ position:relative; }
  .about-img-wrap::before{
    content:"";
    position:absolute; inset:0;
    border:1px solid var(--outline-variant);
    transform:translate(14px,14px);
    z-index:0;
    transition:transform .3s ease;
  }
  .about-img-wrap:hover::before{ transform:translate(8px,8px); }
  .about-img-wrap img{
    position:relative; z-index:1;
    width:100%; height:auto; display:block;
    border:1px solid var(--outline-variant);
    filter:grayscale(1);
    transition:filter .5s ease;
  }
  .about-img-wrap:hover img{ filter:grayscale(0); }

  .about-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
    border-top:1px solid var(--outline-variant);
    padding-top:1.5rem;
    margin-top:1.5rem;
  }
  .about-meta .label{
    font-family:var(--font-mono);
    font-size:.7rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--on-surface-variant);
    margin-bottom:.35rem;
  }
  .about-meta .value{ font-family:var(--font-mono); font-size:.9rem; }

  /* Skills */
  .skills-header{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:baseline;
    gap:1rem;
    border-bottom:1px solid var(--outline-variant);
    padding-bottom:1.5rem;
    margin-bottom:2.5rem;
  }
  .skill-group-title{
    font-family:var(--font-mono);
    font-size:.75rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--accent);
    border-bottom:1px solid var(--outline-variant);
    padding-bottom:.6rem;
    margin-bottom:1.25rem;
  }
  .skill-item{
    display:flex;
    align-items:center;
    gap:.6rem;
    font-family:var(--font-mono);
    font-size:.9rem;
    padding:.4rem 0;
  }
  .skill-item i{ color:var(--outline); font-size:1.05rem; }

  /* Portfolio */
  .portfolio-section{ background:var(--surface-low); border-top:1px solid var(--outline-variant); }
  .project{
    margin-bottom:5rem;
  }
  .project:last-child{ margin-bottom:0; }
  .project-media{ position:relative; overflow:hidden; }
  .project-media::before{
    content:"";
    position:absolute; inset:0;
    background:rgba(255,90,60,.14);
    opacity:0;
    transition:opacity .3s ease;
    z-index:1;
    mix-blend-mode:overlay;
  }
  .project:hover .project-media::before{ opacity:1; }
  .project-media img{
    width:100%; height:auto; display:block;
    border:1px solid var(--outline-variant);
    filter:grayscale(1);
    transition:filter .5s ease;
    box-shadow:0 20px 40px -20px rgba(0,0,0,.6);
  }
  .project:hover .project-media img{ filter:grayscale(0); }
  .project-tag{ font-family:var(--font-mono); font-size:.85rem; color:var(--accent); margin-bottom:.5rem; }
  .project-title{
    font-size:clamp(1.6rem, 1.35rem + 1.2vw, 2.35rem);
    font-weight:700;
    margin-bottom:1rem;
    transition:color .2s ease;
  }
  .project-title:hover{ color:var(--accent); cursor:pointer; }
  .project-desc{
    background:var(--surface-card);
    border:1px solid var(--outline-variant);
    padding:1.25rem;
    color:var(--on-surface-variant);
    margin-bottom:1.25rem;
    box-shadow:0 20px 40px -25px rgba(0,0,0,.7);
  }
  .project-stack{
    font-family:var(--font-mono);
    font-size:.85rem;
    color:var(--on-surface-variant);
    display:flex;
    flex-wrap:wrap;
    gap:.4rem 1rem;
    margin-bottom:1.5rem;
  }

  /* alternate overlap only on large screens to avoid mobile overflow */
  @media (min-width:992px){
    /* .project-desc.pull-left{ margin-right:-3rem; }
    .project-desc.pull-right{ margin-left:-3rem; } */
  }

  /* Divider */
  .divider-section{
    height:22rem;
    position:relative;
    overflow:hidden;
    border-top:1px solid var(--outline-variant);
    border-bottom:1px solid var(--outline-variant);
  }
  .divider-section img{
    width:100%; height:100%; object-fit:cover;
    filter:grayscale(1); opacity:.35;
  }
  .divider-overlay{
    position:absolute; inset:0;
    background:rgba(14,20,26,.5);
    display:flex; align-items:center; justify-content:center;
    text-align:center;
  }
  .divider-overlay p{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(2rem, 1.3rem + 4.5vw, 4.25rem);
    text-transform:uppercase;
    letter-spacing:.06em;
    color:rgba(255,255,255,.18);
    line-height:1.1;
    margin:0;
    padding-inline:1rem;
  }

  /* Contact */
  .contact-btn{ font-size:1.05rem; padding:1rem 2rem; }
  .contact-links{
    display:grid;
    grid-template-columns:repeat(1,1fr);
    gap:2rem;
    border-top:1px solid var(--outline-variant);
    padding-top:3rem;
    margin-top:3rem;
  }
  @media (min-width:768px){
    .contact-links{ grid-template-columns:repeat(3,1fr); }
  }
  .contact-link{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.75rem;
    transition:color .2s ease;
  }
  .contact-link:hover{ color:var(--accent); }
  .contact-icon{
    width:3rem; height:3rem;
    border:1px solid var(--outline-variant);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:border-color .2s ease;
    font-size:1.2rem;
  }
  .contact-link:hover .contact-icon{ border-color:var(--accent); }
  .contact-link .label{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-surface-variant); }
  .contact-link .value{ font-family:var(--font-mono); font-size:.9rem; }

  /* Footer */
  footer{
    background:var(--surface-lowest);
    border-top:1px solid var(--outline-variant);
    padding-block:2rem;
  }
  footer .footer-links a{
    font-family:var(--font-mono);
    font-size:.85rem;
    color:var(--on-surface-variant);
    margin-inline-start:1.25rem;
    transition:color .2s ease;
  }
  footer .footer-links a:hover{ color:var(--accent); }
  footer p{ font-family:var(--font-mono); font-size:.85rem; margin:0; color:var(--on-surface-variant); }

  /* Reveal on scroll */
  .reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .6s ease, transform .6s ease;
  }
  .reveal.in-view{ opacity:1; transform:none; }

  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    html{ scroll-behavior:auto; }
  }

  /* Focus visibility */
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
  }