/* Base layout logic */
html, body {
    width: 100%; 
    height: 100%;
    margin: 0; 
    padding: 0; 
    overflow-x: hidden;
}
body {
    background-color: #121212;
    min-height: 100vh;
}
.container {
    position: relative;
    z-index: 100;
}

/* Background layer logic */
.bg {
    position: fixed;
    inset: 0;
    background-image: url('Images/TensuraBackground.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* Scene layer logic */
.scene {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* Cloud animation logic */
.cloud {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    filter: blur(18px);
    animation: driftCloud linear infinite;
}
.cloud-1  { 
    width:220px; height:70px;  top:6%;  left:-15%; animation-duration:38s; animation-delay:0s;   opacity:.55; 
}
.cloud-2  { 
    width:180px; height:55px;  top:10%; left:-20%; animation-duration:52s; animation-delay:-18s; opacity:.40; 
}
.cloud-3  { 
    width:140px; height:45px;  top:3%;  left:-10%; animation-duration:44s; animation-delay:-30s; opacity:.35; 
}
.cloud-4  { 
    width:260px; height:80px;  top:14%; left:-25%; animation-duration:60s; animation-delay:-8s;  opacity:.30; 
}
@keyframes driftCloud {
    from { 
        transform: translateX(0); 
    }
    to   { 
        transform: translateX(120vw); 
    }
}

/* Portal animation logic */
.portal-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(28px);
    animation: portalPulse 3.5s ease-in-out infinite;
}
.portal-glow-l { 
    width:120px; height:200px; left:6%;  top:30%; background:rgba(64,200,255,0.30); animation-delay:0s;    
}
.portal-glow-r { 
    width:100px; height:160px; right:3%; top:40%; background:rgba(64,200,255,0.22); animation-delay:-1.8s; 
}
@keyframes portalPulse {
    0%,100% { 
        opacity:.5;  transform:scale(1);    
    }
    50%     { 
        opacity:1.0; transform:scale(1.18); 
    }
}

/* Dome glow logic */
.dome-glow {
    position:absolute;
    width:180px; height:80px;
    right:18%; top:20%;
    background: radial-gradient(ellipse, rgba(200,230,255,0.30) 0%, transparent 70%);
    filter: blur(10px);
    animation: domeGlow 5s ease-in-out infinite;
}
@keyframes domeGlow {
    0%,100% { 
        opacity:.4; 
    }
    50%     { 
        opacity:.9; 
    }
}

/* Rainbow animation logic */
.rainbow-shimmer {
    position:absolute;
    width:320px; height:320px;
    top:-80px; left:50%;
    transform:translateX(-50%);
    border-radius:50%;
    border: 3px solid rgba(100,220,255,0.15);
    box-shadow: 0 0 30px 6px rgba(100,220,255,0.15),
                0 0 60px 10px rgba(100,200,255,0.08);
    animation: rainbowShimmer 6s ease-in-out infinite;
}
@keyframes rainbowShimmer {
    0%,100% { 
        opacity:.3; transform:translateX(-50%) scale(1);    
    }
    50%     { 
        opacity:.9; transform:translateX(-50%) scale(1.06); 
    }
}

/* Sparkle animation logic */
.spark {
    position:absolute;
    border-radius:50%;
    background:#a8f0ff;
    box-shadow: 0 0 6px 3px rgba(100,220,255,0.7);
    animation: floatSpark ease-in-out infinite;
}
@keyframes floatSpark {
    0%   { 
        transform:translateY(0)   translateX(0)   scale(1);   opacity:0;   
    }
    20%  { 
        opacity:1; 
    }
    80%  { 
        opacity:.8; 
    }
    100% { 
        transform:translateY(-90px) translateX(30px) scale(0); opacity:0;   
    }
}

.pollen {
    position:absolute;
    border-radius:50%;
    background:#ffe97a;
    box-shadow:0 0 4px 2px rgba(255,230,80,0.6);
    animation: pollenFloat ease-in-out infinite;
}
@keyframes pollenFloat {
    0%   { 
        transform:translateY(0) translateX(0)   scale(1);   opacity:0;   
    }
    15%  { 
        opacity:.9; 
    }
    85%  { 
        opacity:.7; 
    }
    100% { 
        transform:translateY(-70px) translateX(-25px) scale(0); opacity:0;   
    }
}

/* Light ray logic */
.ray {
    position:absolute;
    top:0; left:50%;
    width:2px;
    height:55vh;
    background: linear-gradient(to bottom, rgba(180,230,255,0.18), transparent);
    transform-origin: top center;
    animation: rayWave 8s ease-in-out infinite;
    filter: blur(1px);
}
.ray-1 { 
    transform:translateX(-60px) rotate(-6deg);  animation-delay:0s;  
}
.ray-2 { 
    transform:translateX( 40px) rotate( 3deg);  animation-delay:-3s;
 
}
.ray-3 { 
    transform:translateX(-10px) rotate(  1deg); animation-delay:-6s; width:3px;
}
@keyframes rayWave {
    0%,100% { 
        opacity:.25; 
    }
    50%     { 
        opacity:.6;  
    }
}

/* Grass shimmer logic */
.grass-shimmer {
    position:absolute;
    bottom:0; left:0; right:0;
    height:45%;
    background: linear-gradient(to top,
        rgba(80,180,60,0.04) 0%,
        rgba(120,220,80,0.06) 40%,
        transparent 100%);
    animation: grassWave 4s ease-in-out infinite;
}
@keyframes grassWave {
    0%,100% { 
        opacity:.4; 
    }
    50%     { 
        opacity:1;  
    }
}

/* Vignette logic */
.vignette {
    position:fixed; inset:0; z-index:2;
    pointer-events:none;
    background: radial-gradient(ellipse at center,
        transparent 55%,
        rgba(0,5,20,0.45) 100%);
}

/* UI element logic */
.profile-img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.profile-img:hover {
    transform: scale(1.05);
}
.link-button {
    max-width: 350px;
    transition: all 0.2s ease-in-out;
}
.link-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1) !important;
}

/* Portfolio Custom Button */
.btn-portfolio {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.btn-portfolio:hover {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 24px rgba(100, 220, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.8);
    color: #ffffff;
}

/* Quote text logic */
.quote-text {
    color: #e0f7fa; /* Subtle icy-blue tint */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 12px rgba(100, 220, 255, 0.4);
    font-weight: 500;
}

/* Pan hint overlay logic */
#pan-hint {
    position:fixed; inset:0; z-index:20;
    pointer-events:none;
}
.arrow {
    display: none;
    position:absolute;
    font-size: clamp(18px,3vw,28px);
    color:rgba(255,255,255,0.55);
    text-shadow:0 0 12px rgba(100,220,255,0.8);
    pointer-events:all;
    cursor:pointer;
    user-select:none;
    transition:color .2s, text-shadow .2s, transform .15s;
    animation: arrowPulse 2.4s ease-in-out infinite;
}
.arrow:hover, .arrow:active {
     color:rgba(120,240,255,1); transform:scale(1.4); 
}
.arrow.left  { 
    left:14px;  top:50%; transform:translateY(-50%);
}
.arrow.right { 
    right:14px; top:50%; transform:translateY(-50%); 
}
.arrow.up    {
     top:14px;   left:50%; transform:translateX(-50%); 
}
.arrow.down  {
     bottom:34px; left:50%; transform:translateX(-50%); 
}
.tip {
    position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
    color:rgba(255,255,255,0.95); font-family:'Segoe UI',sans-serif;
    font-size:clamp(10px,1.8vw,12px); letter-spacing:2px; text-transform:uppercase;
    white-space:nowrap; pointer-events:none;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 10px rgba(100,220,255,0.7);
    animation: tipPulse 3s ease-in-out infinite;
}
@keyframes arrowPulse {
0%,100%{
    opacity:.55; 
} 50%{
    opacity:1; 
}
}
@keyframes tipPulse {
    0%,100%{ 
        opacity:.7; 
    } 50%{ 
        opacity:1; filter: brightness(1.2); 
    }
}

/* Edge zone logic */
.edge-zone {
    position:fixed; z-index:15; pointer-events:none; transition:opacity .3s;
    opacity:0;
}
.edge-zone.active { 
    opacity:1; 
}
.zone-left  { 
    inset:0 auto 0 0; width:18%; background:linear-gradient(to right,  rgba(64,200,255,0.10), transparent); 
}
.zone-right { 
    inset:0 0 0 auto; width:18%; background:linear-gradient(to left,   rgba(64,200,255,0.10), transparent); 
}
.zone-top   { 
    inset:0 0 auto 0; height:18%;background:linear-gradient(to bottom, rgba(64,200,255,0.10), transparent); 
}
.zone-bot   { 
    inset:auto 0 0 0; height:18%;background:linear-gradient(to top,    rgba(64,200,255,0.10), transparent); 
}