@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

@font-face {
    font-family: 'Magic';
    src: url('fonts/Magic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ===== VARIABLES ===== */
:root {
    --purple-primary: #f7a355;
    --purple-light: #fcba84;
    --purple-dark: #ed8b3a;
    --purple-darker: #a86921;
    --orange: #e98111;
    --black: #811e08;
    --white: #ffffff;
    --cream: #fef9f3;
    --gray-light: #f5f5f5;
    --gray-medium: #e5e5e5;
    --gray-dark: #6b7280;

    --border-width: 4px;
    --border-radius: 70px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --container-max-width: 1300px;

    --scale: 1;

    /* Purple nav palette */
    --nav-btn-bg-top: rgb(255, 214, 180);
    --nav-btn-bg-mid: #f5b26e;
    --nav-btn-bg-bot: #d6873d;
    --nav-btn-shadow: #8a570b;
    --nav-btn-text: #502800;
}

/* ===== PREVENT HORIZONTAL OVERFLOW GLOBALLY ===== */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: url('imgs/mouse.png'), auto;
}

/* ===== BODY ===== */
body {
    font-family: 'Poppins', sans-serif;
    background-size: contain;
    background-repeat: no-repeat;
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    padding-left: 160px;
    padding-right: 160px;
    background: linear-gradient(to bottom, #e98111, #ea8018, #dc6f2c, #c85642, #c2514b, #b8445c, #aa3670, #8e2287, #611482, #2c0864, #13034e);
}

body::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 300px; height: 300px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
    pointer-events: none;
    z-index: 1;
}

body::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 300px; height: 300px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
    pointer-events: none;
    z-index: 1;
}

/* ===== CURSORS ===== */
.left-sun { cursor: url('imgs/mousehover.png'), pointer !important; }
.right-moon { cursor: url('imgs/mouse.png'), auto !important; }

a, button, .nav-btn, .tab-btn, .nav-arrow, .gallery-item, .anim-gallery-item,
.stamp, .skill-tag, .work-button, .social-icons a, input, textarea,
.contact-logo, .contact-stamp, #backToTop, .film-link, .award-badge,
.logo-wrapper, .logo-circle-incomplete, .logo-img {
    cursor: url('imgs/mousehover.png'), pointer !important;
}

.process-content, .recognition-scroll-content, .artwork-grid, .artwork-img,
.video-placeholder-film, .video-placeholder, .illustration-display, .film-video,
.film-process, .gallery-grid, .animation-showcase,
.illustration-showcase, .about-container, .skills-tags, .anim-gallery-item img,
.gallery-item img {
    cursor: url('imgs/mousehover.png'), pointer !important;
}

.stamp:active, .stamp.dragging {
    cursor: url('imgs/mousehover.png'), grabbing !important;
}

/* ===== IN-BETWEEN DECORATIONS ===== */
.inbetween-sun {
    display: flex;
    justify-content: center;
    pointer-events: auto;
    z-index: 1;
    position: relative;
    top: 10px;
    left: 20px;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.18s ease;
}
.inbetween-sun img { max-width: 1000px; width: 100%; }

.inbetween-star {
    display: flex;
    justify-content: center;
    pointer-events: auto;
    z-index: 1;
    position: relative;
    bottom: 25px;
    left: 20px;    
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.18s ease;
}
.inbetween-star img { max-width: 1000px; width: 100%; }

.inbetween-star1 {
    display: flex;
    justify-content: center;
    pointer-events: auto;
    z-index: 1;
    position: relative;
    top: 40px;
    left: 20px;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.18s ease;
}
.inbetween-star1 img { max-width: 1000px; width: 100%; }

.inbetween-moon {
    display: flex;
    justify-content: center;
    pointer-events: auto;
    z-index: 1;
    position: relative;
    left: 20px;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.18s ease;
}
.inbetween-moon img { max-width: 1000px; width: 100%; }

.inbetween-sun:hover,
.inbetween-star:hover,
.inbetween-star1:hover,
.inbetween-moon:hover {
    transform: translateY(-8px);
    filter: drop-shadow(0 0 15px rgba(255, 220, 100, 0.7));
}

/* ===== DECORATIVE SIDE IMAGES ===== */
.left-sun {
    position: absolute;
    top: 20px; left: 20px;
    width: 15%;
    z-index: 1;
    pointer-events: auto;
    will-change: transform;
    contain: layout style;
}

.right-moon {
    position: absolute;
    right: 10px;
    width: 10%;
    z-index: 2;
    pointer-events: auto;
    top: -50px;
    will-change: transform;
    contain: layout style;
}

@keyframes glowingDance {
    0%   { transform: translateY(0) rotate(0deg);    filter: drop-shadow(0 0 5px rgba(255,255,255,0.4)); }
    25%  { transform: translateY(-10px) rotate(3deg);  filter: drop-shadow(0 0 12px rgba(255,255,255,0.7)); }
    50%  { transform: translateY(0) rotate(0deg);    filter: drop-shadow(0 0 15px rgba(255,255,255,0.9)); }
    75%  { transform: translateY(-8px) rotate(-3deg);  filter: drop-shadow(0 0 12px rgba(255,255,255,0.7)); }
    100% { transform: translateY(0) rotate(0deg);    filter: drop-shadow(0 0 5px rgba(255,255,255,0.4)); }
}

@keyframes moonGlowDance {
    0%   { transform: translateY(0) rotate(0deg) scale(1);       filter: drop-shadow(0 0 5px rgba(255,255,255,0.5)); }
    25%  { transform: translateY(-12px) rotate(-4deg) scale(1.08); filter: drop-shadow(0 0 18px rgba(255,255,255,0.8)); }
    50%  { transform: translateY(0) rotate(0deg) scale(1);       filter: drop-shadow(0 0 20px rgba(255,255,255,1)); }
    75%  { transform: translateY(-10px) rotate(4deg) scale(1.08);  filter: drop-shadow(0 0 18px rgba(255,255,255,0.8)); }
    100% { transform: translateY(0) rotate(0deg) scale(1);       filter: drop-shadow(0 0 5px rgba(255,255,255,0.5)); }
}

.left-sun:hover   { animation: glowingDance 1.8s ease-in-out infinite; }
.right-moon:hover { animation: moonGlowDance 2s ease-in-out infinite; }

/* ===== SIDE DECORATIONS ===== */
.side-decoration-container {
    position: absolute;
    width: 160px;
    z-index: 0;
    pointer-events: auto;
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: top center;
    will-change: contents;
    contain: layout style paint;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.18s ease;
}
.side-decoration-container:hover {
    transform: translateY(-8px);
    filter: drop-shadow(0 0 15px rgba(255, 220, 100, 0.7));
}

.side-decoration-container.right:hover {
    transform: translateY(-8px);
    filter: drop-shadow(0 0 15px rgba(255, 220, 100, 0.7));
}
.side-decoration-container.right {
    right: 10px;
    background-image: url('imgs/rightpic.png');
    background-size: 100% auto;
    background-position: top center;
    z-index: 0;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
}

.side-decoration-container.left {
    left: 30px;
    background-image: url('imgs/leftpic.png');
    background-size: 100% auto;
    background-position: top center;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
}

/* ===== STICKY NAV ===== */
.sticky-nav {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 999;
    padding: 15px 0;
    display: flex;
    justify-content: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
    flex-wrap: wrap;
    will-change: transform, opacity;
}

.sticky-nav.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.sticky-nav .nav-btn {
    padding: 10px 30px;
    font-size: 0.95rem;
    background: linear-gradient(170deg, var(--nav-btn-bg-top) 0%, var(--nav-btn-bg-mid) 45%, var(--nav-btn-bg-bot) 100%);
    color: #fff !important;
    -webkit-text-stroke: 1.5px #2a0050;
    box-shadow:
        0 5px 0 var(--nav-btn-shadow),
        0 7px 8px rgba(0,0,0,0.25),
        inset 0 2px 0 rgba(255,255,255,0.5);
}

/* ===== PARTICLE CANVAS ===== */
#particle-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    will-change: contents;
}

/* ===== NAVIGATION WRAPPER ===== */
.navbar {
    background: transparent;
    padding: 60px 0 20px;
    border-bottom: none;
    position: relative;
    z-index: 100;
    overflow: visible;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: relative;
    z-index: 2;
}

/* ===== LOGO WRAPPER ===== */
.logo-wrapper {
    position: relative;
    z-index: 8;
    margin-bottom: -4px;
    background: transparent;
}

/* ===== LOGO ARCH ===== */
.logo-circle-incomplete {
    width: 240px;
    height: 125px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--orange);
    transition: var(--transition);
    border: var(--border-width) solid var(--black);
    border-bottom: none;
    border-top-left-radius: 320px;
    border-top-right-radius: 320px;
    overflow: visible;
    z-index: 5;
    animation: archEntrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

@keyframes archEntrance {
    0%   { transform: scaleY(0); transform-origin: bottom center; opacity: 0; }
    60%  { transform: scaleY(1.05); transform-origin: bottom center; }
    100% { transform: scaleY(1); transform-origin: bottom center; opacity: 1; }
}

.logo-circle-incomplete::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-top-left-radius: 320px;
    border-top-right-radius: 320px;
    background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 60%);
    pointer-events: none;
    z-index: 7;
    animation: archShimmer 4s ease-in-out infinite;
}

@keyframes archShimmer {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1; }
}

/* ===== LOGO IMAGE ===== */
.logo-img {
    width: 165px;
    height: 165px;
    object-fit: contain;
    position: relative;
    z-index: 6;
    margin-bottom: -60px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
    cursor: pointer !important;
    animation: logoEntrance 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both,
               logoFloat 4.5s ease-in-out 0.9s infinite;
    will-change: transform;
}

@keyframes logoEntrance {
    0%   { transform: translateY(-60px) scale(0.5); opacity: 0; }
    60%  { transform: translateY(10px) scale(1.08); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    35%       { transform: translateY(-12px) rotate(2deg); }
    70%       { transform: translateY(-5px) rotate(-1.5deg); }
}

@keyframes logoSpin {
    0%   { transform: scale(1) rotate(0deg); }
    40%  { transform: scale(1.2) rotate(180deg); }
    100% { transform: scale(1) rotate(360deg); }
}

/* ===== NAV TITLE BOX ===== */
.nav-title-box {
    border: var(--border-width) solid var(--black);
    border-bottom: none;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    padding: 32px 60px 26px;
    background-color: var(--orange);
    text-align: center;
    font-family: 'magic';
    position: relative;
    z-index: 4;
    min-width: 760px;
    box-shadow: 
        7px 7px 0 rgba(100, 25, 5, 0.35),
        0 10px 40px rgba(255, 140, 0, 0.5),
        0 20px 80px rgba(233, 129, 17, 0.25),
        inset 0 2px 0 rgba(255,255,255,0.2);
    overflow: visible;
    animation: boxEntrance 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both,
               boxGlow 5s ease-in-out 1.5s infinite;
}

@keyframes boxEntrance {
    0%   { transform: scaleX(0.7) scaleY(0.85); opacity: 0; }
    70%  { transform: scaleX(1.02) scaleY(1.01); }
    100% { transform: scaleX(1) scaleY(1); opacity: 1; }
}

@keyframes boxGlow {
    0%, 100% { box-shadow: 7px 7px 0 rgba(100,25,5,0.35), 0 10px 40px rgba(255,140,0,0.5), 0 20px 80px rgba(233,129,17,0.25), inset 0 2px 0 rgba(255,255,255,0.2); }
    50%       { box-shadow: 7px 7px 0 rgba(100,25,5,0.35), 0 10px 55px rgba(255,180,0,0.75), 0 25px 100px rgba(255,140,0,0.4), inset 0 2px 0 rgba(255,255,255,0.3); }
}

.nav-title-box::after { display: none; }

.nav-title-box::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    height: 6px;
    background-color: var(--orange);
    z-index: 6;
    top: -3px;
    border-radius: 0;
}

/* ===== VANNIANNART TITLE ===== */
.nav-title {
    font-size: 3rem;
    letter-spacing: 12px;
    margin-bottom: 14px;
    line-height: 1;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    color: #fff5c0;
    -webkit-text-stroke: 4px #3a1200;
    paint-order: stroke fill;
    text-shadow:
        3px  3px 0 #3a1200,
       -3px -3px 0 #3a1200,
        3px -3px 0 #3a1200,
       -3px  3px 0 #3a1200,
        5px  5px 0 #3a1200,
        7px  7px 12px rgba(0,0,0,0.4);
    display: inline-block;
    padding: 20px 16px 8px;
    cursor: default;
    overflow: visible;
    animation: titleEntrance 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}

@keyframes titleEntrance {
    0%   { transform: scale(0.55) translateY(30px); opacity: 0; letter-spacing: 2px; }
    70%  { transform: scale(1.05) translateY(-4px); opacity: 1; letter-spacing: 10px; }
    100% { transform: scale(1) translateY(0);       opacity: 1; letter-spacing: 8px; }
}

/* ===== LETTER HOVER ===== */
.nav-letter {
    display: inline-block;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.18s ease,
                letter-spacing 0.18s ease,
                text-shadow 0.18s ease;
    cursor: pointer !important;
    position: relative;
    will-change: transform;
}

.nav-letter:hover {
    transform: translateY(-18px) scale(1.3) rotate(-5deg);
    color: #fff8d0;
    letter-spacing: 12px;
    text-shadow:
        3px  3px 0 #3a1200,
       -3px -3px 0 #3a1200,
        3px -3px 0 #3a1200,
       -3px  3px 0 #3a1200,
        5px  5px 0 #3a1200,
        0 0 10px #fff,
        0 0 22px #ffe566,
        0 0 45px #ffaa00,
        0 0 80px #ff6600,
        0 0 120px rgba(255,40,180,0.7);
}

/* ===== SUBTITLE PILL ===== */
.nav-subtitle {
    font-size: 0.82rem;
    letter-spacing: 3px;
    color: wheat;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    -webkit-text-stroke: 2px #3a1200;
    paint-order: stroke fill;
    background-color: #e98111;
    padding: 7px 24px;
    white-space: nowrap;
    border: var(--border-width) solid var(--black);
    border-radius: 50px;
    font-family: 'Magic', cursive;
    font-weight: 600;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    z-index: 20;
    overflow: hidden;
    animation: subtitleEntrance 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
    box-shadow: 
        0 4px 0 rgba(100,25,5,0.4),
        0 6px 20px rgba(233,129,17,0.6),
        inset 0 1px 0 rgba(255,255,255,0.35);
}

.nav-subtitle::before {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    animation: pillShimmer 3.5s ease-in-out 1.5s infinite;
    pointer-events: none;
}

@keyframes pillShimmer {
    0%   { left: -60%; opacity: 0; }
    20%  { opacity: 1; }
    60%  { left: 120%; opacity: 1; }
    61%, 100% { left: 120%; opacity: 0; }
}

@keyframes subtitleEntrance {
    0%   { transform: translate(-50%, 50%) scale(0.8); opacity: 0; }
    100% { transform: translate(-50%, 50%) scale(1);   opacity: 1; }
}

.subtitle-star {
    display: inline-block;
    font-size: 1rem;
    -webkit-text-stroke: 0px;
    color: wheat;
    filter: drop-shadow(0 0 5px rgba(255,220,100,0.9));
    animation: subtitleStar 4s linear infinite;
    will-change: transform;
}

.subtitle-star:last-child { animation-direction: reverse; }

@keyframes subtitleStar {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.4); }
    100% { transform: rotate(360deg) scale(1); }
}

/* ===== NAV LINKS ===== */
.nav-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 42px;
    position: relative;
    z-index: 2;
}

/* ===== NAV BUTTONS ===== */
.nav-btn {
    border: 3px solid #2a0050;
    padding: 10px 32px;
    text-decoration: none;
    color: #ffffff !important;
    font-size: 0.95rem;
    background: linear-gradient(170deg, var(--nav-btn-bg-top) 0%, var(--nav-btn-bg-mid) 45%, var(--nav-btn-bg-bot) 100%);
    transition: all 0.2s ease;
    display: inline-block;
    position: relative;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 60px;
    font-family: 'magic';
    font-weight: 600;
    box-shadow:
        0 5px 0 var(--nav-btn-shadow),
        0 7px 8px rgba(0,0,0,0.3),
        inset 0 2px 0 rgba(255,255,255,0.45);
    text-shadow:
        0 1px 0 rgba(0,0,0,0.3),
        2px 2px 0 #2a0050,
        -1px -1px 0 #2a0050;
    animation: btnEntrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    overflow: hidden;
    will-change: transform;
    -webkit-text-stroke: 1.5px #2a0050;
    paint-order: stroke fill;
}

.nav-links .nav-btn:nth-child(1) { animation-delay: 0.65s; }
.nav-links .nav-btn:nth-child(2) { animation-delay: 0.75s; }
.nav-links .nav-btn:nth-child(3) { animation-delay: 0.85s; }
.nav-links .nav-btn:nth-child(4) { animation-delay: 0.95s; }

@keyframes btnEntrance {
    0%   { transform: scale(0) translateY(16px); opacity: 0; }
    100% { transform: scale(1) translateY(0);    opacity: 1; }
}

.nav-btn::before {
    content: '';
    position: absolute;
    top: 4px; left: 12px; right: 12px;
    height: 35%;
    background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0));
    border-radius: 60px;
    pointer-events: none;
}

.nav-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    border-radius: 60px;
    pointer-events: none;
    transition: none;
    opacity: 0;
}

.nav-btn:hover::after {
    animation: btnShimmer 0.5s ease forwards;
}

@keyframes btnShimmer {
    0%   { left: -80%; opacity: 1; }
    100% { left: 120%; opacity: 0; }
}

.nav-btn:hover {
    background: linear-gradient(170deg, #ffe0cc 0%, #ffc988 45%, #e8a950 100%);
    box-shadow:
        0 6px 0 var(--nav-btn-shadow),
        0 9px 12px rgba(0,0,0,0.25),
        0 0 22px rgba(255, 198, 100, 0.6),
        inset 0 2px 0 rgba(255,255,255,0.6);
    transform: translateY(-3px) scale(1.04);
    color: #ffffff !important;
}

.nav-btn:active {
    transform: translateY(3px);
    box-shadow:
        0 2px 0 var(--nav-btn-shadow),
        0 3px 4px rgba(0,0,0,0.2),
        inset 0 2px 0 rgba(255,255,255,0.3);
}

.nav-btn.active {
    background: linear-gradient(135deg, #e8b350 0%, #bf7e1c 100%);
    color: var(--white) !important;
}

/* ===== SPARKLE BURST on click ===== */
.nav-sparkle {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    border-radius: 50%;
    animation: sparkleBurst 0.75s ease-out forwards;
    will-change: transform, opacity;
}

@keyframes sparkleBurst {
    0%   { transform: translate(0, 0) scale(1.2); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* ===== HEADER CLOUDS ===== */
.header-cloud {
    position: absolute;
    pointer-events: none;
    z-index: 3;
    opacity: 0.88;
}

/* Left cluster */
.cloud-1 {
    left: 6%;
    top: 5px;
    width: 165px;
    transform: rotate(-4deg);
}

.cloud-2 {
    left: 16%;
    top: 21px;
    width: 122px;
    transform: scaleX(-1) rotate(8deg);
    opacity: 0.75;
}

.cloud-3 {
    left: 24%;
    top: 3px;
    width: 143px;
    transform: rotate(-6deg);
    opacity: 0.82;
}

/* Right cluster */
.cloud-4 {
    right: 25%;
    top: 9px;
    width: 135px;
    transform: scaleX(-1) rotate(5deg);
    opacity: 0.8;
}

.cloud-5 {
    right: 14%;
    top: 22px;
    width: 116px;
    transform: rotate(-9deg);
    opacity: 0.73;
}

.cloud-6 {
    right: 5%;
    top: 1px;
    width: 150px;
    transform: scaleX(-1) rotate(3deg);
}

/* ===== WEBSITE CLOUDS (desktop only) ===== */
.website-cloud-left {
    display: none;
    position: absolute;
    left: 95px;
    top: 0;
    width: 32%;
    max-width: 420px;
    z-index: 4;
    pointer-events: none;
}

.website-cloud-right {
    display: none;
    position: absolute;
    right: 100px;
    top: 0;
    width: 32%;
    max-width: 420px;
    z-index: 4;
    pointer-events: none;
}

@media (min-width: 1025px) {
    .website-cloud-left,
    .website-cloud-right {
        display: block;
    }
}

/* ===== FLOATING MAGICAL ORBS ===== */
.navbar-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(40px);
    animation: orbDrift linear infinite;
    opacity: 0;
    will-change: transform, opacity;
}

@keyframes orbDrift {
    0%   { transform: translate(0, 0) scale(0.8); opacity: 0; }
    10%  { opacity: 0.6; }
    90%  { opacity: 0.4; }
    100% { transform: translate(var(--dx), var(--dy)) scale(1.2); opacity: 0; }
}

/* ===== HERO SECTION ===== */
.hero-section { padding: 20px 30px 90px; }

.hero-content {
    position: relative;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 120px;
    border: var(--border-width) solid var(--black);
    border-radius: 70px;
    background-color: var(--white);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
    background-image: url(imgs/illustration4.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 900px;
    font-family: 'magic';
    contain: layout style;
}

.hero-letter {
    display: inline-block;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.18s ease,
                text-shadow 0.18s ease;
    cursor: url('imgs/mousehover.png'), pointer !important;
    will-change: transform;
}

.hero-letter:hover {
    transform: translateY(-18px) scale(1.3) rotate(-5deg);
    color: #fff8d0;
    text-shadow:
        4px  4px 0 #1a0030,
       -4px -4px 0 #1a0030,
        4px -4px 0 #1a0030,
       -4px  4px 0 #1a0030,
        0 0 10px #fff,
        0 0 22px #ffe566,
        0 0 45px #fddc99,
        0 0 80px #fdc6a2,
        0 0 120px rgba(255, 170, 225, 0.7);
}

.hero-name {
    font-size: 3.8rem;
    font-weight: 700;
    letter-spacing: 8px;
    color: #fffde0;
    line-height: 1.1;
    margin: 0;
    display: inline-block;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-text-stroke: 5px #1a0030;
    paint-order: stroke fill;
    text-shadow:
        4px  4px 0 #1a0030,
       -4px -4px 0 #1a0030,
        4px -4px 0 #1a0030,
       -4px  4px 0 #1a0030,
        6px  6px 0 #1a0030,
        8px  8px 0 #1a0030,
        10px 10px 20px rgba(0,0,0,0.95),
        0 0 30px rgba(255,255,230,0.6),
        0 0 60px rgba(200,150,255,0.3);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 10px 18px;
    width: fit-content;
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
}

.hero-roles {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: flex-end;
    position: absolute;
    bottom: 410px;
    left: 100px;
    right: 140px;
    margin-bottom: 0;
}

.hero-roles .role-item:nth-child(1) { justify-self: start; }
.hero-roles .role-item:nth-child(2) { justify-self: center; }
.hero-roles .role-item:nth-child(3) { justify-self: end; }

.role-item {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fffde0;
    text-decoration: none;
    letter-spacing: 1px;
    padding: 10px 18px;
    display: inline-block;
    transition: var(--transition);
    margin: 0;
    -webkit-text-stroke: 4px #1a0030;
    paint-order: stroke fill;
    text-shadow:
        -5px -5px 0 #1a0030, 5px -5px 0 #1a0030,
        -5px 5px 0 #1a0030, 5px 5px 0 #1a0030,
        -6px 0 0 #1a0030, 6px 0 0 #1a0030,
        0 -6px 0 #1a0030, 0 6px 0 #1a0030,
        7px 7px 0 #1a0030, 8px 8px 0 #1a0030,
        9px 9px 25px rgba(0,0,0,0.95),
        0 0 35px rgba(255,255,230,0.5);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    width: fit-content;
    text-align: center;
}

.role-item:hover { transform: translateY(-5px); }

.hero-text {
    grid-column: 1;
    grid-row: 1;
}

.hero-image {
    grid-column: 2; grid-row: 1;
    display: flex;
    justify-content: right;
    align-items: flex-end;
}

.hero-character {
    width: 100%;
    max-width: 350px;
    height: auto;
    object-fit: contain;
    margin-top: 40px;
}

.work-button {
    display: flex;
    gap: 10px;
    align-items: center;
    border: var(--border-width) solid var(--black);
    border-radius: 30px;
    padding: 15px 40px;
    text-decoration: none;
    color: var(--black);
    font-weight: 700;
    font-size: 1.3rem;
    background-color: var(--white);
    transition: var(--transition);
    letter-spacing: 2px;
    width: fit-content;
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    font-family: 'magic', sans-serif;
}

.work-button:hover { background-color: var(--purple-light); }

.work-btn-arrow {
    width: 28px;
    height: 28px;
    object-fit: contain;
    transform: rotate(180deg);
    vertical-align: middle;
    pointer-events: none;
}

/* ===== SECTION TITLES ===== */
.section-title {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 20px;
    border-bottom: var(--border-width) solid rgba(255, 255, 255, 0.4);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 3px;
    position: relative;
    font-family: 'Magic', cursive;
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 2px;
}

/* ===== WORK/ILLUSTRATION SECTION ===== */
.work-section { padding: 100px 30px 150px; }

.work-section .section-title {
    margin-bottom: 0;
}

.work-content {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 30px 30px 40px;
    background-color: var(--white);
    border: 10px solid #f7ce87;
    border-radius: 50px;
    position: relative;
    overflow: hidden;
}

.work-cloud {
    position: absolute;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}

.work-cloud-1 { width: 420px; top: -25px;   left: -60px; }
.work-cloud-2 { width: 380px; bottom: -15px; left: -50px; }
.work-cloud-3 { width: 450px; top: -20px;   right: -70px; }
.work-cloud-4 { width: 360px; bottom: -10px; right: -55px; }
.work-cloud-5 { width: 280px; top: 30%;     left: -45px; }
.work-cloud-6 { width: 300px; bottom: 22%;  right: -50px; }
.work-cloud-7 { width: 250px; top: -15px;   left: 30%; }
.work-cloud-8 { width: 240px; bottom: -12px; right: 28%; }

.work-tabs {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 50px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.work-tabs:has(.illus-tab) {
    margin-bottom: 0;
}

.illus-category-tabs {
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 30px;
}

.illus-category-tabs {
    background-color: #fde8cc;
    border-radius: 14px;
    padding: 6px;
    gap: 6px;
}

.illus-category-tabs .tab-btn {
    flex: 1;
    background-color: transparent;
    border: none;
    border-radius: 10px;
    padding: 14px 20px;
    font-size: 0.85rem;
    letter-spacing: 2px;
    color: #9a5200;
}

.illus-category-tabs .tab-btn::before {
    display: none;
}

.illus-category-tabs .tab-btn:hover,
.illus-category-tabs .tab-btn.active {
    background-color: #e98111;
    color: #ffffff;
    transform: none;
    text-shadow: none;
    box-shadow: none;
}

.year-badge {
    font-size: 0.6em;
    vertical-align: super;
    opacity: 0.75;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* ===== TAB BUTTONS ===== */
.tab-btn {
    border: var(--border-width) solid rgb(195, 163, 204);
    padding: 15px 45px;
    background-color: #7c3aed;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.8rem;
    transition: var(--transition);
    font-family: 'magic', sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    position: relative;
    border-radius: 50px;
}

.tab-btn::before {
    content: '';
    position: absolute;
    bottom: -6px; right: -6px;
    width: 100%; height: 100%;
    background-color: #4c1d95;
    z-index: -1;
    transition: var(--transition);
    border-radius: 50px;
}

.tab-btn:hover, .tab-btn.active {
    background-color: #9333ea;
    color: var(--white);
    transform: translate(-2px, -2px);
}

.tab-btn:hover::before, .tab-btn.active::before { background-color: #3b0764; }

.tab-content { display: none; animation: fadeIn 0.5s ease-in; }
.tab-content.active { display: block; position: relative; z-index: 1; }

/* ===== ILLUSTRATION SHOWCASE ===== */
.illustration-showcase {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
}

.illustration-display {
    width: 900px;
    height: 700px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.illustration-display .illus-inner {
    max-width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background-color: var(--black);
    border: 8px solid #0066ff;
    box-shadow: inset 0 0 0 2px white;
    background-image:
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%);
    background-size:
        14px 14px, 14px 14px, 14px 14px, 14px 14px,
        14px 14px, 14px 14px, 14px 14px, 14px 14px;
    background-position:
        0 0, 100% 0, 100% 100%, 0 100%,
        7px 0, 100% 7px, 7px 100%, 0 7px;
    background-repeat:
        no-repeat, no-repeat, no-repeat, no-repeat,
        repeat-x, repeat-y, repeat-x, repeat-y;
    position: relative;
    overflow: hidden;
    contain: layout style paint;
}

.illustration-display .illus-inner img {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.illustration-display .illus-inner::after {
    content: 'HANA TAYLOR';
    position: absolute;
    bottom: 14px;
    right: 16px;
    font-family: 'Magic', cursive;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 3px;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 5;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.nav-arrow img { width: 40px; height: auto; pointer-events: none; }
.nav-arrow:first-of-type img { transform: scaleX(-1); }

.nav-arrow {
    position: absolute;
    width: 150px;
    height: 50px;
    border: var(--border-width) solid var(--black);
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.9);
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.nav-arrow:first-of-type { left: 40px; }
.nav-arrow:last-of-type  { right: 40px; }

.nav-arrow:hover {
    background-color: var(--purple-primary);
    color: var(--white);
    transform: scale(1.1);
}

.nav-arrow svg { pointer-events: none; height: 200px; }

.showcase-counter {
    text-align: center;
    margin-top: 25px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gray-dark);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 30px;
    max-height: 720px;
    overflow-y: auto;
}

.gallery-item {
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    aspect-ratio: 1/1;
    border: 8px solid #0066ff;
    padding: 12px;
    background-color: var(--black);
    background-image:
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%);
    background-size:
        14px 14px, 14px 14px, 14px 14px, 14px 14px,
        14px 14px, 14px 14px, 14px 14px, 14px 14px;
    background-position:
        0 0, 100% 0, 100% 100%, 0 100%,
        7px 0, 100% 7px, 7px 100%, 0 7px;
    background-repeat:
        no-repeat, no-repeat, no-repeat, no-repeat,
        repeat-x, repeat-y, repeat-x, repeat-y;
    contain: layout style paint;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.gallery-item:hover { transform: translate(-3px, -3px); }

.gallery-item::after {
    content: 'HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Magic', cursive;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.18);
    letter-spacing: 3px;
    text-transform: uppercase;
    word-break: break-all;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
    transform: rotate(-30deg);
    line-height: 2.5;
    padding: 10px;
    text-align: center;
    will-change: transform;
    contain: strict;
}

.gallery-item .overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 3;
}

.gallery-item:hover .overlay { opacity: 1; }

.gallery-item .overlay span {
    color: var(--white);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
    padding: 10px 20px;
    font-family: 'Magic', cursive;
}

/* ===== ANIMATIONS SECTION ===== */
.anim-cloud-1 { width: 400px; top: -25px;   right: -55px; }
.anim-cloud-2 { width: 420px; bottom: -15px; right: -60px; }
.anim-cloud-3 { width: 370px; top: -20px;   left: -55px; }
.anim-cloud-4 { width: 340px; bottom: -10px; left: -45px; }
.anim-cloud-5 { width: 270px; top: 28%;     right: -45px; }
.anim-cloud-6 { width: 290px; bottom: 22%;  left: -50px; }
.anim-cloud-7 { width: 240px; top: -12px;   right: 28%; }
.anim-cloud-8 { width: 250px; bottom: -12px; left: 30%; }

/* ===== FILM CLOUDS ===== */
.film-cloud-1 { width: 400px; top: -25px;   right: -55px; }
.film-cloud-2 { width: 420px; bottom: -15px; right: -60px; }
.film-cloud-3 { width: 370px; top: -20px;   left: -55px; }
.film-cloud-4 { width: 340px; bottom: -10px; left: -45px; }
.film-cloud-5 { width: 270px; top: 28%;     right: -45px; }
.film-cloud-6 { width: 290px; bottom: 22%;  left: -50px; }
.film-cloud-7 { width: 240px; top: -12px;   right: 28%; }
.film-cloud-8 { width: 250px; bottom: -12px; left: 30%; }

/* ===== ABOUT ME CONTAINER CLOUDS ===== */
.about-cloud-1,
.about-cloud-2,
.about-cloud-3,
.about-cloud-4,
.about-cloud-5,
.about-cloud-6,
.about-cloud-7,
.about-cloud-8 {
    position: absolute;
    opacity: 0.14;
    pointer-events: none;
    z-index: 0;
    grid-column: unset !important;
    grid-row: unset !important;
    align-self: unset !important;
    justify-self: unset !important;
}
.about-cloud-1 { width: 360px; top: -30px;  left: -60px; }
.about-cloud-2 { width: 320px; bottom: -20px; left: -50px; }
.about-cloud-3 { width: 380px; top: -30px;  right: -65px; }
.about-cloud-4 { width: 320px; bottom: -20px; right: -55px; }
.about-cloud-5 { width: 260px; top: 35%;    left: -45px; }
.about-cloud-6 { width: 270px; top: 35%;    right: -50px; }
.about-cloud-7 { width: 230px; top: -20px;  left: 32%; }
.about-cloud-8 { width: 220px; bottom: -18px; right: 28%; }

/* ===== RECOGNITION / EVENTS SCROLL BOX CLOUDS ===== */
.recog-cloud-1,
.recog-cloud-2,
.recog-cloud-3,
.recog-cloud-4,
.recog-cloud-5,
.recog-cloud-6,
.recog-cloud-7,
.recog-cloud-8 {
    position: absolute;
    opacity: 0.14;
    pointer-events: none;
    z-index: 0;
}
.recog-cloud-1 { width: 320px; top: -28px;  left: -55px; }
.recog-cloud-2 { width: 280px; bottom: -18px; left: -45px; }
.recog-cloud-3 { width: 340px; top: -28px;  right: -60px; }
.recog-cloud-4 { width: 280px; bottom: -18px; right: -50px; }
.recog-cloud-5 { width: 230px; top: 38%;    left: -42px; }
.recog-cloud-6 { width: 240px; top: 38%;    right: -45px; }
.recog-cloud-7 { width: 200px; top: -18px;  left: 30%; }
.recog-cloud-8 { width: 195px; bottom: -15px; right: 26%; }

.animations-section { padding: 80px 30px; }

.animation-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 50px 60px 60px;
    background-color: var(--white);
    border: 10px solid #f7ce87;
    border-radius: 50px;
    position: relative;
    overflow: hidden;
}

.anim-cat-nav {
    display: flex;
    align-items: stretch;
    gap: 6px;
    max-width: 900px;
    width: 100%;
    margin: 0 auto 40px;
    background-color: #fde8cc;
    border-radius: 14px;
    padding: 6px;
    position: relative;
    z-index: 2;
}

.anim-cat-label {
    flex: 1;
    background-color: #e98111;
    color: #ffffff;
    text-align: center;
    padding: 15px 20px;
    border-radius: 10px;
    font-family: 'Magic', cursive;
    font-size: 1.2rem;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.anim-cat-prev-btn,
.anim-cat-next-btn {
    width: 54px;
    border: none;
    border-radius: 10px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
}

.anim-cat-prev-btn:hover,
.anim-cat-next-btn:hover {
    background-color: rgba(233, 129, 17, 0.2);
    transform: scale(1.05);
}

.anim-cat-prev-btn img {
    width: 26px;
    transform: scaleX(-1);
    pointer-events: none;
}

.anim-cat-next-btn img {
    width: 26px;
    pointer-events: none;
}

.work-tabs:has(.anim-view-tab) {
    margin-bottom: 0;
}


.animation-showcase {
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
}

.video-placeholder {
    width: 100%;
    height: 550px;
    overflow: visible;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    contain: layout style;
}

.video-placeholder .anim-inner-wrap {
    position: relative;
    max-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background-color: var(--black);
    border: 8px solid #0066ff;
    box-shadow: inset 0 0 0 2px white;
    background-image:
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%);
    background-size:
        14px 14px, 14px 14px, 14px 14px, 14px 14px,
        14px 14px, 14px 14px, 14px 14px, 14px 14px;
    background-position:
        0 0, 100% 0, 100% 100%, 0 100%,
        7px 0, 100% 7px, 7px 100%, 0 7px;
    background-repeat:
        no-repeat, no-repeat, no-repeat, no-repeat,
        repeat-x, repeat-y, repeat-x, repeat-y;
    overflow: hidden;
    contain: layout style paint;
}

.video-placeholder .anim-inner-wrap::after {
    content: 'HANA TAYLOR';
    position: absolute;
    bottom: 14px;
    right: 16px;
    font-family: 'Magic', cursive;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 3px;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 5;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.video-placeholder .anim-inner-wrap img,
.video-placeholder .anim-inner-wrap video {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* ===== ANIMATIONS GALLERY ===== */
.anim-gallery-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 30px;
    max-height: 700px;
    overflow-y: auto;
}

.anim-gallery-item {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: 0px;
    overflow: hidden;
    transition: var(--transition);
    background-color: var(--black);
    padding: 8px;
    background-image:
        radial-gradient(circle at center, white 30%, transparent 30%),
        radial-gradient(circle at center, white 30%, transparent 30%),
        radial-gradient(circle at center, white 30%, transparent 30%),
        radial-gradient(circle at center, white 30%, transparent 30%),
        radial-gradient(circle at center, white 30%, transparent 30%),
        radial-gradient(circle at center, white 30%, transparent 30%),
        radial-gradient(circle at center, white 30%, transparent 30%),
        radial-gradient(circle at center, white 30%, transparent 30%);
    background-size:
        15px 15px, 15px 15px, 15px 15px, 15px 15px,
        12px 12px, 12px 12px, 12px 12px, 12px 12px;
    background-position:
        0 0, 100% 0, 100% 100%, 0 100%,
        6px 0, 100% 6px, 6px 100%, 0 6px;
    background-repeat:
        no-repeat, no-repeat, no-repeat, no-repeat,
        repeat-x, repeat-y, repeat-x, repeat-y;
    border: 8px solid #0066ff;
    box-shadow: inset 0 0 0 2px white;
    contain: layout style paint;
}

.anim-gallery-item:hover { transform: translate(-3px, -3px); }
.anim-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.anim-gallery-item::after {
    content: 'HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Magic', cursive;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.18);
    letter-spacing: 3px;
    text-transform: uppercase;
    word-break: break-all;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
    transform: rotate(-30deg);
    line-height: 2.5;
    padding: 10px;
    text-align: center;
    will-change: transform;
    contain: strict;
}

.anim-gallery-item .overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    gap: 10px;
}

.anim-gallery-item:hover .overlay { opacity: 1; }

.anim-gallery-item .overlay .play-icon {
    width: 50px; height: 50px;
    border: 3px solid var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.anim-gallery-item .overlay .play-icon svg {
    fill: var(--white);
    width: 22px; height: 22px;
    margin-left: 3px;
}

.anim-gallery-item .overlay span {
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    padding: 0 15px;
    font-family: 'Magic', cursive;
}

/* ===== FILMS SECTION ===== */
.film-roles {
    font-size: 0.95rem;
    font-family: 'Poppins', sans-serif;
    color: var(--gray-dark);
    font-weight: 500;
    margin-top: 8px;
    margin-bottom: 4px;
}

.film-links { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }

.film-awards {
    margin-top: 16px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 8px;
    border-radius: 10px;
    padding: 12px 14px;
    background: rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.07);
}

.film-awards-title {
    font-family: 'Magic', cursive;
    font-size: 1rem;
    color: var(--purple-primary);
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.film-award-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.film-award-item:last-child { border-bottom: none; margin-bottom: 0; }

.film-link {
    font-size: 0.95rem;
    font-family: 'Poppins', sans-serif;
    color: var(--purple-primary);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    width: fit-content;
}

.film-link:hover { color: var(--purple-darker); text-decoration: underline; }
.meta-dot { color: var(--gray-dark); font-weight: 400; }

.artwork-heading {
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    color: var(--black);
    margin-bottom: 14px;
    letter-spacing: 0.5px;
}

.artwork-grid { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.artwork-img-wrapper {
    width: 95%;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    contain: layout style paint;
}

.artwork-img-wrapper::after {
    content: 'HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Magic', cursive;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.32);
    text-shadow: 0 1px 3px rgba(0,0,0,0.35);
    letter-spacing: 3px;
    text-transform: uppercase;
    word-break: break-all;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
    transform: rotate(-30deg);
    line-height: 2.5;
    padding: 10px;
    text-align: center;
    will-change: transform;
    contain: strict;
}

.artwork-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 12px;
    border: 3px solid var(--gray-medium);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    display: block;
}

.artwork-img:hover {
    border-color: var(--purple-primary);
    box-shadow: 0 4px 12px rgba(247, 163, 85, 0.4);
}

.artwork-img-zoomable {
    cursor: zoom-in !important;
}

.artwork-img-zoomable:hover {
    transform: scale(1.02);
    transition: transform 0.2s ease;
}

.no-artwork { color: var(--gray-dark); font-style: italic; font-size: 0.9rem; }

.films-section { padding: 140px 30px; }

.film-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 50px;
    padding: 50px;
    background-color: var(--white);
    border: 15px solid #f7ce87;
    border-radius: 50px;
    position: relative;
    overflow: hidden;
}

.film-video-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.film-video-wrapper .nav-arrow {
    position: absolute;
    width: 60px; height: 60px;
    border: var(--border-width) solid var(--black);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.95);
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.film-video-wrapper .film-arrow-prev { left: -30px; }
.film-video-wrapper .film-arrow-next { right: -30px; }

.film-video-wrapper .nav-arrow:hover {
    background-color: var(--purple-primary);
    color: var(--white);
    transform: scale(1.1);
}

.film-video-wrapper .nav-arrow svg { width: 24px; height: 24px; }

.film-video {
    border: var(--border-width) solid var(--black);
    padding: 20px;
    background-color: var(--cream);
    border-radius: 30px;
    width: 100%;
}

.video-placeholder-film {
    width: 100%;
    height: 450px;
    background-color: var(--gray-light);
    border-radius: 20px;
    overflow: hidden;
    contain: layout style;
}

.film-info-wrapper { display: flex; flex-direction: column; gap: 25px; }
.film-description { padding: 0; }

.film-director {
    font-family: 'Magic', cursive;
    font-size: 1.1rem;
    letter-spacing: 1.5px;
    margin-top: 6px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, var(--orange), var(--purple-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.film-tag {
    font-size: 2.5rem;
    margin-bottom: 15px;
    font-weight: 700;
    color: var(--purple-primary);
    font-family: 'Magic', cursive;
    line-height: 1.2;
}

.film-text {
    line-height: 1.8;
    font-size: 1rem;
    margin-bottom: 18px;
    color: var(--black);
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.film-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
    color: var(--gray-dark);
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-wrap: wrap;
}

.meta-divider { color: var(--purple-primary); font-weight: 700; }

.film-process {
    border: var(--border-width) solid var(--black);
    border-radius: 30px;
    padding: 30px;
    background-color: var(--cream);
    max-height: 420px;
    display: flex;
    flex-direction: column;
}

.process-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--purple-primary);
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 3px solid var(--purple-light);
    font-family: 'Magic', cursive;
}

.process-content {
    overflow-y: auto;
    max-height: 320px;
    padding: 12px 14px;
    padding-right: 10px;
    background: rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 10px;
}

.process-content::-webkit-scrollbar { width: 10px; }
.process-content::-webkit-scrollbar-track { background: var(--gray-light); border-radius: 10px; border: 2px solid var(--gray-medium); }
.process-content::-webkit-scrollbar-thumb { background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%); border-radius: 10px; border: 2px solid var(--cream); }
.process-content::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, var(--purple-dark) 0%, var(--purple-darker) 100%); }

.process-item {
    display: flex;
    gap: 18px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 2px solid var(--gray-medium);
    align-items: flex-start;
}

.process-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.process-number {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border: 3px solid var(--purple-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--purple-primary);
    font-size: 1.2rem;
    font-family: 'Poppins', sans-serif;
    background-color: var(--white);
}

.process-details { flex: 1; padding-top: 2px; }

.process-step {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.3px;
}

.process-text {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--gray-dark);
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

/* ===== ABOUT SECTION ===== */
.about-tabs-wrapper { max-width: var(--container-max-width); margin: 0 auto; }

.about-tabs-wrapper .work-tabs {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 50px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.recognition-scroll-box {
    border: 15px solid #f7ce87;
    border-radius: 30px;
    padding: 30px;
    background-color: var(--cream);
    max-height: 600px;
    display: flex;
    flex-direction: column;
    margin-bottom: 60px;
    position: relative;
    overflow: hidden;
}

.recognition-scroll-content { overflow-y: auto; padding-right: 15px; padding-bottom: 30px; flex: 1; position: relative; z-index: 1; }
.recognition-scroll-content::-webkit-scrollbar { width: 10px; }
.recognition-scroll-content::-webkit-scrollbar-track { background: var(--gray-light); border-radius: 10px; border: 2px solid var(--gray-medium); }
.recognition-scroll-content::-webkit-scrollbar-thumb { background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%); border-radius: 10px; border: 2px solid var(--cream); }
.recognition-scroll-content::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, var(--purple-dark) 0%, var(--purple-darker) 100%); }

.award-film-tag {
    font-family: 'Magic', cursive;
    font-size: 2.2rem;
    color: var(--purple-primary);
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 3px solid var(--purple-light);
    margin-top: 10px;
}

.award-film-divider {
    height: 3px;
    background: linear-gradient(to right, var(--purple-light), transparent);
    margin: 30px 0;
    border-radius: 2px;
}

.award-list { list-style: none; display: flex; flex-direction: column; gap: 0; margin-bottom: 10px; }

.award-list li {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 0;
    border-bottom: 2px solid var(--gray-medium);
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    color: var(--black);
    line-height: 1.6;
}

.award-list li:last-child { border-bottom: none; padding-bottom: 0; }
.award-event { font-weight: 700; font-size: 1.05rem; color: var(--black); }
.award-detail { font-size: 0.95rem; color: var(--gray-dark); font-style: italic; }
.award-wins { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.award-badge {
    background-color: var(--purple-primary);
    color: var(--white);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 6px 18px;
    border-radius: 30px;
    border: 3px solid var(--black);
    letter-spacing: 0.5px;
    font-family: 'Poppins', sans-serif;
    display: inline-block;
}

.award-badge.nominee {
    background-color: var(--white);
    color: var(--purple-darker);
    border-color: var(--purple-primary);
}

/* ===== CAPTION + AWARD LINKS ===== */
.recognition-photo-caption {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-dark);
    text-align: center;
    font-style: italic;
    margin-top: 8px;
    letter-spacing: 0.3px;
    line-height: 1.4;
    max-width: 100%;
}

.award-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--purple-primary);
    text-decoration: none;
    border: 2px solid var(--purple-primary);
    border-radius: 30px;
    padding: 4px 14px;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
}

.award-link:hover {
    background-color: var(--purple-primary);
    color: var(--white);
    transform: translateY(-1px);
}

/* ===== TITLE WAVE IDLE ANIMATION ===== */
@keyframes idleWave {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50%       { transform: translateY(-5px) rotate(1deg); }
}

.nav-title.idle-wave .nav-letter {
    animation: idleWave 3s ease-in-out infinite;
}

.nav-title.idle-wave .nav-letter:nth-child(1)  { animation-delay: 0.0s; }
.nav-title.idle-wave .nav-letter:nth-child(2)  { animation-delay: 0.08s; }
.nav-title.idle-wave .nav-letter:nth-child(3)  { animation-delay: 0.16s; }
.nav-title.idle-wave .nav-letter:nth-child(4)  { animation-delay: 0.24s; }
.nav-title.idle-wave .nav-letter:nth-child(5)  { animation-delay: 0.32s; }
.nav-title.idle-wave .nav-letter:nth-child(6)  { animation-delay: 0.40s; }
.nav-title.idle-wave .nav-letter:nth-child(7)  { animation-delay: 0.48s; }
.nav-title.idle-wave .nav-letter:nth-child(8)  { animation-delay: 0.56s; }
.nav-title.idle-wave .nav-letter:nth-child(9)  { animation-delay: 0.64s; }
.nav-title.idle-wave .nav-letter:nth-child(10) { animation-delay: 0.72s; }
.nav-title.idle-wave .nav-letter:nth-child(11) { animation-delay: 0.80s; }

/* ===== INTRO SCREEN OVERLAY ===== */
#intro-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #e98111 0%, #c85642 40%, #8e2287 70%, #2c0864 100%);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    pointer-events: none;
    animation: introFadeOut 0.6s ease-in-out 2.2s forwards;
    will-change: opacity, transform;
}

@keyframes introFadeOut {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.08); pointer-events: none; }
}

.intro-logo-wrap {
    animation: introLogoIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
    will-change: transform, opacity;
}

@keyframes introLogoIn {
    0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.intro-logo-wrap img {
    width: 160px;
    filter: drop-shadow(0 0 30px rgba(255,220,100,0.8)) drop-shadow(0 0 60px rgba(255,140,0,0.5));
}

.intro-title {
    font-family: 'Magic', cursive;
    font-size: 3rem;
    color: #fff5c0;
    letter-spacing: 14px;
    text-transform: uppercase;
    -webkit-text-stroke: 3px #3a1200;
    paint-order: stroke fill;
    text-shadow:
        3px 3px 0 #3a1200,
        0 0 30px rgba(255,220,80,0.8),
        0 0 60px rgba(255,140,0,0.5);
    margin-top: 20px;
    animation: introTitleIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s both;
}

@keyframes introTitleIn {
    0%   { transform: translateY(20px) scale(0.8); opacity: 0; letter-spacing: 2px; }
    100% { transform: translateY(0) scale(1); opacity: 1; letter-spacing: 14px; }
}

.intro-subtitle {
    font-family: 'Magic', cursive;
    font-size: 0.85rem;
    color: wheat;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-top: 14px;
    -webkit-text-stroke: 1.5px #3a1200;
    paint-order: stroke fill;
    animation: introSubIn 0.6s ease 1.1s both;
}

@keyframes introSubIn {
    0%   { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}

.intro-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.intro-star-particle {
    position: absolute;
    border-radius: 50%;
    animation: introStarFly linear infinite;
    will-change: transform, opacity;
}

@keyframes introStarFly {
    0%   { transform: translate(0,0) scale(0); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translate(var(--fx), var(--fy)) scale(1.5); opacity: 0; }
}

/* ===== ABOUT SECTION ===== */
.about-section { padding: 100px 30px; }

.about-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 40px;
    padding: 70px 80px;
    background-color: var(--white);
    border-radius: 50px;
    border: 15px solid #f7ce87;
    align-items: center;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
}

.about-container .profile-pic-wrapper,
.about-container .about-description {
    position: relative;
    z-index: 1;
}

.profile-placeholder {
    width: 480px;
    aspect-ratio: 3/4;
    border: var(--border-width) solid var(--black);
    border-radius: 20px;
    object-fit: cover;
    display: block;
    margin-right: -20px;
}

.about-name {
    font-size: 2.5rem;
    margin-bottom: 50px;
    font-weight: 700;
    color: rgb(239, 154, 8);
    line-height: 1.2;
    font-family: 'Magic', cursive;
}

.about-description p {
    line-height: 2;
    font-size: 1.15rem;
    margin-bottom: 25px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.skills-tags { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 40px; }

.skill-tag {
    padding: 12px 28px;
    border: var(--border-width) solid var(--black);
    background-color: var(--white);
    font-weight: 700;
    font-size: 1rem;
    transition: var(--transition);
    border-radius: 40px;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.3px;
}

.skill-tag:hover {
    background-color: var(--purple-primary);
    color: var(--white);
    transform: translateY(-2px);
}

/* ===== RECOGNITION PHOTOS ===== */
.recognition-photos-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin: 10px 0 20px 0;
    align-items: flex-start;
}

.recognition-photo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    flex: 1;
    max-width: 50%;
}

.recognition-photo-label {
    font-family: 'Magic', cursive;
    font-size: 1.5rem;
    color: var(--purple-primary);
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    width: 100%;
}

.recognition-photo-wrapper {
    position: relative;
    overflow: hidden;
    padding: 12px;
    background-color: var(--black);
    background-image:
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%),
        radial-gradient(circle at center, white 35%, transparent 35%);
    background-size:
        14px 14px, 14px 14px, 14px 14px, 14px 14px,
        14px 14px, 14px 14px, 14px 14px, 14px 14px;
    background-position:
        0 0, 100% 0, 100% 100%, 0 100%,
        7px 0, 100% 7px, 7px 100%, 0 7px;
    background-repeat:
        no-repeat, no-repeat, no-repeat, no-repeat,
        repeat-x, repeat-y, repeat-x, repeat-y;
    border: 8px solid #0066ff;
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    contain: layout style paint;
}

.recognition-photo {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 0;
    border: none;
    transition: opacity 0.3s ease;
}

.recognition-photo:hover { opacity: 0.9; }

/* ===== CONTACT SECTION ===== */
.contact-section {
    padding: 160px 30px 100px;
    background-color: #9306f77f;
    position: relative;
    z-index: 2;
}

.contact-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    position: relative;
    overflow: visible;
    min-height: 600px;
    border-radius: 30px;
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

.postcard-background { position: relative; z-index: 1; flex: 0 0 60%; }

.postcard-background img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.postcard-stamp-border {
    width: 100%;
    max-width: 100%;
    padding: 12px;
    margin-top: 70px;
    box-sizing: border-box;
}

.contact-stamp.highlight {
    animation: stampPulse 0.6s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(247, 163, 85, 0.8));
}

@keyframes stampPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 4px 8px rgb(255,94,13)) drop-shadow(0 0 15px rgba(247,163,85,0.6));
    }
    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 6px 12px rgb(255,2,154)) drop-shadow(0 0 25px rgba(247,163,85,1));
    }
}

.contact-logo {
    position: absolute;
    top: 75px; left: 100px;
    z-index: 10;
    transition: transform 0.3s ease;
}

.contact-logo:hover {
    transform: scale(1.15) rotate(-5deg);
    animation: logoFloat 2s ease-in-out infinite;
}

.contact-logo img {
    width: 300px; height: auto;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.3));
}

.contact-stamp {
    position: absolute;
    top: 115px; right: 70px;
    z-index: 10;
    transition: transform 0.2s ease;
    will-change: transform;
}

.contact-stamp:active { transform: none !important; }
.contact-stamp:hover  { transform: scale(1.08); }

.contact-stamp img {
    width: 140px; height: auto;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

.postcard-left-text {
    position: absolute;
    left: 120px; top: 67%;
    transform: translateY(-50%) rotate(-8deg) scaleX(1.15) skewX(-8deg);
    transform-origin: left center;
    font-family: 'Brush Script MT', 'Lucida Handwriting', cursive;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.8;
    color: #ffffff;
    max-width: 300px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.postcard-form-area {
    position: absolute;
    right: 80px; top: 280px;
    width: 38%;
}

.postcard-form-area input::placeholder,
.postcard-form-area textarea::placeholder { color: #ffffff; font-size: 0.85rem; }

.postcard-form-area input,
.postcard-form-area textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 4px solid #2c2a2a;
    padding: 10px 5px;
    font-family: 'Arial', sans-serif;
    font-size: 0.9rem;
    color: #ffffff;
    margin-bottom: 30px;
}

.postcard-form-area input:focus,
.postcard-form-area textarea:focus { outline: none; border-bottom-color: #ffffff; }

.postcard-form-area textarea { min-height: 10px; resize: none; }

.postcard-form-area button {
    width: 100%;
    background-color: hsl(282, 100%, 71%);
    color: white;
    border: none;
    padding: 16px;
    font-size: 1.15rem;
    transition: background-color 0.3s ease;
    border-radius: 50px;
    margin-top: 15px;
    font-weight: 600;
}

.postcard-form-area button:hover { background-color: #a71ea0; }

.lets-connect { position: absolute; bottom: 30px; left: 40px; }

.lets-connect h4 {
    color: #e8d1ff;
    font-size: 1.3rem;
    margin-bottom: 12px;
    font-family: 'Comic Sans MS', 'Arial', cursive;
    letter-spacing: 1px;
    text-align: center;
    animation: bounce 2s ease-in-out infinite;
}

.social-icons { display: flex; gap: 12px; }

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    background-color: hsl(282, 100%, 71%);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.social-icons a:hover { transform: scale(1.1); background-color: #a71ea0; }
.social-icons svg { width: 28px; height: 28px; fill: white; }
.social-icons a:nth-child(4):hover { background-color: #E60023; }

.contact-section .section-title {
    color: var(--white);
    border-bottom-color: rgba(255,255,255,0.4);
}

.contact-section .section-title::after { background-color: rgba(255,255,255,0.7); }

/* ===== STAMPS ===== */
.stamps-container {
    display: block;
    position: relative;
    width: 145px;
    height: 480px;
    min-height: 480px;
}

.stamps-container .stamp:nth-child(1) { top: 0px; }
.stamps-container .stamp:nth-child(2) { top: 160px; }
.stamps-container .stamp:nth-child(3) { top: 320px; }

.stamp-instruction {
    position: absolute;
    top: -60px; right: -20%;
    transform: translate(-50%, -50%);
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 700;
    text-align: right;
    animation: bounce 2s ease-in-out infinite;
    z-index: 15;
}

.instruction-arrow {
    display: inline-block;
    font-size: 3rem;
    margin-left: 20px;
    animation: arrowBounce 2s ease-in-out infinite;
    width: 100px;
}

.stamp {
    position: absolute;
    left: 0;
    width: 140px;
    height: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    opacity: 1 !important;
    visibility: visible !important;
    will-change: transform, left, top;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    padding: 8px;
    cursor: url('imgs/mousehover.png'), grab !important;
    background-image:
        radial-gradient(circle at center, white 30%, transparent 30%),
        radial-gradient(circle at center, white 30%, transparent 30%),
        radial-gradient(circle at center, white 30%, transparent 30%),
        radial-gradient(circle at center, white 30%, transparent 30%),
        radial-gradient(circle at center, white 30%, transparent 30%),
        radial-gradient(circle at center, white 30%, transparent 30%),
        radial-gradient(circle at center, white 30%, transparent 30%),
        radial-gradient(circle at center, white 30%, transparent 30%);
    background-size:
        15px 15px, 15px 15px, 15px 15px, 15px 15px,
        12px 12px, 12px 12px, 12px 12px, 12px 12px;
    background-position:
        0 0, 100% 0, 100% 100%, 0 100%,
        6px 0, 100% 6px, 6px 100%, 0 6px;
    background-repeat:
        no-repeat, no-repeat, no-repeat, no-repeat,
        repeat-x, repeat-y, repeat-x, repeat-y;
    border: 8px solid #0066ff;
    box-shadow: inset 0 0 0 2px white;
    -webkit-touch-callout: none;
    touch-action: none;
}

.stamp:not(.dragging):hover {
    transform: scale(1.1) rotate(-3deg) !important;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3))
            drop-shadow(0 0 20px rgba(247,163,85,0.5)) !important;
    z-index: 10;
    transition: transform 0.3s ease, filter 0.3s ease !important;
}

.stamp:active { cursor: url('imgs/mousehover.png'), grabbing !important; }

.stamp img {
    width: 100%; height: 100%;
    pointer-events: none;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    object-fit: cover;
}

.stamp.dragging {
    opacity: 0.8 !important;
    cursor: url('imgs/mousehover.png'), grabbing !important;
    transition: none !important;
    z-index: 1000;
}

.stamp:not(.dragging) {
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

/* ===== STAMPS WRAPPER — desktop pulls stamps left towards postcard ===== */
.stamps-wrapper {
    position: relative;
    padding-top: 100px;
    width: 155px;
    min-width: 155px;
    flex-shrink: 0;
    height: 620px;
    min-height: 620px;
}

/* ===== KEYFRAME ANIMATIONS ===== */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

@keyframes arrowBounce {
    0%, 100% { transform: translateX(0) rotate(-30deg); }
    50%       { transform: translateX(-15px) rotate(-30deg); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== MOBILE CONTACT CARD (hidden on desktop, shown via 768px media query) ===== */
.mobile-contact-card {
    display: none;
}

/* ===== FOOTER ===== */
.footer {
    padding: 40px 30px;
    text-align: center;
    background-color: var(--black);
    color: var(--white);
    border-top: var(--border-width) solid var(--purple-primary);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 1px;
    position: relative;
    z-index: 2;
}

/* ===== BACK TO TOP ===== */
#backToTop {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.4);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.5);
    background-color: #7c3aed;
    will-change: transform, opacity;
}

#backToTop img {
    width: 32px; height: 32px;
    filter: brightness(0) invert(1);
    pointer-events: none;
}

#backToTop:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.6);
}

#backToTop.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* =====================================================
   BUILT POSTCARD — replaces postcard-background
   ===================================================== */

.postcard-built {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  min-height: 580px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(140deg,
    #e98111 0%,
    #d4602a 28%,
    #b84060 55%,
    #8e2287 80%,
    #5a0f80 100%);
  border: 5px solid #811e08;
  box-shadow:
    6px 6px 0 #3a0a00,
    0 24px 60px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.18);
  font-family: 'Poppins', sans-serif;
}

/* Sun glow top-left */
.postcard-built::before {
  content: '';
  position: absolute;
  top: -80px; left: -80px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(255,210,60,0.3) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Faint ruled lines */
.postcard-built::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 170px;
  height: 1px;
  background: rgba(255,255,255,0.08);
  box-shadow:
    0 30px 0 rgba(255,255,255,0.08),
    0 60px 0 rgba(255,255,255,0.08),
    0 90px 0 rgba(255,255,255,0.08),
    0 120px 0 rgba(255,255,255,0.08),
    0 150px 0 rgba(255,255,255,0.08),
    0 180px 0 rgba(255,255,255,0.08),
    0 210px 0 rgba(255,255,255,0.08),
    0 240px 0 rgba(255,255,255,0.08),
    0 270px 0 rgba(255,255,255,0.08),
    0 300px 0 rgba(255,255,255,0.08),
    0 330px 0 rgba(255,255,255,0.08),
    0 360px 0 rgba(255,255,255,0.08);
  pointer-events: none;
  z-index: 0;
}

/* ── TOP STRIP ── */
.pc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 22px 20px;
  position: relative;
  z-index: 2;
}

.pc-post-label {
  font-family: 'Magic', cursive;
  font-size: 0.7rem;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  padding-top: 6px;
}

/* ── PC STAMP BOX ── */
.pc-stamp-box {
  position: relative;
  flex-shrink: 0;
  /* Desktop: size for static stamp */
  width: 110px;
  height: 130px;
}

/* Static stamp image: visible on desktop only */
.pc-stamp-static {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 3px;
  border: 3px solid rgba(255,255,255,0.4);
  transition: border-color 0.2s ease;
}

.pc-stamp-static.heartbeat {
  animation: pcStampHeartbeat 1.4s ease-in-out infinite;
  border-color: rgba(255, 255, 255, 0.9);
}

@keyframes pcStampHeartbeat {
  0%   { transform: scale(1);    box-shadow: 0 0 0px rgba(255,255,255,0); }
  50%  { transform: scale(1.06); box-shadow: 0 0 10px rgba(255,220,80,0.5); }
  100% { transform: scale(1);    box-shadow: 0 0 0px rgba(255,255,255,0); }
}

/* Carousel: hidden on desktop, shown on tablet */
.pc-stamp-carousel {
  display: none;
}

/* Divider */
.pc-divider {
  width: calc(100% - 44px);
  margin: 0 22px;
  height: 2px;
  background: linear-gradient(to right,
    transparent,
    rgba(255,255,255,0.38) 15%,
    rgba(255,255,255,0.38) 85%,
    transparent);
  position: relative;
  z-index: 2;
}

/* ── BODY ── */
.pc-body {
  display: flex;
  flex: 1;
  position: relative;
  z-index: 2;
  min-height: 0;
}

/* ── LEFT COLUMN ── */
.pc-left {
  flex: 0 0 48%;
  padding: 18px 14px 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: center !important;
  position: relative;
}

.pc-character {
  width: 180px !important;
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45));
  align-self: center !important;
  animation: pcFloat 4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pcFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-10px) rotate(2deg); }
}

.pc-message {
  font-family: 'Brush Script MT', 'Lucida Handwriting', cursive;
  font-size: 1.55rem;
  line-height: 1.6;
  color: #fff;
  text-shadow: 1px 2px 5px rgba(0,0,0,0.35);
  margin-top: 10px;
  margin-left: 60px;
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pc-msg-top {
  display: block;
  transform: rotate(-8deg) skewX(-6deg);
  transform-origin: left top;
}

.pc-msg-bottom {
  display: block;
  line-height: 1.9;
  transform: rotate(-8deg) skewX(-6deg);
  transform-origin: left top;
}

.pc-connect {
  margin-top: 14px;
}

.pc-connect-label {
  font-family: 'Comic Sans MS', cursive;
  font-size: 0.72rem;
  letter-spacing: 2.5px;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  margin-top: 26px;
  margin-bottom: 8px;
  display: inline-block;
  animation: bounce 2s ease-in-out infinite;
}

.pc-socials {
  display: flex;
  gap: 7px;
}

.pc-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  transition: all 0.2s ease;
  backdrop-filter: blur(6px);
  cursor: url('imgs/mousehover.png'), pointer !important;
}

.pc-socials a:hover {
  background: rgba(255,255,255,0.32);
  transform: translateY(-3px) scale(1.12);
  border-color: rgba(255,255,255,0.65);
}

.pc-socials svg {
  width: 18px;
  height: 18px;
  fill: white;
  pointer-events: none;
}

/* ── Side-by-side socials + ko-fi layout ── */
.connect-groups {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* ── Ko-Fi section inside postcard ── */
.pc-kofi-section {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.pc-kofi-label {
  font-family: 'Comic Sans MS', cursive;
  font-size: 0.68rem;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
}

.pc-kofi-btn {
  display: inline-block;
  background: linear-gradient(135deg, #ff5f5f, #ff9e5e);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 3px 10px rgba(255,95,95,0.4);
  cursor: url('imgs/mousehover.png'), pointer !important;
}

.pc-kofi-btn:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 6px 16px rgba(255,95,95,0.55);
}

/* ── Ko-Fi section inside mobile contact card ── */
.mobile-kofi-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.mobile-kofi-label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #e8d1ff;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.mobile-kofi-btn {
  display: inline-block;
  background: linear-gradient(135deg, #ff5f5f, #ff9e5e);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 24px;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 4px 14px rgba(255,95,95,0.45);
  cursor: url('imgs/mousehover.png'), pointer !important;
}

.mobile-kofi-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 7px 20px rgba(255,95,95,0.6);
}

/* Vertical rule */
.pc-rule {
  width: 2px;
  background: linear-gradient(to bottom,
    transparent,
    rgba(255,255,255,0.4) 20%,
    rgba(255,255,255,0.4) 80%,
    transparent);
  flex-shrink: 0;
  margin: 18px 0;
}

/* ── RIGHT COLUMN (form) ── */
.pc-right {
  flex: 1;
  padding: 18px 22px 36px 16px;
  display: flex;
  flex-direction: column;
}

.pc-form-title {
  font-family: 'Magic', cursive;
  font-size: 1rem;
  color: rgba(255,255,255,0.65);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.pc-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}

.pc-field label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 3px;
  font-family: 'Poppins', sans-serif;
}

.pc-field input,
.pc-field textarea {
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255,255,255,0.35);
  padding: 7px 4px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.88rem;
  color: #fff;
  transition: border-color 0.2s ease;
  width: 100%;
  resize: none;
}

.pc-field input::placeholder,
.pc-field textarea::placeholder {
  color: rgba(255,255,255,0.28);
}

.pc-field input:focus,
.pc-field textarea:focus {
  outline: none;
  border-bottom-color: #fff;
}

.pc-field textarea {
  min-height: 44px;
}

.pc-send {
  margin-top: auto;
  width: 100%;
  background: linear-gradient(135deg, hsl(282,100%,58%) 0%, hsl(310,90%,44%) 100%);
  color: white;
  border: none;
  padding: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 50px;
  letter-spacing: 1px;
  font-family: 'Magic', cursive;
  box-shadow:
    0 4px 0 rgba(80,0,120,0.5),
    0 8px 24px rgba(150,0,200,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: url('imgs/mousehover.png'), pointer !important;
}

.pc-send:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 rgba(80,0,120,0.5),
    0 12px 30px rgba(150,0,200,0.5);
}

.pc-send:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(80,0,120,0.5);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

/* ===== LARGE TABLETS (769px – 1200px): show carousel, hide static stamp & draggable stamps ===== */
@media (max-width: 1200px) and (min-width: 769px) {

  body {
    padding-left: 80px;
    padding-right: 80px;
  }

  .side-decoration-container {
    width: 80px;
  }

  .nav-title-box {
    min-width: unset !important;
    width: 90%;
    padding: 45px 40px 36px;
    box-sizing: border-box;
  }

  .nav-title {
    font-size: 3rem;
    letter-spacing: 12px;
  }

  .hero-content {
    padding: 80px 60px;
    height: auto !important;
    min-height: 700px;
  }

  .hero-name {
    font-size: 3rem;
  }

  .film-container {
    gap: 30px;
    padding: 40px;
  }

  .about-container {
    grid-template-columns: 380px 1fr;
    padding: 50px 50px;
  }

  .profile-placeholder {
    width: 380px;
  }

  /* Constrain profile pic wrapper to match grid column */
  .profile-pic-wrapper {
    width: 380px;
  }

  /* Sticky nav — fit all 6 buttons on one row */
  .sticky-nav {
    gap: 10px;
    flex-wrap: nowrap;
    padding: 10px 16px;
  }

  .sticky-nav .nav-btn {
    padding: 9px 18px;
    font-size: 0.82rem;
    white-space: nowrap;
  }

  /* Postcard goes full width, draggable stamps hidden */
  .postcard-built {
    flex: none;
    width: 100%;
  }

  .stamps-wrapper,
  .stamps-container,
  .stamp-instruction,
  .contact-stamp {
    display: none !important;
  }

  .contact-container {
    flex-direction: column;
    gap: 0;
  }

  /* ── STAMP BOX: bigger to house carousel ── */
  .pc-stamp-box {
    width: 190px;
    height: 220px;
    overflow: visible;
  }

  /* Hide static stamp, show carousel */
  .pc-stamp-static {
    display: none;
  }

  .pc-stamp-carousel {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
  }

  .pc-stamp-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
  }

  .pc-stamp-img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    padding: 5px;
    background-color: var(--black);
    border: 5px solid #0066ff;
    box-shadow: inset 0 0 0 2px white;
    background-image:
      radial-gradient(circle at center, white 30%, transparent 30%),
      radial-gradient(circle at center, white 30%, transparent 30%),
      radial-gradient(circle at center, white 30%, transparent 30%),
      radial-gradient(circle at center, white 30%, transparent 30%),
      radial-gradient(circle at center, white 30%, transparent 30%),
      radial-gradient(circle at center, white 30%, transparent 30%),
      radial-gradient(circle at center, white 30%, transparent 30%),
      radial-gradient(circle at center, white 30%, transparent 30%);
    background-size:
      8px 8px, 8px 8px, 8px 8px, 8px 8px,
      7px 7px, 7px 7px, 7px 7px, 7px 7px;
    background-position:
      0 0, 100% 0, 100% 100%, 0 100%,
      4px 0, 100% 4px, 4px 100%, 0 4px;
    background-repeat:
      no-repeat, no-repeat, no-repeat, no-repeat,
      repeat-x, repeat-y, repeat-x, repeat-y;
    display: block;
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
    flex-shrink: 0;
  }

  .pc-stamp-btn {
    width: 30px;
    height: 30px;
    border: 2px solid rgba(255,255,255,0.55);
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.2s ease;
    cursor: url('imgs/mousehover.png'), pointer !important;
    padding: 0;
  }

  .pc-stamp-btn:hover {
    background: rgba(255,255,255,0.38);
    transform: scale(1.18);
    border-color: rgba(255,255,255,0.8);
  }

  .pc-stamp-btn svg {
    width: 14px;
    height: 14px;
    stroke: white;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
  }

  .pc-stamp-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
  }

  .pc-stamp-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    border: 1.5px solid rgba(255,255,255,0.6);
    cursor: url('imgs/mousehover.png'), pointer !important;
    transition: background 0.2s ease, transform 0.15s ease;
  }

  .pc-stamp-dot:hover {
    transform: scale(1.3);
  }

  .pc-stamp-dot.active {
    background: white;
    border-color: white;
    transform: scale(1.15);
  }

  /* Footer: counter body 80px padding so it spans full width */
  .footer {
    margin-left: -80px;
    margin-right: -80px;
    padding-left: 110px;
    padding-right: 110px;
  }

}

/* ===== DESKTOP (>1200px): stamp/carousel logic + postcard fix ===== */
@media (min-width: 1201px) {
  /* Static stamp visible, carousel hidden */
  .pc-stamp-static {
    display: block;
  }

  .pc-stamp-carousel {
    display: none !important;
  }

  /* Draggable stamps visible */
  .stamps-wrapper {
    display: block !important;
  }

  /* Postcard fills remaining space beside stamps */
  .postcard-built {
    flex: 1;
    min-width: 0;
  }
}

/* ===== MEDIUM DESKTOP (1201px–1439px) ===== */
@media (min-width: 1201px) and (max-width: 1439px) {
  body {
    padding-left: 100px;
    padding-right: 100px;
  }

  .side-decoration-container {
    width: 100px;
  }

  .nav-title-box {
    min-width: unset !important;
    width: 92%;
    max-width: 920px;
    padding: 40px 60px 30px;
    box-sizing: border-box;
  }

  .nav-title {
    font-size: 3.5rem;
    letter-spacing: 14px;
  }

  .hero-content {
    padding: 100px 80px;
    height: 850px;
  }

  .hero-name {
    font-size: 3.5rem;
  }
}

/* ===== LARGE DESKTOP (>=1440px): full layout ===== */
@media (min-width: 1440px) {
  body {
    padding-left: 160px;
    padding-right: 160px;
  }

  .side-decoration-container {
    width: 160px;
  }

  .nav-title-box {
    min-width: 1000px;
    padding: 45px 80px 36px;
  }

  .nav-title {
    font-size: 4rem;
    letter-spacing: 18px;
  }

  .hero-content {
    padding: 120px;
    height: 900px;
  }

  .hero-name {
    font-size: 3.8rem;
  }
}
@media (max-width: 1024px) {
  body {
    padding-left: 20px;
    padding-right: 20px;
  }

  .side-decoration-container {
    display: none;
  }

  .left-sun {
    width: 12%;
    top: 10px;
    left: 10px;
  }

  .right-moon {
    width: 9%;
    right: 6px;
  }

  .nav-title-box {
    min-width: unset !important;
    width: 100%;
    padding: 45px 20px 36px;
    box-sizing: border-box;
  }

  .nav-title {
    font-size: 2.5rem;
    letter-spacing: 8px;
  }

  .nav-links {
    gap: 12px;
    margin-top: 35px;
  }

  .nav-btn {
    padding: 10px 28px;
    font-size: 0.95rem;
  }

  .hero-content {
    padding: 60px 40px;
    height: auto !important;
    min-height: 600px;
    grid-template-columns: 1fr;
  }

  .hero-name {
    font-size: 2.5rem;
    letter-spacing: 5px;
    top: 60px;
  }

  .hero-roles {
    bottom: 200px;
    left: 40px;
    right: 40px;
  }

  .role-item {
    font-size: 1rem;
  }

  .hero-image {
    display: none;
  }

  .film-container {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px;
  }

  .video-placeholder-film {
    height: 300px;
  }

  .about-container {
    grid-template-columns: 1fr;
    padding: 40px 30px;
    gap: 30px;
  }

  .profile-placeholder {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
  }

  .illustration-display {
    width: 100%;
    height: 500px;
  }

  .anim-gallery-container {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer: counter body padding so it spans full width */
  .footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 1100px) {
  .nav-title {
    font-size: 1.3rem;
    letter-spacing: 4px;
    padding: 20px 10px 10px;
  }

  .about-name {
    font-size: 0.8rem;
  }
}

/* ===== MOBILE LANDSCAPE / SMALL TABLETS (max 768px) ===== */
@media (max-width: 768px) {
  body {
    padding-left: 12px;
    padding-right: 12px;
  }

  .left-sun,
  .right-moon {
    display: none;
  }

  .inbetween-sun img,
  .inbetween-star img,
  .inbetween-star1 img,
  .inbetween-moon img {
    max-width: 100%;
  }

  .nav-title-box {
    padding: 40px 16px 30px;
    border-radius: 40px 40px 30px 30px;
    min-width: unset !important;
    width: 100%;
    box-sizing: border-box;
  }

  .nav-title {
    font-size: 1.8rem;
    letter-spacing: 4px;
    padding: 20px 10px 10px;
  }

  .logo-circle-incomplete {
    width: 220px;
    height: 115px;
    border-top-left-radius: 220px;
    border-top-right-radius: 220px;
  }

  .logo-img {
    width: 160px;
    height: 160px;
    margin-bottom: -60px;
  }

  .nav-title-box::before {
    width: 220px;
  }

  .nav-links {
    gap: 8px;
    margin-top: 30px;
  }

  .nav-btn {
    padding: 9px 20px;
    font-size: 0.8rem;
    letter-spacing: 0.8px;
  }

  .nav-subtitle {
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    padding: 7px 18px;
    gap: 10px;
    white-space: nowrap;
  }

  .hero-section {
    padding: 50px 12px;
  }

  .hero-content {
    padding: 40px 20px;
    min-height: 480px;
    border-radius: 40px;
    grid-template-columns: 1fr;
    height: auto !important;
  }

  .hero-name {
    font-size: 1.8rem;
    letter-spacing: 3px;
    top: 30px;
    padding: 8px 12px;
  }

  .hero-roles {
    bottom: 120px;
    left: 20px;
    right: 20px;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: flex-start;
  }

  .hero-roles .role-item:nth-child(1),
  .hero-roles .role-item:nth-child(2),
  .hero-roles .role-item:nth-child(3) {
    justify-self: start;
  }

  .role-item {
    font-size: 0.9rem;
    padding: 7px 12px;
  }

  .work-button {
    font-size: 1rem;
    padding: 12px 24px;
    bottom: 20px;
  }

  .work-section {
    padding: 60px 12px 80px;
  }

  .work-tabs {
    gap: 10px;
    margin-bottom: 30px;
  }

  .tab-btn {
    padding: 10px 24px;
    font-size: 0.75rem;
  }

  .illustration-showcase {
    padding: 8px 10px;
    flex-direction: column;
    gap: 10px;
  }

  .work-content {
    border-radius: 30px;
    border-width: 6px;
    padding: 20px 16px 24px;
  }

  .illustration-display {
    width: 100%;
    height: 320px;
  }

  .nav-arrow {
    width: 100px;
    height: 44px;
  }

  .nav-arrow:first-of-type { left: 10px; }
  .nav-arrow:last-of-type  { right: 10px; }

  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    padding: 16px;
  }

  .animations-section {
    padding: 50px 12px;
  }

  .animation-container {
    border-radius: 30px;
    border-width: 6px;
    padding: 20px 16px 24px;
  }

  .animation-showcase {
    padding: 8px 10px;
  }

  .video-placeholder {
    height: 320px;
  }

  .anim-gallery-container {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }

  .films-section {
    padding: 80px 12px;
  }

  .film-container {
    border-radius: 30px;
    border-width: 8px;
    padding: 20px;
    grid-template-columns: 1fr;
  }

  .film-tag {
    font-size: 1.8rem;
  }

  .video-placeholder-film {
    height: 240px;
    border-radius: 14px;
  }

  .film-process {
    max-height: none;
    padding: 20px;
  }

  .about-section {
    padding: 60px 12px;
  }

  .about-container {
    grid-template-columns: 1fr;
    padding: 30px 20px;
    border-radius: 30px;
    border-width: 8px;
    gap: 20px;
  }

  .about-name {
    font-size: 2rem;
    margin-bottom: 30px;
  }

  .about-description p {
    font-size: 1rem;
  }

  .skills-tags {
    gap: 10px;
    margin-top: 25px;
  }

  .skill-tag {
    padding: 9px 20px;
    font-size: 0.9rem;
  }

  .recognition-photos-row {
    flex-direction: column;
  }

  .recognition-photo-section {
    max-width: 100%;
  }

  .recognition-scroll-box {
    border-width: 8px;
    border-radius: 20px;
    padding: 20px;
  }

  /* ===== CONTACT: full mobile rebuild ===== */
  .contact-section {
    padding: 60px 16px 60px;
  }

  /* Hide all postcard/stamp/carousel elements */
  .postcard-built,
  .postcard-background,
  .postcard-stamp-border,
  .postcard-left-text,
  .contact-stamp,
  .stamps-wrapper,
  .stamps-container,
  .stamp-instruction,
  .instruction-arrow,
  .pc-stamp-carousel {
    display: none !important;
  }

  /* Container: centered column */
  .contact-container {
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-height: auto;
    max-width: 480px;
    margin: 0 auto;
  }

  /* Mobile contact card */
  .mobile-contact-card {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 100%;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-radius: 30px;
    padding: 36px 28px 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  }

  /* Logo inside card */
  .mobile-contact-card .contact-logo {
    display: block !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    animation: none !important;
  }

  .mobile-contact-card .contact-logo img {
    width: 100px !important;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
  }

  /* Form inside card */
  .mobile-contact-card .postcard-form-area {
    display: block !important;
    position: static !important;
    width: 100% !important;
    right: auto !important;
    top: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .mobile-contact-card .postcard-form-area input,
  .mobile-contact-card .postcard-form-area textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.45);
    border-radius: 0;
    padding: 12px 8px;
    font-size: 1rem;
    color: #ffffff;
    margin-bottom: 20px;
    transition: border-bottom-color 0.2s ease;
  }

  .mobile-contact-card .postcard-form-area input:focus,
  .mobile-contact-card .postcard-form-area textarea:focus {
    outline: none;
    border-bottom-color: #ffffff;
  }

  .mobile-contact-card .postcard-form-area input::placeholder,
  .mobile-contact-card .postcard-form-area textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
  }

  .mobile-contact-card .postcard-form-area textarea {
    min-height: 90px;
    resize: none;
  }

  .mobile-contact-card .postcard-form-area button {
    width: 100%;
    background: linear-gradient(135deg, hsl(282, 100%, 55%) 0%, hsl(310, 90%, 45%) 100%);
    color: white;
    border: none;
    padding: 14px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 50px;
    margin-top: 8px;
    letter-spacing: 1px;
    box-shadow: 0 4px 16px rgba(150, 0, 200, 0.4);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .mobile-contact-card .postcard-form-area button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
  }

  /* Social icons inside card */
  .mobile-contact-card .lets-connect {
    display: flex !important;
    position: static !important;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .mobile-contact-card .lets-connect .connect-groups {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;
  }

  .mobile-contact-card .lets-connect .mobile-kofi-section {
    margin-top: 0;
    align-items: center;
  }

  .mobile-contact-card .lets-connect h4 {
    font-size: 1.1rem;
    color: #f0d8ff;
    letter-spacing: 2px;
    animation: none;
    transform: none;
  }

  .mobile-contact-card .social-icons {
    justify-content: center;
    gap: 14px;
  }

  .mobile-contact-card .social-icons a {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background-color: rgba(140, 0, 210, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.2);
  }

  .mobile-contact-card .social-icons a:hover {
    background-color: hsl(282, 100%, 45%);
    transform: scale(1.1);
  }

  .section-title {
    font-size: 1.5rem;
    letter-spacing: 2px;
  }

  .footer {
    font-size: 0.9rem;
    padding: 30px 20px;
  }

  #backToTop {
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
  }

  .sticky-nav {
    gap: 8px;
    padding: 10px 8px;
  }

  .sticky-nav .nav-btn {
    padding: 8px 16px;
    font-size: 0.75rem;
  }
}

/* ===== SMALL MOBILE (max 480px) ===== */
@media (max-width: 480px) {
  .nav-title {
    font-size: 1rem;
    letter-spacing: 2px;
  }

  .logo-circle-incomplete {
    width: 180px;
    height: 95px;
    border-top-left-radius: 180px;
    border-top-right-radius: 180px;
  }

  .logo-img {
    width: 130px;
    height: 130px;
    margin-bottom: -50px;
  }

  .nav-title-box::before {
    width: 180px;
  }

  .nav-links {
    gap: 6px;
  }

  .nav-btn {
    padding: 8px 14px;
    font-size: 0.7rem;
  }

  .hero-name {
    font-size: 1.4rem;
    letter-spacing: 2px;
    white-space: normal;
    text-align: center;
    width: calc(100% - 40px);
  }

  .hero-content {
    min-height: 400px;
    border-radius: 30px;
    height: auto !important;
  }

  .hero-roles {
    bottom: 80px;
    left: 16px;
    right: 16px;
  }

  .role-item {
    font-size: 0.8rem;
    padding: 5px 10px;
  }

  .illustration-display {
    height: 260px;
  }

  .video-placeholder {
    height: 240px;
  }

  .film-tag {
    font-size: 1.5rem;
  }

  .about-name {
    font-size: 1.7rem;
  }


  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .postcard-form-area {
    padding: 16px;
  }

  .tab-btn {
    padding: 8px 16px;
    font-size: 0.7rem;
  }
}

/* ===== PROFILE PIC CAROUSEL ===== */
.profile-pic-wrapper {
    position: relative;
    width: 480px;
    flex-shrink: 0;
}

.profile-pic-wrapper .profile-placeholder {
    width: 100%;
    margin-right: 0;
}

.profile-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: 3px solid var(--black);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: var(--transition);
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

.profile-arrow:hover {
    background-color: var(--purple-primary);
    transform: translateY(-50%) scale(1.1);
}

.profile-arrow img {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.profile-arrow-prev {
    left: -20px;
}

.profile-arrow-prev img {
    transform: scaleX(-1);
}

.profile-arrow-next {
    right: -20px;
}

/* Dot indicators */
.profile-pic-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 10;
}

.profile-pic-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    border: 2px solid rgba(0,0,0,0.25);
    transition: background 0.2s ease, transform 0.15s ease;
    cursor: url('imgs/mousehover.png'), pointer !important;
}

.profile-pic-dot.active {
    background: var(--purple-primary);
    border-color: var(--black);
    transform: scale(1.25);
}

@media (max-width: 1024px) {
    .profile-pic-wrapper {
        width: 100%;
        max-width: 380px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .profile-arrow-prev { left: -14px; }
    .profile-arrow-next { right: -14px; }

    .profile-arrow {
        width: 38px;
        height: 38px;
    }

    .profile-arrow img {
        width: 14px;
        height: 14px;
    }
}

/* ===== FILM ARTWORK LIGHTBOX ===== */
.film-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

.film-lightbox.active { display: flex; }

.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.lightbox-img-wrap {
    position: relative;
    z-index: 1;
    max-width: min(90vw, 1100px);
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 14px;
}

.lightbox-img-wrap::after {
    content: 'HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR  HANA TAYLOR';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Magic', cursive;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.28);
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    letter-spacing: 3px;
    text-transform: uppercase;
    word-break: break-all;
    overflow: hidden;
    pointer-events: none;
    z-index: 10;
    transform: rotate(-30deg);
    line-height: 2.8;
    padding: 20px;
    text-align: center;
}

#lightboxImg {
    max-width: 100%;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 14px;
    display: block;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}

.lightbox-close {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.14);
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.15s ease;
    cursor: url('imgs/mousehover.png'), pointer !important;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.1);
}

.lightbox-prev,
.lightbox-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(255, 255, 255, 0.14);
    border: 2px solid rgba(255, 255, 255, 0.4);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.15s ease;
    cursor: url('imgs/mousehover.png'), pointer !important;
}

.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }

.lightbox-prev img { transform: scaleX(-1); }

.lightbox-prev img,
.lightbox-next img {
    width: 22px;
    height: 22px;
    filter: brightness(100);
    pointer-events: none;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-50%) scale(1.08);
}

.lightbox-counter {
    position: fixed;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    background: rgba(0, 0, 0, 0.45);
    padding: 5px 16px;
    border-radius: 20px;
}

@media (max-width: 600px) {
    .lightbox-prev { left: 8px; }
    .lightbox-next { right: 8px; }
    .lightbox-prev, .lightbox-next { width: 40px; height: 40px; }
    .lightbox-prev img, .lightbox-next img { width: 16px; height: 16px; }
}

/* ===== WIP PROCESS SECTION (below closeup) ===== */
.wip-process-section {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 3px dashed rgba(129, 30, 8, 0.18);
}

.wip-process-title {
    font-family: 'Magic', cursive;
    font-size: 2.2rem;
    color: var(--black);
    text-align: center;
    letter-spacing: 4px;
    margin-bottom: 6px;
}

.wip-process-subtitle {
    text-align: center;
    font-size: 0.95rem;
    color: var(--gray-dark);
    margin-bottom: 32px;
    font-style: italic;
}

.wip-process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

.wip-process-grid img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 16px;
    border: 3px solid var(--black);
    display: block;
}

.wip-process-grid .no-artwork {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 0;
    font-size: 1rem;
}

.wip-process-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wip-process-grid video {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 16px;
    border: 3px solid var(--black);
    display: block;
    background: #000;
}

.wip-item-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--white);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.8;
}

/* Subpage (commissions.html) — no hero section, so give the navbar breathing room */
body.subpage .commissions-section {
    padding-top: 60px;
}

/* ===== COMMISSIONS TEASER (main page) ===== */
.comm-teaser-section {
    padding: 60px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.comm-teaser-inner {
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid var(--orange);
    border-radius: 20px;
    padding: 40px 60px;
    text-align: center;
    max-width: 600px;
    width: 100%;
}

.comm-teaser-title {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--orange);
    letter-spacing: 0.12em;
    margin: 0 0 12px;
}

.comm-teaser-sub {
    color: #e8d5f5;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 24px;
}

/* ===== COMMISSIONS SECTION ===== */
.commissions-section {
    padding: 80px 30px;
    position: relative;
    overflow: hidden;
}

.commissions-container {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

.comm-cloud-1 { width: 380px; top: -20px;   right: -50px; }
.comm-cloud-2 { width: 400px; bottom: -10px; left: -50px; }
.comm-cloud-3 { width: 300px; top: 30%;     left: -45px; }
.comm-cloud-4 { width: 280px; bottom: 25%;  right: -45px; }

/* Tabs row */
.comm-tabs {
    position: relative;
    z-index: 1;
    margin-bottom: 28px;
}

/* Tab panels */
.comm-panel {
    position: relative;
    z-index: 1;
    animation: commFadeIn 0.22s ease;
}

@keyframes commFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* TOS panel — 3-column grid */
.comm-tos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.comm-tos-refunds {
    grid-column: span 2;
}

.comm-tos-block {
    background: var(--cream);
    border: 3px solid var(--black);
    border-radius: 18px;
    padding: 20px 18px;
    box-shadow: 4px 4px 0 var(--black);
}

.comm-tos-heading {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--purple-darker);
    margin-bottom: 8px;
}

.comm-tos-block p {
    font-size: 0.86rem;
    line-height: 1.65;
    color: var(--black);
    margin-bottom: 8px;
}

.comm-tos-block p:last-child { margin-bottom: 0; }

/* Refund stages */
.comm-stages {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 10px 0;
}

.comm-stage {
    background: var(--gray-light);
    border: 2px solid var(--black);
    border-radius: 10px;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}

.comm-stage-name {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--black);
}

.comm-stage-pct {
    font-size: 0.72rem;
    color: var(--purple-darker);
    font-weight: 600;
}

/* Shared card for Rights + Will/Won't */
.comm-card {
    background: var(--cream);
    border: 3px solid var(--black);
    border-radius: 18px;
    padding: 24px 22px;
    box-shadow: 4px 4px 0 var(--black);
}

/* Two-column layout for Rights and Will/Won't */
.comm-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.comm-rights-label,
.comm-ww-label {
    font-family: 'Magic', cursive;
    font-size: 1.3rem;
    letter-spacing: 1px;
    margin-bottom: 14px;
    display: block;
}

.comm-will-label { color: #2d7a2d; }
.comm-wont-label { color: #b22222; }

/* Rules lists */
.comm-rules-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.comm-rules-list li {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--black);
    padding-left: 18px;
    position: relative;
}

.comm-rules-list li::before {
    content: '✦';
    position: absolute;
    left: 0;
    color: var(--purple-primary);
    font-size: 0.62rem;
    top: 4px;
}

.comm-note {
    font-size: 0.82rem;
    font-style: italic;
    color: var(--white);
    margin-top: 12px;
    line-height: 1.6;
}

.comm-note-center { text-align: center; }

/* CTA */
.comm-contact-cta {
    text-align: center;
    margin-top: 28px;
    padding: 22px 20px;
    background: var(--purple-primary);
    border: 4px solid var(--black);
    border-radius: 24px;
    box-shadow: 6px 6px 0 var(--black);
    position: relative;
    z-index: 1;
}

.comm-contact-cta p {
    font-size: 1rem;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 12px;
}

.comm-cta-btn {
    display: inline-block;
    padding: 12px 32px;
    background: var(--black);
    color: var(--white);
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: var(--transition);
}

.comm-cta-btn:hover {
    background: var(--purple-darker);
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--black);
}

/* ===== COMMISSION TYPES ===== */
.comm-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.comm-type-card {
    background: var(--cream);
    border: 3px solid var(--black);
    border-radius: 18px;
    padding: 24px 20px;
    box-shadow: 4px 4px 0 var(--black);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comm-type-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gray-medium);
}

.comm-type-title {
    font-family: 'Magic', cursive;
    font-size: 1.2rem;
    color: var(--black);
    letter-spacing: 0.5px;
}

.comm-type-price {
    display: inline-block;
    background: var(--purple-primary);
    color: var(--black);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 50px;
    border: 2px solid var(--black);
    align-self: flex-start;
}

.comm-type-desc {
    font-size: 0.86rem;
    line-height: 1.65;
    color: var(--black);
}

.comm-type-note {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--purple-darker);
    margin-top: auto;
    padding-top: 6px;
}

/* ===== COMMISSION EXAMPLES ===== */
.comm-examples {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 2px dashed rgba(124, 43, 182, 0.2);
}

.comm-examples-label {
    font-family: 'Magic', cursive;
    font-size: 1.1rem;
    color: var(--purple-primary);
    margin-bottom: 10px;
    text-align: center;
}

.comm-examples-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.comm-examples-grid .artwork-img-wrapper {
    width: 100%;
    border-radius: 12px;
}

.comm-example-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
    cursor: zoom-in;
    display: block;
    transition: opacity 0.2s ease;
}

.comm-example-img:hover { opacity: 0.88; }

/* ===== SHOP SECTION ===== */
.comm-shop-section {
    margin-top: 32px;
    padding: 24px 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid var(--orange);
    border-radius: 20px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.comm-shop-title {
    font-family: 'Magic', cursive;
    font-size: 1.5rem;
    color: var(--white);
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.comm-shop-btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.comm-shop-btn {
    padding: 12px 32px;
    background: var(--purple-primary);
    color: var(--black);
    border: 3px solid var(--black);
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    box-shadow: 3px 3px 0 var(--black);
    transition: var(--transition);
    cursor: url('imgs/mousehover.png'), pointer !important;
}

.comm-shop-btn:hover {
    background: var(--purple-dark);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--black);
}

/* ===== EXIT MODAL ===== */
.exit-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.exit-modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.exit-modal-box {
    background: var(--cream);
    border: 4px solid var(--black);
    border-radius: 24px;
    box-shadow: 6px 6px 0 var(--black);
    padding: 36px 40px;
    text-align: center;
    max-width: 380px;
    width: 90%;
}

.exit-modal-text {
    font-size: 1rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 6px;
}

.exit-modal-sub {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--purple-darker);
    margin-bottom: 24px;
}

.exit-modal-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
}

.exit-modal-cancel {
    padding: 10px 28px;
    background: var(--gray-light);
    color: var(--black);
    border: 3px solid var(--black);
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 3px 3px 0 var(--black);
    transition: var(--transition);
    cursor: url('imgs/mousehover.png'), pointer !important;
}

.exit-modal-cancel:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--black);
}

.exit-modal-go {
    padding: 10px 28px;
    background: var(--purple-primary);
    color: var(--black);
    border: 3px solid var(--black);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 3px 3px 0 var(--black);
    transition: var(--transition);
    cursor: url('imgs/mousehover.png'), pointer !important;
}

.exit-modal-go:hover {
    background: var(--purple-dark);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--black);
}

@media (max-width: 900px) {
    .comm-tos-grid { grid-template-columns: 1fr 1fr; }
    .comm-tos-refunds { grid-column: span 2; }
    .comm-stages { grid-template-columns: repeat(2, 1fr); }
    .comm-types-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .comm-tos-grid { grid-template-columns: 1fr; }
    .comm-tos-refunds { grid-column: span 1; }
    .comm-two-col { grid-template-columns: 1fr; }
    .wip-process-title { font-size: 1.6rem; }
    .comm-types-grid { grid-template-columns: 1fr; }
}

/* ===== TABLET (769px – 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Sticky nav — tighter spacing so all 6 links fit */
  .sticky-nav {
    gap: 5px;
    padding: 8px 10px;
  }

  .sticky-nav .nav-btn {
    padding: 7px 12px;
    font-size: 0.75rem;
  }

  /* Social icon row — smaller icons so 7 + Ko-Fi fit */
  .pc-socials {
    gap: 5px;
    flex-wrap: wrap;
  }

  .pc-socials a {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }

  .pc-socials svg {
    width: 14px;
    height: 14px;
  }

  .pc-kofi-btn {
    font-size: 0.68rem;
    padding: 6px 12px;
    border-radius: 20px;
  }

  /* Recognition / events scroll box */
  .recognition-scroll-box {
    padding: 24px 20px;
  }

  /* Gallery grid — 2 columns on tablet */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Animation gallery — 2 columns */
  .anim-gallery-container {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Commissions — single column cards below 900px already handled,
     but ensure shop + CTA sections have breathing room */
  .comm-shop-section {
    margin-top: 30px;
  }
}

/* ===== NARROW TABLET (769px – 860px): stack postcard body ===== */
@media (min-width: 769px) and (max-width: 860px) {

  /* Stack left/right columns vertically */
  .pc-body {
    flex-direction: column;
  }

  .pc-left {
    flex: none;
    width: 100%;
    padding: 14px 20px 10px;
  }

  .pc-rule {
    width: calc(100% - 40px);
    height: 2px;
    margin: 0 20px;
    border: none;
    background: rgba(0,0,0,0.12);
  }

  .pc-right {
    padding: 14px 20px 24px;
  }

  .pc-character {
    width: 70px;
  }

  /* About section at narrow tablet */
  .about-container {
    grid-template-columns: 1fr;
    padding: 30px 24px;
  }

  .profile-placeholder {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
}