/* =========================================================
   BL BLACKLINE
   Animations Stylesheet
   ========================================================= */


/* =========================================================
   1. ANIMATION VARIABLES
   ========================================================= */

:root {
    --ease-luxury:
        cubic-bezier(0.22, 1, 0.36, 1);

    --ease-smooth:
        cubic-bezier(0.65, 0, 0.35, 1);

    --duration-fast: 0.35s;
    --duration-medium: 0.7s;
    --duration-slow: 1.15s;
}


/* =========================================================
   2. JAVASCRIPT REVEAL STATES

   Bu sınıflar animations.js tarafından eklenecek.
   JavaScript çalışmazsa içerikler gizlenmez.
   ========================================================= */

.reveal-item {
    opacity: 1;
    transform: none;
}

.reveal-ready {
    opacity: 0;
    transform: translateY(45px);
    will-change: transform, opacity;
}

.reveal-ready.reveal-left {
    transform: translateX(-55px);
}

.reveal-ready.reveal-right {
    transform: translateX(55px);
}

.reveal-ready.reveal-scale {
    transform: scale(0.94);
}

.reveal-ready.is-revealed {
    opacity: 1;
    transform: translate(0, 0) scale(1);

    transition:
        opacity var(--duration-slow) var(--ease-luxury),
        transform var(--duration-slow) var(--ease-luxury);
}


/* =========================================================
   3. HERO FALLBACK ANIMATIONS

   GSAP yüklenemezse hafif CSS animasyonları devreye girer.
   ========================================================= */

body:not(.gsap-ready) .hero__eyebrow {
    animation:
        fadeUp 0.8s 0.15s var(--ease-luxury) both;
}

body:not(.gsap-ready) .hero__title {
    animation:
        fadeUp 1s 0.28s var(--ease-luxury) both;
}

body:not(.gsap-ready) .hero__description {
    animation:
        fadeUp 1s 0.42s var(--ease-luxury) both;
}

body:not(.gsap-ready) .hero__actions {
    animation:
        fadeUp 1s 0.55s var(--ease-luxury) both;
}

body:not(.gsap-ready) .hero__values {
    animation:
        fadeUp 1s 0.68s var(--ease-luxury) both;
}

body:not(.gsap-ready) .hero__media img {
    animation:
        heroImageEntrance 1.7s var(--ease-luxury) both;
}


/* =========================================================
   4. HERO IMAGE MOTION
   ========================================================= */

.hero__media img {
    transform: scale(1.015);
    will-change: transform;
}

.hero.is-loaded .hero__media img {
    transform: scale(1);
}

.hero__noise {
    animation:
        noiseMovement 10s steps(8) infinite;
}


/* =========================================================
   5. HERO GOLD ACCENT
   ========================================================= */

.hero__title span {
    position: relative;
}

.hero__title span::after {
    content: "";

    position: absolute;
    left: 2px;
    bottom: -8px;

    width: min(150px, 25%);
    height: 1px;

    background:
        linear-gradient(90deg,
            var(--color-gold-light),
            transparent);

    transform: scaleX(0);
    transform-origin: left;

    animation:
        goldLineReveal 1.1s 1.15s var(--ease-luxury) forwards;
}


/* =========================================================
   6. BUTTON SHINE EFFECT
   ========================================================= */

.btn--gold::before {
    content: "";

    position: absolute;
    top: -50%;
    left: -80%;

    width: 45%;
    height: 200%;

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

    transform: rotate(18deg);
    pointer-events: none;
}

.btn--gold:hover::before {
    animation:
        buttonShine 0.85s var(--ease-smooth);
}

.btn span,
.btn svg {
    position: relative;
    z-index: 2;
}


/* =========================================================
   7. LOGO DETAILS
   ========================================================= */

.brand-logo__monogram {
    position: relative;

    transition:
        color var(--duration-fast) ease,
        text-shadow var(--duration-fast) ease;
}

.brand-logo:hover .brand-logo__monogram {
    color: var(--color-gold-light);

    text-shadow:
        0 0 22px rgba(214, 164, 59, 0.28);
}

.brand-logo__content {
    transition:
        transform var(--duration-fast) var(--ease-luxury);
}

.brand-logo:hover .brand-logo__content {
    transform: translateX(3px);
}


/* =========================================================
   8. HEADER ENTRANCE
   ========================================================= */

.site-header {
    animation:
        headerEntrance 0.9s 0.1s var(--ease-luxury) both;
}


/* =========================================================
   9. SERVICE CARD EFFECTS
   ========================================================= */


/* =========================================================
   10. ABOUT IMAGE EFFECTS
   ========================================================= */

.about__visual::after {
    content: "";

    position: absolute;
    top: -80%;
    left: -80%;
    z-index: 3;

    width: 50%;
    height: 260%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 226, 166, 0.08),
            transparent
        );

    transform: rotate(18deg);

    pointer-events: none;
}

.about:hover .about__visual::after {
    animation:
        imageLightSweep
        1.3s
        var(--ease-smooth);
}

.about__divider {
    animation:
        aboutDividerGlow
        4s
        ease-in-out
        infinite;
}

@keyframes aboutDividerGlow {
    0%,
    100% {
        opacity: 0.65;

        box-shadow:
            0 0 10px rgba(214, 164, 59, 0.08);
    }

    50% {
        opacity: 1;

        box-shadow:
            0 0 24px rgba(214, 164, 59, 0.28);
    }
}


/* =========================================================
   11. WHY FEATURES
   ========================================================= */

.why-feature {
    transition:
        background-color var(--duration-fast) ease;
}

.why-feature:hover {
    background:
        linear-gradient(
            180deg,
            rgba(214, 164, 59, 0.035),
            transparent
        );
}

.why-feature__icon svg {
    transition:
        transform var(--duration-medium) var(--ease-luxury);
}

.why-feature:hover .why-feature__icon svg {
    transform: scale(1.08);
}

/* =========================================================
   12. CORPORATE QUOTE
   ========================================================= */

.corporate__quote {
    overflow: hidden;
}

.corporate__quote::before {
    content: "";

    position: absolute;
    top: -120px;
    right: -120px;

    width: 260px;
    height: 260px;

    border: 1px solid rgba(214, 164, 59, 0.12);
    border-radius: 50%;

    animation:
        quoteCircle 9s linear infinite;
}

.corporate__quote::after {
    content: "";

    position: absolute;
    right: -40px;
    bottom: -40px;

    width: 120px;
    height: 120px;

    background:
        radial-gradient(circle,
            rgba(214, 164, 59, 0.13),
            transparent 70%);

    animation:
        softPulse 4s ease-in-out infinite;
}


/* =========================================================
   RESERVATION CTA
   ========================================================= */

.reservation-cta__panel {
    transition:
        border-color var(--duration-fast) ease,
        box-shadow var(--duration-medium) ease,
        transform var(--duration-medium) var(--ease-luxury);
}

.reservation-cta__panel:hover {
    border-color: rgba(214, 164, 59, 0.58);

    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.34),
        inset 0 0 40px rgba(214, 164, 59, 0.04);

    transform: translateY(-3px);
}

.reservation-cta__icon {
    animation:
        ctaCompactIconFloat
        4s
        ease-in-out
        infinite;
}

@keyframes ctaCompactIconFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}


/* =========================================================
   14. CONTACT EFFECTS
   ========================================================= */

.contact-card__arrow {
    transition:
        transform var(--duration-fast) var(--ease-luxury);
}

.contact-card:hover .contact-card__arrow {
    transform: translate(4px, -4px);
}

.contact__availability-dot {
    animation:
        availabilityPulse 2s ease-in-out infinite;
}


/* =========================================================
   15. FLOATING CONTACT
   ========================================================= */

.floating-contact__item {
    animation:
        floatingItemEntrance 0.7s var(--ease-luxury) both;
}

.floating-contact__item:nth-child(1) {
    animation-delay: 0.8s;
}

.floating-contact__item:nth-child(2) {
    animation-delay: 0.95s;
}

.floating-contact__item:nth-child(3) {
    animation-delay: 1.1s;
}


/* =========================================================
   16. FORM AND MODAL ANIMATIONS
   ========================================================= */

.form-group input,
.form-group select,
.form-group textarea {
    transition:
        border-color var(--duration-fast) ease,
        background-color var(--duration-fast) ease,
        box-shadow var(--duration-fast) ease,
        transform var(--duration-fast) ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    transform: translateY(-1px);
}

.form-group.is-error {
    animation:
        formShake 0.4s ease;
}

.reservation-success__icon {
    animation:
        successScale 0.65s var(--ease-luxury) both;
}

.reservation-success__icon svg {
    animation:
        successCheck 0.55s 0.2s var(--ease-luxury) both;
}


/* =========================================================
   17. BACK TO TOP
   ========================================================= */

.back-to-top.is-visible {
    animation:
        backToTopEntrance 0.45s var(--ease-luxury) both;
}

.back-to-top:hover svg {
    animation:
        arrowBounce 0.7s ease infinite;
}


/* =========================================================
   18. PAGE TRANSITION
   ========================================================= */

body.page-ready main,
body.page-ready .site-footer {
    animation:
        pageContentReveal 0.8s var(--ease-luxury) both;
}


/* =========================================================
   19. KEYFRAMES
   ========================================================= */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(34px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroImageEntrance {
    from {
        opacity: 0;
        transform: scale(1.1);
    }

    to {
        opacity: 1;
        transform: scale(1.015);
    }
}

@keyframes headerEntrance {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes goldLineReveal {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes buttonShine {
    from {
        left: -80%;
    }

    to {
        left: 140%;
    }
}

@keyframes cardLightSweep {
    from {
        left: -100%;
    }

    to {
        left: 150%;
    }
}

@keyframes imageLightSweep {
    from {
        left: -90%;
    }

    to {
        left: 150%;
    }
}

@keyframes badgeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes iconFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@keyframes softGlow {

    0%,
    100% {
        filter:
            drop-shadow(0 0 0 rgba(214, 164, 59, 0));
    }

    50% {
        filter:
            drop-shadow(0 0 10px rgba(214, 164, 59, 0.48));
    }
}

@keyframes quoteCircle {
    from {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.08);
    }

    to {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes softPulse {

    0%,
    100% {
        opacity: 0.45;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}

@keyframes iconRipple {
    0% {
        opacity: 0.55;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.75);
    }
}

@keyframes ctaGlow {

    0%,
    100% {
        opacity: 0.65;
        transform:
            translate(-50%, -50%) scale(0.95);
    }

    50% {
        opacity: 1;
        transform:
            translate(-50%, -50%) scale(1.08);
    }
}

@keyframes availabilityPulse {

    0%,
    100% {
        opacity: 1;

        box-shadow:
            0 0 8px rgba(110, 216, 145, 0.4);
    }

    50% {
        opacity: 0.55;

        box-shadow:
            0 0 18px rgba(110, 216, 145, 0.85);
    }
}

@keyframes floatingItemEntrance {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes floatingRipple {
    0% {
        opacity: 0.5;
        transform: scale(0.9);
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

@keyframes formShake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

@keyframes successScale {
    from {
        opacity: 0;
        transform: scale(0.6);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes successCheck {
    from {
        opacity: 0;
        transform: scale(0.4) rotate(-20deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes backToTopEntrance {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes arrowBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes pageContentReveal {
    from {
        opacity: 0.7;
    }

    to {
        opacity: 1;
    }
}

@keyframes noiseMovement {
    0% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-1%, 1%);
    }

    40% {
        transform: translate(1%, -1%);
    }

    60% {
        transform: translate(1%, 1%);
    }

    80% {
        transform: translate(-1%, -1%);
    }

    100% {
        transform: translate(0, 0);
    }
}


/* =========================================================
   20. REDUCED MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero__noise,
    .about__badge,
    .about__badge svg,
    .corporate__quote::before,
    .corporate__quote::after,
    .reservation-cta__icon,
    .reservation-cta__icon::before,
    .reservation-cta__icon::after,
    .reservation-cta__glow,
    .contact__availability-dot,
    .floating-contact__item,
    .floating-contact__item--whatsapp::after {
        animation: none !important;
    }

    .reveal-ready {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =========================================================
   FOOTER EFFECTS
   ========================================================= */

.site-footer__contact-icon {
    transition:
        color var(--duration-fast) ease,
        border-color var(--duration-fast) ease,
        background-color var(--duration-fast) ease,
        transform var(--duration-medium) var(--ease-luxury);
}

.site-footer__contact-item:hover
.site-footer__contact-icon {
    color: var(--color-black);

    background: var(--color-gold);
    border-color: var(--color-gold);

    transform: translateY(-2px);
}