/* DPM 2026 - Intro Animation (swim-intro.css) */

/* === OVERLAY === */
.intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: linear-gradient(180deg, #001e38 0%, #003056 25%, #003056 50%, #004070 75%, #001e38 100%);
    display: flex;
    flex-direction: column;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.intro-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* === INTRO HEADER (target bar) === */
.intro-header {
    width: 100%;
    background: linear-gradient(135deg, #003056, #001e38);
    padding: 15px 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 80px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    border-bottom: 3px solid #e30613;
    z-index: 10;
}

.intro-logo-slot {
    width: 55px;
    height: 55px;
    position: relative;
    flex-shrink: 0;
}

.intro-logo-slot img {
    width: 55px;
    height: 55px;
    object-fit: contain;
    opacity: 0;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
    animation: introLogoAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 4.8s;
}

@keyframes introLogoAppear {
    0%   { opacity: 0; transform: scale(0) rotate(-20deg); }
    60%  { opacity: 1; transform: scale(1.2) rotate(5deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.intro-logo-slot::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 12px;
    border: 2px solid rgba(255,255,255,0.7);
    opacity: 0;
    animation: introGlowRing 1.5s ease forwards;
    animation-delay: 5s;
}

@keyframes introGlowRing {
    0%   { opacity: 0; transform: scale(0.8); }
    30%  { opacity: 1; transform: scale(1.1); box-shadow: 0 0 20px rgba(255,209,0,0.5); }
    100% { opacity: 0; transform: scale(1.3); }
}

.intro-titles {
    color: #fff;
    opacity: 0;
    animation: introTextIn 0.8s ease forwards;
    animation-delay: 5.2s;
}

.intro-titles h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
}

.intro-titles p {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.75);
    font-weight: 600;
    margin-top: 2px;
    font-family: 'Montserrat', sans-serif;
}

@keyframes introTextIn {
    0%   { opacity: 0; transform: translateX(-15px); }
    100% { opacity: 1; transform: translateX(0); }
}

.intro-de-stripe {
    height: 4px;
    background: linear-gradient(90deg, #000 33%, #e30613 33%, #e30613 66%, rgba(255,255,255,0.7) 66%);
}

/* === SCENE === */
.intro-scene {
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* Water */
.intro-water {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    pointer-events: none;
}

.intro-wave {
    position: absolute;
    width: 200%;
    left: -50%;
    height: 50px;
}

.intro-wave-1 { top: 0; animation: introWave 7s linear infinite; opacity: 0.08; }
.intro-wave-2 { top: 20px; animation: introWave 5s linear infinite reverse; opacity: 0.05; }

@keyframes introWave {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

/* === SWIMMER === */
.intro-swimmer-group {
    position: absolute;
    left: -200px;
    top: 55%;
    z-index: 10;
    animation: introSwimPath 4.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.3s;
}

@keyframes introSwimPath {
    0%   { left: -200px; top: 55%; }
    15%  { left: 5%;    top: 52%; }
    40%  { left: 25%;   top: 42%; }
    65%  { left: 38%;   top: 28%; }
    80%  { left: 30%;   top: 14%; }
    90%  { left: 15%;   top: 5%; }
    95%  { left: 5%;    top: 0%; }
    100% { left: -5%;   top: -8%; opacity: 0; }
}

.intro-swimmer {
    position: relative;
    width: 160px;
    height: 90px;
    animation: introSwimBob 1s ease-in-out infinite;
}

@keyframes introSwimBob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-7px) rotate(2deg); }
}

.intro-swimmer-body {
    position: absolute;
    width: 65px; height: 26px;
    background: linear-gradient(135deg, #ffb74d, #ff9800);
    border-radius: 30px 50px 50px 30px;
    top: 30px; left: 25px; z-index: 2;
}

.intro-swimmer-head {
    position: absolute;
    width: 28px; height: 26px;
    background: linear-gradient(135deg, #ffcc80, #ffb74d);
    border-radius: 50%;
    top: 22px; left: 85px; z-index: 3;
}

.intro-swimmer-head::before {
    content: '';
    position: absolute;
    width: 30px; height: 16px;
    background: #e30613;
    border-radius: 50% 50% 30% 30%;
    top: -3px; left: -1px;
}

.intro-swimmer-head::after {
    content: '';
    position: absolute;
    width: 14px; height: 7px;
    background: rgba(0,0,0,0.55);
    border-radius: 7px;
    top: 10px; left: 14px;
    border: 1px solid #222;
}

.intro-arm {
    position: absolute;
    width: 42px; height: 9px;
    background: linear-gradient(135deg, #ffb74d, #ff9800);
    border-radius: 10px;
    top: 22px; left: 75px; z-index: 4;
    transform-origin: left center;
}

.intro-arm-r { animation: introArmCrawl 1s ease-in-out infinite; }
.intro-arm-l { animation: introArmCrawl 1s ease-in-out infinite; animation-delay: -0.5s; }

@keyframes introArmCrawl {
    0%   { transform: rotate(-55deg); }
    25%  { transform: rotate(15deg); }
    50%  { transform: rotate(35deg); }
    100% { transform: rotate(-55deg); }
}

.intro-legs { position: absolute; top: 37px; left: -5px; z-index: 1; }

.intro-leg {
    position: absolute;
    width: 35px; height: 7px;
    background: linear-gradient(90deg, #ffb74d, #ff9800);
    border-radius: 8px;
    transform-origin: right center;
}

.intro-leg-a { animation: introKick 0.5s ease-in-out infinite; }
.intro-leg-b { animation: introKick 0.5s ease-in-out infinite; animation-delay: -0.25s; }

@keyframes introKick {
    0%, 100% { transform: rotate(-12deg); }
    50%      { transform: rotate(12deg); }
}

/* Tow rope */
.intro-tow-rope {
    position: absolute;
    top: 42px; left: -8px;
    width: 55px; height: 3px;
    background: rgba(255,255,255,0.7);
    border-radius: 2px; z-index: 1;
    animation: introRopeWag 1s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(255,209,0,0.4);
}

.intro-tow-rope::after {
    content: '';
    position: absolute;
    left: -5px; top: -5px;
    width: 12px; height: 12px;
    border: 2px solid rgba(255,255,255,0.7);
    border-radius: 50%;
}

@keyframes introRopeWag {
    0%, 100% { transform: rotate(-2deg); }
    50%      { transform: rotate(2deg) scaleX(0.97); }
}

/* Towed logo */
.intro-towed-logo {
    position: absolute;
    top: 12px; left: -95px; z-index: 5;
    animation: introLogoBob 1s ease-in-out infinite;
}

.intro-towed-logo img {
    width: 75px; height: 75px;
    object-fit: contain;
    filter: drop-shadow(0 4px 15px rgba(0,0,0,0.5));
}

@keyframes introLogoBob {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-5px) rotate(4deg); }
}

/* Splash */
.intro-splash { position: absolute; top: 38px; left: 100px; z-index: 6; }

.intro-drop {
    position: absolute;
    width: 4px; height: 4px;
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
    animation: introDrop 1s ease-out infinite;
}

.intro-drop:nth-child(1) { left: 0; animation-delay: 0s; }
.intro-drop:nth-child(2) { left: 7px; top: -6px; animation-delay: 0.15s; }
.intro-drop:nth-child(3) { left: 14px; top: 2px; animation-delay: 0.3s; }
.intro-drop:nth-child(4) { left: 4px; top: -12px; animation-delay: 0.45s; width: 3px; height: 3px; }

@keyframes introDrop {
    0%   { transform: translate(0,0) scale(1); opacity: 0.9; }
    50%  { transform: translate(12px, -14px) scale(0.7); opacity: 0.5; }
    100% { transform: translate(22px, 4px) scale(0); opacity: 0; }
}

/* Skip button */
.intro-skip {
    position: absolute;
    bottom: 25px;
    right: 25px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    z-index: 100;
    transition: background 0.3s;
    backdrop-filter: blur(5px);
}

.intro-skip:hover { background: rgba(255,255,255,0.25); }

@media (max-width: 768px) {
    .intro-titles h2 { font-size: 1rem; }
    .intro-swimmer { transform: scale(0.75); }
}