/* =========================================================
   BULGARIAN EMPIRE
   AION 2 • PET SYSTEM
   PETS.CSS
   ---------------------------------------------------------
   Clean unified stylesheet
   Cards • Images • Glow • Hover • Lightbox
   Hero • YouTube Short • Responsive
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

    --pet-bg:
        #070b12;

    --pet-bg-soft:
        #0b111b;

    --pet-panel:
        rgba(12, 20, 31, 0.82);

    --pet-panel-strong:
        rgba(15, 25, 38, 0.94);

    --pet-cyan:
        #62e7ff;

    --pet-cyan-bright:
        #9af2ff;

    --pet-blue:
        #48c8ff;

    --pet-violet:
        #9d72ff;

    --pet-purple:
        #bd8cff;

    --pet-white:
        #f4fbff;

    --pet-muted:
        #9aaabd;

    --pet-border:
        rgba(98, 231, 255, 0.22);

    --pet-border-bright:
        rgba(98, 231, 255, 0.72);

    --pet-radius:
        18px;

    --pet-shadow:
        0 18px 55px rgba(0, 0, 0, 0.42);

    --pet-transition:
        0.35s cubic-bezier(.2, .8, .2, 1);

}


/* =========================================================
   BASE
========================================================= */

body {

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(72, 200, 255, 0.06),
            transparent 35%
        ),
        var(--pet-bg);

    color:
        var(--pet-white);

}


/* =========================================================
   PET SECTIONS
========================================================= */

.pet-section {

    position: relative;

    width:
        min(1200px, calc(100% - 40px));

    margin:
        0 auto;

    padding:
        100px 0;

}


.pet-section-header {

    position: relative;

    max-width:
        850px;

    margin:
        0 auto 55px;

    text-align:
        center;

}


.pet-section-subtitle {

    margin:
        0 0 12px;

    color:
        var(--pet-cyan);

    font-size:
        .78rem;

    font-weight:
        800;

    letter-spacing:
        .25em;

    text-transform:
        uppercase;

    text-shadow:
        0 0 12px rgba(98, 231, 255, .45),
        0 0 30px rgba(72, 200, 255, .22);

}


.pet-section-header h2 {

    margin:
        0 0 18px;

    font-size:
        clamp(2.2rem, 5vw, 4rem);

    line-height:
        1;

    letter-spacing:
        -.035em;

    color:
        #fff;

    text-shadow:
        0 0 25px rgba(72, 200, 255, .14),
        0 0 55px rgba(72, 200, 255, .08);

}


.pet-section-description {

    margin:
        0 auto;

    max-width:
        760px;

    color:
        var(--pet-muted);

    font-size:
        1rem;

    line-height:
        1.8;

}


/* =========================================================
   PET HERO
========================================================= */

.pet-hero {

    position:
        relative;

    min-height:
        680px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background-image:

        linear-gradient(
            90deg,
            rgba(4, 8, 14, .96) 0%,
            rgba(5, 10, 18, .82) 30%,
            rgba(5, 10, 18, .45) 60%,
            rgba(4, 8, 14, .82) 100%
        ),

        linear-gradient(
            180deg,
            rgba(4, 8, 14, .08),
            rgba(4, 8, 14, .97)
        ),

        url("images/pets/pethero.jpg");

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;

}


/* =========================================================
   HERO ATMOSPHERE
========================================================= */

.pet-hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:

        radial-gradient(
            circle at 72% 42%,
            rgba(72, 200, 255, .22),
            transparent 28%
        ),

        radial-gradient(
            circle at 86% 55%,
            rgba(157, 114, 255, .18),
            transparent 32%
        );

    pointer-events:
        none;

}


.pet-hero::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        220px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            #070b12
        );

    pointer-events:
        none;

}


/* =========================================================
   HERO CONTENT
========================================================= */

.pet-hero-content {

    position:
        relative;

    z-index:
        5;

    width:
        min(1200px, calc(100% - 40px));

    margin:
        0 auto;

    padding:
        120px 0;

}


.pet-hero-subtitle {

    margin:
        0 0 15px;

    color:
        var(--pet-cyan);

    font-size:
        .82rem;

    font-weight:
        800;

    letter-spacing:
        .3em;

    text-transform:
        uppercase;

    text-shadow:
        0 0 10px rgba(98, 231, 255, .55),
        0 0 28px rgba(72, 200, 255, .35);

    animation:
        petHeroSubtitleGlow 3s ease-in-out infinite alternate;

}


@keyframes petHeroSubtitleGlow {

    from {

        text-shadow:
            0 0 8px rgba(98, 231, 255, .35),
            0 0 18px rgba(72, 200, 255, .2);

    }

    to {

        text-shadow:
            0 0 14px rgba(98, 231, 255, .85),
            0 0 34px rgba(72, 200, 255, .5);

    }

}


.pet-hero h1 {

    margin:
        0;

    max-width:
        700px;

    color:
        #fff;

    font-size:
        clamp(4rem, 10vw, 8rem);

    line-height:
        .9;

    letter-spacing:
        -.05em;

    text-shadow:
        0 0 15px rgba(255, 255, 255, .1),
        0 0 35px rgba(72, 200, 255, .3),
        0 0 75px rgba(72, 200, 255, .16);

    transition:
        text-shadow .4s ease,
        transform .4s ease;

}


.pet-hero h1:hover {

    transform:
        translateY(-3px);

    text-shadow:
        0 0 18px rgba(255, 255, 255, .2),
        0 0 42px rgba(72, 200, 255, .55),
        0 0 90px rgba(72, 200, 255, .3);

}


.pet-hero-description {

    max-width:
        600px;

    margin:
        30px 0 0;

    color:
        #aebdce;

    font-size:
        1.05rem;

    line-height:
        1.8;

}


/* =========================================================
   HERO VIDEO
========================================================= */

.pet-hero-media {

    position:
        absolute;

    z-index:
        4;

    right:
        clamp(30px, 6vw, 110px);

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        clamp(290px, 25vw, 390px);

    aspect-ratio:
        9 / 16;

}


.pet-hero-media-glow {

    position:
        absolute;

    inset:
        -30px;

    border-radius:
        30px;

    background:
        radial-gradient(
            ellipse,
            rgba(72, 200, 255, .28),
            rgba(157, 114, 255, .12),
            transparent 68%
        );

    filter:
        blur(22px);

    opacity:
        .8;

    pointer-events:
        none;

    animation:
        petVideoAura 4s ease-in-out infinite alternate;

}


@keyframes petVideoAura {

    from {

        transform:
            scale(.94);

        opacity:
            .55;

    }

    to {

        transform:
            scale(1.05);

        opacity:
            .95;

    }

}


.pet-hero-video {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

    border:
        1px solid rgba(145, 237, 255, .72);

    border-radius:
        22px;

    background:
        #03070d;

    box-shadow:

        0 0 0 1px rgba(98, 231, 255, .08),

        0 0 20px rgba(72, 200, 255, .28),

        0 0 60px rgba(72, 200, 255, .16),

        0 25px 70px rgba(0, 0, 0, .6);

}


.pet-hero-video iframe {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    border:
        0;

    /*
     * Zoom the Shorts frame slightly.
     * This removes the ugly black side feeling
     * without changing the actual iframe ratio.
     */

    transform:
        scale(1.09);

}


.pet-hero-video-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            rgba(5, 10, 18, .02),
            rgba(5, 10, 18, .08) 65%,
            rgba(5, 10, 18, .58)
        );

    pointer-events:
        none;

}


.pet-hero-video-label {

    position:
        absolute;

    left:
        16px;

    bottom:
        14px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        8px 12px;

    border:
        1px solid rgba(98, 231, 255, .35);

    border-radius:
        999px;

    background:
        rgba(5, 10, 18, .68);

    backdrop-filter:
        blur(10px);

    color:
        #e8fbff;

    font-size:
        .68rem;

    font-weight:
        800;

    letter-spacing:
        .15em;

    box-shadow:
        0 0 18px rgba(72, 200, 255, .18);

}


.pet-hero-video-label span {

    color:
        var(--pet-cyan);

    text-shadow:
        0 0 10px var(--pet-cyan);

}


/* =========================================================
   PET VIDEO SECTION
========================================================= */

.pet-video-wrapper {

    width:
        min(1000px, 100%);

    margin:
        0 auto;

}


.pet-video-frame {

    position:
        relative;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    border:
        1px solid rgba(98, 231, 255, .32);

    border-radius:
        20px;

    background:
        #03070d;

    box-shadow:
        0 0 25px rgba(72, 200, 255, .12),
        0 25px 70px rgba(0, 0, 0, .45);

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

}


.pet-video-frame:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(98, 231, 255, .72);

    box-shadow:
        0 0 25px rgba(72, 200, 255, .3),
        0 0 70px rgba(72, 200, 255, .14),
        0 30px 80px rgba(0, 0, 0, .55);

}


.pet-video-frame iframe {

    width:
        100%;

    height:
        100%;

    border:
        0;

}


/* =========================================================
   COMMON CARD SYSTEM
========================================================= */

.pet-info-card,
.pet-type-card,
.pet-level-card,
.pet-soul-card,
.pet-genus-card,
.pet-tip-card,
.pet-priority-item,
.pet-account-step {

    position:
        relative;

    background:
        linear-gradient(
            145deg,
            rgba(17, 29, 44, .92),
            rgba(8, 14, 23, .96)
        );

    border:
        1px solid rgba(98, 231, 255, .17);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .035);

    transition:
        transform var(--pet-transition),
        border-color var(--pet-transition),
        box-shadow var(--pet-transition),
        background var(--pet-transition);

}


/* =========================================================
   UNIVERSAL CARD HOVER
========================================================= */

.pet-info-card:hover,
.pet-type-card:hover,
.pet-level-card:hover,
.pet-soul-card:hover,
.pet-genus-card:hover,
.pet-tip-card:hover,
.pet-priority-item:hover,
.pet-account-step:hover,
.pet-card-active {

    transform:
        translateY(-9px);

    border-color:
        rgba(98, 231, 255, .7);

    background:
        linear-gradient(
            145deg,
            rgba(18, 36, 53, .96),
            rgba(8, 17, 28, .98)
        );

    box-shadow:

        0 0 0 1px rgba(98, 231, 255, .08),

        0 0 20px rgba(72, 200, 255, .2),

        0 0 55px rgba(72, 200, 255, .1),

        0 25px 55px rgba(0, 0, 0, .45),

        inset 0 1px 0 rgba(255, 255, 255, .08);

}


/* =========================================================
   CARD TOP LIGHT
========================================================= */

.pet-info-card::before,
.pet-type-card::before,
.pet-level-card::before,
.pet-soul-card::before,
.pet-genus-card::before,
.pet-tip-card::before,
.pet-priority-item::before,
.pet-account-step::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        12%;

    width:
        76%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(98, 231, 255, .65),
            transparent
        );

    opacity:
        .45;

    transition:
        opacity .35s ease,
        box-shadow .35s ease;

}


.pet-info-card:hover::before,
.pet-type-card:hover::before,
.pet-level-card:hover::before,
.pet-soul-card:hover::before,
.pet-genus-card:hover::before,
.pet-tip-card:hover::before,
.pet-priority-item:hover::before,
.pet-account-step:hover::before,
.pet-card-active::before {

    opacity:
        1;

    box-shadow:
        0 0 15px rgba(98, 231, 255, .75),
        0 0 30px rgba(72, 200, 255, .4);

}


/* =========================================================
   INFO GRID
========================================================= */

.pet-info-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        22px;

}


.pet-info-card {

    display:
        flex;

    gap:
        22px;

    padding:
        28px;

    border-radius:
        var(--pet-radius);

}


.pet-info-icon {

    flex:
        0 0 58px;

    width:
        58px;

    height:
        58px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(98, 231, 255, .35);

    border-radius:
        15px;

    background:
        rgba(72, 200, 255, .08);

    font-size:
        1.65rem;

    box-shadow:
        inset 0 0 20px rgba(72, 200, 255, .06),
        0 0 18px rgba(72, 200, 255, .08);

}


.pet-info-content h3 {

    margin:
        0 0 8px;

}


.pet-info-content p {

    margin:
        0;

    color:
        var(--pet-muted);

    line-height:
        1.7;

}


/* =========================================================
   PET TYPE GRID
========================================================= */

.pet-type-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        26px;

}


.pet-type-card {

    overflow:
        hidden;

    border-radius:
        20px;

    transform-style:
        preserve-3d;

}


/* =========================================================
   PET TYPE IMAGE
   THIS IS THE MAIN "LIVING" IMAGE EFFECT
========================================================= */

.pet-type-image,
.pet-analysis-image {

    position:
        relative;

    overflow:
        hidden;

    isolation:
        isolate;

    border:
        1px solid rgba(178, 242, 255, .42);

    background:
        #050b13;

    box-shadow:

        inset 0 0 0 1px rgba(255, 255, 255, .035),

        inset 0 0 30px rgba(72, 200, 255, .08),

        0 0 18px rgba(72, 200, 255, .12);

    transform:
        perspective(900px)
        rotateX(var(--pet-rotate-x, 0deg))
        rotateY(var(--pet-rotate-y, 0deg));

    transition:
        transform .22s ease-out,
        border-color .35s ease,
        box-shadow .35s ease;

}


/* =========================================================
   IMAGE FRAME INNER LINE
========================================================= */

.pet-type-image::before,
.pet-analysis-image::before {

    content:
        "";

    position:
        absolute;

    inset:
        6px;

    z-index:
        3;

    border:
        1px solid rgba(188, 246, 255, .18);

    border-radius:
        12px;

    pointer-events:
        none;

    transition:
        border-color .35s ease,
        box-shadow .35s ease;

}


/* =========================================================
   IMAGE TOP SHINE
========================================================= */

.pet-type-image::after,
.pet-analysis-image::after {

    content:
        "";

    position:
        absolute;

    top:
        -80%;

    left:
        -40%;

    width:
        45%;

    height:
        250%;

    z-index:
        4;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .22),
            transparent
        );

    transform:
        rotate(25deg)
        translateX(-160%);

    opacity:
        0;

    pointer-events:
        none;

    transition:
        transform .8s ease,
        opacity .35s ease;

}


.pet-type-image:hover::after,
.pet-image-hover::after,
.pet-analysis-image:hover::after {

    transform:
        rotate(25deg)
        translateX(650%);

    opacity:
        1;

}


/* =========================================================
   IMAGE ITSELF
========================================================= */

.pet-type-image img,
.pet-analysis-image img {

    display:
        block;

    width:
        100%;

    height:
        auto;

    min-height:
        280px;

    object-fit:
        cover;

    transform:
        scale(1.001);

    filter:
        brightness(.88)
        saturate(.96)
        contrast(1.03);

    opacity:
        .96;

    cursor:
        zoom-in;

    transition:
        transform .65s cubic-bezier(.16, .8, .2, 1),
        filter .5s ease,
        opacity .4s ease;

}


/* =========================================================
   IMAGE HOVER
========================================================= */

.pet-type-image:hover,
.pet-image-hover,
.pet-analysis-image:hover {

    transform:
        perspective(900px)
        translateY(-7px)
        rotateX(var(--pet-rotate-x, 0deg))
        rotateY(var(--pet-rotate-y, 0deg))
        scale(1.012);

    border-color:
        rgba(180, 246, 255, .98);

    box-shadow:

        0 0 0 1px rgba(98, 231, 255, .22),

        0 0 18px rgba(98, 231, 255, .55),

        0 0 42px rgba(72, 200, 255, .32),

        0 0 85px rgba(157, 114, 255, .14),

        0 20px 45px rgba(0, 0, 0, .5),

        inset 0 0 28px rgba(98, 231, 255, .12);

}


.pet-type-image:hover::before,
.pet-image-hover::before,
.pet-analysis-image:hover::before {

    border-color:
        rgba(195, 249, 255, .65);

    box-shadow:
        inset 0 0 18px rgba(98, 231, 255, .12),
        0 0 18px rgba(98, 231, 255, .3);

}


.pet-type-image:hover img,
.pet-image-hover img,
.pet-analysis-image:hover img {

    transform:
        scale(1.09);

    filter:
        brightness(1.14)
        saturate(1.16)
        contrast(1.06);

    opacity:
        1;

}


/* =========================================================
   IMAGE GLOW ELEMENT
========================================================= */

.pet-image-glow {

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(98, 231, 255, .15),
            transparent 60%
        );

    opacity:
        .18;

    mix-blend-mode:
        screen;

    transition:
        opacity .4s ease,
        transform .5s ease;

}


.pet-type-image:hover .pet-image-glow,
.pet-image-hover .pet-image-glow {

    opacity:
        .75;

    transform:
        scale(1.15);

}


/* =========================================================
   IMAGE HINT
========================================================= */

.pet-image-hint {

    position:
        absolute;

    z-index:
        6;

    right:
        14px;

    bottom:
        14px;

    padding:
        8px 11px;

    border:
        1px solid rgba(98, 231, 255, .3);

    border-radius:
        999px;

    background:
        rgba(4, 9, 15, .72);

    backdrop-filter:
        blur(10px);

    color:
        #d9f9ff;

    font-size:
        .68rem;

    font-weight:
        700;

    opacity:
        .7;

    transition:
        opacity .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;

}


.pet-type-image:hover .pet-image-hint,
.pet-analysis-image:hover .pet-image-hint {

    opacity:
        1;

    transform:
        translateY(-3px);

    border-color:
        rgba(98, 231, 255, .72);

    box-shadow:
        0 0 18px rgba(72, 200, 255, .22);

}


/* =========================================================
   TYPE CONTENT
========================================================= */

.pet-type-content {

    padding:
        28px;

}


.pet-type-label {

    color:
        var(--pet-cyan);

    font-size:
        .68rem;

    font-weight:
        800;

    letter-spacing:
        .18em;

}


.pet-type-content h3 {

    margin:
        8px 0 12px;

    font-size:
        2rem;

}


.pet-type-description {

    margin:
        0 0 24px;

    color:
        var(--pet-muted);

    line-height:
        1.7;

}


/* =========================================================
   PET STATS
========================================================= */

.pet-stats {

    border:
        1px solid rgba(98, 231, 255, .12);

    border-radius:
        14px;

    overflow:
        hidden;

    background:
        rgba(4, 9, 16, .45);

}


.pet-stats-header {

    display:
        flex;

    justify-content:
        space-between;

    padding:
        12px 15px;

    border-bottom:
        1px solid rgba(98, 231, 255, .1);

    color:
        var(--pet-cyan);

    font-size:
        .7rem;

    letter-spacing:
        .12em;

}


.pet-stats ul {

    list-style:
        none;

    margin:
        0;

    padding:
        0;

}


.pet-stats li {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        11px 15px;

    color:
        #aebdce;

    border-bottom:
        1px solid rgba(255, 255, 255, .035);

}


.pet-stats li:last-child {

    border-bottom:
        0;

}


.pet-stats li strong {

    color:
        #dffaff;

    text-shadow:
        0 0 10px rgba(98, 231, 255, .35);

}


.pet-stats-note {

    padding:
        12px 15px;

    color:
        #92a6b9;

    font-size:
        .78rem;

    line-height:
        1.5;

}


/* =========================================================
   PET TYPE COLOR ACCENTS
========================================================= */

.pet-cogni .pet-type-image {

    --accent:
        #63e9ff;

}


.pet-fera .pet-type-image {

    --accent:
        #ff9f6e;

}


.pet-natura .pet-type-image {

    --accent:
        #70f0a0;

}


.pet-varian .pet-type-image {

    --accent:
        #ff7199;

}


.pet-special .pet-type-image {

    --accent:
        #c28cff;

}


.pet-cogni .pet-type-image:hover {

    border-color:
        rgba(99, 233, 255, .95);

    box-shadow:
        0 0 25px rgba(99, 233, 255, .5),
        0 0 65px rgba(99, 233, 255, .22);

}


.pet-fera .pet-type-image:hover {

    border-color:
        rgba(255, 159, 110, .95);

    box-shadow:
        0 0 25px rgba(255, 159, 110, .45),
        0 0 65px rgba(255, 120, 70, .18);

}


.pet-natura .pet-type-image:hover {

    border-color:
        rgba(112, 240, 160, .95);

    box-shadow:
        0 0 25px rgba(112, 240, 160, .45),
        0 0 65px rgba(80, 230, 130, .18);

}


.pet-varian .pet-type-image:hover {

    border-color:
        rgba(255, 113, 153, .95);

    box-shadow:
        0 0 25px rgba(255, 113, 153, .45),
        0 0 65px rgba(255, 80, 130, .18);

}


.pet-special .pet-type-image:hover {

    border-color:
        rgba(194, 140, 255, .95);

    box-shadow:
        0 0 25px rgba(194, 140, 255, .5),
        0 0 65px rgba(157, 114, 255, .25);

}


/* =========================================================
   TYPES NOTE
========================================================= */

.pet-types-note,
.pet-account-note,
.pet-level-warning,
.pet-farm-tip {

    display:
        flex;

    gap:
        18px;

    align-items:
        flex-start;

    margin:
        35px 0 0;

    padding:
        22px 25px;

    border:
        1px solid rgba(98, 231, 255, .18);

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            rgba(72, 200, 255, .06),
            rgba(157, 114, 255, .035)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .03);

}


.pet-types-note > span,
.pet-account-note > span,
.pet-level-warning > span,
.pet-farm-tip > span {

    font-size:
        1.5rem;

}


.pet-types-note strong,
.pet-account-note strong,
.pet-level-warning strong,
.pet-farm-tip strong {

    color:
        #e9fbff;

}


.pet-types-note p,
.pet-account-note p,
.pet-level-warning p,
.pet-farm-tip p {

    margin:
        6px 0 0;

    color:
        var(--pet-muted);

    line-height:
        1.7;

}


/* =========================================================
   ACCOUNT PROGRESSION
========================================================= */

.pet-account-highlight {

    display:
        flex;

    gap:
        25px;

    padding:
        30px;

    border:
        1px solid rgba(98, 231, 255, .25);

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            rgba(72, 200, 255, .08),
            rgba(157, 114, 255, .05)
        );

    box-shadow:
        0 0 35px rgba(72, 200, 255, .08);

}


.pet-account-icon {

    font-size:
        2rem;

}


.pet-account-content h3 {

    margin:
        0 0 10px;

}


.pet-account-content p {

    margin:
        8px 0;

    color:
        var(--pet-muted);

    line-height:
        1.7;

}


.pet-account-flow {

    display:
        grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr auto 1fr;

    gap:
        15px;

    align-items:
        center;

    margin-top:
        30px;

}


.pet-account-step {

    padding:
        22px;

    border-radius:
        16px;

}


.pet-account-step span {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--pet-cyan);

    font-size:
        .7rem;

    font-weight:
        800;

}


.pet-account-step strong {

    display:
        block;

}


.pet-account-step p {

    margin:
        7px 0 0;

    color:
        var(--pet-muted);

    font-size:
        .85rem;

}


.pet-account-arrow {

    color:
        var(--pet-cyan);

    font-size:
        1.5rem;

    text-shadow:
        0 0 15px rgba(98, 231, 255, .5);

}


/* =========================================================
   LEVELS
========================================================= */

.pet-level-track {

    display:
        grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap:
        14px;

    align-items:
        stretch;

}


.pet-level-line {

    display:
        none;

}


.pet-level-card {

    padding:
        25px 20px;

    border-radius:
        17px;

}


.pet-level-card span {

    color:
        var(--pet-cyan);

    font-size:
        .7rem;

    font-weight:
        800;

}


.pet-level-card strong {

    display:
        block;

    margin:
        10px 0;

}


.pet-level-card p {

    margin:
        0;

    color:
        var(--pet-muted);

    line-height:
        1.6;

    font-size:
        .88rem;

}


.pet-level-five {

    border-color:
        rgba(194, 140, 255, .42);

}


.pet-level-five:hover {

    border-color:
        rgba(194, 140, 255, .95);

    box-shadow:
        0 0 25px rgba(194, 140, 255, .35),
        0 0 70px rgba(157, 114, 255, .16),
        0 25px 55px rgba(0, 0, 0, .45);

}


/* =========================================================
   SOUL GRID
========================================================= */

.pet-soul-grid,
.pet-genus-grid,
.pet-tip-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        22px;

}


.pet-soul-card,
.pet-genus-card,
.pet-tip-card {

    padding:
        30px;

    border-radius:
        18px;

}


.pet-soul-icon {

    margin-bottom:
        20px;

    font-size:
        2rem;

    filter:
        drop-shadow(
            0 0 10px rgba(98, 231, 255, .3)
        );

}


.pet-soul-card h3,
.pet-genus-card h3,
.pet-tip-card h3 {

    margin:
        0 0 10px;

}


.pet-soul-card p,
.pet-genus-card p,
.pet-tip-card p {

    margin:
        0;

    color:
        var(--pet-muted);

    line-height:
        1.7;

}


/* =========================================================
   FARM
========================================================= */

.pet-farm-highlight {

    display:
        flex;

    align-items:
        center;

    gap:
        30px;

    padding:
        35px;

    border:
        1px solid rgba(98, 231, 255, .28);

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            rgba(72, 200, 255, .08),
            rgba(157, 114, 255, .05)
        );

    box-shadow:
        0 0 35px rgba(72, 200, 255, .08);

}


.pet-farm-icon {

    font-size:
        3rem;

    filter:
        drop-shadow(
            0 0 18px rgba(98, 231, 255, .4)
        );

}


.pet-farm-content > span {

    color:
        var(--pet-cyan);

    font-size:
        .7rem;

    font-weight:
        800;

    letter-spacing:
        .15em;

}


.pet-farm-content h3 {

    margin:
        8px 0;

    font-size:
        2rem;

}


.pet-farm-content p {

    max-width:
        700px;

    color:
        var(--pet-muted);

    line-height:
        1.7;

}


.pet-farm-stat {

    display:
        inline-flex;

    align-items:
        baseline;

    gap:
        10px;

    margin-top:
        10px;

}


.pet-farm-stat strong {

    color:
        var(--pet-cyan);

    font-size:
        1.7rem;

    text-shadow:
        0 0 15px rgba(98, 231, 255, .4);

}


.pet-farm-stat span {

    color:
        var(--pet-muted);

}


/* =========================================================
   ANALYSIS
========================================================= */

.pet-analysis-layout {

    display:
        grid;

    grid-template-columns:
        1.1fr .9fr;

    gap:
        35px;

    align-items:
        center;

}


.pet-analysis-image {

    border-radius:
        20px;

}


.pet-analysis-image img {

    min-height:
        420px;

}


.pet-analysis-content {

    display:
        flex;

    flex-direction:
        column;

    gap:
        15px;

}


.pet-analysis-lock,
.pet-analysis-step {

    display:
        flex;

    gap:
        18px;

    padding:
        22px;

    border:
        1px solid rgba(98, 231, 255, .15);

    border-radius:
        16px;

    background:
        rgba(10, 18, 28, .75);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}


.pet-analysis-lock:hover,
.pet-analysis-step:hover {

    transform:
        translateX(6px);

    border-color:
        rgba(98, 231, 255, .55);

    box-shadow:
        0 0 25px rgba(72, 200, 255, .12);

}


.pet-analysis-lock > span {

    font-size:
        1.5rem;

}


.pet-analysis-step > span {

    color:
        var(--pet-cyan);

    font-weight:
        900;

}


.pet-analysis-step strong,
.pet-analysis-lock strong {

    display:
        block;

    margin-bottom:
        6px;

}


.pet-analysis-step p,
.pet-analysis-lock p {

    margin:
        0;

    color:
        var(--pet-muted);

    line-height:
        1.6;

}


/* =========================================================
   PRIORITY
========================================================= */

.pet-priority-list {

    display:
        grid;

    gap:
        14px;

}


.pet-priority-item {

    display:
        flex;

    gap:
        20px;

    align-items:
        center;

    padding:
        20px 24px;

    border-radius:
        15px;

}


.pet-priority-item > span {

    flex:
        0 0 42px;

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(98, 231, 255, .35);

    border-radius:
        50%;

    color:
        var(--pet-cyan);

    font-weight:
        900;

    box-shadow:
        0 0 15px rgba(72, 200, 255, .12);

}


.pet-priority-item strong {

    display:
        block;

}


.pet-priority-item p {

    margin:
        4px 0 0;

    color:
        var(--pet-muted);

}


/* =========================================================
   LIGHTBOX
========================================================= */

.pet-lightbox {

    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        30px;

    background:
        rgba(1, 5, 10, .9);

    backdrop-filter:
        blur(14px);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity .3s ease,
        visibility .3s ease;

}


.pet-lightbox.active {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

}


.pet-lightbox img {

    max-width:
        min(1200px, 94vw);

    max-height:
        88vh;

    object-fit:
        contain;

    border:
        1px solid rgba(178, 242, 255, .72);

    border-radius:
        14px;

    box-shadow:

        0 0 25px rgba(98, 231, 255, .5),

        0 0 80px rgba(72, 200, 255, .22),

        0 30px 100px rgba(0, 0, 0, .7);

    transform:
        scale(.92);

    transition:
        transform .35s cubic-bezier(.2, .8, .2, 1);

}


.pet-lightbox.active img {

    transform:
        scale(1);

}


.pet-lightbox-close {

    position:
        absolute;

    top:
        24px;

    right:
        28px;

    z-index:
        2;

    width:
        48px;

    height:
        48px;

    border:
        1px solid rgba(98, 231, 255, .4);

    border-radius:
        50%;

    background:
        rgba(7, 13, 21, .8);

    color:
        #fff;

    font-size:
        2rem;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}


.pet-lightbox-close:hover {

    transform:
        rotate(90deg)
        scale(1.08);

    border-color:
        rgba(98, 231, 255, .95);

    box-shadow:
        0 0 25px rgba(72, 200, 255, .4);

}


/* =========================================================
   BACK TO TOP
========================================================= */

.pet-back-to-top-wrapper {

    display:
        flex;

    justify-content:
        center;

    padding:
        25px 20px 80px;

}


.pet-back-to-top {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        13px 20px;

    border:
        1px solid rgba(98, 231, 255, .28);

    border-radius:
        999px;

    background:
        rgba(8, 15, 24, .8);

    color:
        #dffaff;

    cursor:
        pointer;

    opacity:
        0;

    transform:
        translateY(15px);

    pointer-events:
        none;

    transition:
        opacity .3s ease,
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}


.pet-back-to-top.visible {

    opacity:
        1;

    transform:
        translateY(0);

    pointer-events:
        auto;

}


.pet-back-to-top:hover {

    border-color:
        rgba(98, 231, 255, .85);

    box-shadow:
        0 0 22px rgba(72, 200, 255, .3);

}


.pet-back-to-top span {

    color:
        var(--pet-cyan);

    font-size:
        1.2rem;

}


/* =========================================================
   BODY WHEN LIGHTBOX OPEN
========================================================= */

body.pet-lightbox-open {

    overflow:
        hidden;

}


/* =========================================================
   IMAGE LOADED
========================================================= */

.pet-type-image img,
.pet-analysis-image img {

    transition:
        opacity .35s ease,
        transform .65s cubic-bezier(.16, .8, .2, 1),
        filter .5s ease;

}


.pet-type-image img:not(.pet-image-loaded),
.pet-analysis-image img:not(.pet-image-loaded) {

    opacity:
        .55;

}


/* =========================================================
   REDUCED MOTION
========================================================= */

.pet-reduced-motion *,
.pet-reduced-motion *::before,
.pet-reduced-motion *::after {

    animation-duration:
        .01ms !important;

    animation-iteration-count:
        1 !important;

    transition-duration:
        .01ms !important;

    scroll-behavior:
        auto !important;

}

/* =========================================================
   PETS — RESPONSIVE & LAYOUT SYSTEM (LOGICAL FLOW)
   ========================================================= */

/* --- 1. Изключително големи екрани (33" монитори / над 1400px) --- */
@media (min-width: 1400px) {
    .pet-hero,
    .pet-section {
        max-width: 1300px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- 2. Таблети и малки лаптопи (до 1050px) --- */
@media (max-width: 1050px) {
    .pet-hero {
        min-height: 760px;
        align-items: flex-start;
    }

    .pet-hero-content {
        padding-top: 100px;
    }

    .pet-hero-media {
        top: auto;
        bottom: 50px;
        right: 50%;
        transform: translateX(50%);
        width: 280px;
    }

    .pet-info-grid,
    .pet-type-grid,
    .pet-analysis-layout {
        grid-template-columns: 1fr;
    }

    .pet-soul-grid,
    .pet-genus-grid,
    .pet-tip-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pet-account-flow {
        grid-template-columns: repeat(2, 1fr);
    }

    .pet-account-arrow {
        display: none;
    }

    .pet-level-track {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- 3. Мобилни устройства (до 700px) --- */
@media (max-width: 700px) {
    .pet-section {
        width: min(100% - 28px, 1200px);
        padding: 70px 0;
    }

    .pet-hero {
        min-height: 790px;
    }

    .pet-hero-content {
        width: calc(100% - 28px);
        padding: 75px 0 0;
        text-align: center;
    }

    .pet-hero h1 {
        font-size: clamp(3.5rem, 16vw, 5rem);
    }

    .pet-hero-description {
        margin: 22px auto 0;
        font-size: 0.95rem;
    }

    .pet-hero-media {
        bottom: 30px;
        width: min(250px, 62vw);
    }

    .pet-info-card,
    .pet-account-highlight,
    .pet-farm-highlight {
        flex-direction: column;
    }

    .pet-type-content {
        padding: 22px;
    }

    .pet-type-image img,
    .pet-analysis-image img {
        min-height: 220px;
    }

    .pet-analysis-image img {
        min-height: 280px;
    }

    .pet-soul-grid,
    .pet-genus-grid,
    .pet-tip-grid,
    .pet-account-flow,
    .pet-level-track {
        grid-template-columns: 1fr;
    }

    .pet-types-note,
    .pet-account-note,
    .pet-level-warning,
    .pet-farm-tip {
        padding: 18px;
    }
}

/* --- 4. Малки мобилни телефони (до 430px) --- */
@media (max-width: 430px) {
    .pet-hero {
        min-height: 750px;
    }

    .pet-hero-media {
        width: 225px;
    }

    .pet-hero-video {
        border-radius: 17px;
    }

    .pet-section-header h2 {
        font-size: 2.1rem;
    }

    .pet-type-content h3 {
        font-size: 1.7rem;
    }

    .pet-image-hint {
        font-size: 0.6rem;
        padding: 7px 9px;
    }
}

/* --- 5. Сензорни устройства (Touch devices без мишка) --- */
@media (hover: none) {
    .pet-type-image:active,
    .pet-analysis-image:active {
        border-color: rgba(180, 246, 255, 0.9);
        box-shadow: 0 0 25px rgba(72, 200, 255, 0.35);
    }
}


/* =========================================================
   ВИДЕО КРЕДИТИ И ИКОНИ (ОБЩИ СТИЛОВЕ)
   ========================================================= */

.video-credit {
    margin-top: 16px;
    text-align: center;
    color: rgba(225, 232, 242, 0.85);
    font-size: 18px; 
    letter-spacing: 0.5px;
}

.creator-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: 6px;
    color: #ff5555;
    font-size: 18px; 
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.creator-link:hover {
    color: #ff7676;
    text-shadow: 0 0 14px rgba(255, 85, 85, 0.45);
    text-decoration: underline;
}

.youtube-icon {
    flex-shrink: 0;
    width: 20px; 
    height: 20px;
}