/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* body always scrollable - desktop has plenty of room;
   on mobile this lets you scroll just like in "desktop mode" */
body { background: #000; font-family: "Josefin Sans", sans-serif; overflow: auto; }

#shader-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; width: 100%; height: 100%; }

/* ============================================================
   LAYOUT
   ============================================================ */
.main-body-container {
    width: 100%; min-height: 100vh;
    display: flex; justify-content: center; align-items: center;
    padding: 20px;
    /* Minimum width so the layout never collapses -
       on mobile this produces horizontal scroll identical to desktop mode */
    min-width: 720px;
}

.split-view-card {
    width: 90vw; max-width: 1500px; min-width: 680px;
    height: 85vh; max-height: 1000px; min-height: 600px;
    border-radius: 20px;
    display: flex; overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 80px rgba(80,11,86,.2);
    will-change: transform, opacity;
    opacity: 0; transform: translateY(40px);
    animation: fadeSlideUp 1.2s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes fadeSlideUp { to { opacity:1; transform:translateY(0); } }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar-info {
    flex: 0 0 auto; width: 40%;
    position: relative; overflow: hidden;
    /* Own compositing layer prevents animated content from "leaking" through */
    transform: translateZ(0);
    background: linear-gradient(135deg, #ba9dc4 0%, #faa969 100%);
    transition: width .45s cubic-bezier(.4,0,.2,1);
}

.sidebar-info.is-inner { width: 20%; }
.sidebar-info.is-about { width: 50%; }

/* Stacked sidebar panels */
.sidebar-panel {
    position: absolute; inset: 0;
    padding: 2vh 1.5vw;
    display: flex; flex-direction: column;
    align-items: center; justify-content: space-evenly;
    overflow: hidden;
    opacity: 1; transform: translateX(0);
    will-change: opacity, transform;
    transition: opacity .42s ease, transform .42s ease;
}

.sidebar-panel.panel-out-left  { opacity:0; pointer-events:none; transform:translateX(-28px); }
.sidebar-panel.panel-out-right { opacity:0; pointer-events:none; transform:translateX(28px); }

/* About: background image - fade only, no slide to avoid the lateral cut */
#panel-about-nav {
    background: url('../img/sumire.jpg') center top / cover no-repeat;
    justify-content: flex-end;
    padding-bottom: clamp(20px,3vh,36px);
    transition: opacity .42s ease;
}

#panel-about-nav.panel-out-right,
#panel-about-nav.panel-out-left  { transform: none; }

#panel-about-nav::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 35%, rgba(0,0,0,.65) 100%);
    pointer-events: none;
}

#panel-about-nav .back-btn { position: relative; z-index: 1; }

/* Common elements */
.top-section, .middle-section {
    display: flex; flex-direction: column; align-items: center; width: 100%;
}

.avatar-container {
    width: 88%; max-height: min(320px,44vh);
    flex-shrink: 1; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 6px;
    transition: transform .3s cubic-bezier(.175,.885,.32,1.275);
}

.avatar-container img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain; display: block;
}

.avatar-container:hover { transform: translateY(-8px) scale(1.08); }

.artist-name {
    color:#fff; font-size:clamp(1.3rem,2vw,2.4rem);
    font-weight:700; text-transform:uppercase; letter-spacing:3px;
    text-align:center; margin-bottom:4px;
}

#panel-commissions-nav .artist-name {
    font-size:clamp(.95rem,1.4vw,1.6rem);
    letter-spacing:1.5px;
}

.artist-role {
    color:#fff; font-size:clamp(.7rem,.88vw,.92rem);
    text-align:center; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:8px;
}

.title-deco { color:rgba(255,255,255,.6); font-size:.8rem; letter-spacing:4px; margin-bottom:2px; }

.sidebar-sub {
    color:rgba(255,255,255,.75); font-size:clamp(.65rem,.8vw,.82rem);
    text-transform:uppercase; letter-spacing:1.5px; text-align:center; margin-bottom:8px;
}

.open-badge {
    background:#55c766; color:#fff; font-family:"DM Sans",sans-serif;
    font-weight:700; font-size:.7rem; letter-spacing:2px; text-transform:uppercase;
    padding:5px 16px; border-radius:20px; margin-bottom:4px;
}

.social-icons { display:flex; gap:clamp(12px,1.8vw,22px); margin-bottom:8px; }

.social-icons a { display:inline-block; transition:transform .3s cubic-bezier(.175,.885,.32,1.275); }
.social-icons a i { font-size:clamp(20px,1.8vw,28px); color:#fff; transition:color .3s; }
.social-icons a:hover { transform:translateY(-8px) scale(1.12); }
.social-icons a:hover i { color:#e37721; }

/* Menu / filters */
.main-menu { width:100%; display:flex; justify-content:center; }

.main-menu ul {
    list-style:none; width:100%;
    max-width:clamp(200px,21vw,340px);
    display:flex; flex-direction:column; gap:clamp(7px,1.3vh,14px);
}

.menu-btn {
    text-decoration:none; background:#fff; color:#e37721;
    font-family:"Josefin Sans",sans-serif; font-weight:600;
    font-size:clamp(.72rem,1.05vw,1rem);
    text-align:center; text-transform:lowercase; letter-spacing:.4px;
    border-radius:30px; padding:clamp(8px,1.2vh,13px) 16px;
    width:100%; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .28s, color .28s, transform .28s, box-shadow .28s;
}

.menu-btn:hover { background:#cba4cf; color:#fff; transform:scale(1.05) rotate(3deg); box-shadow:0 5px 15px rgba(0,0,0,.3); }

.menu-btn-accent { background:#e37721; color:#fff; }
.menu-btn-accent:hover { background:#c45e0e; color:#fff; }

.btn-icon { font-size:clamp(14px,1.3vw,22px); margin-right:11px; }

/* Portfolio filters - centered */
.filter-btn {
    background:rgba(255,255,255,.92); border:2px solid transparent;
    padding:clamp(8px,1.2vh,13px) 14px; border-radius:50px;
    font-family:"DM Sans",sans-serif; font-weight:700; color:#9a6aaa;
    cursor:pointer; width:100%; font-size:clamp(.68rem,.9vw,.95rem);
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:background .28s, color .28s, border-color .28s, transform .2s;
}

.filter-btn i { font-size:clamp(13px,1.1vw,17px); }

.filter-btn.active { background:#fff; color:#e37721; border-color:rgba(255,255,255,.5); box-shadow:0 3px 10px rgba(0,0,0,.15); }
.filter-btn:hover:not(.active) { background:rgba(255,255,255,.7); color:#ba9dc4; transform:scale(1.03); }

/* Back button */
.back-btn {
    display:flex; align-items:center; justify-content:center; gap:9px;
    background:#fff; color:#e37721;
    font-family:"Josefin Sans",sans-serif; font-weight:700;
    font-size:clamp(.78rem,1.05vw,1rem); text-transform:lowercase;
    letter-spacing:.4px; text-decoration:none; border:none; cursor:pointer;
    padding:clamp(11px,1.5vh,16px) 24px; border-radius:30px;
    width:100%; max-width:clamp(180px,19vw,300px);
    box-shadow:0 5px 16px rgba(0,0,0,.22), 0 0 0 3px rgba(255,255,255,.35);
    transition:background .28s, color .28s, transform .28s, box-shadow .28s;
}

.back-btn:hover { background:#cba4cf; color:#fff; transform:scale(1.07); box-shadow:0 8px 22px rgba(0,0,0,.3), 0 0 0 3px rgba(255,255,255,.5); }

/* ============================================================
   RIGHT PANEL
   ============================================================ */
.right-panel {
    flex:1; position:relative; overflow:hidden;
    background: rgba(12, 5, 8, 0.55);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

.view-panel { position:absolute; inset:0; opacity:1; transition:opacity .55s ease; }
.view-panel.panel-hidden { opacity:0; pointer-events:none; }

#view-home { background:transparent; }
#view-home img { width:100%; height:100%; object-fit:cover; }

#view-gallery, #view-commissions, #view-about {
    overflow-y:auto; overflow-x:hidden; background:transparent;
}

/* ============================================================
   MASONRY GRID
   We use grid-auto-rows: 5px with row-gap: 0.
   visual gap = margin-bottom on each item.
   span = ceil((imgHeight + margin) / 5)
   Much more stable than 1px: rounding error is <=4px.
   ============================================================ */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 5px;
    row-gap: 0;
    column-gap: 12px;
    padding: 20px;
    align-items: start;
}

@media (max-width: 1200px) { .portfolio-grid { grid-template-columns: repeat(2,1fr); } }

.gallery-item {
    position: relative;
    border-radius: 10px; cursor: pointer;
    border: 2px solid transparent; overflow: hidden;
    display: block; width: 100%;
    /* visual gap between rows */
    margin-bottom: 12px;
    opacity: 0; transform: translateY(16px) scale(.96);
    transition: opacity .42s ease, transform .42s ease, border-color .25s ease;
    will-change: opacity, transform;
    /* LQIP background set inline by JS - covers the item while loading */
    background-color: rgba(255,255,255,.04);
    background-size: cover;
    background-position: center;
}

.gallery-item.visible { opacity:1; transform:none; }

.gallery-item.filter-out {
    opacity:0 !important; transform:scale(.82) !important;
    pointer-events:none;
    transition:opacity .28s ease, transform .28s ease !important;
}

.gallery-item img {
    width:100%; height:auto; display:block;
    opacity: 1;
    transition: opacity .45s ease;
}
.gallery-item.loading img { opacity: 0; }

.gallery-item.visible:hover { transform:scale(1.03); border-color:rgba(255,255,255,.85); }

/* During FLIP the JS controls transition/transform; pointer-events:none
   prevents an accidental hover from triggering CSS transform:scale(1.03) */
.gallery-item.flipping { pointer-events: none; }

/* Loading spinner overlay - shown while the thumb is downloading.
   Delayed fade-in so cached images don't flash a spinner. */
.gallery-spinner {
    position: absolute;
    top: 50%; left: 50%;
    width: 28px; height: 28px;
    margin: -14px 0 0 -14px;
    border: 2.5px solid rgba(255,255,255,.22);
    border-top-color: #fff;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity .25s ease;
}
.gallery-item.loading .gallery-spinner {
    opacity: 1;
    transition-delay: .25s;
    animation: spin-loader .8s linear infinite;
}

@keyframes spin-loader { to { transform: rotate(360deg); } }

/* ============================================================
   CONTENT PAGES
   ============================================================ */
.content-inner { padding:clamp(20px,3vw,40px); max-width:860px; margin:0 auto; }

.content-hero { margin-bottom:24px; padding-bottom:18px; border-bottom:2px solid rgba(255,255,255,.18); }
.content-hero p { color:rgba(255,255,255,.75); font-size:.9rem; margin-top:8px; }
.content-hero a { color:#faa969; text-decoration:none; }
.content-hero a:hover { text-decoration:underline; }

.page-title { color:#fff; font-size:clamp(1.6rem,2.8vw,3rem); font-weight:700; text-transform:lowercase; letter-spacing:1px; }
.page-title em { color:#faa969; font-style:normal; }

.content-card { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px); border-radius:16px; padding:clamp(16px,2.5vw,28px); margin-bottom:18px; }

.section-title { color:#fff; font-size:clamp(1rem,1.5vw,1.3rem); font-weight:700; text-transform:lowercase; letter-spacing:.5px; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.section-title i { color:#faa969; }

.card-text { color:rgba(255,255,255,.82); font-family:"DM Sans",sans-serif; font-size:clamp(.82rem,1vw,.95rem); line-height:1.7; }

/* Commissions: uncropped images */
.comm-image-wrap { border-radius:12px; overflow:hidden; margin-bottom:18px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; }
.comm-image-wrap img { width:100%; height:auto; object-fit:contain; display:block; }

.price-table { display:flex; gap:14px; flex-wrap:wrap; }
.price-group { flex:1; min-width:140px; background:rgba(255,255,255,.12); border-radius:12px; padding:14px 16px; }
.price-group h3 { color:#faa969; font-size:clamp(.78rem,1vw,.96rem); font-weight:700; text-transform:lowercase; letter-spacing:.5px; margin-bottom:10px; display:flex; align-items:center; gap:7px; }
.price-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.85); font-family:"DM Sans",sans-serif; font-size:clamp(.78rem,.95vw,.92rem); }
.price-row:last-child { border-bottom:none; }
.price { font-weight:700; color:#fff; font-size:1.05em; }

.will-wont { display:flex; gap:14px; flex-wrap:wrap; }
.will-box, .wont-box { flex:1; min-width:140px; border-radius:12px; padding:14px 16px; }
.will-box { background:rgba(85,199,102,.15); border:1px solid rgba(85,199,102,.3); }
.wont-box { background:rgba(220,80,80,.12); border:1px solid rgba(220,80,80,.25); }
.will-box h3 { color:#7de08a; margin-bottom:8px; font-size:.92rem; }
.wont-box h3 { color:#f08080; margin-bottom:8px; font-size:.92rem; }
.will-box h3 i, .wont-box h3 i { margin-right:6px; }
.will-box ul, .wont-box ul { list-style:none; display:flex; flex-direction:column; gap:4px; }
.will-box li, .wont-box li { color:rgba(255,255,255,.8); font-family:"DM Sans",sans-serif; font-size:clamp(.76rem,.9vw,.88rem); padding-left:4px; }
.will-box li::before { content:"· "; color:#7de08a; }
.wont-box li::before { content:"· "; color:#f08080; }

.tos-block { padding:12px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.tos-block:last-child { border-bottom:none; }
.tos-block h3 { color:#faa969; font-size:clamp(.78rem,.92vw,.9rem); font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.tos-block ul { list-style:none; display:flex; flex-direction:column; gap:5px; }
.tos-block li { color:rgba(255,255,255,.78); font-family:"DM Sans",sans-serif; font-size:clamp(.76rem,.88vw,.88rem); line-height:1.5; padding-left:14px; position:relative; }
.tos-block li::before { content:"✦"; position:absolute; left:0; color:#cba4cf; font-size:.65em; top:3px; }

.form-cta { text-align:center; padding:28px 0 16px; }
.form-btn { display:inline-flex; align-items:center; gap:10px; background:#e37721; color:#fff; font-family:"Josefin Sans",sans-serif; font-weight:700; font-size:clamp(.9rem,1.3vw,1.15rem); text-transform:lowercase; letter-spacing:.5px; text-decoration:none; padding:16px 36px; border-radius:40px; box-shadow:0 6px 22px rgba(227,119,33,.4); transition:background .28s, transform .28s, box-shadow .28s; margin-bottom:12px; }
.form-btn:hover { background:#c45e0e; transform:scale(1.05); box-shadow:0 9px 28px rgba(227,119,33,.5); }
.form-cta p { color:rgba(255,255,255,.55); font-family:"DM Sans",sans-serif; font-size:.82rem; }

/* ============================================================
   ABOUT ME
   ============================================================ */
#view-about { display:flex; align-items:center; justify-content:center; }

.about-content { padding:clamp(28px,4vw,56px); max-width:680px; display:flex; flex-direction:column; gap:18px; }

.about-tagline { color:#faa969; font-size:clamp(.72rem,.88vw,.9rem); text-transform:uppercase; letter-spacing:2px; font-weight:600; margin-top:-10px; }

.about-p { color:rgba(255,255,255,.85); font-family:"DM Sans",sans-serif; font-size:clamp(.85rem,1.05vw,1rem); line-height:1.78; }
.about-p strong { color:#fff; }

.about-social-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.about-social-links a { display:inline-flex; align-items:center; gap:7px; color:#fff; font-family:"DM Sans",sans-serif; font-size:clamp(.74rem,.88vw,.88rem); text-decoration:none; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); padding:7px 14px; border-radius:20px; transition:background .25s, border-color .25s, transform .2s; }
.about-social-links a:hover { background:#e37721; border-color:transparent; transform:translateY(-2px); }

/* ============================================================
   MODAL - blur, prev/next, interactive cursor-driven zoom
   ============================================================ */
.modal {
    display: none; position: fixed; inset: 0; z-index: 1000;
    justify-content: center; align-items: center;
    backdrop-filter: blur(20px) brightness(.7);
    -webkit-backdrop-filter: blur(20px) brightness(.7);
    background: rgba(0,0,0,.18);
}

.modal.is-open { display: flex; }

.modal-overlay { position: absolute; inset: 0; cursor: default; }

/* Frame: visual wrapper only (border-radius/box-shadow). Size adapts to the
   inner modal-content, which matches the image's exact size. */
.modal-frame {
    position: relative; z-index: 1;
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.7);
    animation: modalIn .28s cubic-bezier(.2,.8,.2,1) both;
    cursor: zoom-in;
    transition: border-radius .28s ease, box-shadow .28s ease;
    line-height: 0; /* prevents bottom gap caused by content's inline-block */
}

.modal.zoomed .modal-frame {
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
    cursor: zoom-out;
}

@keyframes modalIn { from{transform:scale(.88);opacity:0} to{transform:scale(1);opacity:1} }

/* Content: holds image + caption. JS applies the transform HERE, so both
   scale/translate as one unit and the caption stays aligned with the image. */
.modal-content {
    position: relative;
    display: inline-block;
    transform: translate(0, 0) scale(1);
    transform-origin: center center;
    will-change: transform;
}

#modalImg {
    display: block;
    max-width: min(90vw, 960px);
    max-height: 82vh;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.modal.zoomed #modalImg { cursor: zoom-out; }


/* Caption - absolute inside .modal-content (which matches the image size),
   so its edges align with the image. Transform is inherited from the wrapper. */
.modal-caption {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,.82) 0%, transparent 100%);
    padding: 32px 22px 16px;
    display: flex; flex-direction: column; gap: 3px;
    pointer-events: none;
    line-height: 1.3;
    transition: opacity .25s ease;
}

.modal.zoomed .modal-caption { opacity: 0; }

.modal-caption #modalTitle { color:#fff; font-family:"Josefin Sans",sans-serif; font-size:clamp(1rem,1.6vw,1.4rem); font-weight:700; text-transform:lowercase; letter-spacing:.5px; }
.modal-caption #modalDesc { color:rgba(255,255,255,.68); font-family:"DM Sans",sans-serif; font-size:clamp(.78rem,.95vw,.9rem); }

.modal-counter { color:rgba(255,255,255,.45); font-family:"DM Sans",sans-serif; font-size:.78rem; margin-top:2px; }

/* Prev / next buttons */
.modal-nav {
    position: absolute; top: 50%; z-index: 2;
    transform: translateY(-50%);
    background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.3);
    color: #fff; border-radius: 50%;
    width: clamp(40px,4vw,54px); height: clamp(40px,4vw,54px);
    font-size: clamp(14px,1.5vw,20px);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(6px);
    transition: background .22s, transform .22s; outline: none;
}

.modal-nav:hover { background: rgba(255,255,255,.32); transform: translateY(-50%) scale(1.1); }
.modal-prev { left: clamp(10px,2vw,28px); }
.modal-next { right: clamp(10px,2vw,28px); }

/* Hi-res loader spinner - shown while the full-resolution image
   downloads in the background. The modal already shows the thumb. */
.modal-spinner {
    position: absolute;
    top: 50%; left: 50%;
    width: 52px; height: 52px;
    margin: -26px 0 0 -26px;
    border: 3px solid rgba(255,255,255,.22);
    border-top-color: #fff;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: opacity .25s ease;
}
.modal.hires-loading .modal-spinner {
    opacity: 1;
    transition-delay: .2s;
    animation: spin-loader .8s linear infinite;
}

/* ============================================================
   MOBILE / LOW-POWER: backdrop-filter blur is brutal on Safari
   and mobile GPUs. Drop the blur radius (the dark overlay keeps
   the text readable on its own).
   ============================================================ */
@media (max-width: 900px), (pointer: coarse) {
    .right-panel {
        backdrop-filter: blur(8px) saturate(1.15);
        -webkit-backdrop-filter: blur(8px) saturate(1.15);
        background: rgba(12, 5, 8, 0.72);
    }
    .modal {
        backdrop-filter: blur(10px) brightness(.7);
        -webkit-backdrop-filter: blur(10px) brightness(.7);
        background: rgba(0,0,0,.35);
    }
    .content-card {
        backdrop-filter: none;
    }
}