:root{
    --bg:#0b0f17;
    --card:rgba(255,255,255,0.06);
    --text:#ffffff;
    --muted:rgba(255,255,255,0.65);
    --accent:#ff6b35;
    --page-bg-y:0px;
}

html{background:#070a10}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Manrope, sans-serif;
}

body{
    background:transparent;
    color:var(--text);
    overflow-x:hidden;
    scroll-behavior:smooth;
    min-height:100vh;
    position:relative;
    isolation:isolate;
}

body::before{
    content:"";
    position:fixed;
    inset:-14vh -6vw;
    z-index:-2;
    pointer-events:none;
    background:
        linear-gradient(180deg,rgba(4,7,12,.56),rgba(5,8,14,.76) 42%,rgba(5,8,14,.9)),
        url("images/hero.webp") center/cover no-repeat;
    transform:translate3d(0,var(--page-bg-y),0) scale(1.09);
    transform-origin:center top;
    will-change:transform;
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:
        radial-gradient(circle at 12% 34%,rgba(255,107,53,.14),transparent 29%),
        radial-gradient(circle at 88% 72%,rgba(255,177,91,.1),transparent 30%),
        linear-gradient(90deg,rgba(3,6,11,.36),transparent 28% 72%,rgba(3,6,11,.36));
}

/* HERO BACKGROUND */
.hero{
    height:85vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 8%;
    position:relative;
    overflow:hidden;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("images/hero.webp") center/cover no-repeat;
    filter:brightness(0.35) saturate(1.12);
    z-index:0;
    transform:scale(1.06);
    animation:heroZoom 16s ease-in-out infinite alternate;
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:
        radial-gradient(circle at 18% 28%,rgba(255,107,53,.24),transparent 28%),
        linear-gradient(180deg,rgba(5,8,14,.1) 45%,var(--bg) 100%);
    pointer-events:none;
}

.hero-content{
    position:relative;
    z-index:1;
    max-width:900px;
}

.hero h1{
    font-size:60px;
    font-weight:800;
    line-height:1.05;
    letter-spacing:-2px;
    opacity:0;
    transform:translateY(28px);
    animation:heroIn .9s .15s cubic-bezier(.2,.8,.2,1) forwards;
    font-family:"Playfair Display",serif;
}

.hero p{
    margin-top:20px;
    color:rgba(255,255,255,0.75);
    max-width:700px;
    margin-left:auto;
    margin-right:auto;
    font-size:18px;
    opacity:0;
    transform:translateY(20px);
    animation:heroIn .9s .35s cubic-bezier(.2,.8,.2,1) forwards;
}

.hero-button{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:32px;
    padding:14px 22px;
    border-radius:999px;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    background:linear-gradient(135deg,#ff6b35,#ff914d);
    box-shadow:0 12px 40px rgba(255,107,53,.28);
    opacity:0;
    transform:translateY(18px);
    animation:heroIn .9s .55s cubic-bezier(.2,.8,.2,1) forwards;
    transition:transform .25s,box-shadow .25s;
}

.hero-button:hover{transform:translateY(-3px);box-shadow:0 16px 48px rgba(255,107,53,.42)}
.hero-button span{transition:transform .25s}
.hero-button:hover span{transform:translateY(3px)}

@keyframes heroIn{to{opacity:1;transform:translateY(0)}}
@keyframes heroZoom{to{transform:scale(1.14) translate3d(1%,-1%,0)}}

/* NAV */
nav{
    position:fixed;
    top:0;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 8%;
    backdrop-filter:blur(14px);
    background:rgba(0,0,0,0.35);
    z-index:1000;
    transition:padding .3s,background .3s,border-color .3s;
    border-bottom:1px solid transparent;
}

nav.scrolled{
    padding-top:12px;
    padding-bottom:12px;
    background:rgba(8,11,18,.82);
    border-color:rgba(255,255,255,.08);
}

.logo{
    font-weight:800;
    color:var(--accent);
    letter-spacing:1px;
    display:flex;
    align-items:center;
    gap:10px;
}
.logo::before{content:"✦";font-size:18px;animation:logoPulse 3s ease-in-out infinite}
@keyframes logoPulse{50%{transform:rotate(90deg) scale(1.16);filter:drop-shadow(0 0 8px var(--accent))}}

.lang button{
    background:transparent;
    border:1px solid rgba(255,255,255,0.2);
    color:#fff;
    padding:8px 12px;
    border-radius:10px;
    cursor:pointer;
    margin-left:8px;
    transition:.25s;
}
.lang button:hover,.lang button.active{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}

/* SECTION */
.section{
    padding:90px 8%;
    position:relative;
    background:linear-gradient(180deg,rgba(7,10,16,.62),rgba(7,10,16,.35) 45%,rgba(7,10,16,.58));
    border-top:1px solid rgba(255,255,255,.055);
    border-bottom:1px solid rgba(255,255,255,.04);
}

h2{
    font-size:38px;
    margin-bottom:10px;
    font-family:"Playfair Display",serif;
}

.muted{
    color:var(--muted);
    margin-bottom:30px;
}

/* GRID */
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;
}

.catalog-toolbar{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.back-button{display:none;align-items:center;gap:8px;padding:11px 16px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(255,255,255,.06);color:#fff;font-weight:700;cursor:pointer;transition:.25s}
.back-button:hover{background:rgba(255,107,53,.16);border-color:rgba(255,107,53,.45);transform:translateX(-3px)}
.back-button.show{display:inline-flex}
.country-card{min-height:330px;position:relative;border-radius:22px;overflow:hidden;cursor:pointer;border:1px solid rgba(255,255,255,.1);opacity:0;transform:translateY(32px);transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s,border-color .3s,box-shadow .3s}
.country-card.visible{opacity:1;transform:none}
.country-card:hover{transform:translateY(-9px) scale(1.01);border-color:rgba(255,107,53,.55);box-shadow:0 25px 65px rgba(0,0,0,.42)}
.country-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .4s}
.country-card:hover img{transform:scale(1.08);filter:saturate(1.15)}
.country-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 32%,rgba(5,8,14,.94) 100%)}
.country-info{position:absolute;z-index:1;left:22px;right:22px;bottom:20px}
.country-name-art{position:absolute;z-index:2;top:16px;left:12px;right:12px;min-height:44px;padding:2px 0;display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;font:800 clamp(20px,2vw,30px)/1.08 "Playfair Display",serif;letter-spacing:.01em;text-transform:uppercase;color:transparent;background:var(--flag-fill);background-clip:text;-webkit-background-clip:text;-webkit-text-stroke:1px rgba(255,255,255,.78);filter:drop-shadow(0 4px 8px rgba(0,0,0,.9));pointer-events:none}
.country-italy{--flag-fill:linear-gradient(90deg,#009246 0 33%,#fff 33% 66%,#ce2b37 66%)}
.country-japan{--flag-fill:radial-gradient(circle,#bc002d 0 32%,#fff 34%)}
.country-mexico{--flag-fill:linear-gradient(90deg,#006847 0 33%,#fff 33% 66%,#ce1126 66%)}
.country-france{--flag-fill:linear-gradient(90deg,#002395 0 33%,#fff 33% 66%,#ed2939 66%)}
.country-india{--flag-fill:linear-gradient(#ff9933 0 33%,#fff 33% 66%,#138808 66%)}
.country-thailand{--flag-fill:linear-gradient(#a51931 0 18%,#f4f5f8 18% 32%,#2d2a4a 32% 68%,#f4f5f8 68% 82%,#a51931 82%)}
.country-china{--flag-fill:linear-gradient(135deg,#ffde00 0 20%,#de2910 35%)}
.country-greece{--flag-fill:repeating-linear-gradient(#0d5eaf 0 12%,#fff 12% 24%)}
.country-turkey{--flag-fill:radial-gradient(circle at 35% 50%,#fff 0 14%,#e30a17 15%)}
.country-georgia{--flag-fill:linear-gradient(90deg,#fff 0 42%,#ff0000 42% 58%,#fff 58%)}
.country-flag{font-size:28px;display:block;margin-bottom:8px}
.country-info h3{font:700 27px "Playfair Display",serif;margin-bottom:5px}
.country-info p{color:rgba(255,255,255,.68);font-size:14px}
.view-enter{animation:viewEnter .55s cubic-bezier(.2,.8,.2,1)}
@keyframes viewEnter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.country-context{color:var(--accent);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}

.card{
    border-radius:18px;
    overflow:hidden;
    background:var(--card);
    border:1px solid rgba(255,255,255,0.08);
    position:relative;
    transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s;
    opacity:0;
    transform:translateY(36px) scale(.98);
    cursor:pointer;
}

.card.visible{
    opacity:1;
    transform:translateY(0) scale(1);
    transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s;
}

.card.visible:hover{
    transform:translateY(-10px) scale(1.015);
    border-color:rgba(255,107,53,.45);
    box-shadow:0 24px 60px rgba(0,0,0,.35);
}

.card.expanded{
    grid-column:1/-1;
    cursor:default;
    transform:none!important;
    border-color:rgba(255,107,53,.5);
    box-shadow:0 28px 80px rgba(0,0,0,.4);
}

.card.expanded img{height:260px}
.card.expanded:hover img{transform:none}

.card::after{
    content:"";
    position:absolute;
    inset:0;
    opacity:0;
    pointer-events:none;
    background:radial-gradient(240px circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.16),transparent 42%);
    transition:opacity .25s;
}
.card:hover::after{opacity:1}

.card img{
    width:100%;
    height:160px;
    object-fit:cover;
    transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .4s;
}
.card:hover img{transform:scale(1.08);filter:saturate(1.18)}

.card .content{
    padding:14px;
}

.card h3{
    font:700 20px/1.25 "Playfair Display",serif;
}

.card-summary{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.dish-card-description{margin-top:11px;color:rgba(255,255,255,.66);font-size:14px;line-height:1.55;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.card.expanded .dish-card-description{display:block;max-width:980px;color:rgba(255,255,255,.76)}
.open-hint{flex:none;color:var(--accent);font-size:13px;font-weight:700}
.open-hint::after{content:"＋";display:inline-block;margin-left:7px;transition:transform .35s}
.card.expanded .open-hint::after{transform:rotate(45deg)}

.recipe-panel{
    display:grid;
    grid-template-rows:0fr;
    opacity:0;
    transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1),opacity .35s;
}
.recipe-panel-inner{overflow:hidden}
.card.expanded .recipe-panel{grid-template-rows:1fr;opacity:1}
.recipe-content{padding:20px 4px 8px;border-top:1px solid rgba(255,255,255,.1);margin-top:16px}
.dish-history{position:relative;margin-bottom:22px;padding:19px 20px 19px 23px;border:1px solid rgba(255,177,126,.18);border-radius:16px;background:linear-gradient(135deg,rgba(255,107,53,.11),rgba(255,255,255,.035));overflow:hidden}
.dish-history::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(var(--accent),#ffc07b)}
.dish-history h4{font:700 20px "Playfair Display",serif;color:#ffc2a8;margin-bottom:8px}
.dish-history p{color:rgba(255,255,255,.74);font-size:14px;line-height:1.7}
.recipe-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.recipe-meta span{padding:8px 12px;border-radius:999px;background:rgba(255,107,53,.12);color:#ffd2c2;font-size:13px}
.beginner-prep{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 24px}
.beginner-prep>div{position:relative;padding:17px 18px;border:1px solid rgba(255,177,126,.16);border-radius:15px;background:linear-gradient(135deg,rgba(255,107,53,.08),rgba(255,255,255,.035));overflow:hidden}
.beginner-prep>div::after{content:"";position:absolute;width:90px;height:90px;right:-42px;bottom:-52px;border-radius:50%;background:radial-gradient(circle,rgba(255,177,126,.16),transparent 68%)}
.beginner-prep h4{font:700 18px "Playfair Display",serif;color:#ffc2a8;margin-bottom:10px}
.beginner-prep p{max-width:620px;color:rgba(255,255,255,.69);font-size:14px;line-height:1.7}
.tool-list{display:flex;flex-wrap:wrap;gap:8px;padding:0!important;list-style:none}
.tool-list li{margin:0!important;padding:7px 10px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.055);color:#f4d8cb;font-size:13px;line-height:1.35}
.tool-list li::before{content:"✓";margin-right:6px;color:var(--accent);font-weight:800}
.recipe-columns{display:grid;grid-template-columns:minmax(220px,.55fr) 1.45fr;gap:34px}
.recipe-columns h4{font:700 22px "Playfair Display",serif;margin-bottom:12px;color:#ffb08f}
.recipe-columns ul,.recipe-columns ol{padding-left:20px;color:var(--muted);line-height:1.75}
.recipe-columns li+li{margin-top:6px}
.detailed-steps{list-style:none!important;padding:0!important;display:grid;gap:11px;counter-reset:none}
.detailed-steps li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:start;margin:0!important;padding:14px 16px;border:1px solid rgba(255,255,255,.075);border-radius:14px;background:linear-gradient(110deg,rgba(255,255,255,.045),rgba(255,107,53,.035));animation:stepReveal .48s cubic-bezier(.2,.8,.2,1) both}
.detailed-steps li:nth-child(2){animation-delay:.04s}.detailed-steps li:nth-child(3){animation-delay:.08s}.detailed-steps li:nth-child(4){animation-delay:.12s}.detailed-steps li:nth-child(5){animation-delay:.16s}.detailed-steps li:nth-child(6){animation-delay:.2s}.detailed-steps li:nth-child(7){animation-delay:.24s}.detailed-steps li:nth-child(8){animation-delay:.28s}.detailed-steps li:nth-child(9){animation-delay:.32s}
.step-badge{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--accent),#ff9c5e);box-shadow:0 7px 18px rgba(255,107,53,.24);color:white;font-weight:800;font-variant-numeric:tabular-nums}
.detailed-steps p{color:rgba(255,255,255,.73);font-size:14px;line-height:1.72}
@keyframes stepReveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.recipe-note{margin-top:20px;padding:14px 16px;border-left:3px solid var(--accent);background:rgba(255,255,255,.04);color:#f1d6ca;border-radius:0 10px 10px 0}
.recipe-feedback{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.09);display:flex;align-items:center;justify-content:space-between;gap:16px}
.feedback-label{color:rgba(255,255,255,.62);font-size:13px;font-weight:600}
.feedback-actions{display:flex;align-items:center;gap:9px}
.vote-button{min-width:68px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 13px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.055);color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:transform .2s,background .2s,border-color .2s,box-shadow .2s}
.vote-button:hover{transform:translateY(-2px);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.24)}
.vote-button.active.like{background:rgba(73,191,118,.16);border-color:rgba(73,191,118,.5);box-shadow:0 8px 24px rgba(73,191,118,.1)}
.vote-button.active.dislike{background:rgba(255,107,83,.15);border-color:rgba(255,107,83,.48);box-shadow:0 8px 24px rgba(255,107,83,.1)}

/* CTA */
.cta{
    margin:90px 8%;
    padding:70px;
    text-align:center;
    border-radius:25px;
    background:linear-gradient(45deg,#ff6b35,#ff8c42);
    position:relative;
    overflow:hidden;
    isolation:isolate;
    box-shadow:0 25px 70px rgba(255,107,53,.2);
}
.cta::before{
    content:"";
    position:absolute;
    width:240px;
    height:220%;
    top:-60%;
    left:-280px;
    z-index:-1;
    transform:rotate(22deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
    animation:ctaShine 5s ease-in-out infinite;
}
@keyframes ctaShine{45%,100%{left:calc(100% + 280px)}}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1)}
.reveal.visible{opacity:1;transform:none}

footer{
    text-align:center;
    padding:40px;
    color:var(--muted);
    background:linear-gradient(180deg,rgba(6,9,15,.2),rgba(6,9,15,.72));
}
.site-visits{width:max-content;max-width:100%;margin:13px auto 0;display:flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.045);font-size:13px;color:rgba(255,255,255,.58)}
.site-visits strong{color:#ffb08f;font-variant-numeric:tabular-nums}

@media(max-width:900px){
.hero h1{font-size:36px;}
.hero{height:78vh;min-height:580px}
.section{padding:70px 6%}
.cta{margin:70px 6%;padding:52px 24px}
nav{padding-left:6%;padding-right:6%}
.recipe-columns{grid-template-columns:1fr;gap:22px}
.beginner-prep{grid-template-columns:1fr}
.card.expanded img{height:210px}
.recipe-feedback{align-items:flex-start;flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
    .hero h1,.hero p,.hero-button,.card,.reveal{opacity:1;transform:none}
    body::before{transform:scale(1.09)}
}
/* Производительность, навигация с клавиатуры и мобильные устройства */
#dishes{scroll-margin-top:70px}
.country-card img,.card img{display:block}
.country-card:focus-visible,.card:focus-visible,.back-button:focus-visible,.lang button:focus-visible,.vote-button:focus-visible,.hero-button:focus-visible{outline:3px solid #ffbd98;outline-offset:3px}
.catalog-error{padding:16px 18px;border:1px solid rgba(255,107,53,.55);border-radius:15px;background:rgba(255,107,53,.11);color:#ffe0d4}
.catalog-error button{margin-top:10px;display:inline-block;background:var(--accent);border:0;color:white;padding:9px 16px;border-radius:9px;cursor:pointer;font-weight:700}
@media(max-width:900px){
 body::before{transform:scale(1.09);will-change:auto}
 .hero::before{animation:none;transform:none}
 .card:hover,.card.visible:hover,.country-card:hover{box-shadow:none}
}
@media(hover:none){
 .country-card:hover,.card.visible:hover{transform:none}
 .card:hover img,.country-card:hover img{transform:none;filter:none}
 .card:hover::after{opacity:0}
}
@media(prefers-reduced-motion:reduce){
 .country-card{opacity:1;transform:none}
 body::before{will-change:auto}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}