/*
    Damso V4 Canvas Style
    Version: 4.0.0
    Last Modified: 2026-01-14
    License: © 2026 Damso. All Rights Reserved.
*/

/* -----------------------------------------------------------------
   Canvas Dynamic Variables (Automated Tint)
   다크/라이트 테마 분리 금지: 캔버스는 배경 특성상 항상 어두운 모드를 기준으로 렌더링됩니다.
----------------------------------------------------------------- */
:root {
    --damso-canvas-color-bg: var(--damso-black);
    --damso-canvas-color-title: var(--damso-white);
    --damso-canvas-color-slogan: #DDD;
    --damso-canvas-btn-color-bg: rgba(255, 255, 255, 0.12);
    --damso-canvas-btn-color-border: rgba(255, 255, 255, 0.15);
    --damso-canvas-btn-blur: 8px;
    --damso-canvas-btn-color-icon: var(--damso-white);
    --damso-canvas-btn-color-icon-hover: #555;
    --damso-canvas-indicator-color: rgba(255, 255, 255, 0.35);
    --damso-canvas-indicator-color-active: var(--damso-white);
}

.damso-header {
    --damso-canvas-point: var(--damso-color-primary, var(--damso-white));
    --damso-canvas-color-dot: var(--damso-overlay-color-dot, rgba(255, 255, 255, 0.15));
    --damso-header-text: var(--damso-canvas-color-title);
    --damso-header-text-weak: var(--damso-canvas-color-slogan);
    color: var(--damso-header-text);
}

.brand-logo,
.brand-slogan {
    margin:0;
    line-height: 1em;
}

.brand-logo {
    font-size: clamp(3rem, 2rem + 6vw, 6rem);
    color: var(--damso-header-text);
}

.brand-slogan {
    margin-top: clamp(0.8rem, 2vw + 0.5rem, 1rem);
    font-size: clamp(1rem, 0.8rem + 0.5vw, 1.2rem);
    color: var(--damso-header-text-weak);
}

.damso-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.damso-canvas__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Dynamic Brand Tint Layer */
.damso-canvas__overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--damso-canvas-point);
    opacity: 0.08; /* Suble tint without blocking background */
    z-index: -1;
}

.damso-canvas__overlay--dotted {
    background-image: radial-gradient(var(--damso-canvas-color-dot) 1px, transparent 1px);
    background-size: 3px 3px;
}

.damso-canvas__image,
.damso-canvas__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    filter: brightness(0.5) blur(2px);
    z-index: 1;
}

.damso-canvas__image.is-active,
.damso-canvas__slide.is-active {
    opacity: 1;
}

.damso-canvas__effect {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.damso-canvas__indicators {
    position: absolute;
    bottom: 7%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.damso-canvas__indicator {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--damso-canvas-indicator-color);
    transition: all 0.3s ease;
}

.damso-canvas__indicator.is-active {
    background-color: var(--damso-canvas-indicator-color-active);
    box-shadow: 0 0 10px var(--damso-canvas-indicator-color-active);
    transform: scale(1.2);
}

/* --- Header Layout (Moved from page.css for High Cohesion) --- */
.damso-header {
    height: 100svh;
    display: grid;
    grid-template-rows: 1fr auto 1fr; /* Top buffer, Content (Center), Bottom buffer */
    align-items: center; 
    text-align: center;
    position: relative;
    overflow: hidden;
    background-color: var(--damso-color-bg);
}

.damso-header__content {
    grid-row: 2; /* Perfectly centered between 1fr buffers */
    position: relative;
    z-index: 10;
    top: 15%;
    width: 100%;
    padding-inline: 20px;
    opacity: 1; /* Ensure visibility even without JS motion */
    transform: none;
}

.damso-header__title {
    font-family: sans-serif;
    font-size: clamp(2.8rem, 1rem + 6vw, 5.5rem);
    line-height: 1em;
    color: var(--damso-header-text);
    text-shadow: 0 2px 10px var(--damso-shadow-lg);
    margin: 0;
}

.damso-header__description {
    font-size: clamp(1.2rem, 1rem + 0.5vw, 1.5rem);
    line-height: 1em;
    color: var(--damso-header-text-weak);
    text-shadow: 1px 1px 3px var(--damso-shadow-text);
    margin-top: clamp(1em, -0.5rem + 2vw, 1.5em);
    font-weight: 300;
}

.damso-action-group {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    margin-top: clamp(3em, 2.64em + 1.82vw, 4em);
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}

.damso-action-group__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    /* Glassmorphism with subtle brand tint */
    background: var(--damso-canvas-btn-color-bg);
    backdrop-filter: blur(var(--damso-canvas-btn-blur));
    -webkit-backdrop-filter: blur(var(--damso-canvas-btn-blur));
    border: 1px solid var(--damso-canvas-btn-color-border);
    color: var(--damso-canvas-btn-color-icon);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.damso-action-group__item:hover {
    background: var(--damso-white);
    border-color: var(--damso-white);
    color: var(--damso-canvas-btn-color-icon-hover);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 15px var(--damso-canvas-point);
}

.damso-action-group__item:active {
    transform: scale(0.92);
}

.damso-action-group__item span {
    font-size: 24px;
    font-variation-settings: 'FILL' 0, 'wght' 400;
}

/* Specialized Action Button: Youtube */
.damso-action-group__item[href*="youtube"] {
    background: #e52d27; /* Iconic Youtube Red (Toned down slightly for elegance) */
    border-color: #e52d27;
    color: #ffffff;
    opacity: 1;
}

.damso-action-group__item[href*="youtube"]:hover {
    background: #ff0000;
    border-color: #ff0000;
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
}

.damso-action-group__item[href*="youtube"] span {
    font-variation-settings: 'FILL' 1, 'wght' 700;
}

/* -----------------------------------------------------------------
   Canvas-Only Global Footer (Symbol Mode)
----------------------------------------------------------------- */

body.is-canvas-only {
    background-color: var(--damso-canvas-color-bg);
}

body.is-canvas-only .damso-header {
    position: fixed;
    inset: 0;
    z-index: 100;
    background-color: var(--damso-canvas-color-bg);
}


body.is-canvas-only .damso-canvas {
    filter: none;
}

body.is-canvas-only .damso-canvas__image,
body.is-canvas-only .damso-canvas__slide {
    filter: brightness(0.3) blur(7px);
    inset: -5%;
    width: 110%;
    height: 110%;
}

body.is-canvas-only .damso-footer {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    background: transparent;
    border: none;
    padding: 0;
    z-index: 200;
    pointer-events: auto;
}

body.is-canvas-only .damso-footer__text {
    display: none !important;
}

body.is-canvas-only .damso-footer__symbol {
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: all 0.3s ease;
}

body.is-canvas-only .damso-symbol-image {
    display: inline-block;
    filter: invert(1) brightness(2);
}

body.is-canvas-only .damso-footer__symbol:hover {
    opacity: 1;
}