/* ==========================================================================
   Sketch Layer — Graph Paper Aesthetic
   Background layer for public marketing pages.
   Fragments are "windows" into a continuous underlying graph paper sheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fragment Base — Every fragment is a soft-faded window into graph paper
   -------------------------------------------------------------------------- */

.graph-paper-fragment {
  position: absolute;
  z-index: 0;
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
  background-image: url('/static/svg/graph-paper-tile.svg');
  background-size: 200px 200px;
  background-repeat: repeat;
  /* Aggressive radial fade — edges dissolve to transparent */
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 70%);
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 70%);
}

/* Sketch-bg container — establishes positioning context.
   overflow: visible so fragments can peek beyond their section. */
.sketch-bg {
  position: relative;
  overflow: visible;
}

/* Content stays above fragments */
.sketch-bg > *:not(.graph-paper-fragment) {
  position: relative;
  z-index: 1;
}

/* Dark section exclusion */
.dark-section .graph-paper-fragment,
.bg-dark .graph-paper-fragment {
  display: none;
}

/* --------------------------------------------------------------------------
   Sketch Dividers — Hand-drawn line variations (unchanged)
   -------------------------------------------------------------------------- */

.sketch-divider {
  border: none;
  height: 24px;
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60% auto;
  margin: 2rem 0;
}

/* Variation 1: Simple wobbly line */
.sketch-divider-1 {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 0,10 C 100,8 200,12 300,9 C 400,11 500,8 600,10' stroke='%232d4a3e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Variation 2: Double line */
.sketch-divider-2 {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 0,7 C 150,5 300,9 450,6 C 525,8 600,7 600,7' stroke='%232d4a3e' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3Cpath d='M 0,13 C 150,15 300,11 450,14 C 525,12 600,13 600,13' stroke='%232d4a3e' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Variation 3: Line with center curl */
.sketch-divider-3 {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 0,10 C 100,8 200,12 270,10 C 280,6 290,14 300,10 C 310,6 320,14 330,10 C 400,8 500,12 600,10' stroke='%232d4a3e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Page-Specific Fragment Positioning
   Large fragments that extend past viewport edges.
   Fewer per section, overlapping for continuous-texture feel.
   -------------------------------------------------------------------------- */

/* --- Homepage (landing.html) --- */
.sketch-landing-hero .frag-1 {
  width: 700px; height: 500px;
  top: -80px; right: -120px;
}
.sketch-landing-hero .frag-2 {
  width: 600px; height: 450px;
  bottom: -60px; left: -150px;
}
.sketch-landing-market .frag-1 {
  width: 650px; height: 400px;
  top: -60px; right: -100px;
}
.sketch-landing-market .frag-2 {
  width: 550px; height: 400px;
  bottom: -80px; left: -120px;
}

/* --- How It Works --- */
.sketch-hiw-section .frag-1 {
  width: 600px; height: 450px;
  top: -40px; right: -100px;
}
.sketch-hiw-comparison .frag-1 {
  width: 550px; height: 400px;
  bottom: -60px; left: -120px;
}

/* --- Learn Index --- */
.sketch-learn-header .frag-1 {
  width: 600px; height: 400px;
  top: -60px; right: -100px;
}
/* Alternating left/right fragments in category grid */
.sketch-learn-grid .frag-right {
  width: 550px; height: 400px;
  top: 20px; right: -120px;
}
.sketch-learn-grid .frag-left {
  width: 550px; height: 400px;
  top: 20px; left: -120px;
}

/* --- Learn Article --- */
.sketch-article-gutter .frag-1 {
  width: 500px; height: 600px;
  top: 0; right: -180px;
  display: none; /* Hidden by default; shown at wide viewports */
}
.sketch-article-gutter .frag-2 {
  width: 500px; height: 500px;
  top: 50%; left: -180px;
  display: none;
}
.sketch-article-related .frag-1 {
  width: 500px; height: 350px;
  top: -40px; right: -100px;
}

/* Gutter fragments only visible on wide viewports (1100px+) */
@media (min-width: 1100px) {
  .sketch-article-gutter .frag-1,
  .sketch-article-gutter .frag-2 {
    display: block;
  }
}

/* --- Covered Calls --- */
.sketch-cc-body .frag-1 {
  width: 550px; height: 500px;
  top: 150px; left: -140px;
}
.sketch-cc-body .frag-2 {
  width: 500px; height: 450px;
  top: 55%; right: -120px;
}

/* --- Analyze --- */
.sketch-analyze .frag-1 {
  width: 500px; height: 400px;
  top: -40px; right: -140px;
}

/* --- Legal Pages (Privacy, Terms) --- */
.sketch-legal-header .frag-1 {
  width: 500px; height: 350px;
  top: -40px; right: -140px;
}

/* --------------------------------------------------------------------------
   Mobile: Hide ALL sketch elements below 768px
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .graph-paper-fragment,
  .sketch-divider {
    display: none !important;
  }
}