/* ============================================================================
   premium-3d.css — premium 3D visuals layered on top of the original theme.
   1) Hero: a tilted glass "code window" scene with floating brand chips.
   2) About: portrait in an elegant tilted 3D frame with floating badges.
   3) Fixed sidebar GitHub button centering fix.
   Theme tokens: --color-primary #247ba0, --color-secondary #0c4b75.
   Reduced-motion aware + responsive.
   ============================================================================ */

/* ==========================================================================
   1) HERO 3D SCENE
   ========================================================================== */
.hero-3d {
    position: relative;
    min-height: 540px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-3d__stage {
    position: relative;
    width: 440px;
    max-width: 100%;
    height: 480px;
    perspective: 1600px;
    transform-style: preserve-3d;
}

/* Ambient gradient glow + dotted grid */
.hero-3d__glow {
    position: absolute;
    inset: 6% 8%;
    background: radial-gradient(circle at 55% 42%, rgba(36,123,160,.5), rgba(12,75,117,.22) 46%, transparent 72%);
    filter: blur(26px);
    border-radius: 50%;
    z-index: 0;
    animation: heroGlow 9s ease-in-out infinite;
}
.hero-3d__grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(36,123,160,.18) 1.5px, transparent 1.6px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(circle at 55% 45%, #000 35%, transparent 72%);
    mask-image: radial-gradient(circle at 55% 45%, #000 35%, transparent 72%);
    z-index: 0;
    opacity: .55;
}

/* Cards share tilt via 3D transforms directly (no reliance on flattening) */
.hero-3d__card {
    position: absolute;
    border-radius: 20px;
    transform-style: preserve-3d;
}
/* Back panel = depth */
.hero-3d__card--back {
    top: 58%; left: 52%;
    width: 300px; height: 250px;
    transform: translate(-50%,-50%) rotateY(-22deg) rotateX(9deg) translateZ(-60px);
    background: linear-gradient(135deg, rgba(36,123,160,.16), rgba(12,75,117,.10));
    border: 1px solid rgba(36,123,160,.18);
    z-index: 1;
}
/* Main glass code window */
.hero-3d__card--main {
    top: 50%; left: 50%;
    width: 330px;
    transform: translate(-50%,-50%) rotateY(-22deg) rotateX(9deg);
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 45px 90px -22px rgba(12,75,117,.5), 0 10px 26px rgba(12,75,117,.16);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    overflow: hidden;
    z-index: 3;
    animation: heroFloat 6.5s ease-in-out infinite;
}
.h3d-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 13px 16px;
    background: linear-gradient(90deg, var(--color-secondary,#0c4b75), var(--color-primary,#247ba0));
}
.h3d-bar i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; opacity: .95; }
.h3d-bar i:nth-child(1){ background:#ff5f57 } .h3d-bar i:nth-child(2){ background:#febc2e } .h3d-bar i:nth-child(3){ background:#28c840 }
.h3d-bar span { margin-left:auto; font-size:11px; font-weight:700; color:rgba(255,255,255,.9); letter-spacing:.04em; font-family:'JetBrains Mono',monospace; }
.h3d-code { padding: 20px 18px 22px; }
.h3d-line { height: 9px; border-radius: 6px; margin-bottom: 13px; }
.h3d-line.k { width: 42%; background: linear-gradient(90deg,var(--color-primary,#247ba0),#6bb6d6); }        /* keyword  */
.h3d-line.s { width: 78%; background:#dbe7ee; }                                                              /* string   */
.h3d-line.v { width: 60%; background: linear-gradient(90deg,var(--color-secondary,#0c4b75),var(--color-primary,#247ba0)); }
.h3d-line.c { width: 88%; background:#e7eef2; }
.h3d-line.m { width: 50%; background:#dbe7ee; }
.h3d-line.i { margin-left: 24px; }
.h3d-line.i2{ margin-left: 44px; }

/* Floating brand chips */
.hero-3d__chip {
    position: absolute;
    width: 62px; height: 62px;
    border-radius: 18px;
    display: grid; place-items: center;
    font-size: 25px; color:#fff;
    box-shadow: 0 20px 36px -12px rgba(12,75,117,.55);
    z-index: 4;
    animation: chipFloat 5s ease-in-out infinite;
}
.hero-3d__chip::after {   /* subtle top gloss */
    content:""; position:absolute; inset:0; border-radius:inherit;
    background: linear-gradient(160deg, rgba(255,255,255,.35), transparent 45%);
}
.hero-3d__chip.c1 { top: 4%;  left: 6%;  background: linear-gradient(135deg,#1f6f93,#2c86b8); animation-delay:0s; }
.hero-3d__chip.c2 { top: -2%; right: 8%; background: linear-gradient(135deg,#5a8f2f,#7bb143); animation-delay:.7s; }
.hero-3d__chip.c3 { bottom: 12%; left: 1%; background: linear-gradient(135deg,#0c4b75,#247ba0); animation-delay:1.5s; }
.hero-3d__chip.c4 { bottom: 4%; right: 9%; background: linear-gradient(135deg,#6d3bd1,#9b6be6); animation-delay:2.1s; }

/* Stat badge */
.hero-3d__stat {
    position: absolute;
    top: 40%; right: -4%;
    background:#fff; border-radius: 15px;
    padding: 12px 18px; text-align:center;
    box-shadow: 0 18px 36px -10px rgba(12,75,117,.4);
    z-index: 5;
    animation: chipFloat 6.5s ease-in-out infinite; animation-delay:1.1s;
}
.hero-3d__stat b { display:block; font-size:24px; color:var(--color-primary,#247ba0); line-height:1; font-weight:800; }
.hero-3d__stat span { font-size:10px; font-weight:700; color:#90a4b0; text-transform:uppercase; letter-spacing:.06em; }

/* Floor reflection to ground the scene */
.hero-3d__floor {
    position: absolute;
    left: 50%; bottom: 4%;
    width: 260px; height: 40px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(12,75,117,.28), transparent 70%);
    filter: blur(8px);
    z-index: 0;
}

@keyframes heroFloat {
    0%,100% { transform: translate(-50%,-50%) rotateY(-22deg) rotateX(9deg) translateY(0); }
    50%     { transform: translate(-50%,-50%) rotateY(-18deg) rotateX(7deg) translateY(-14px); }
}
@keyframes chipFloat { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-15px) } }
@keyframes heroGlow  { 0%,100%{ transform:scale(1); opacity:.85 } 50%{ transform:scale(1.09); opacity:1 } }

/* ==========================================================================
   2) ABOUT — minimalistic 3D frame (clean & compact)
   ========================================================================== */
/* Neutralise the theme's big background blob + heavy spacing for a clean look */
.about-style-six .thumb::after { display: none !important; }
.about-style-six .thumb { margin-bottom: 40px; }

.about-3d {
    position: relative;
    max-width: 330px;
    margin: 0 auto;
    perspective: 1200px;
}
.about-3d__card {
    position: relative;
    z-index: 2;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(12,75,117,.08);
    box-shadow: 0 30px 60px -26px rgba(12,75,117,.42);
    transform: rotateY(-7deg) rotateX(3deg);
    transform-style: preserve-3d;
    transition: transform .55s ease, box-shadow .55s ease;
    animation: aboutFloat 7s ease-in-out infinite;
}
.about-3d__card img { display: block; width: 100%; height: auto; }
.about-3d:hover .about-3d__card {
    transform: rotateY(0) rotateX(0);
    box-shadow: 0 42px 74px -28px rgba(12,75,117,.48);
    animation-play-state: paused;
}
/* Subtle depth layer behind = minimalistic 3D */
.about-3d__depth {
    position: absolute;
    inset: 15px -13px -15px 15px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(36,123,160,.16), rgba(12,75,117,.09));
    z-index: 1;
}
/* One small, clean floating pill */
.about-3d__pill {
    position: absolute;
    left: -12px; bottom: 24px;
    z-index: 5;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 26px -8px rgba(12,75,117,.3);
    display: flex; align-items: center; gap: 9px;
    padding: 9px 14px;
    animation: chipFloat 6s ease-in-out infinite;
}
.about-3d__pill .ico {
    width: 30px; height: 30px; border-radius: 8px;
    display: grid; place-items: center; color: #fff; font-size: 14px;
    background: var(--bg-gradient, linear-gradient(135deg,#0c4b75,#247ba0));
}
.about-3d__pill b { font-size: 15px; color: var(--color-heading,#202942); line-height: 1; }
.about-3d__pill span { font-size: 10px; color: #90a4b0; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

@keyframes aboutFloat {
    0%,100% { transform: rotateY(-7deg) rotateX(3deg) translateY(0); }
    50%     { transform: rotateY(-5deg) rotateX(2deg) translateY(-8px); }
}

/* ==========================================================================
   3) FIXED SIDEBAR — clean, perfectly centered GitHub button (self-contained,
      does NOT reuse .video-play-button so the theme's top:19px offset can't apply)
   ========================================================================== */
.header-fixed .video .gh-fixed {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--color-primary, #247ba0);
    color: #fff;
    transition: .3s ease;
}
.header-fixed .video .gh-fixed i {
    position: static !important;
    top: auto !important;
    left: auto !important;
    font-size: 24px;
    line-height: 1;
    color: #fff;
}
.header-fixed .video .gh-fixed:hover {
    background: var(--color-secondary, #0c4b75);
    transform: translateY(-3px);
    box-shadow: 0 10px 22px -6px rgba(12,75,117,.5);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991px) {
    .hero-3d { min-height: 440px; margin-top: 40px; }
    .hero-3d__stage { transform: scale(.92); }
    .about-3d { max-width: 300px; }
}
@media (max-width: 575px) {
    .hero-3d__stage { transform: scale(.74); }
    .about-3d__card { transform: rotateY(-5deg) rotateX(2deg); }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .hero-3d__card--main, .hero-3d__chip, .hero-3d__stat, .hero-3d__glow,
    .about-3d__card, .about-3d__pill { animation: none !important; }
}