/* ═══════════════════════════════════════════════════════════════════════════
   Cubo Três · Motif system, cube-derived visual language
   ────────────────────────────────────────────────────────────────────────────
   The cube logo is the through-line. Here are its applications:
     .cube             , single iso cube (3 faces, 3 tones from currentColor)
     .cube-line        , outline-only cube (bullet, marker, divider glyph)
     .cube-grid-bg     , repeating iso-grid background, low-opacity
     .cube-trio        , 3 cubes side-by-side (streak counter)
     .cube-divider     , section divider with centered cube glyph
     .iso-frame        , image/content frame angled to cube perspective
   ═══════════════════════════════════════════════════════════════════════════ */

/* Single iso cube, sized via parent / inline width-height.
   Recolor via currentColor on the wrapper. */
.cube {
    display: inline-block;
    color: hsl(var(--color-primary));
    line-height: 0;
    flex-shrink: 0;
}
.cube--accent { color: hsl(var(--color-accent)); }
.cube--inverted { color: hsl(var(--text-inverted)); }

/* Cube as a bullet, replaces • in list items */
.list-cube {
    list-style: none;
    padding: 0;
    margin: 0;
}
.list-cube li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: var(--space-sm);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: hsl(var(--text-body));
}
.list-cube li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 16px;
    height: 16px;
    background: url('motif/cube-bullet.svg') no-repeat center / contain;
    color: hsl(var(--color-accent));
    /* mask trick to recolor SVG via CSS */
    background: none;
    -webkit-mask: url('motif/cube-bullet.svg') no-repeat center / contain;
    mask: url('motif/cube-bullet.svg') no-repeat center / contain;
    background-color: hsl(var(--color-accent));
}

/* Iso-grid background, sits behind hero sections at low opacity.
   The tile is 120×120, repeats seamlessly. */
.cube-grid-bg {
    position: relative;
    isolation: isolate;
}
.cube-grid-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('motif/cube-grid-tile.svg') repeat;
    background-size: 120px 120px;
    opacity: 0.08;
    z-index: -1;
    pointer-events: none;
    color: hsl(var(--color-accent));
    /* Recolor via mask */
    background: none;
    -webkit-mask: url('motif/cube-grid-tile.svg') repeat;
    mask: url('motif/cube-grid-tile.svg') repeat;
    -webkit-mask-size: 120px 120px;
    mask-size: 120px 120px;
    background-color: currentColor;
}
.cube-grid-bg--subtle::before { opacity: 0.05; }
.cube-grid-bg--strong::before { opacity: 0.14; }

/* Section divider, a thin teal line with a centered cube glyph */
.cube-divider {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-3xl) 0;
}
.cube-divider::before,
.cube-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: hsl(var(--border-default));
}
.cube-divider__glyph {
    width: 24px;
    height: 24px;
    color: hsl(var(--color-accent));
    flex-shrink: 0;
}

/* Iso-frame, for photos. Photo sits in a 6px-radius card with a 1.5° tilt
   and a teal shadow that hints at the cube depth. */
.iso-frame {
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    transform: rotate(-1.5deg);
    box-shadow:
        0 1px 0 0 hsl(var(--teal-600) / 0.08),
        0 12px 32px hsl(var(--shadow-overlay) / 0.12),
        0 4px 8px hsl(var(--shadow-overlay) / 0.06);
    transition: transform var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard);
}
.iso-frame:hover {
    transform: rotate(0deg) translateY(-2px);
    box-shadow:
        0 1px 0 0 hsl(var(--teal-600) / 0.10),
        0 24px 48px hsl(var(--shadow-overlay) / 0.16),
        0 8px 16px hsl(var(--shadow-overlay) / 0.10);
}
.iso-frame img { display: block; width: 100%; height: auto; }

/* Trio container, for "three things" pattern (3 facts, 3 pillars, 3 plans).
   Always 3 columns ≥ md, stacks below. */
.trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}
@media (max-width: 720px) {
    .trio { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   .cube-stage, cinematic hero canvas
   
   The "YouTube banner A" background recipe, packaged as a reusable surface.
   Drop on any wrapper that wants the brand hero treatment.
   
   Background layers (no extra DOM needed):
     · base teal-900
     · cyan glow bottom-right (radial-gradient)
     · purple glow top-left (radial-gradient)
     · cube-grid texture (cyan-400 mask, 13% opacity)
   
   Optional decorative floating cubes, add as <svg> children:
     <svg class="cube-stage__cube cube-stage__cube--tr">...</svg>
     <svg class="cube-stage__cube cube-stage__cube--bl">...</svg>
   
   Modifiers:
     .cube-stage--soft     gentler glow (for compact hero cards)
     .cube-stage--soft     paleta invertida: base neutra suave, grade teal
   
   Tunables (CSS custom property):
     --cube-stage-tile: 120px 120px;   grid tile size
   ═══════════════════════════════════════════════════════════════════════ */

.cube-stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: white;
    background:
        radial-gradient(70% 65% at 95% 100%, hsl(var(--cyan-500) / 0.42) 0%, transparent 60%),
        radial-gradient(45% 45% at 0% 0%, hsl(var(--purple-500) / 0.22) 0%, transparent 60%),
        hsl(var(--teal-900));
}

/* Lift content above the cube-grid mask layer */
.cube-stage > * { position: relative; z-index: 1; }

.cube-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask: url('motif/cube-grid-tile.svg') repeat;
    mask: url('motif/cube-grid-tile.svg') repeat;
    -webkit-mask-size: var(--cube-stage-tile, 120px 120px);
    mask-size: var(--cube-stage-tile, 120px 120px);
    background: hsl(var(--cyan-400));
    opacity: 0.13;
    pointer-events: none;
    z-index: 0;
}

/* Softer variant, for tighter hero cards inside dashboards */
.cube-stage--soft {
    background:
        radial-gradient(65% 60% at 100% 100%, hsl(var(--cyan-500) / 0.30) 0%, transparent 65%),
        radial-gradient(40% 40% at 0% 0%, hsl(var(--purple-500) / 0.14) 0%, transparent 60%),
        hsl(var(--teal-900));
}
.cube-stage--soft::before { opacity: 0.10; }

/* Invertido, base neutra suave com grade teal */
.cube-stage--soft,
.cube-stage--cream {
    background: hsl(var(--surface-soft));
    color: hsl(var(--text-display));
}
.cube-stage--soft::before,
.cube-stage--cream::before {
    background: hsl(var(--teal-900));
    opacity: 0.06;
}

/* Decorative floating cubes, pinned to corners */
.cube-stage__cube {
    position: absolute;
    color: hsl(var(--cyan-400));
    pointer-events: none;
    z-index: 0;
}
.cube-stage__cube--tr { right: 6%;  top: 8%;     width: 22%; max-width: 360px; opacity: 0.32; }
.cube-stage__cube--bl { left: 5%;   bottom: 10%; width: 14%; max-width: 240px; opacity: 0.25; transform: rotate(-12deg); }
.cube-stage__cube--tl { left: 6%;   top: 10%;    width: 18%; max-width: 300px; opacity: 0.28; }
.cube-stage__cube--br { right: 5%;  bottom: 10%; width: 14%; max-width: 220px; opacity: 0.24; }