/* ---------- Global ---------- */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Georgia', 'Times New Roman', serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    touch-action: none;
    background: #1a0f08;
}

/* ---------- Custom Cursor ---------- */
#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 96px;
    height: 96px;
    pointer-events: none;
    z-index: 99999;
    opacity: 0;
    /* Smooth following lag for a "wow" effect */
    transition: opacity 0.25s ease, transform 0.1s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

#custom-cursor.active {
    opacity: 1;
}

#custom-cursor img {
    width: 100%;
    height: 100%;
    display: block;
}

/* ---------- Desk ---------- */
#desk {
    position: fixed;
    inset: 0;
    background-image: url('assets/images/woodtop-texture.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

#stage {
    position: absolute;
    inset: 0;
    perspective: 1600px;
}

/* ---------- Draggable base ---------- */
.draggable {
    position: absolute;
    cursor: grab;
    will-change: transform;
    /* Smooth shadow to lift things off the desk */
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
    transform-origin: center center;
    transition: filter 0.15s ease;
}

.draggable.dragging {
    cursor: grabbing;
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.55));
}

.draggable img,
.draggable .paper-surface {
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

/* ---------- Paper (generic surface that may be clipped for future folding) ---------- */
.paper {
    position: relative;
}

.paper-surface {
    background-repeat: no-repeat;
    background-size: cover; /* overridden inline when clipping */
    width: 100%;
    height: 100%;
}

/* ---------- Envelope ---------- */
.envelope {
    /* Width tuned to fit on the desk; height follows aspect ratio */
    width: 420px;
}

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

/* Flip animation: rotate around Y axis */
.envelope.flipping {
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Once opened, the envelope is torn down into two sibling .envelope-flap
   containers (one for the bottom body, one for the top flap) plus a .letter
   sibling. All three are independently draggable but the two flaps are
   "fused" via Draggable's `linked` option so they move as a rigid unit. */
.envelope-flap img {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.envelope-flap {
    position: absolute;
}

.envelope-flap-top {
    pointer-events: none;
}

.letter .paper-surface {
    display: block;
}

.letter-folding .paper-surface {
    box-shadow: 0 0 0 1px rgba(35, 35, 35, 0.22);
}

.letter {
    transform-style: preserve-3d;
}

/* During plane animation we hide the original paper completely so only the
   3D fold rig is visible (prevents "left-behind" letter artifacts). */
.letter-folding-active .paper {
    visibility: hidden;
}

/* ---------- 3D paper plane fold ---------- */
.letter-plane-rig {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
    transition: transform 1200ms cubic-bezier(0.22, 0.76, 0.2, 1);
}

.plane-panel {
    position: absolute;
    transform-style: preserve-3d;
    transform: none;
    transition:
        transform 1200ms cubic-bezier(0.22, 0.76, 0.2, 1),
        opacity 520ms ease;
}

.plane-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.plane-face.front {
    background-image: var(--front-url);
}

.plane-face.back {
    background-image: var(--back-url);
    transform: rotateY(180deg);
}

.plane-half-panel {
    top: 0;
    width: 50%;
    height: 100%;
    transform: translateZ(1px);
    z-index: 3;
}

.plane-half-panel.left {
    left: 0;
    transform-origin: 100% 50%;
}

.plane-half-panel.right {
    right: 0;
    transform: translateZ(1.6px);
    transform-origin: 0% 50%;
}

.plane-half-panel.left .plane-face {
    background-size: 200% 100%;
    background-position: 0 0;
}

.plane-half-panel.right .plane-face {
    background-size: 200% 100%;
    background-position: 100% 0;
}

.plane-spine-panel {
    left: 49%;
    top: 0;
    width: 2%;
    height: 100%;
    transform: translateZ(4px);
    z-index: 7;
}

.plane-spine-panel .plane-face {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
}

.plane-wing-panel {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateZ(5px);
    opacity: 0;
    z-index: 6;
}

.plane-wing-panel.left {
    transform-origin: 49% 50%; /* fold line near center spine */
}

.plane-wing-panel.right {
    transform-origin: 51% 50%; /* fold line near center spine */
}

.plane-wing-panel.left .plane-face {
    clip-path: polygon(49% 0%, 0% 25%, 0% 100%, 49% 100%);
}

.plane-wing-panel.right .plane-face {
    clip-path: polygon(51% 0%, 100% 25%, 100% 100%, 51% 100%);
}

.plane-nose-panel {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 8;
}

.plane-nose-panel.left {
    transform-origin: 50% 50%;
    transform: translateZ(1.1px);
}

.plane-nose-panel.right {
    transform-origin: 50% 50%;
    transform: translateZ(2.1px);
}

.plane-nose-panel.left .plane-face {
    clip-path: polygon(0% 0%, 50% 0%, 0% 25%);
}

.plane-nose-panel.right .plane-face {
    clip-path: polygon(50% 0%, 100% 0%, 100% 25%);
}

/* Step 1: initial vertical crease, right half folds onto left half */
.letter-plane-rig.stage-1 .plane-half-panel.right {
    transform: translateZ(2px) rotateY(-180deg);
}

.letter-plane-rig.stage-1 .plane-spine-panel {
    transform: translateZ(8px) scaleX(1.45);
}

.letter-plane-rig.stage-1 .plane-wing-panel.right {
    transform: translateZ(2.1px) rotateY(-180deg);
}

.letter-plane-rig.stage-1 .plane-nose-panel.right {
    transform: translateZ(2.1px) rotateY(-180deg);
}

/* Step 2: nose tucks toward center crease */
.letter-plane-rig.stage-2 {
    transform: rotateX(7deg) rotateZ(-3deg) scale(0.93);
}

.letter-plane-rig.stage-2 .plane-half-panel.left .plane-face {
    clip-path: polygon(0% 25%, 100% 0%, 100% 100%, 0% 100%);
    transition: clip-path 520ms ease;
}

.letter-plane-rig.stage-2 .plane-half-panel.right .plane-face {
    clip-path: polygon(0% 0%, 100% 25%, 100% 100%, 0% 100%);
    transition: clip-path 520ms ease;
}

.letter-plane-rig.stage-2 .plane-nose-panel.left {
    opacity: 1;
    transform: translateZ(1.1px) translate(-50%, -25%) rotate3d(50, -36.33, 0, 178deg) translate(50%, 25%);
}

.letter-plane-rig.stage-2 .plane-nose-panel.right {
    opacity: 1;
    transform: translateZ(2.1px) rotateY(-180deg) translate(50%, -25%) rotate3d(-50, -36.33, 0, 178deg) translate(-50%, 25%);
}

/* Step 3: wing expansion away from spine */
.letter-plane-rig.stage-3 {
    transform: rotateX(18deg) rotateY(-8deg) rotateZ(-8deg) scale(0.72);
}

.letter-plane-rig.stage-3 .plane-wing-panel.left {
    opacity: 1;
    transform: translateZ(1.1px) rotateY(-75deg);
}

.letter-plane-rig.stage-3 .plane-wing-panel.right {
    opacity: 1;
    transform: translateZ(2.1px) rotateY(-105deg);
}

.letter-plane-rig.stage-3 .plane-half-panel.left,
.letter-plane-rig.stage-3 .plane-half-panel.right,
.letter-plane-rig.stage-3 .plane-nose-panel.left,
.letter-plane-rig.stage-3 .plane-nose-panel.right {
    opacity: 0;
}

/* ---------- Fly-in animation ---------- */
@keyframes envelope-fly-in {
    0% {
        transform: translate(-140vw, -40vh) rotate(-540deg) scale(0.7);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    75% {
        transform: translate(0, 0) rotate(18deg) scale(1.02);
    }
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
}

.envelope.fly-in {
    animation: envelope-fly-in 1.25s cubic-bezier(0.22, 0.7, 0.3, 1) both;
}

/* ---------- Utility ---------- */
.hidden {
    display: none !important;
}

/* ---------- Shredder ---------- */
#shredder {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 96px;
    height: 96px;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.45));
    z-index: 2;
    pointer-events: none;
}

#shredder img {
    width: 100%;
    height: 100%;
    display: block;
}

/* ---------- Shred animation ---------- */
.shred-ghost-layer {
    position: absolute;
    pointer-events: none;
    z-index: 9999;
}

.shred-strip {
    position: absolute;
    top: 0;
    overflow: hidden;
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
}

.shred-fragment {
    position: absolute !important;
    pointer-events: none !important;
    margin: 0 !important;
}