/* ═══════════════════════════════════════════════════════════════
   Trellar Cube — pure-CSS isometric brand mark
   Recreates the brand image cube: a mauve isometric cube with a
   pale-lavender plate on top and two pale pillars on the front
   faces, leaving the "T" visible in negative space.

   Usage:
       <link rel="stylesheet" href="{% static 'css/base/trellar-cube.css' %}">
       {% include "components/trellar_cube.html" %}

   Scale it from the outside:
       .somewhere .trellar-cube { --cube-size: 110px; }
   ═══════════════════════════════════════════════════════════════ */

/* Registered so they can transition smoothly — even on the floating
   cube, whose keyframes own the transform property outright. */
@property --tc-turn {
    syntax: '<angle>';
    initial-value: -45deg;
    inherits: true;
}

@property --tc-lift {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
}

.trellar-cube {
    /* Overall footprint of the logo — everything scales from this */
    --cube-size: 120px;

    /* Cube edge length, derived so the projection fits the footprint */
    --s: calc(var(--cube-size) * 0.58);

    /* Camera */
    --tc-tilt: -28deg;
    --tc-turn: -45deg;
    --tc-lift: 0px;

    /* Palette (sampled from the brand image).
       Light comes from the top-right: right-facing surfaces are lit,
       left-facing ones sit in deep shadow, and every face darkens
       toward its left side. */
    --tc-mauve-left:   #634a5a; /* shadowed cube face (front-left)     */
    --tc-mauve-r:      #a07a90; /* lit cube face (front-right)         */
    --tc-mauve-top:    #8d6a7d; /* sliver of cube top around the plate */
    --tc-light-top:    #dcc2d2; /* top of the lit right pillar         */
    --tc-light-left:   #8d6e83; /* shadowed left pillar base tone      */
    --tc-light-right:  #c3a2ba; /* lit right pillar base tone          */

    position: relative;
    display: block;
    width: var(--cube-size);
    height: var(--cube-size);
    z-index: 0;
}

/* Soft ground shadow, kept faint since the background is transparent */
.trellar-cube::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -3%;
    width: 84%;
    height: 14%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center,
        rgba(46, 27, 40, 0.35), transparent 68%);
    z-index: -1;
}

/* ─── 3D scene ─── */
.tc-scene {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: translateY(var(--tc-lift))
               rotateX(var(--tc-tilt)) rotateY(var(--tc-turn));
    transition: transform 0.55s cubic-bezier(0.33, 1.1, 0.35, 1);
}

/* ─── Hover: gentle turn-and-lift, eased back on mouse-out.
   The turn stays within the range where only the three rendered
   faces are visible. ─── */
.trellar-cube:hover {
    --tc-turn: -58deg;
    --tc-lift: calc(var(--cube-size) * -0.035);
}

/* ─── Float modifier: slow levitation loop for the login cube.
   The keyframes re-read --tc-lift/--tc-turn each frame, so the hover
   turn composes with the drift (vars transition via @property). ─── */
.trellar-cube--float {
    transition: --tc-turn 0.55s cubic-bezier(0.33, 1.1, 0.35, 1),
                --tc-lift 0.55s cubic-bezier(0.33, 1.1, 0.35, 1);
}

.trellar-cube--float .tc-scene {
    animation: tc-float 4.5s ease-in-out infinite;
}

/* Ground shadow breathes in sync: shrinks and fades as the cube rises */
.trellar-cube--float::after {
    animation: tc-shadow-breathe 4.5s ease-in-out infinite;
}

@keyframes tc-float {
    0%, 100% {
        transform: translateY(var(--tc-lift))
                   rotateX(var(--tc-tilt)) rotateY(var(--tc-turn));
    }
    50% {
        transform: translateY(calc(var(--tc-lift) - var(--cube-size) * 0.04))
                   rotateX(var(--tc-tilt)) rotateY(var(--tc-turn));
    }
}

@keyframes tc-shadow-breathe {
    0%, 100% {
        transform: translateX(-50%) scaleX(1);
        opacity: 1;
    }
    50% {
        transform: translateX(-50%) scaleX(0.8);
        opacity: 0.55;
    }
}

/* Respect users who prefer reduced motion — every page gets this free */
@media (prefers-reduced-motion: reduce) {
    .tc-scene,
    .trellar-cube--float {
        transition: none;
    }
    .trellar-cube--float .tc-scene,
    .trellar-cube--float::after {
        animation: none;
    }
    .trellar-cube:hover {
        --tc-turn: -45deg;
        --tc-lift: 0px;
    }
}

/* Each box is a zero-size anchor at the scene centre carrying its
   own dimensions (--w/--h/--d) and centre offset (--cx/--cy/--cz). */
.tc-box {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    --cx: 0px;
    --cy: 0px;
    --cz: 0px;
}

.tc-face {
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility: hidden;
}

/* Only the three visible faces of each box are rendered.
   "front" ends up facing front-left, "right" faces front-right. */
.tc-face--front {
    width: var(--w);
    height: var(--h);
    transform: translate(-50%, -50%)
               translate3d(var(--cx), var(--cy), var(--cz))
               translateZ(calc(var(--d) / 2));
}

.tc-face--right {
    width: var(--d);
    height: var(--h);
    transform: translate(-50%, -50%)
               translate3d(var(--cx), var(--cy), var(--cz))
               rotateY(90deg)
               translateZ(calc(var(--w) / 2));
}

.tc-face--top {
    width: var(--w);
    height: var(--d);
    transform: translate(-50%, -50%)
               translate3d(var(--cx), var(--cy), var(--cz))
               rotateX(90deg)
               translateZ(calc(var(--h) / 2));
}

/* ─── Core cube (mauve body, slightly taller than wide like the brand image) ─── */
.tc-core {
    --w: var(--s);
    --h: calc(var(--s) * 1.1);
    --d: var(--s);
}

.tc-core .tc-face--front {
    background: linear-gradient(to left,
        #7b5b6f 0%, var(--tc-mauve-left) 55%, #54394a 100%);
    /* subtle dark seam on the centre corner (this face's right edge) */
    box-shadow: inset calc(var(--s) * -0.02) 0 0 rgba(42, 24, 35, 0.30);
}

.tc-core .tc-face--right {
    background: linear-gradient(to left,
        #b28ba2 0%, var(--tc-mauve-r) 45%, #7d5c70 100%);
    /* subtle light chamfer on the centre corner (this face's left edge) */
    box-shadow: inset calc(var(--s) * 0.02) 0 0 rgba(235, 213, 229, 0.28);
}

.tc-core .tc-face--top {
    background: linear-gradient(to bottom left,
        #a37b91 0%, var(--tc-mauve-top) 50%, #7a5b6d 100%);
}

/* ─── Top plate (pale slab resting on the cube) ─── */
.tc-plate {
    --w: calc(var(--s) * 0.76);
    --h: calc(var(--s) * 0.12);
    --d: calc(var(--s) * 0.76);
    --cy: calc(var(--s) * -0.61);
}

.tc-plate .tc-face--top {
    background: linear-gradient(to bottom left,
        #e8cbe1 0%, #dfc0d6 50%, #c9a8bf 100%);
}

.tc-plate .tc-face--front {
    background: linear-gradient(to left,
        #967990 0%, #886b80 45%, #715569 100%);
}

.tc-plate .tc-face--right {
    background: linear-gradient(to left,
        #d2b1c6 0%, #c8a7bc 50%, #a988a0 100%);
}

/* ─── Left pillar (on the front-left face) ─── */
.tc-pillar-left {
    --w: calc(var(--s) * 0.48);
    --h: calc(var(--s) * 0.80);
    --d: calc(var(--s) * 0.12);
    --cx: calc(var(--s) * -0.18);
    --cy: calc(var(--s) * 0.15);
    --cz: calc(var(--s) * 0.56);
}

.tc-pillar-left .tc-face--front {
    background: linear-gradient(to left,
        #9c7c91 0%, var(--tc-light-left) 50%, #74576a 100%);
}

.tc-pillar-left .tc-face--top   { background: #a6879b; }
.tc-pillar-left .tc-face--right { background: #97788c; }

/* ─── Right pillar (on the front-right face) ─── */
.tc-pillar-right {
    --w: calc(var(--s) * 0.12);
    --h: calc(var(--s) * 0.80);
    --d: calc(var(--s) * 0.48);
    --cx: calc(var(--s) * 0.56);
    --cy: calc(var(--s) * 0.15);
    --cz: calc(var(--s) * -0.18);
}

.tc-pillar-right .tc-face--right {
    background: linear-gradient(to left,
        #cdadc4 0%, var(--tc-light-right) 55%, #a8869e 100%);
}

.tc-pillar-right .tc-face--top   { background: var(--tc-light-top); }
.tc-pillar-right .tc-face--front { background: #8f6f86; }