html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Grid Background */
.grid-bg {
    background-color: #F8F4EC;
    background-image: 
        linear-gradient(#C1D3E0 1px, transparent 1px),
        linear-gradient(90deg, #C1D3E0 1px, transparent 1px);
    background-size: 30px 30px;
}

/* Bubble Wrap Background Effect - REAL LOCAL IMAGE */
.bubble-wrap {
    background-color: transparent;
    background-image: url('bubble.svg');
    background-size: 80px 80px;
    background-position: center;
    animation: panBubble 30s linear infinite;
    opacity: 0.9;
    mix-blend-mode: normal;
    /* Torn edge effect using a subtle mask/border */
    border-bottom: 20px dotted #F8F4EC;
}

.bubble-wrap-shine {
    display: none;
}

@keyframes panBubble {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* 3D Box Setup - TRUE ISOMETRIC (No Perspective) */
.scene {
    display: flex;
    justify-content: center;
    align-items: center;
}

.preserve-3d {
    transform-style: preserve-3d;
    /* Orthographic isometric rotation matched to reference */
    transform: rotateX(-35deg) rotateY(35deg);
    position: relative;
}

.face {
    position: absolute;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Cardboard Texture Effect */
.cardboard-texture::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
    z-index: 100;
}

/* Floor shadow for 3D box */
.box-shadow-3d::before {
    content: '';
    position: absolute;
    bottom: -150px;
    left: 50%;
    transform: translateX(-50%) rotateX(90deg);
    width: 120%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, transparent 60%);
    filter: blur(15px);
    pointer-events: none;
    z-index: -1;
}

/* TOP FACE: W:400, D:280 */
.face-top {
    width: 400px;
    height: 280px;
    left: 0;
    top: 10px;
    background-color: #EAAA65 !important;
    transform: rotateX(90deg) translateZ(150px);
    transform-origin: center center;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* LEFT FACE: D:280, H:300 */
.face-left {
    width: 280px;
    height: 300px;
    left: 60px; /* (400-280)/2 */
    top: 0;
    background-color: #DE8A32 !important;
    transform: rotateY(-90deg) translateZ(200px);
}

/* FRONT FACE: W:400, H:300 */
.face-front {
    width: 400px;
    height: 300px;
    left: 0;
    top: 0;
    background-color: #C2721D !important;
    transform: rotateY(0deg) translateZ(140px);
}



/* Tape Pattern */
.tape-pattern {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(0,0,0,0.05) 10px,
        rgba(0,0,0,0.05) 20px
    );
}

/* Curved Text container animation (handled in JS, but base setup here) */
.curved-text-container {
    /* Set a fixed height to make curving easier if using SVG/CSS */
    position: relative;
    width: 600px;
    height: 150px;
}

/* Small specific shapes */
.clip-star {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* INNER FACES FOR THE BOX */
.face-back {
    width: 400px;
    height: 300px;
    left: 0;
    top: 0;
    background-color: #6D4013 !important;
    transform: translateZ(-140px);
}
.face-right {
    width: 280px;
    height: 300px;
    left: 60px;
    top: 0;
    background-color: #59320C !important;
    transform: rotateY(-90deg) translateZ(-200px);
}
.face-bottom {
    width: 400px;
    height: 280px;
    left: 0;
    top: 10px;
    background-color: #422407 !important;
    transform: rotateX(90deg) translateZ(-150px);
}

/* LID HINGE */

.preserve-3d.is-open .face-top {
    transform: rotateX(90deg) translateZ(150px) translateY(-140px) rotateX(130deg) translateY(140px) !important;
}

/* ITEM POPPING OUT OF THE BOX (IN FRONT, TO THE RIGHT SIDE) */
.box-item {
    position: absolute;
    width: 235px;
    left: 50%;
    top: 50%;
    /* Start hidden inside the center of the box */
    transform: translate(-50%, -20%) scale(0.3) rotate(-10deg);
    transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s, opacity 0.35s ease-in;
    opacity: 0;
    pointer-events: none;
    text-align: center;
    border-radius: 12px;
    z-index: 100;
}
.preserve-3d.is-open ~ .box-item {
    /* Fly out to the RIGHT side of the box, completely separated and in front! */
    transform: translate(195px, -135px) scale(1) rotate(4deg) !important;
    opacity: 1;
    pointer-events: auto;
    animation: floatTextRight 3s ease-in-out infinite 1s;
}
@keyframes floatTextRight {
    0%, 100% { transform: translate(195px, -135px) scale(1) rotate(4deg); }
    50% { transform: translate(195px, -150px) scale(1) rotate(2deg); }
}

@media (max-width: 640px) {
    .preserve-3d.is-open ~ .box-item {
        transform: translate(75px, -140px) scale(0.9) rotate(2deg) !important;
        animation: floatTextRightMobile 3s ease-in-out infinite 1s !important;
    }
    @keyframes floatTextRightMobile {
        0%, 100% { transform: translate(75px, -140px) scale(0.9) rotate(2deg); }
        50% { transform: translate(75px, -155px) scale(0.9) rotate(0deg); }
    }
}

.preserve-3d.is-open ~ .click-hint-badge {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
    pointer-events: none;
}

/* NEW CHARACTER PEEK CSS */
.character-peek {
    position: absolute;
    width: 120px;
    height: 120px;
    left: 140px;
    top: 90px;
    transform: translateY(100px) translateZ(0px);
    transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s, opacity 0.5s;
    opacity: 0;
    pointer-events: none;
}
.preserve-3d.is-open .character-peek {
    transform: translateY(-80px) translateZ(120px) !important;
    opacity: 1;
    animation: peekBob 2s ease-in-out infinite 1s;
}
@keyframes peekBob {
    0%, 100% { transform: translateY(-80px) translateZ(120px); }
    50% { transform: translateY(-90px) translateZ(120px); }
}


/* Make the whole box clickable */
.preserve-3d {
    cursor: pointer;
}

/* ============================================================ */
/* BERAU CORPORATE MAGAZINE 3D LEVITATING FLOATING SPREAD */
/* ============================================================ */
/* PT BERAU COAL PRESS RELEASE INSTAGRAM CAROUSEL */
/* ============================================================ */
#berau-press-track {
    display: flex;
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    width: 100%;
}
.berau-press-dot-btn {
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.berau-press-dot-btn:active {
    transform: scale(0.95);
}

/* ============================================================ */
/* INTERACTIVE DRAG-TO-CUT & PINCH-TO-RESTORE SEAMS */
/* ============================================================ */
/* SEVERED COMPARTMENT SLAB DETACHMENT (PAPER CUT SEPARATION) */
/* ============================================================ */
.parcel-slab {
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.5s ease;
    transform-origin: center center;
    will-change: transform;
}

/* Slabs subtle tilt when severed */
.parcel-slab.slab-severed-bottom {
    transform: rotate(-0.5deg);
}

.parcel-slab.slab-severed-top {
    transform: rotate(0.5deg);
}

.parcel-slab.slab-severed-top.slab-severed-bottom {
    transform: rotate(-0.35deg);
}

/* Cut Seam strip severed state */
.parcel-cut-strip {
    position: relative;
    overflow: visible;
    transition: all 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.parcel-cut-strip.is-severed {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* Top Lip of the severed seam */
.parcel-seam-top {
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-radius 0.4s ease;
    will-change: transform;
    position: relative;
    z-index: 25;
}
.parcel-cut-strip.is-severed .parcel-seam-top {
    background: #FDFBF7 !important;
    border: 4px solid #1A1A1A !important;
    border-top: none !important;
    border-bottom: 5px dashed #FF5959 !important;
    border-radius: 0 0 18px 18px !important;
    box-shadow: 10px 8px 0 #3323B0, 0 12px 20px -4px rgba(0,0,0,0.25) !important;
    transform: rotate(-0.55deg) translateY(-2px);
    transform-origin: center top;
}

/* Middle Void Gap: EXPANDS TO 76px to physically push the next compartment down! */
.seam-track {
    transition: height 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), margin 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}
.parcel-cut-strip.is-severed .seam-track {
    height: 76px !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    background: transparent !important;
}

/* The dotted line inside the void gap fades out when cut */
.parcel-cut-strip.is-severed .seam-track > .border-dashed {
    opacity: 0.1;
}

/* The slit overlay in the void gap */
.parcel-cut-strip.is-severed .seam-cut-slit {
    opacity: 0;
}

/* Destination tag in void gap */
.parcel-cut-strip.is-severed .destination-tag {
    opacity: 0.35;
    transform: scale(0.9) rotate(3deg);
}

/* Scissors runner sits cleanly at right edge */
.parcel-cut-strip.is-severed .scissors-runner {
    left: calc(100% - 40px) !important;
    transform: translateY(-50%) rotate(14deg);
    opacity: 0.95;
}

/* Bottom Lip of the severed seam */
.parcel-seam-bottom {
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-radius 0.4s ease;
    will-change: transform;
    position: relative;
    z-index: 25;
}
.parcel-cut-strip.is-severed .parcel-seam-bottom {
    background: #FDFBF7 !important;
    border: 4px solid #1A1A1A !important;
    border-bottom: none !important;
    border-top: 5px dashed #FF5959 !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 10px 8px 0 #3323B0, 0 12px 20px -4px rgba(0,0,0,0.25) !important;
    transform: rotate(0.55deg) translateY(2px);
    transform-origin: center bottom;
}

/* Severed Overlay Controls: Centered right in the middle of the 76px void gap */
.parcel-cut-strip.is-severed .severed-controls {
    display: flex !important;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    z-index: 40;
}

/* Hide V-Notches when severed so the gap looks cleanly cut open */
.parcel-cut-strip.is-severed .pointer-events-none.rotate-45 {
    opacity: 0;
}

.seam-cut-slit {
    pointer-events: none;
    box-shadow: 0 0 8px rgba(0,0,0,0.4);
}
.scissors-runner {
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    will-change: left, transform;
}
.scissors-runner:active, .scissors-runner.is-dragging {
    cursor: grabbing;
}
.scissors-runner.is-dragging .scissor-icon {
    animation: rapidSnip 0.16s ease-in-out infinite alternate;
}
@keyframes rapidSnip {
    0% { transform: rotate(-24deg) scale(1.15); }
    100% { transform: rotate(8deg) scale(1.2); }
}
.tape-restored-flash {
    animation: tapeSlap 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes tapeSlap {
    0% { transform: translate(-50%, -50%) scale(0.6) rotate(-8deg); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.12) rotate(2deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(-1deg); opacity: 1; }
}
@keyframes cutSnapRecoil {
    0% { transform: scale(1); }
    35% { transform: scale(0.994) rotate(-0.15deg); }
    70% { transform: scale(1.003) rotate(0.1deg); }
    100% { transform: scale(1); }
}
.cut-snap-recoil {
    animation: cutSnapRecoil 0.35s ease-out;
}