html { scroll-behavior: smooth; }
  body { -webkit-font-smoothing: antialiased; }

  .reveal { opacity: 0; transform: translateY(26px);
    transition: opacity .95s cubic-bezier(.22,1,.36,1), transform .95s cubic-bezier(.22,1,.36,1); }
  .reveal.in { opacity: 1; transform: none; }

  .grain::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); }

  .btn-book { background: linear-gradient(115deg, #C9A96E 0%, #8B6F47 52%, #6F7A48 100%);
    background-size: 200% 100%; background-position: 0% 0;
    transition: background-position .65s ease, transform .3s ease, box-shadow .35s ease; }
  .btn-book:hover, .btn-book:focus-visible { background-position: 100% 0;
    transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(90,70,40,.55); }
  .btn-book:active { transform: translateY(0); }

  .sway { animation: sway 8s ease-in-out infinite; transform-origin: bottom center; }
  .sway-slow { animation: sway 11s ease-in-out infinite reverse; transform-origin: top center; }
  @keyframes sway { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(1.1deg); } }

  .scroll-line { position:relative; width:1px; height:56px; background:rgba(60,52,44,.25); overflow:hidden; }
  .scroll-line::after { content:""; position:absolute; left:0; top:-30%; width:100%; height:30%;
    background:#74593A; animation: drip 2.4s cubic-bezier(.65,0,.35,1) infinite; }
  @keyframes drip { 0% { top:-30%; } 100% { top:110%; } }

  /* ---------- Ленты услуг в hero ---------- */
  .tape { overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
  .tape-track { display: flex; width: max-content; will-change: transform; }
  .tape-set { display: flex; align-items: center; white-space: nowrap; }
  .tape-set .dot { margin: 0 1.1rem; }
  .tape.is-static { overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: none; mask-image: none; }
  .tape.is-static::-webkit-scrollbar { display: none; }
  .tape.is-static .tape-track { transform: none !important; }

  .no-bar { scrollbar-width: none; }
  .no-bar::-webkit-scrollbar { display: none; }
  #revRow { cursor: grab; }
  #revRow.dragging { cursor: grabbing; user-select: none; }

  a:focus-visible, button:focus-visible { outline: 2px solid #C9A96E; outline-offset: 3px; }

  /* Панель плавающих кнопок.
     На телефонах с системной полосой внизу (iPhone и подобные) приподнимаем
     панель на её высоту: иначе кнопки попадают в зону жеста «домой», и по ним
     неудобно попадать. На остальных устройствах env() равно нулю, и остаётся
     обычный отступ из классов bottom-4 / sm:bottom-7. */
  #floatBar { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  @media (min-width: 640px) {
    #floatBar { bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px)); }
  }

  .waves circle { transform-box: fill-box; transform-origin: center;
    animation: ripple 4.8s ease-out infinite; }
  .waves circle:nth-child(2) { animation-delay: 1.6s; }
  .waves circle:nth-child(3) { animation-delay: 3.2s; }
  @keyframes ripple { 0% { transform: scale(.28); opacity: 0; } 14% { opacity:.55; }
    100% { transform: scale(1.25); opacity: 0; } }
  .bowl-btn .bowl-svg { transition: transform .4s ease; }
  .bowl-btn:hover .bowl-svg { transform: translateY(-3px); }
  .bowl-btn.ringing .waves circle { animation-duration: 1.5s; stroke: #C9A96E; }
  .bowl-btn.ringing .bowl-svg { animation: bowlSwing 1.8s ease-in-out; }
  @keyframes bowlSwing { 0%{transform:rotate(0)} 25%{transform:rotate(-1.4deg)}
    55%{transform:rotate(1deg)} 100%{transform:rotate(0)} }

  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity:1; transform:none; transition:none; }
    .sway, .sway-slow, .scroll-line::after, .waves circle { animation: none; }
  }

/* Перенесено из атрибутов style в разметке.
   Строгая политика безопасности (CSP) запрещает встроенные стили: их нельзя
   отличить от внедрённых чужим кодом. Значения такие же, как были в атрибутах. */
.hero-vignette { box-shadow: inset 0 0 180px 60px rgba(116,89,58,.18); }
.glow-olive { background: radial-gradient(circle, rgba(138,150,99,.10) 0%, rgba(138,150,99,0) 70%); }
.glow-gold  { background: radial-gradient(circle, rgba(201,169,110,.09) 0%, rgba(201,169,110,0) 70%); }
.is-hidden  { opacity: 0; visibility: hidden; }