/* 
  Custom styles for CEO Barber Academy 
  Tailwind handles most utility, this is for specific effects.
*/

/* =========================================
   Heading Font — SukhumvitSet Bold (700) & SemiBold (600)
========================================= */

@font-face {
    font-family: 'LocalHeading';
    src: url('../fonts/sukhumvit-set/SukhumvitSet-Bold.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LocalHeading';
    src: url('../fonts/sukhumvit-set/SukhumvitSet-Bold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LocalHeading';
    src: url('../fonts/sukhumvit-set/SukhumvitSet-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LocalHeading';
    src: url('../fonts/sukhumvit-set/SukhumvitSet-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LocalHeading';
    src: url('../fonts/sukhumvit-set/SukhumvitSet-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* =========================================
   Body Font — SukhumvitSet Text (400), Light (300), Thin (100)
========================================= */

@font-face {
    font-family: 'LocalBody';
    src: url('../fonts/sukhumvit-set/SukhumvitSet-Text.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LocalBody';
    src: url('../fonts/sukhumvit-set/SukhumvitSet-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LocalBody';
    src: url('../fonts/sukhumvit-set/SukhumvitSet-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* Custom Scrollbar for a premium feel */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #050B14;
}

::-webkit-scrollbar-thumb {
    background: #3f3f46;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3B82F6;
}

/* Date/Time picker icon invert for dark theme fix in Webkit */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.5;
    cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* =========================================
   Hero Entrance — Cinematic Staggered Fade-In
   สะกดสายตาเมื่อเปิดหน้าเว็บ
========================================= */

/* Base state: hidden */
.hero-fade {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(8px);
    animation: heroReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stagger delays — each element appears 0.3s apart */
.hero-fade-1 {
    animation-delay: 0.3s;
}

.hero-fade-2 {
    animation-delay: 0.7s;
}

.hero-fade-3 {
    animation-delay: 1.0s;
}

.hero-fade-4 {
    animation-delay: 1.3s;
}

.hero-fade-5 {
    animation-delay: 1.6s;
}

@keyframes heroReveal {
    0% {
        opacity: 0;
        transform: translateY(28px);
        filter: blur(8px);
    }

    60% {
        filter: blur(0px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0px);
    }
}

/* Underline glow grows from center */
.hero-glow-reveal {
    opacity: 0;
    transform: scaleX(0);
    animation: glowReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 1.3s;
}

@keyframes glowReveal {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }

    100% {
        opacity: 0.6;
        transform: scaleX(1);
    }
}

/* =========================================
   Thai Typography Fix
   —————————————————
   ภาษาไทยมีสระบน (ิ ี ึ ื) และวรรณยุกต์ (่ ้ ๊ ๋)
   ที่สูงกว่าตัวอักษรภาษาอังกฤษ ต้องเผื่อ line-height
   ให้มากกว่าปกติ ไม่งั้นจะซ้อนทับกับบรรทัดบน
========================================= */

/* Heading font: ห้ามต่ำกว่า 1.45 สำหรับหัวข้อใหญ่ */
h1,
h2,
h3,
h4,
h5,
h6,
[class*="font-heading"] {
    line-height: 1.45 !important;
}

/* Body font: ห้ามต่ำกว่า 1.6 สำหรับเนื้อหา */
p,
li,
span,
a,
td,
th,
[class*="font-body"] {
    line-height: 1.7 !important;
}

/* =========================================
   Thai letter-spacing Reset
   —————————————————
   letter-spacing > 0 ทำให้สระบน/วรรณยุกต์ลอยสูง
   เพราะ combining characters ถูกเลื่อนออกจากพยัญชนะ
   บังคับ reset ทุก element ด้วย universal selector
========================================= */
* {
    letter-spacing: 0 !important;
}

/* Utility classes for filter buttons */
.filter-btn.active {
    background-color: rgba(212, 175, 55, 0.1);
    color: #9bccfd;
    border-color: #9bccfd;
}

::selection {
    background-color: #9bccfd;
    color: #000;
}

/* =========================================
   Cinematic & Dynamic Customizations
========================================= */

/* Parallax Utilities */
.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    will-change: transform;
}

/* =========================================
   Typography Scale — Apple-inspired
   80px / 44px / 28px / 21px / 17px / 14px
========================================= */

:root {
    --fs-hero: clamp(44px, 8vw, 80px);
    /* 80px — Hero heading */
    --fs-h1: clamp(35px, 5vw, 44px);
    /* 44px — Section heading */
    --fs-h2: clamp(28px, 3.5vw, 28px);
    /* 28px — Sub heading */
    --fs-h3: 28px;
    /* 21px — Card heading */
    --fs-body: 22px;
    /* 17px — Body / default */
    --fs-body-sm: 19px;
    /* 14px — Small body / captions */
}

body {
    font-size: var(--fs-body);
    letter-spacing: normal;
    word-spacing: normal;
    line-height: 1.7;
}

/* Heading hierarchy */
h1 {
    font-size: var(--fs-hero);
    line-height: 1.4;
}

h2 {
    font-size: var(--fs-h1);
    line-height: 1.4;
}

h3 {
    font-size: var(--fs-h2);
    line-height: 1.4;
}

h4 {
    font-size: var(--fs-h3);
    line-height: 1.4;
}

.font-heading,
h1,
h2,
h3,
h4,
.cinematic-text {
    text-transform: uppercase;
    letter-spacing: normal;
}



/* Body paragraphs — comfortable reading (14px min) */
p,
li,
address,
blockquote,
label {
    font-size: max(var(--fs-body-sm), 0.875rem);
    letter-spacing: normal;
    word-spacing: normal;
    line-height: 1.8;
}


/* Expanded edge-to-edge image layout */
.edge-to-edge-container {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Gentle, long hover animations */
.gentle-hover {
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 1.2s ease, opacity 1.2s ease;
}

.gentle-hover:hover {
    transform: scale(1.05);
}

/* Glowing Section Borders */
.section-glow {
    position: relative;
}

.section-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
    z-index: 10;
}

.section-glow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.15);
    z-index: 10;
}

/* =========================================
   Magazine Cover Cards
========================================= */
.magazine-card {
    perspective: 1000px;
}

.magazine-card .social-icon-anim {
    animation: none;
}

.magazine-card:hover .social-icon-anim {
    animation: iconPulse 1.5s ease-in-out infinite;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

/* =========================================
   Client Reviews Infinite Ticker
========================================= */
.reviews-carousel {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

.reviews-track {
    display: flex;
    animation: reviewsScroll 30s linear infinite;
    width: max-content;
}

.reviews-track:hover {
    animation-play-state: paused;
}

@keyframes reviewsScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* =========================================
   Mobile Optimizations
========================================= */

/* Disable parallax on mobile (iOS/touch devices don't support it well) */
@media (max-width: 767px) {
    .parallax-bg {
        background-attachment: scroll !important;
    }

    /* Disable heavy hover effects on touch */
    .gentle-hover:hover {
        transform: none;
    }
}

/* Brighter tones on mobile for sunlight visibility */
@media (max-width: 767px) {

    /* ⚠️ NEVER put filter on body — it breaks position:fixed for ALL children!
       Apply to #main-content instead. */
    #main-content {
        filter: brightness(1.08) contrast(1.03);
    }

    /* Prevent double-boosting on text that's already bright */
    .text-ceo-blue,
    [class*="text-ceo-blue"] {
        filter: brightness(1.1);
    }

    /* Make body text slightly brighter on mobile */
    .text-gray-400 {
        color: #a8a8b3 !important;
    }

    .text-gray-300 {
        color: #d4d4dc !important;
    }

    /* Ensure form inputs remain readable */
    input,
    select,
    textarea {
        font-size: 16px !important;
        /* Prevents iOS zoom on focus */
    }
}

/* Gallery items smooth filter transitions on mobile */
.gallery-item {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Review slides responsive width */
@media (max-width: 640px) {
    .review-slide {
        width: 300px !important;
    }

    .reviews-track {
        animation-duration: 20s;
        /* Faster on small screens since items are smaller */
    }
}

/* GPU-accelerated animations for smoothness */
.gallery-item img,
.magazine-card img,
.gentle-hover {
    will-change: transform;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}