/* =====================================================================
   Earthen Spaces · Old Madras — shared look
   South-Indian material textures (no photographs): Athangudi tile,
   country roof tile, laterite brick, carved teak door, kolam band.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  --maroon: #6E2C20; --maroon-deep: #4E1D14;
  --terra: #B4552E; --sage: #9AB09B; --sage-deep: #6F8A72;
  --lime: #F4EEE2; --lime-hi: #FBF7EE;
  --teak: #4A2A19; --teak-deep: #2A160C;
  --brass: #C9A04A; --brass-hi: #F2D68E; --brass-deep: #8C6A22;
  --ink: #2A1A12;
  --brass-grad: linear-gradient(160deg, #F2D68E 0%, #C9A04A 52%, #9C7A2C 100%);
  --ease: cubic-bezier(.22,.61,.36,1);

  --tex-athangudi: url('../assets/textures/athangudi.svg');
  --tex-roof: url('../assets/textures/roof-tile.svg');
  --tex-laterite: url('../assets/textures/laterite.svg');
  --tex-teak: url('../assets/textures/teak-door.svg');
  --tex-kolam: url('../assets/textures/kolam-band.svg');
}

* { box-sizing: border-box; }
html { height: 100%; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
button { font: inherit; cursor: pointer; }

/* ---------- texture utilities ---------- */
.tex-athangudi { background-image: var(--tex-athangudi); background-size: 72px 72px; }
.tex-roof      { background-image: var(--tex-roof); background-size: 30px 18px; }
.tex-laterite  { background-image: var(--tex-laterite); background-size: 54px 21px; }
.tex-teak      { background-image: var(--tex-teak); background-size: 120px 120px; }

/* lime-plaster grain for cream cards (pure CSS, no image) */
.tex-lime {
  background-color: var(--lime-hi);
  background-image:
    radial-gradient(rgba(110,44,32,.045) 1px, transparent 1.2px),
    radial-gradient(rgba(110,44,32,.03) 1px, transparent 1.2px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 5px;
}

/* roof eave: clay tiles with a white lime fascia below */
.eave { position: relative; height: 14px; background-image: var(--tex-roof); background-size: 26px 15px; }
.eave::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: #F3ECDD; box-shadow: 0 2px 4px rgba(0,0,0,.25); }

/* running kolam border */
.kolam-band { height: 14px; background: var(--tex-kolam) center / 28px 14px repeat-x; }

/* Athangudi tile strip used as card trims (like the brochure border) */
.tile-trim { height: 10px; background-image: var(--tex-athangudi); background-size: 40px 40px; background-position: 0 -15px; }

/* ---------- kolam svg animation ---------- */
@keyframes kolamDraw { to { stroke-dashoffset: 0; } }
@keyframes kolamDot { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes kolamBindu { 0% { opacity: 0; transform: scale(0) rotate(-45deg); } 70% { opacity: 1; transform: scale(1.25) rotate(0); } 100% { opacity: 1; transform: scale(1); } }
.kolam-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.kolam-dot { opacity: 0; transform-box: fill-box; transform-origin: center; animation: kolamDot .35s var(--ease) forwards; }
.kolam-bindu { opacity: 0; transform-box: fill-box; transform-origin: center; animation: kolamBindu .7s var(--ease) forwards; }
.kolam-line { }

/* ---------- pre-loader ----------
   .mp-stage is the entrance photo in its own 816×576 pixel space; script.js
   moves it with translate+scale: wide view → straight to the door → through it.
   The door leaves live inside the stage, pinned to the doorway, and swing
   INWARD (hinged at the jambs, free edges moving away from the viewer).      */
.mp { position: fixed; inset: 0; z-index: 100000; overflow: hidden; background: #050302;
  background-image: radial-gradient(60% 55% at 50% 52%, rgba(70,40,20,.28), rgba(0,0,0,0) 70%); }
.mp-stage { position: absolute; left: 0; top: 0; width: 1672px; height: 941px; transform-origin: 0 0; }
.mp-stage.walk { transition: transform 3.6s cubic-bezier(.5,.05,.25,1); }
.mp-stage.through { transition: transform 2.4s cubic-bezier(.55,0,.35,1); }
.mp-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* what lies beyond the doorway (seen only once the doors open) */
.mp-villa { position: absolute; inset: 0; overflow: hidden; clip-path: inset(50% 50% 50% 50%); will-change: clip-path; background: #2E4632; visibility: hidden; }
.mp.open .mp-villa { visibility: visible; }
/* the whole garden picture, scaled by script.js so it fits the doorway, then grows to full screen as we step through */
.mp-garden { position: absolute; inset: 0; background: url('../assets/loader/garden.jpg') center / cover no-repeat; transform-origin: 50% 50%; will-change: transform; }
/* no jump on load: the courtyard fades in once the image is decoded and placed */
.mp-stage { opacity: 0; transition: opacity .9s ease; }
.mp.ready .mp-stage { opacity: 1; }
.mp.ready .mp-stage.walk, .mp.ready .mp-stage.through { opacity: 1; }
.mp-lamp { position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,214,140,.5), rgba(255,190,110,0) 68%); mix-blend-mode: screen; animation: lampFlicker 3.2s ease-in-out infinite; }
.mp-lamp + .mp-lamp { animation-delay: -1.3s; }
@keyframes lampFlicker { 0%,100% { opacity: .7; transform: scale(1); } 40% { opacity: 1; transform: scale(1.06); } 70% { opacity: .6; transform: scale(.97); } }
.mp-doorway { position: absolute; left: 760px; top: 415px; width: 135px; height: 215px; perspective: 480px; }
.mp-leaf { position: absolute; top: 0; bottom: 0; width: 50%; background-size: 100% 100%;
  transition: transform 1.8s cubic-bezier(.6,0,.25,1), filter 1.8s ease; backface-visibility: hidden; }
.mp-leaf.l { left: 0; width: 50.4%; background-image: url('../assets/loader/door-l.webp'); transform-origin: left center; }
.mp-leaf.r { right: 0; width: 49.6%; background-image: url('../assets/loader/door-r.webp'); transform-origin: right center; }
.mp.open .mp-leaf.l { transform: rotateY(94deg); filter: brightness(.45); }
.mp.open .mp-leaf.r { transform: rotateY(-94deg); filter: brightness(.45); }

.mp-center { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.mp.at-door .mp-center { opacity: 1; }
.mp-inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mp-kolam { width: clamp(84px, 17vh, 160px); height: clamp(84px, 17vh, 160px); filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.6)); }
.mp-brand { margin-top: clamp(4px, 1.4vh, 12px); opacity: 0; transform: translateY(10px); transition: opacity .9s var(--ease), transform .9s var(--ease); display: flex; flex-direction: column; align-items: center; }
.mp-brand.in { opacity: 1; transform: none; }
.mp-logo { width: clamp(150px, 30vh, 260px); height: auto; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.65)); }
.mp-by { display: flex; align-items: center; gap: 8px; margin-top: clamp(4px, 1.2vh, 10px); font: 500 10px/1 'DM Sans', sans-serif; letter-spacing: .28em; text-transform: uppercase; color: rgba(244,238,226,.9); text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.mp-by img { height: clamp(14px, 3.2vh, 20px); width: auto; }
.mp-bar { margin-top: clamp(10px, 2.4vh, 18px); height: 2px; width: 170px; background: rgba(242,214,142,.25); border-radius: 2px; overflow: hidden; }
.mp-bar > span { display: block; height: 100%; width: 0; background: var(--brass-grad); box-shadow: 0 0 12px rgba(242,214,142,.6); transition: width .5s var(--ease); }
.mp-tag { margin-top: clamp(8px, 2vh, 14px); font: italic 400 clamp(13px, 2.6vh, 17px)/1.2 'DM Serif Display', serif; color: var(--brass-hi); text-shadow: 0 1px 2px rgba(0,0,0,.75); }
.mp-skip { position: absolute; z-index: 5; right: 16px; bottom: 16px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(242,214,142,.4);
  background: rgba(30,12,6,.55); color: rgba(244,238,226,.85); font: 600 10px/1 'DM Sans', sans-serif; letter-spacing: .2em; text-transform: uppercase; opacity: 0; transition: opacity .5s; backdrop-filter: blur(6px); }
.mp-skip.in { opacity: 1; }
.mp.leaving .mp-center, .mp.leaving .mp-skip { opacity: 0; }
.mp.leaving .mp-center { transform: scale(.96); }
.mp.fade { opacity: 0; transition: opacity 1s ease; }
.mp.gone { visibility: hidden; }

/* ---------- rotate-device prompt (mobile portrait) ---------- */
.rotate-overlay { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 18px; text-align: center; padding: 24px;
  background-color: var(--maroon-deep); }
.rotate-overlay .rotate-icon-wrap { width: 64px; height: 64px; border-radius: 16px; background: rgba(201,160,74,.14); display: grid; place-items: center; animation: rotateHint 1.8s ease-in-out infinite; }
.rotate-overlay i { font-size: 30px; color: var(--brass); }
.rotate-overlay p { margin: 0; font: 600 13px 'DM Sans', sans-serif; color: rgba(244,238,226,.75); max-width: 240px; }
@keyframes rotateHint { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-90deg); } }
@media (max-width: 900px) and (orientation: portrait) { .rotate-overlay { display: flex; } }

/* ---------- index hero bits ---------- */
.hero-wash { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(130% 90% at 55% 20%, rgba(26,13,7,0) 38%, rgba(26,13,7,.55) 100%),
    linear-gradient(180deg, rgba(26,13,7,.50) 0%, rgba(26,13,7,0) 20%, rgba(26,13,7,0) 55%, rgba(26,13,7,.78) 100%); }
.hero-warm { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(70% 60% at 50% 60%, rgba(201,112,74,.25), rgba(201,112,74,0) 70%); }

body.panel-open #heroCopy { opacity: 0; }

/* sheet + drawer + toast visibility (JS toggles) */
.sheet { transform: translate(-50%, 14px); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.sheet.open { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.drawer { transform: translateX(14px); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.drawer.open { transform: none; opacity: 1; pointer-events: auto; }
.toast { opacity: 0; transition: opacity .25s; pointer-events: none; }
.toast.show { opacity: 1; }

.tool.active { background: var(--brass-grad) !important; color: #2A1A0A !important;
  box-shadow: inset 3px 3px 6px rgba(110,80,10,.45), inset -3px -3px 6px rgba(255,240,190,.45) !important; }
.tool.active i { color: #2A1A0A !important; }
.option.selected { background: linear-gradient(160deg, #7E3526, #5A2118) !important; box-shadow: inset 3px 3px 8px rgba(0,0,0,.35) !important; }
.option.selected b { color: var(--lime-hi) !important; }
.option.selected small { color: rgba(244,238,226,.75) !important; }
.option.selected i { background: var(--brass-grad) !important; color: #2A1A0A !important; }
/* villas popup heading, as in the mock-up */
#sheet.hero #sheetTitle { font-size: clamp(24px, 4.4vh, 40px); line-height: 1; margin-top: 10px; }
#sheet.hero #sheetText { color: #5c4e42; }
#sheet .villa-go .option { min-height: 0; padding-top: 10px; padding-bottom: 10px; }
#sheet .kicker::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 7px; height: 7px; margin-left: -3.5px; transform: rotate(45deg); background: var(--terra); }

/* image viewer */
.viewer { opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.viewer.open { opacity: 1; pointer-events: auto; }
#vImg { transition: opacity .3s ease; }
.vthumb.on { opacity: 1 !important; border-color: var(--brass) !important; }

/* thin custom scrollbars for panels */
.nice-scroll { scrollbar-width: thin; scrollbar-color: rgba(201,160,74,.5) transparent; }
.nice-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.nice-scroll::-webkit-scrollbar-thumb { background: rgba(201,160,74,.45); border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .kolam-line { animation-duration: 1ms !important; animation-delay: 0ms !important; }
  .kolam-dot, .kolam-bindu { animation-duration: 1ms !important; animation-delay: 0ms !important; }
  .mp-stage, .mp-leaf, .mp-center, .mp-lamp { transition-duration: 1ms !important; transition-delay: 0ms !important; animation: none !important; }
  .rotate-icon-wrap { animation: none; }
}

/* ---------- short landscape phones (≈ 360–500px tall) ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .toolrow .tool { height: 42px !important; width: 58px !important; font-size: 7px !important; gap: 2px !important; }
  .toolrow .tool i { font-size: 13px !important; }
  .toolrow { bottom: 8px !important; }
  #sheet { bottom: 66px !important; }
  #sheet > div:last-child { max-height: calc(100dvh - 128px) !important; padding: 10px 14px !important; }
  #sheet h2 { font-size: 18px !important; margin-top: 4px !important; }
  #sheet #sheetText { font-size: 10px !important; }
  #sheet .options { margin-top: 8px !important; }
  #sheet .option { min-height: 0 !important; padding: 6px 6px 7px !important; border-radius: 12px !important; }
  #sheet .option i { width: 22px !important; height: 22px !important; font-size: 9px !important; }
  #sheet .option b { margin-top: 3px !important; font-size: 8px !important; }
  #sheet .option small { font-size: 7px !important; margin-top: 1px !important; }
  #sheet .options { gap: 5px !important; margin-top: 6px !important; }
  #sheet.hero #sheetTitle { font-size: 22px !important; }
  #sheet #sheetSub { font-size: 13px !important; }
  #sheet .facts { margin-top: 6px !important; padding: 5px 0 !important; }
  #sheet .facts span { width: 20px !important; height: 20px !important; font-size: 8px !important; }
  #sheet .facts b { font-size: 14px !important; margin-top: 3px !important; }
  #sheet .sizes { padding: 4px 0 !important; margin-top: 4px !important; }
  #sheet .sizes span:first-child { width: 18px !important; height: 18px !important; font-size: 7px !important; }
  #sheet .sizes b { font-size: 12px !important; }
  #sheet .sizes small { font-size: 6px !important; }
  #sheet .villa-go .option { padding: 5px !important; }
  #sheet #sheetText { line-height: 1.35 !important; }
  .brand-plaque img { height: 18px !important; }
  .brand-plaque .plaque-sub { margin-top: 3px !important; }
  .brand-plaque .plaque-sub span { font-size: 6px !important; }
  .brand-plaque .plaque-sub img { height: 9px !important; }
  .hdr-btn { height: 30px !important; font-size: 10px !important; }
  .hdr-btn.sq { width: 30px !important; }
  #contactDrawer { top: 48px !important; max-height: calc(100dvh - 56px) !important; }
  .spim-badge { transform: scale(.82); transform-origin: left bottom; }
  .map-spim { display: none !important; }
  .cat-chip { height: 40px !important; }
  #sheet .stats { margin-top: 8px !important; }
  #sheet .stats b { font-size: 15px !important; }
}