/* 
  Modern, Clean Design System for 整体・ヒーリング 禅ZEN 
*/
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

:root {
  --color-primary: #0a192f;
  /* Even Deeper Navy */
  --color-secondary: #020617;
  /* Near Black */
  --color-accent: #b08d57;
  /* Muted Bronze */
  --color-black: #e2e8f0;
  /* Light grey for text in dark mode */
  --color-white: #0a192f; 
  --color-bg-light: #020617;

  --spacing-sp: 40px;
  --spacing-pc: 60px;
}

body {
  font-family: 'Zen Maru Gothic', sans-serif;
  color: #e2e8f0;
  background: -webkit-linear-gradient(top, rgb(0, 0, 0) 50%, rgb(25, 19, 39) 80%, rgb(43, 32, 72));
  background: linear-gradient(to bottom, rgb(0, 0, 0) 50%, rgb(25, 19, 39) 80%, rgb(43, 32, 72));
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-size: 16px;
  overflow-x: hidden;
  user-select: none;
}

/* Tategaki (Vertical Writing) */
.tategaki {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: inline-block;
}

/* Base Spacing */
section {
  padding-top: 70px;
  padding-bottom: 70px;
}

/* Ensure FV doesn't have extra padding as it's full screen */
#fv {
  padding: 0;
}

/* Adjust first section after header if needed */
#fv~section:first-of-type {
  padding-top: 100px;
}

/* 
  Typography 
*/
h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.2;
}

.section-title-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32px;
  position: relative;
}

.section-title-en {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  margin-bottom: 5px;
  font-weight: 500;
}

.section-title-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  position: relative;
  padding-bottom: 10px;
}

.section-title-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 2px;
  background-color: var(--color-accent);
}

@media (min-width: 1024px) {
  .section-title-container {
    margin-bottom: 40px;
  }

  .section-title-text {
    font-size: 2rem;
  }
}

/* 
  Header 
*/
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 0;
  background: transparent;
  backdrop-filter: none;
  z-index: 1000;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

header.scrolled {
  padding: 14px 0;
  background: rgba(2, 6, 23, 0.85);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Ensure Swiper Slides are equal height */
.voice-swiper .swiper-slide {
  height: auto !important;
}

.voice-swiper .swiper-wrapper {
  align-items: stretch !important;
}

.swiper-pagination-bullet {
  background: var(--color-accent) !important;
  opacity: 0.3 !important;
}

.swiper-pagination-bullet-active {
  opacity: 1 !important;
}

.fv-swiper {
  width: 100%;
  height: 100vh;
  z-index: 1;
}

.fv-swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

/* Cinematic Overlay Vignette */
.fv-overlay-vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  background: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(2, 6, 23, 0.4) 70%, rgba(2, 6, 23, 0.8) 100%);
  pointer-events: none;
}

/* Hero Content Wrapper - Centered */
.fv-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.fv-content-wrapper * {
  pointer-events: auto;
}

/* SVG Wave Bottom */
.wave-bottom {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  z-index: 30;
  line-height: 0;
}

/* Scroll Down Indicator */
.fv-scroll-indicator {
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 40;
}

.scroll-line-vertical {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--color-accent) 50%, var(--color-accent) 100%);
  background-size: 100% 200%;
  animation: scrollLine 3s infinite linear;
}

.text-shadow {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

@keyframes scrollLine {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
  }

  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

.fade-up-item {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUpItem 2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s;
}

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

/* Scroll Reveal Animation */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(8px);
  transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: opacity, transform, filter;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}


/* 
  Utilities 
*/
.asymmetry-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 1024px) {
  .asymmetry-grid {
    grid-template-columns: 6fr 4fr;
  }

  .asymmetry-grid.reverse {
    grid-template-columns: 4fr 6fr;
  }
}

.broken-grid-img {
  position: relative;
  z-index: 1;
}

/* Parallax */
.parallax-bg {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding: 60px 0;
}

/* For mobile devices that don't support attachment: fixed well */
@media (max-width: 1024px) {
  .parallax-bg {
    background-attachment: scroll;
  }
}

/* Buttons */
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  padding: 15px 30px;
  display: inline-block;
  transition: opacity 0.3s;
  text-decoration: none;
  font-weight: 500;
}

.btn-primary:hover {
  opacity: 0.8;
}

/* Mobile Follow CTA */
.follow-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  z-index: 999;
}

.follow-cta a {
  flex: 1;
  text-align: center;
  padding: 15px 0;
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 14px;
}

.cta-phone {
  background: var(--color-secondary);
}

.cta-web {
  background: var(--color-primary);
}

/* Back to Top */
#back-to-top {
  position: fixed;
  right: 20px;
  bottom: 80px;
  background: var(--color-primary);
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  z-index: 998;
}

#back-to-top.show {
  opacity: 1;
  visibility: visible;
}

/* Hamburger Menu Overlay */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-primary);
  color: #fff;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

.menu-overlay nav ul {
  text-align: center;
  list-style: none;
  padding: 0;
}

.menu-overlay nav ul li {
  margin: 20px 0;
}

.menu-overlay nav ul li a {
  font-size: 1.5rem;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}

.close-menu {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 2rem;
  cursor: pointer;
}

/* Modal for Gallery - Professional Centering & Nav */
.modal {
  display: none;
  position: fixed;
  z-index: 3000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
  justify-content: center;
  align-items: center;
}

.modal.show {
  display: flex !important;
}

.modal-content-wrapper {
  position: relative;
  max-width: 85%;
  max-height: 85%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5);
}

.modal-img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  display: block;
}

.close-modal {
  position: absolute;
  top: 20px;
  right: 25px;
  color: #fff;
  font-size: 50px;
  font-weight: 300;
  cursor: pointer;
  z-index: 3010;
  transition: all 0.3s;
  line-height: 1;
}

.close-modal:hover {
  transform: rotate(90deg);
  opacity: 0.7;
}

.modal-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 3010;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.modal-nav-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.1);
}

.modal-nav-btn.prev {
  left: 40px;
}

.modal-nav-btn.next {
  right: 40px;
}

@media (max-width: 768px) {
  .modal-nav-btn {
    width: 45px;
    height: 45px;
    font-size: 18px;
  }

  .modal-nav-btn.prev {
    left: 15px;
  }

  .modal-nav-btn.next {
    right: 15px;
  }

  .close-modal {
    top: 15px;
    right: 20px;
    font-size: 40px;
  }
}

/* ==========================================================================
   Section-Specific Image Styles
   ========================================================================== */

/* 1. Arched Window Frame (Service Section) */
.arched-frame {
  aspect-ratio: 4 / 5;
  border-radius: 120px 120px 0 0;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.arched-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.arched-frame:hover img {
  transform: scale(1.05);
}

/* 2. Floating Canvas with Offset (TV Section) */
.floating-frame {
  position: relative;
  padding: 15px;
  z-index: 1;
}

@media (min-width: 1024px) {
  .floating-frame {
    aspect-ratio: 4 / 3;
  }
}

.floating-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 30px;
  bottom: 30px;
  border: 1px solid var(--color-accent);
  z-index: -1;
  transition: all 0.5s ease;
}

.floating-frame img {
  width: 100%;
  height: auto;
  box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.15);
  display: block;
}

@media (min-width: 1024px) {
  .floating-frame img {
    height: 100%;
    object-fit: cover;
  }
}

/* 3. Zen Circle (Message Section) */
.zen-circle-frame {
  border-radius: 50% 50% 45% 55% / 55% 45% 55% 45%;
  overflow: hidden;
  border: 8px solid var(--color-bg-light);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  aspect-ratio: 1/1;
  animation: organicMorph 10s ease-in-out infinite;
}

@keyframes organicMorph {

  0%,
  100% {
    border-radius: 50% 50% 45% 55% / 55% 45% 55% 45%;
  }

  50% {
    border-radius: 45% 55% 50% 50% / 45% 55% 45% 55%;
  }
}

/* 4. Editorial Frame (Menu Section) */
.editorial-frame {
  aspect-ratio: 3 / 4;
  padding: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #eee;
}

.editorial-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 5. Asymmetric Hero (About Section) */
.asymmetric-hero-frame {
  aspect-ratio: 4 / 5;
  position: relative;
  padding-bottom: 20px;
}

.asymmetric-hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 60px 10px 60px 10px;
  box-shadow: 30px 30px 80px rgba(0, 0, 0, 0.1);
}

/* 6. Cinematic Wide (Recommend Section) */
.cinematic-wide {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.cinematic-wide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Seamless Infinite Marquee Gallery
   ========================================================================== */
.gallery-marquee-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  user-select: none;
}

.gallery-marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 50s linear infinite;
  gap: 20px;
}

/* Ensure animation always runs */
.gallery-marquee-track:hover {
  animation-play-state: running !important;
}

.gallery-marquee-item {
  flex-shrink: 0;
  width: 320px;
  height: 320px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.gallery-marquee-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Faster movement on mobile or smaller images */
@media (max-width: 768px) {
  .gallery-marquee-item {
    width: 280px;
    height: 280px;
  }

  .gallery-marquee-track {
    animation-duration: 35s;
  }
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    /* Since we have two identical sets of 6 images, 
           scrolling -50% takes us to the start of the second set, 
           which looks identical to the first. */
    transform: translateX(calc(-50% - 10px));
    /* -10px accounts for half the gap */
  }
}

/* 
   Force consistent side padding on mobile (SP)
   Targeting common Tailwind classes and containers
*/
@media (max-width: 768px) {

  .px-4,
  .px-5,
  .px-6,
  .px-8,
  .px-10,
  .px-12,
  .px-14,
  .px-16,
  .px-20,
  .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .p-8 {
    padding: 2rem 10px !important;
  }

  .p-6 {
    padding: 1.5rem 10px !important;
  }

  .space-x-6> :not([hidden])~ :not([hidden]) {
    margin-left: 10px !important;
  }
}

/* 
   Expand Trust Seal dimensions for Desktop
*/
@media (min-width: 768px) {
  .md\:w-36 {
    width: 12rem !important;
  }

  .md\:h-36 {
    height: 12rem !important;
  }
}

/* 
   Point Numbers
*/
/* 
   Star Background Effect
*/
#stars, #stars2, #stars3 {
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  #stars { width: 3px !important; height: 3px !important; }
  #stars2 { width: 5px !important; height: 5px !important; }
  #stars3 { width: 8px !important; height: 8px !important; }
  
  #stars, #stars2, #stars3 {
    animation-name: animStar, twinkle !important;
    animation-duration: 150s, 3s !important;
    animation-timing-function: linear, ease-in-out !important;
    animation-iteration-count: infinite, infinite !important;
  }
}

#stars {
  width: 2px;
  height: 2px;
  animation: animStar 150s linear infinite;
  box-shadow: 779px 1331px #fff, 324px 42px #fff, 303px 586px #fff, 1312px 276px #fff, 451px 625px #fff, 521px 1931px #fff, 1087px 1871px #fff, 36px 1546px #fff, 132px 934px #fff, 1698px 901px #fff, 1418px 664px #fff, 1448px 1157px #fff, 1084px 232px #fff, 347px 1776px #fff, 1722px 243px #fff, 1629px 835px #fff, 479px 969px #fff, 1231px 960px #fff, 586px 384px #fff, 164px 527px #fff, 8px 646px #fff, 1150px 1126px #fff, 665px 1357px #fff, 1556px 1982px #fff, 1260px 1961px #fff, 1675px 1741px #fff, 1843px 1514px #fff, 718px 1628px #fff, 242px 1343px #fff, 1497px 1880px #fff, 1364px 230px #fff, 1739px 1302px #fff, 636px 959px #fff, 304px 686px #fff, 614px 751px #fff, 1935px 816px #fff, 1428px 60px #fff, 355px 335px #fff, 1594px 158px #fff, 90px 60px #fff, 1553px 162px #fff, 1239px 1825px #fff, 1945px 587px #fff, 749px 1785px #fff, 1987px 1172px #fff, 1301px 1237px #fff, 1039px 342px #fff, 1585px 1481px #fff, 995px 1048px #fff, 524px 932px #fff, 214px 413px #fff, 1701px 1300px #fff, 1037px 1613px #fff, 1871px 996px #fff, 1360px 1635px #fff, 1110px 1313px #fff, 412px 1783px #fff, 1949px 177px #fff, 903px 1854px #fff, 700px 1936px #fff, 378px 125px #fff, 308px 834px #fff, 1118px 962px #fff, 1350px 1929px #fff, 781px 1811px #fff, 561px 137px #fff, 757px 1148px #fff, 1670px 1979px #fff, 343px 739px #fff, 945px 795px #fff, 576px 1903px #fff, 1078px 1436px #fff, 1583px 450px #fff, 1366px 474px #fff, 297px 1873px #fff, 192px 162px #fff, 1624px 1633px #fff, 59px 453px #fff, 82px 1872px #fff, 1933px 498px #fff, 1966px 1974px #fff, 1975px 1688px #fff, 779px 314px #fff, 1858px 1543px #fff, 73px 1507px #fff, 1693px 975px #fff, 1683px 108px #fff, 1768px 1654px #fff, 654px 14px #fff, 494px 171px #fff, 1689px 1895px #fff, 1660px 263px #fff, 1031px 903px #fff, 1203px 1393px #fff, 1333px 1421px #fff, 1113px 41px #fff, 1206px 1645px #fff, 1325px 1635px #fff, 142px 388px #fff, 572px 215px #fff, 1535px 296px #fff, 1419px 407px #fff, 1379px 1003px #fff, 329px 469px #fff, 1791px 1652px #fff, 935px 1802px #fff, 1330px 1820px #fff, 421px 1933px #fff, 828px 365px #fff, 275px 316px #fff, 707px 960px #fff, 1605px 1554px #fff, 625px 58px #fff, 717px 1697px #fff, 1669px 246px #fff, 1925px 322px #fff, 1154px 1803px #fff, 1929px 295px #fff, 1248px 240px #fff, 1045px 1755px #fff, 166px 942px #fff, 1888px 1773px #fff, 678px 1963px #fff, 1370px 569px #fff, 1974px 1400px #fff, 1786px 460px #fff, 51px 307px #fff, 784px 1400px #fff, 730px 1258px #fff, 1712px 393px #fff, 416px 170px #fff, 1797px 1932px #fff, 572px 219px #fff, 1557px 1856px #fff;
}

#stars:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 779px 1331px #fff, 324px 42px #fff, 303px 586px #fff, 1312px 276px #fff, 451px 625px #fff, 521px 1931px #fff, 1087px 1871px #fff, 36px 1546px #fff, 132px 934px #fff;
}

#stars2 {
  width: 4px;
  height: 4px;
  animation: animStar 100s linear infinite;
  box-shadow: 1448px 320px #fff, 1775px 1663px #fff, 332px 1364px #fff, 878px 340px #fff, 569px 1832px #fff, 1422px 1684px #fff, 1946px 1907px #fff, 121px 979px #fff, 1044px 1069px #fff, 463px 381px #fff, 423px 112px #fff, 523px 1179px #fff, 779px 654px #fff, 1398px 694px #fff, 1085px 1464px #fff, 1599px 1869px #fff, 801px 1882px #fff;
}

#stars2:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 1448px 320px #fff, 1775px 1663px #fff, 332px 1364px #fff, 878px 340px #fff;
}

#stars3 {
  width: 6px;
  height: 6px;
  animation: animStar 70s linear infinite;
  box-shadow: 387px 1878px #fff, 760px 1564px #fff, 1487px 999px #fff, 948px 1828px #fff, 1977px 1001px #fff, 1284px 1963px #fff, 656px 284px #fff, 1268px 1635px #fff, 1820px 598px #fff, 642px 1900px #fff, 296px 57px #fff, 921px 1620px #fff;
}

#stars3:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 387px 1878px #fff, 760px 1564px #fff, 1487px 999px #fff;
}

@keyframes animStar {
  from { transform: translateY(0px); }
  to { transform: translateY(-2000px); }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.stars-wrapper {
  background: -webkit-linear-gradient(top, rgb(0, 0, 0) 50%, rgb(25, 19, 39) 80%, rgb(43, 32, 72));
  background: linear-gradient(to bottom, rgb(0, 0, 0) 50%, rgb(25, 19, 39) 80%, rgb(43, 32, 72));
}

.number-03 {
  position: relative;
  font-family: 'Shippori Mincho', serif;
  font-size: 52px;
  color: #fff; 
  font-weight: 700;
  line-height: 1;
  display: block;
  box-sizing: border-box;
  text-align: center; 
  margin-inline: auto;
  width: fit-content;
  z-index: 20;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4); /* Added shadow for contrast */
}

.number-03::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 36px;
  height: 36px;
  background: var(--tri-color, #d0e0e5);
  clip-path: polygon(0 0, 100% 0%, 0 100%);
  z-index: -1;
}

@media (max-width: 768px) {
  .number-03 {
    font-size: 42px;
  }
  .number-03::before {
    width: 28px;
    height: 28px;
  }
}

/* 
   Global Enhancements (Texture & Animations)
*/
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
}

@keyframes floatGentle {
  0% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

.animate-float {
  animation: floatGentle 8s ease-in-out infinite;
  display: inline-block;
}

@keyframes kenBurnsSlow {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

.slow-zoom img {
  transform-origin: center;
  animation: kenBurnsSlow 25s ease-in-out alternate infinite;
  will-change: transform;
}